/*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Utility # Cards # Common # Form # Navigations # Animations # Mobile Nav # Search Popup # Page Header # Google Map # Client Carousel --------------------------------------------------------------*/ /*-------------------------------------------------------------- # Common --------------------------------------------------------------*/ :root { --treck-font: 'Plus Jakarta Sans', sans-serif; --treck-gray: #727272; --treck-gray-rgb: 114, 114, 114; --treck-white: #ffffff; --treck-white-rgb: 255, 255, 255; --treck-base: #e20935; --treck-base-rgb: 226, 9, 53; --treck-black: #16171a; --treck-black-rgb: 22, 23, 26; --treck-primary: #f2edeb; --treck-primary-rgb: 242, 237, 235; --treck-bdr-color: #e3dbd8; --treck-bdr-color-rgb: 227, 219, 216; } .row { --bs-gutter-x: 30px; } .gutter-y-30 { --bs-gutter-y: 30px; } body { font-family: var(--treck-font); color: var(--treck-gray); font-size: 16px; line-height: 30px; font-weight: 400; } body.locked { overflow: hidden; } a { color: var(--treck-gray); } a, a:hover, a:focus, a:visited { text-decoration: none; } ::-webkit-input-placeholder { color: inherit; opacity: 1; } :-ms-input-placeholder { color: inherit; opacity: 1; } ::-ms-input-placeholder { color: inherit; opacity: 1; } ::placeholder { color: inherit; opacity: 1; } h1, h2, h3, h4, h5, h6 { font-family: var(--treck-font); color: var(--treck-black); margin: 0; } p { margin: 0; } dl, ol, ul { margin-top: 0; margin-bottom: 0; } ::-webkit-input-placeholder { color: inherit; opacity: 1; } :-ms-input-placeholder { color: inherit; opacity: 1; } ::-ms-input-placeholder { color: inherit; opacity: 1; } ::placeholder { color: inherit; opacity: 1; } .page-wrapper { position: relative; margin: 0 auto; width: 100%; min-width: 300px; overflow: hidden; } .container { padding-left: 15px; padding-right: 15px; } @media (min-width: 1200px) { .container { max-width: 1200px; } } ::-webkit-input-placeholder { color: inherit; opacity: 1; } :-ms-input-placeholder { color: inherit; opacity: 1; } ::-ms-input-placeholder { color: inherit; opacity: 1; } ::placeholder { color: inherit; opacity: 1; } .section-separator { border-color: var(--treck-border); border-width: 1px; margin-top: 0; margin-bottom: 0; } #particles-js { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background-position: 50% 50%; opacity: 0.4; z-index: -1; } /*-------------------------------------------------------------- # Custom Cursor --------------------------------------------------------------*/ .custom-cursor__cursor { width: 25px; height: 25px; border-radius: 100%; border: 1px solid var(--treck-base); -webkit-transition: all 200ms ease-out; transition: all 200ms ease-out; position: fixed; pointer-events: none; left: 0; top: 0; -webkit-transform: translate(calc(-50% + 5px), -50%); transform: translate(calc(-50% + 5px), -50%); z-index: 999991; } .custom-cursor__cursor-two { width: 10px; height: 10px; border-radius: 100%; background-color: var(--treck-base); opacity: .3; position: fixed; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); pointer-events: none; -webkit-transition: width .3s, height .3s, opacity .3s; transition: width .3s, height .3s, opacity .3s; z-index: 999991; } .custom-cursor__hover { background-color: var(--treck-base); opacity: 0.4; } .custom-cursor__innerhover { width: 25px; height: 25px; opacity: .4; } .thm-btn { position: relative; display: inline-block; vertical-align: middle; -webkit-appearance: none; appearance: none; outline: none !important; background-color: #d81921; color: var(--treck-white); font-size: 14px; font-weight: 600; padding: 9px 49px 13px; overflow: hidden; transition: all 0.5s linear; z-index: 1; } .thm-btn::before { transition-duration: 800ms; position: absolute; width: 200%; height: 200%; content: ""; top: 110%; left: 50%; background-color: #f58333; -webkit-transform: translateX(-50%); transform: translateX(-50%); border-radius: 50%; z-index: -1; } .thm-btn:hover:before { top: -40%; } .thm-btn:hover { color: var(--treck-white); } .section-title { position: relative; display: block; margin-top: -10px; margin-bottom: 50px; } .section-title__tagline-box { position: relative; display: inline-block; } .section-title__tagline { position: relative; display: inline-block; font-size: 14px; line-height: 14px; color: var(--treck-gray); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; } .section-title__border-box { position: relative; display: block; height: 2px; width: 68px; background-color: var(--treck-base); margin: 11px auto 0; } .section-title__border-box:before { content: ""; position: absolute; top: 50%; left: 50%; height: 12px; width: 12px; border-radius: 50%; transform: translateX(-50%) translateY(-50%); background-color: var(--treck-white); } .section-title__border-box:after { content: ""; position: absolute; top: 50%; left: 50%; height: 8px; width: 8px; border-radius: 50%; transform: translateX(-50%) translateY(-50%); background-color: var(--treck-white); border: 1px solid var(--treck-base); } .section-title__title { margin: 0; color: var(--treck-black); font-size: 50px; line-height: 60px; font-weight: 600; margin-top: 8px; } .bootstrap-select .btn-light:not(:disabled):not(.disabled).active, .bootstrap-select .btn-light:not(:disabled):not(.disabled):active, .bootstrap-select .show > .btn-light.dropdown-toggle { -webkit-box-shadow: none !important; box-shadow: none !important; outline: none !important; } .bootstrap-select > .dropdown-toggle { -webkit-box-shadow: none !important; box-shadow: none !important; } .bootstrap-select .dropdown-toggle:focus, .bootstrap-select > select.mobile-device:focus + .dropdown-toggle { outline: none !important; } .bootstrap-select .dropdown-menu { border: 0; padding-top: 0; padding-bottom: 0; margin-top: 0; z-index: 991; border-radius: 0; } .bootstrap-select .dropdown-menu > li + li > a { border-top: 1px solid rgba(255, 255, 255, 0.2); } .bootstrap-select .dropdown-menu > li.selected > a { background: var(--treck-base); color: #fff; } .bootstrap-select .dropdown-menu > li > a { font-size: 16px; font-weight: 500; padding: 4px 20px; color: #ffffff; background: var(--treck-black); -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .bootstrap-select .dropdown-menu > li > a:hover { background: var(--treck-black); color: var(--treck-white); cursor: pointer; } .preloader { position: fixed; background-color: #fff; background-position: center center; background-repeat: no-repeat; top: 0; left: 0; right: 0; bottom: 0; z-index: 99999; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; } .preloader__image { -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: flipInY; animation-name: flipInY; -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; background-image: url("../images/loader.png"); background-repeat: no-repeat; background-position: center center; background-size: 60px auto; width: 100%; height: 100%; } /* scroll to top */ .scroll-to-top { display: inline-block; width: 50px; height: 50px; background: var(--treck-base); position: fixed; bottom: 40px; right: 40px; z-index: 99; text-align: center; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; display: none; border-radius: 50%; } .scroll-to-top i { color: var(--treck-white); font-size: 18px; line-height: 50px; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; position: relative; display: inline-block; transform: rotate(-90deg); } .scroll-to-top:hover { background-color: var(--treck-black); } .scroll-to-top:hover i { color: #fff; } /*-------------------------------------------------------------- # Navigations One --------------------------------------------------------------*/ .main-header { position: relative; display: block; background-color: var(--treck-primary); width: 100%; transition: all 500ms ease; z-index: 999; } .main-menu { position: relative; display: block; } .main-menu__wrapper { position: relative; display: block; } .main-menu__wrapper-inner { position: relative; display: block; background-color: rgb(242, 237, 235); box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.07); z-index: 1; } .main-menu__wrapper-inner-content { position: relative; display: block; padding-left: 235px; padding-right: 235px; z-index: 1; } .main-menu__update-box { position: absolute; bottom: -50px; left: 0; right: 0; z-index: 2; padding-left: 235px; padding-right: 235px; } .main-menu__update-box-inner { position: relative; display: flex; align-items: center; justify-content: space-between; background-color: #d81921; padding-right: 40px; flex-wrap: wrap; } .main-menu__update-box-left { position: relative; display: flex; align-items: center; max-width: 795px; width: 100%; } .main-menu__update-icon-box { position: relative; display: flex; align-items: center; justify-content: center; background-color: #f68135; padding: 13.5px 40px 13.5px; } .main-menu__update-icon { position: relative; display: flex; align-items: center; } .main-menu__update-icon span { position: relative; display: inline-block; font-size: 23px; color: var(--treck-white); } .main-menu__update-icon-text { margin-left: 15px; } .main-menu__update-icon-text p { font-size: 14px; font-weight: 500; color: var(--treck-white); line-height: 14px; } .main-menu__update-carousel-box { position: relative; display: block; max-width: 615px; width: 100%; margin-left: 30px; } .main-menu__update-carousel { position: relative; display: block; } .main-menu__update-single { position: relative; display: block; } .main-menu__update-text { font-size: 14px; font-weight: 600; color: #fff; line-height: 24px; } .main-menu__update-carousel.owl-theme .owl-nav { position: absolute; top: 62%; right: 0; margin: 0; transform: translateY(-50%); } .main-menu__update-carousel.owl-theme .owl-nav .owl-next { color: var(--treck-white); font-size: 18px; margin: 0; text-align: center; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .main-menu__update-carousel.owl-theme .owl-nav .owl-prev { color: var(--treck-white); font-size: 18px; margin: 0; text-align: center; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .main-menu__update-carousel.owl-theme .owl-nav .owl-prev { margin-right: 10px; } .main-menu__update-carousel.owl-theme .owl-nav .owl-next span, .main-menu__update-carousel.owl-theme .owl-nav .owl-prev span { position: relative; display: flex; align-items: center; justify-content: center; } .main-menu__update-carousel.owl-theme .owl-nav .owl-next:hover, .main-menu__update-carousel.owl-theme .owl-nav .owl-prev:hover { color: var(--treck-black); background-color: transparent; } .main-menu__update-box-right { position: relative; display: block; } .main-menu__social-box { position: relative; display: flex; align-items: center; } .main-menu__social-title { font-size: 14px; color: #fcc9d3; font-weight: 600; line-height: 24px; } .main-menu__social { position: relative; display: flex; align-items: center; margin-left: 20px; } .main-menu__social a { position: relative; display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--treck-white); height: 26px; width: 26px; background-color: var(--treck-black); border-radius: 50%; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .main-menu__social a:hover { background-color: var(--treck-white); color: var(--treck-base); } .main-menu__social a + a { margin-left: 10px; } .main-menu__top { position: relative; display: block; z-index: 1; } .main-menu__top-inner { position: relative; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 11px 0; z-index: 1; } .main-menu__logo { position: absolute; top: 0; bottom: 0; left: 50px; display: flex; align-items: center; z-index: 5; } .main-menu__logo a { position: relative; display: flex; align-items: center; justify-content: center; } .main-menu__search-box { position: absolute; top: 0; bottom: 0; right: 50px; display: flex; align-items: center; z-index: 5; } .main-menu__search { position: relative; display: flex; align-items: center; font-size: 24px; color: var(--treck-black); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .main-menu__search:hover { color: var(--treck-base); } .main-menu__search span { font-size: 16px; color: var(--treck-gray); font-weight: 500; font-family: var(--treck-font); position: relative; display: inline-block; margin-left: 15px; } .main-menu__top-left { position: relative; display: flex; align-items: center; z-index: 1; } .main-menu__contact-list { position: relative; display: flex; align-items: center; } .main-menu__contact-list li { position: relative; display: flex; align-items: center; } .main-menu__contact-list li + li { margin-left: 20px; } .main-menu__contact-list li .icon { position: relative; display: flex; align-items: center; top: 2px; } .main-menu__contact-list li .icon i { font-size: 14px; color: var(--treck-base); } .main-menu__contact-list li .text { margin-left: 10px; } .main-menu__contact-list li .text p { font-size: 14px; font-weight: 500; color: var(--treck-gray); } .main-menu__contact-list li .text p a { color: var(--treck-gray); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .main-menu__contact-list li .text p a:hover { color: var(--treck-base); } .main-menu__top-right { position: relative; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .main-menu__top-menu { position: relative; display: flex; align-items: center; } .main-menu__top-menu li + li { margin-left: 35px; } .main-menu__top-menu li a { position: relative; display: inline-block; font-size: 14px; color: var(--treck-gray); font-weight: 500; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .main-menu__top-menu li a:hover { color: var(--treck-base); } .main-menu__top-menu li a:before { content: ""; position: absolute; top: 8px; bottom: 8px; left: -17px; width: 1px; background-color: #e3dbd8; transform: rotate(10deg); } .main-menu__top-menu li:first-child a:before { display: none; } .main-menu__bottom { display: block; } .main-menu__bottom-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; background-color: var(--treck-white); padding: 0 40px; } .main-menu__main-menu-box { display: block; } .main-menu__right { position: relative; display: flex; align-items: center; } .main-menu__call { position: relative; display: flex; align-items: center; padding: 5px 0; z-index: 5; } .main-menu__call-icon { position: relative; display: flex; align-items: center; justify-content: center; } .main-menu__call-icon img { width: auto; } .main-menu__call-content { margin-left: 10px; } .main-menu__call-sub-title { font-size: 14px; line-height: 14px; margin-bottom: 8px; } .main-menu__call-number { font-size: 16px; font-weight: 600; line-height: 20px; } .main-menu__call-number span { font-size: 14px; color: var(--treck-gray); font-weight: 400; } .main-menu__call-number a { color: var(--treck-black); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .main-menu__call-number a:hover { color: var(--treck-base); } .main-menu__btn-box { position: relative; display: block; margin-left: 40px; } .main-menu__btn { padding: 10px 49px 10px; font-size: 14px; font-weight: 500; color: var(--treck-gray); background-color: transparent; border: 1px solid var(--treck-bdr-color); } .stricky-header.main-menu { background-color: var(--treck-primary); } .stricky-header .main-menu__top { display: none; } .stricky-header .main-menu__update-box { display: none; } .main-menu .main-menu__list, .main-menu .main-menu__list > li > ul, .main-menu .main-menu__list > li > ul > li > ul, .stricky-header .main-menu__list, .stricky-header .main-menu__list > li > ul, .stricky-header .main-menu__list > li > ul > li > ul { margin: 0; padding: 0; list-style-type: none; -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: none; } @media (min-width: 1200px) { .main-menu .main-menu__list, .main-menu .main-menu__list > li > ul, .main-menu .main-menu__list > li > ul > li > ul, .stricky-header .main-menu__list, .stricky-header .main-menu__list > li > ul, .stricky-header .main-menu__list > li > ul > li > ul { display: -webkit-box; display: -ms-flexbox; display: flex; } } .main-menu .main-menu__list > li, .stricky-header .main-menu__list > li { padding-top: 30px; padding-bottom: 30px; position: relative; } .main-menu .main-menu__list > li + li, .stricky-header .main-menu__list > li + li { margin-left: 45px; } .main-menu .main-menu__list > li > a, .stricky-header .main-menu__list > li > a { font-size: 16px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: var(--treck-gray); position: relative; -webkit-transition: all 500ms ease; transition: all 500ms ease; font-weight: 500; } .main-menu .main-menu__list > li.current > a, .main-menu .main-menu__list > li:hover > a, .stricky-header .main-menu__list > li.current > a, .stricky-header .main-menu__list > li:hover > a { color: var(--treck-black); text-shadow: 0.05px 0 0 rgb(22 23 26 / 80%); } .main-menu .main-menu__list > li > ul, .main-menu .main-menu__list > li > ul > li > ul, .stricky-header .main-menu__list > li > ul, .stricky-header .main-menu__list > li > ul > li > ul { position: absolute; top: 100%; left: 0; min-width: 270px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; opacity: 0; visibility: hidden; -webkit-transform-origin: top center; transform-origin: top center; -webkit-transform: scaleY(0) translateZ(100px); transform: scaleY(0) translateZ(100px); -webkit-transition: opacity 500ms ease, visibility 500ms ease, -webkit-transform 700ms ease; transition: opacity 500ms ease, visibility 500ms ease, -webkit-transform 700ms ease; transition: opacity 500ms ease, visibility 500ms ease, transform 700ms ease; transition: opacity 500ms ease, visibility 500ms ease, transform 700ms ease, -webkit-transform 700ms ease; z-index: 99; background-color: rgb(255, 255, 255); padding: 23px 40px 23px; } .sub-menu { box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.07); } .main-menu .main-menu__list > li > ul > li > ul > li > ul, .stricky-header .main-menu__list > li > ul > li > ul > li > ul { display: none; } .main-menu .main-menu__list > li:hover > ul, .main-menu .main-menu__list > li > ul > li:hover > ul, .stricky-header .main-menu__list > li:hover > ul, .stricky-header .main-menu__list > li > ul > li:hover > ul { opacity: 1; visibility: visible; -webkit-transform: scaleY(1) translateZ(0px); transform: scaleY(1) translateZ(0px); } .main-menu .main-menu__list > li > ul > li, .main-menu .main-menu__list > li > ul > li > ul > li, .stricky-header .main-menu__list > li > ul > li, .stricky-header .main-menu__list > li > ul > li > ul > li { -webkit-box-flex: 1; -ms-flex: 1 1 100%; flex: 1 1 100%; width: 100%; position: relative; } .main-menu .main-menu__list > li > ul > li + li, .main-menu .main-menu__list > li > ul > li > ul > li + li, .stricky-header .main-menu__list > li > ul > li + li, .stricky-header .main-menu__list > li > ul > li > ul > li + li { border-top: none; } .main-menu .main-menu__list > li > ul > li > a, .main-menu .main-menu__list > li > ul > li > ul > li > a, .stricky-header .main-menu__list > li > ul > li > a, .stricky-header .main-menu__list > li > ul > li > ul > li > a { position: relative; font-size: 16px; line-height: 30px; color: var(--treck-gray); font-weight: 500; display: -webkit-box; display: -ms-flexbox; display: flex; padding: 8px 0px 8px; -webkit-transition: 500ms; transition: 500ms; background-color: var(--treck-white); letter-spacing: var(--treck-letter-spacing-two); border-bottom: 1px solid var(--treck-bdr-color); } .main-menu .main-menu__list > li > ul > li:last-child > a, .main-menu .main-menu__list > li > ul > li > ul > li:last-child > a, .stricky-header .main-menu__list > li > ul > li:last-child > a, .stricky-header .main-menu__list > li > ul > li > ul > li:last-child > a { border-bottom: 0; } .main-menu .main-menu__list > li > ul > li:hover > a, .main-menu .main-menu__list > li > ul > li > ul > li:hover > a, .stricky-header .main-menu__list > li > ul > li:hover > a, .stricky-header .main-menu__list > li > ul > li > ul > li:hover > a { background-color: var(--treck-primary); color: var(--treck-black); padding-left: 15px; } .main-menu .main-menu__list > li > ul > li > a::before, .main-menu .main-menu__list > li > ul > li > ul > li > a::before, .stricky-header .main-menu__list > li > ul > li > a::before, .stricky-header .main-menu__list > li > ul > li > ul > li > a::before { position: absolute; top: 50%; right: 20px; font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f105"; font-size: 14px; color: var(--treck-base); transform: translateY(-50%) scale(0); -webkit-transition: 500ms; transition: 500ms; } .main-menu .main-menu__list > li > ul > li:hover > a::before, .main-menu .main-menu__list > li > ul > li > ul > li:hover > a::before, .stricky-header .main-menu__list > li > ul > li:hover > a::before, .stricky-header .main-menu__list > li > ul > li > ul > li:hover > a::before { transform: translateY(-50%) scale(1); } .main-menu .main-menu__list > li > ul > li > ul, .stricky-header .main-menu__list > li > ul > li > ul { top: 0; left: 100%; } .main-menu .main-menu__list li ul li > ul.right-align, .stricky-header .main-menu__list li ul li > ul.right-align { top: 0; left: auto; right: 100%; } .main-menu-three__main-menu-box .main-menu__list > .megamenu, .main-menu-two__main-menu-box .main-menu__list > .megamenu, .main-menu__wrapper .main-menu__list > .megamenu { position: static; } .main-menu-three__main-menu-box .main-menu__list > .megamenu > ul, .main-menu-two__main-menu-box .main-menu__list > .megamenu > ul, .main-menu__wrapper .main-menu__list > .megamenu > ul { top: 100% !important; left: 0 !important; right: 0 !important; background-color: transparent; } .main-menu-three__main-menu-box .main-menu__list > .megamenu > ul > li, .main-menu-two__main-menu-box .main-menu__list > .megamenu > ul > li, .main-menu__wrapper .main-menu__list > .megamenu > ul > li { padding: 0 !important; } .stricky-header { position: fixed; z-index: 991; top: 0; left: 0; background-color: #fff; width: 100%; visibility: hidden; -webkit-transform: translateY(-120%); transform: translateY(-120%); -webkit-transition: visibility 500ms ease, -webkit-transform 500ms ease; transition: visibility 500ms ease, -webkit-transform 500ms ease; transition: transform 500ms ease, visibility 500ms ease; transition: transform 500ms ease, visibility 500ms ease, -webkit-transform 500ms ease; -webkit-box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.05); box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.05); } @media (max-width: 1199px) { .stricky-header { display: none !important; } } .stricky-header.stricky-fixed { -webkit-transform: translateY(0); transform: translateY(0); visibility: visible; } .stricky-header .main-menu__inner { -webkit-box-shadow: none; box-shadow: none; padding-right: 0; max-width: 1170px; width: 100%; margin: 0 auto; } .mobile-nav__buttons { display: -webkit-box; display: -ms-flexbox; display: flex; margin-left: auto; margin-right: 10px; } @media (min-width: 1200px) { .mobile-nav__buttons { display: none; } } .mobile-nav__buttons a { font-size: 20px; color: var(--treck-base); cursor: pointer; } .mobile-nav__buttons a + a { margin-left: 10px; } .mobile-nav__buttons a:hover { color: var(--treck-base); } .main-menu .mobile-nav__toggler { font-size: 20px; color: var(--treck-base); cursor: pointer; -webkit-transition: 500ms; transition: 500ms; } .main-menu .mobile-nav__toggler:hover { color: var(--treck-black); } @media (min-width: 1200px) { .main-menu .mobile-nav__toggler { display: none; } } /*-------------------------------------------------------------- # Mobile Nav --------------------------------------------------------------*/ .mobile-nav__wrapper { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 999; -webkit-transform: translateX(-100%); transform: translateX(-100%); -webkit-transform-origin: left center; transform-origin: left center; -webkit-transition: visibility 500ms ease 500ms, -webkit-transform 500ms ease 500ms; transition: visibility 500ms ease 500ms, -webkit-transform 500ms ease 500ms; transition: transform 500ms ease 500ms, visibility 500ms ease 500ms; transition: transform 500ms ease 500ms, visibility 500ms ease 500ms, -webkit-transform 500ms ease 500ms; visibility: hidden; } .mobile-nav__wrapper .container { padding-left: 0; padding-right: 0; } .mobile-nav__wrapper.expanded { opacity: 1; -webkit-transform: translateX(0%); transform: translateX(0%); visibility: visible; -webkit-transition: visibility 500ms ease 0ms, -webkit-transform 500ms ease 0ms; transition: visibility 500ms ease 0ms, -webkit-transform 500ms ease 0ms; transition: transform 500ms ease 0ms, visibility 500ms ease 0ms; transition: transform 500ms ease 0ms, visibility 500ms ease 0ms, -webkit-transform 500ms ease 0ms; } .mobile-nav__overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #000000; opacity: 0.5; cursor: pointer; } .mobile-nav__content { width: 300px; background-color: var(--treck-black); z-index: 10; position: relative; height: 100%; overflow-y: auto; padding-top: 30px; padding-bottom: 30px; padding-left: 15px; padding-right: 15px; opacity: 0; visibility: hidden; -webkit-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: opacity 500ms ease 0ms, visibility 500ms ease 0ms, -webkit-transform 500ms ease 0ms; transition: opacity 500ms ease 0ms, visibility 500ms ease 0ms, -webkit-transform 500ms ease 0ms; transition: opacity 500ms ease 0ms, visibility 500ms ease 0ms, transform 500ms ease 0ms; transition: opacity 500ms ease 0ms, visibility 500ms ease 0ms, transform 500ms ease 0ms, -webkit-transform 500ms ease 0ms; } .mobile-nav__wrapper.expanded .mobile-nav__content { opacity: 1; visibility: visible; -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition: opacity 500ms ease 500ms, visibility 500ms ease 500ms, -webkit-transform 500ms ease 500ms; transition: opacity 500ms ease 500ms, visibility 500ms ease 500ms, -webkit-transform 500ms ease 500ms; transition: opacity 500ms ease 500ms, visibility 500ms ease 500ms, transform 500ms ease 500ms; transition: opacity 500ms ease 500ms, visibility 500ms ease 500ms, transform 500ms ease 500ms, -webkit-transform 500ms ease 500ms; } .mobile-nav__content .logo-box { margin-bottom: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; } .mobile-nav__close { position: absolute; top: 20px; right: 15px; font-size: 18px; color: var(--treck-white); cursor: pointer; } .mobile-nav__content .main-menu__list, .mobile-nav__content .main-menu__list > li > ul, .mobile-nav__content .main-menu__list > li > ul > li > ul { margin: 0; padding: 0; list-style-type: none; } .mobile-nav__content .main-menu__list > li > ul, .mobile-nav__content .main-menu__list > li > ul > li > ul { display: none; border-top: 1px solid rgba(255, 255, 255, 0.1); margin-left: 0.5em; } .mobile-nav__content .main-menu__list > li:not(:last-child), .mobile-nav__content .main-menu__list > li > ul > li:not(:last-child), .mobile-nav__content .main-menu__list > li > ul > li > ul > li:not(:last-child) { border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .mobile-nav__content .main-menu__list > li > a > .main-menu-border { display: none !important; } .mobile-nav__content .main-menu__list > li > a, .mobile-nav__content .main-menu__list > li > ul > li > a, .mobile-nav__content .main-menu__list > li > ul > li > ul > li > a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; line-height: 30px; color: #ffffff; font-size: 14px; font-family: var(--treck-font); font-weight: 500; height: 46px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transition: 500ms; transition: 500ms; } .mobile-nav__content .main-menu__list > li > a.expanded .mobile-nav__content .main-menu__list > li > ul > li > a.expanded .mobile-nav__content .main-menu__list > li > ul > li > ul > li > a.expanded { color: var(--treck-base); } .mobile-nav__content .main-menu__list li a.expanded { color: var(--treck-base); } .mobile-nav__content .main-menu__list > li > a > button, .mobile-nav__content .main-menu__list > li > ul > li > a > button, .mobile-nav__content .main-menu__list > li > ul > li > ul > li > a > button { width: 30px; height: 30px; background-color: var(--treck-base); border: none; outline: none; color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transition: -webkit-transform 500ms ease; transition: -webkit-transform 500ms ease; transition: transform 500ms ease; transition: transform 500ms ease, -webkit-transform 500ms ease; padding: 0; } .mobile-nav__content .main-menu__list > li > a > button.expanded, .mobile-nav__content .main-menu__list > li > ul > li > a > button.expanded, .mobile-nav__content .main-menu__list > li > ul > li > ul > li > a > button.expanded { -webkit-transform: rotate(0deg); transform: rotate(0deg); background-color: #fff; color: var(--treck-base); } /* no menu after 2rd level dropdown */ .mobile-nav__content .main-menu__list > li > ul > li > ul > li > a > button, .mobile-nav__content .main-menu__list > li > ul > li > ul > li > ul { display: none !important; } .mobile-nav__content .main-menu__list li.cart-btn span { position: relative; top: auto; right: auto; -webkit-transform: translate(0, 0); transform: translate(0, 0); } .mobile-nav__content .main-menu__list li.cart-btn i { font-size: 16px; } .mobile-nav__top { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 30px; } .mobile-nav__top .main-menu__login a { color: var(--treck-text-dark); } .mobile-nav__container { border-top: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .mobile-nav__social { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .mobile-nav__social a { font-size: 16px; color: var(--treck-white); -webkit-transition: 500ms; transition: 500ms; } .mobile-nav__social a + a { margin-left: 30px; } .mobile-nav__social a:hover { color: var(--treck-base); } .mobile-nav__contact { margin-bottom: 0; margin-top: 20px; margin-bottom: 20px; } .mobile-nav__contact li { color: var(--treck-text-dark); font-size: 14px; font-weight: 500; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .mobile-nav__contact li + li { margin-top: 15px; } .mobile-nav__contact li a { color: #ffffff; -webkit-transition: 500ms; transition: 500ms; } .mobile-nav__contact li a:hover { color: var(--treck-base); } .mobile-nav__contact li > i { width: 30px; height: 30px; border-radius: 50%; background-color: var(--treck-base); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; font-size: 11px; margin-right: 10px; color: #fff; } .mobile-nav__container .main-logo, .mobile-nav__container .topbar__buttons, .mobile-nav__container .main-menu__language, .mobile-nav__container .main-menu__login { display: none; } /*-------------------------------------------------------------- # Home Showcase --------------------------------------------------------------*/ .home-showcase { margin-top: -23px; margin-bottom: -23px; } .home-showcase__inner { padding: 40px 40px 36px; background-color: rgb(255, 255, 255); box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.07); } .home-showcase .row { --bs-gutter-x: 42px; --bs-gutter-y: 20px; } .home-showcase__image { position: relative; background-color: var(--treck-base); overflow: hidden; } .home-showcase__image > img { width: 100%; -webkit-transition: 500ms ease; transition: 500ms ease; -webkit-transform: scale(1); transform: scale(1); } .home-showcase__image:hover > img { opacity: 0.75; } .home-showcase__image:hover .home-showcase__buttons { -webkit-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; visibility: visible; } .home-showcase__buttons { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-transform: scale(1, 0); transform: scale(1, 0); opacity: 0; visibility: hidden; -webkit-transform-origin: bottom center; transform-origin: bottom center; -webkit-transition: 500ms ease; transition: 500ms ease; } .home-showcase__buttons__item { padding: 10px 20px 11px; width: 150px; text-align: center; } .home-showcase__buttons__item + .home-showcase__buttons__item { margin-top: 10px; } .home-showcase__title { margin: 0; text-align: center; font-size: 16px; font-weight: 700; color: var(--treck-black); margin-top: 17px; } .mobile-nav__wrapper .home-showcase .row [class*=col-] { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } .mobile-nav__wrapper .home-showcase__inner { padding: 15px 0px; background-color: rgba(0, 0, 0, 0); } .mobile-nav__wrapper .home-showcase__title { color: var(--treck-white, #ffffff); } /*-------------------------------------------------------------- # Navigations Two --------------------------------------------------------------*/ .main-header-two { background: transparent; position: absolute; left: 0px; top: 0px; right: 0; width: 100%; transition: all 500ms ease; z-index: 999; } .stricky-header.main-menu-two { background-color: var(--treck-black); } .main-header-two__top { position: relative; display: block; background-color: var(--treck-black); } .main-header-two__top-inner { position: relative; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; padding-left: 60px; } .main-header-two__top-left { position: relative; display: block; } .main-header-two__contact-list { position: relative; display: flex; align-items: center; padding: 6px 0; } .main-header-two__contact-list li { position: relative; display: flex; align-items: center; } .main-header-two__contact-list li + li { margin-left: 20px; } .main-header-two__contact-list li .icon { position: relative; display: flex; align-items: center; top: 2px; } .main-header-two__contact-list li .icon i { font-size: 14px; color: var(--treck-base); } .main-header-two__contact-list li .text { margin-left: 10px; } .main-header-two__contact-list li .text p { font-size: 13px; font-weight: 500; color: #68696c; } .main-header-two__contact-list li .text p a { color: #68696c; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .main-header-two__contact-list li .text p a:hover { color: var(--treck-base); } .main-header-two__top-right { position: relative; display: flex; align-items: center; } .main-header-two__top-menu { position: relative; display: flex; align-items: center; padding: 5.5px 0; } .main-header-two__top-menu li + li { margin-left: 35px; } .main-header-two__top-menu li a { position: relative; display: inline-block; font-size: 13px; color: #68696c; font-weight: 500; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .main-header-two__top-menu li a:hover { color: var(--treck-white); } .main-header-two__top-menu li a:before { content: ""; position: absolute; top: 8px; bottom: 8px; left: -17px; width: 1px; background-color: #1e2129; transform: rotate(10deg); } .main-header-two__top-menu li:first-child a:before { display: none; } .main-header-two__social-box { position: relative; display: flex; align-items: center; margin-left: 60px; background-color: var(--treck-base); overflow: hidden; padding: 8px 60px 8px; z-index: 1; } .main-header-two__social-shape { position: absolute; top: 0; left: 0; bottom: 0; opacity: .20; z-index: -1; } .main-header-two__social-shape img { width: auto; } .main-header-two__social-title { font-size: 14px; color: #fcc9d3; font-weight: 500; line-height: 14px; } .main-header-two__social { position: relative; display: flex; align-items: center; margin-left: 20px; } .main-header-two__social a { position: relative; display: flex; align-items: center; justify-content: center; height: 26px; width: 26px; background-color: var(--treck-black); border-radius: 50%; font-size: 10px; color: var(--treck-white); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .main-header-two__social a + a { margin-left: 10px; } .main-header-two__social a:hover { background-color: var(--treck-white); color: var(--treck-base); } .main-menu-two__wrapper { position: relative; display: block; z-index: 1; } .main-menu-two__wrapper-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.1); padding: 0 60px 0; } .main-menu-two__left { display: flex; align-items: center; } .main-menu-two__logo { display: block; padding-right: 175px; } .main-menu-two__main-menu-box { display: block; } .main-menu-two__right { display: flex; align-items: center; } .main-menu-two__btn-box { position: relative; display: block; } .main-menu-two__btn { padding: 10px 49px 10px; font-size: 14px; font-weight: 500; background-color: transparent; border: 1px solid #28292b; } .main-menu-two__call { position: relative; display: flex; align-items: center; margin-left: 40px; margin-right: 70px; } .main-menu-two__call-icon { position: relative; display: flex; align-items: center; } .main-menu-two__call-icon img { width: auto; } .main-menu-two__call-content { margin-left: 10px; } .main-menu-two__call-sub-title { font-size: 14px; color: #68696c; line-height: 14px; margin-bottom: 8px; } .main-menu-two__call-number { font-size: 16px; font-weight: 600; line-height: 20px; color: var(--treck-white); } .main-menu-two__call-number span { font-size: 14px; color: #68696c; font-weight: 400; } .main-menu-two__call-number a { color: var(--treck-white); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .main-menu-two__call-number a:hover { color: var(--treck-base); } .main-menu-two__search-cart-box { display: flex; align-items: center; } .main-menu-two__search-box { position: relative; display: block; } .main-menu-two__search-box:before { content: ""; position: absolute; top: -13px; bottom: -13px; left: -30px; width: 1px; background-color: rgba(var(--treck-white-rgb), .10); } .main-menu-two__search { position: relative; display: flex; align-items: center; font-size: 24px; color: var(--treck-white); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .main-menu-two__search:hover { color: var(--treck-base); } .main-menu-two__cart-box { position: relative; display: block; } .main-menu-two__cart { position: relative; display: flex; align-items: center; font-size: 24px; color: var(--treck-white); margin-left: 30px; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .main-menu-two__cart:hover { color: var(--treck-base); } .main-menu-two .main-menu__list > li + li, .stricky-header.main-menu-two .main-menu__list > li + li { margin-left: 45px; } .main-menu-two .main-menu__list > li, .stricky-header.main-menu-two .main-menu__list > li { padding-top: 30px; padding-bottom: 30px; } .main-menu-two .main-menu__list > li > a, .stricky-header.main-menu-two .main-menu__list > li > a { color: var(--treck-white); } .main-menu-two .main-menu__list > li.current > a, .main-menu-two .main-menu__list > li:hover > a, .stricky-header.main-menu-two .main-menu__list > li.current > a, .stricky-header.main-menu-two .main-menu__list > li:hover > a { color: var(--treck-white); text-shadow: 0.05px 0 0 rgb(255 255 255 / 80%); } /*-------------------------------------------------------------- # Navigations Three --------------------------------------------------------------*/ .main-header-three { position: relative; display: block; z-index: 999; } .main-menu-three__wrapper { position: relative; display: block; } .main-menu-three__wrapper-inner { position: relative; display: block; padding-left: 257px; } .main-menu-three__logo { position: absolute; top: 0; bottom: 0; left: 60px; display: flex; align-items: center; z-index: 5; } .main-menu-three__top { position: relative; display: block; background-color: var(--treck-primary); } .main-menu-three__top-inner { position: relative; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; background-color: var(--treck-primary); padding: 5.5px 60px 5.5px; } .main-menu-three__top-inner:before { content: ""; position: absolute; top: 78px; left: 0; border-left: 6px solid var(--treck-bdr-color); border-top: 8px solid transparent; border-bottom: 8px solid transparent; } .main-menu-three__top-left { position: relative; display: block; } .main-menu-three__contact-list { position: relative; display: flex; align-items: center; } .main-menu-three__contact-list li { position: relative; display: flex; align-items: center; } .main-menu-three__contact-list li + li { margin-left: 20px; } .main-menu-three__contact-list li .icon { position: relative; display: flex; align-items: center; top: 2px; } .main-menu-three__contact-list li .icon i { font-size: 14px; color: var(--treck-base); } .main-menu-three__contact-list li .text { margin-left: 10px; } .main-menu-three__contact-list li .text p { font-size: 13px; font-weight: 500; color: var(--treck-gray); } .main-menu-three__contact-list li .text p a { color: var(--treck-gray); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .main-menu-three__contact-list li .text p a:hover { color: var(--treck-base); } .main-menu-three__top-right { position: relative; display: flex; align-items: center; } .main-menu-three__social { position: relative; display: flex; align-items: center; } .main-menu-three__social a { position: relative; display: flex; align-items: center; justify-content: center; height: 26px; width: 26px; background-color: var(--treck-white); color: var(--treck-black); font-size: 10px; border-radius: 50%; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .main-menu-three__social a:hover { background-color: var(--treck-base); color: var(--treck-white); } .main-menu-three__social a + a { margin-left: 10px; } .main-menu-three__top-menu { position: relative; display: flex; align-items: center; margin-left: 40px; } .main-menu-three__top-menu li + li { margin-left: 35px; } .main-menu-three__top-menu li a { position: relative; display: inline-block; font-size: 13px; color: var(--treck-gray); font-weight: 500; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .main-menu-three__top-menu li a:hover { color: var(--treck-base); } .main-menu-three__top-menu li a:before { content: ""; position: absolute; top: 8px; bottom: 8px; left: -17px; width: 1px; background-color: #e4dcd9; transform: rotate(10deg); } .main-menu-three__top-menu li:first-child a:before { display: none; } .main-menu-three__bottom { display: block; } .main-menu-three__bottom-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; padding-left: 60px; border-left: 1px solid var(--treck-bdr-color); } .main-menu-three__main-menu-box { display: block; } .main-menu-three__right { position: relative; display: flex; align-items: center; flex-wrap: wrap; } .main-menu-three__call { position: relative; display: flex; align-items: center; margin-right: 90px; } .main-menu-three__call-icon { position: relative; display: flex; align-items: center; } .main-menu-three__call-icon img { width: auto; } .main-menu-three__call-content { margin-left: 10px; } .main-menu-three__call-sub-title { font-size: 14px; color: var(--treck-gray); line-height: 14px; margin-bottom: 8px; } .main-menu-three__call-number { font-size: 16px; font-weight: 600; line-height: 20px; color: var(--treck-black); } .main-menu-three__call-number span { font-size: 14px; color: var(--treck-gray); font-weight: 400; } .main-menu-three__call-number a { color: var(--treck-black); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .main-menu-three__call-number a:hover { color: var(--treck-base); } .main-menu-three__search-cart-box { display: flex; align-items: center; margin-right: 60px; } .main-menu-three__search-box { position: relative; display: block; } .main-menu-three__search-box:before { content: ""; position: absolute; top: -12px; bottom: -12px; left: -30px; width: 1px; background-color: var(--treck-bdr-color); } .main-menu-three__search { position: relative; display: flex; align-items: center; font-size: 24px; color: var(--treck-black); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .main-menu-three__search:hover { color: var(--treck-base); } .main-menu-three__cart-box { position: relative; display: block; } .main-menu-three__cart { position: relative; display: flex; align-items: center; font-size: 24px; color: var(--treck-black); margin-left: 30px; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .main-menu-three__cart:hover { color: var(--treck-base); } .main-menu-three__btn { position: relative; display: block; z-index: 1; } .main-menu-three__btn a { position: relative; display: block; background-color: var(--treck-base); padding: 28px 60px 28px; color: var(--treck-white); font-weight: 600; font-size: 16px; overflow: hidden; -webkit-transition: all 500ms ease; transition: all 500ms ease; z-index: 1; } .main-menu-three__btn a:before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 107px; background-image: url("../images/shapes/main-menu-three-btn-shape.png"); background-repeat: no-repeat; background-position: top center; background-size: cover; opacity: .20; z-index: -1; } .main-menu-three__btn a:hover { background-color: var(--treck-black); } .main-menu-three .main-menu__list > li, .stricky-header.main-menu-three .main-menu__list > li { padding-top: 28px; padding-bottom: 28px; } .stricky-header.main-menu-three { background-color: var(--treck-white); } .stricky-header .main-menu-three__top { display: none; } /*-------------------------------------------------------------- # Search Popup --------------------------------------------------------------*/ .search-popup { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 9999; padding-left: 20px; padding-right: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transform: translateY(-110%); transform: translateY(-110%); -webkit-transition: opacity 500ms ease, -webkit-transform 500ms ease; transition: opacity 500ms ease, -webkit-transform 500ms ease; transition: transform 500ms ease, opacity 500ms ease; transition: transform 500ms ease, opacity 500ms ease, -webkit-transform 500ms ease; } .search-popup.active { -webkit-transform: translateY(0%); transform: translateY(0%); } .search-popup__overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--treck-black); opacity: 0.75; cursor: pointer; } .search-popup__content { width: 100%; max-width: 560px; } .search-popup__content form { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; position: relative; background-color: #fff; border-radius: 0; overflow: hidden; } .search-popup__content form input[type="search"], .search-popup__content form input[type="text"] { width: 100%; background-color: #fff; font-size: 16px; border: none; outline: none; height: 66px; padding-left: 30px; } .search-popup__content .thm-btn { padding: 0; width: 68px; height: 68px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; position: absolute; top: 0; right: -1px; border-radius: 0; background-color: var(--treck-base); border: 0; } .search-popup__content .thm-btn i { height: auto; width: auto; background-color: transparent; border-radius: 50%; color: var(--treck-white); font-size: 22px; line-height: inherit; text-align: center; top: 0; margin-right: 0; padding-left: 0; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .search-popup__content .thm-btn:hover:before { width: 150%; } /*-------------------------------------------------------------- # Main Slider --------------------------------------------------------------*/ .main-slider { position: relative; background-color: #121315; z-index: 10; } .main-slider .item { background-color: #121315; position: relative; padding-top: 186px; padding-bottom: 150px; z-index: 10; } .main-slider__bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; background-repeat: no-repeat; background-position: center; z-index: 1; } .main-slider__bg:before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(18, 19, 21, .50); z-index: -1; } .main-slider__content { position: relative; display: block; z-index: 10; } .main-slider__title { position: relative; font-size: 70px; color: var(--treck-white); font-weight: 600; line-height: 90px; letter-spacing: -0.04em; margin-bottom: 41px; opacity: 0; visibility: hidden; -webkit-transform: translateY(-120px); transform: translateY(-120px); -webkit-transition-delay: 1000ms; transition-delay: 1000ms; -webkit-transition: opacity 2000ms ease, -webkit-transform 2000ms ease; transition: opacity 2000ms ease, -webkit-transform 2000ms ease; transition: transform 2000ms ease, opacity 2000ms ease; transition: transform 2000ms ease, opacity 2000ms ease, -webkit-transform 2000ms ease; } .main-slider__btn-box { position: relative; display: block; opacity: 0; visibility: hidden; -webkit-transform: translateY(120px); transform: translateY(120px); -webkit-transition-delay: 1000ms; transition-delay: 1000ms; -webkit-transition: opacity 2000ms ease, -webkit-transform 2000ms ease; transition: opacity 2000ms ease, -webkit-transform 2000ms ease; transition: transform 2000ms ease, opacity 2000ms ease; transition: transform 2000ms ease, opacity 2000ms ease, -webkit-transform 2000ms ease; } .active .main-slider__title, .active .main-slider__btn-box { visibility: visible; opacity: 1; -webkit-transform: translateY(0) translateX(0); transform: translateY(0) translateX(0); } .main-slider .owl-theme .owl-nav { position: absolute; bottom: 27px; right: 0; left: 0; z-index: 100; display: flex; align-items: center; flex-direction: row; justify-content: flex-end; max-width: 1200px; width: 100%; padding: 0 15px; margin: 0 auto; height: 0; line-height: 0; } .main-slider .owl-theme .owl-nav [class*=owl-] { position: relative; top: auto; left: auto; right: auto; bottom: auto; z-index: 100; width: 55px; height: 55px; display: flex; justify-content: center; align-items: center; font-size: 18px; color: rgba(var(--treck-black-rgb), 1); background-color: rgba(var(--treck-white-rgb), .20); border: none; border-radius: 0; margin: 0; text-align: center; transition: all 500ms ease; padding: 0px 0px !important; } .main-slider .owl-theme .owl-nav [class*=owl-]:hover { color: rgba(var(--treck-black-rgb), 1); background-color: rgba(var(--treck-white-rgb), 1); } .main-slider .owl-theme .owl-nav [class*=owl-] + [class*=owl-] { margin-left: 10px; } .main-slider .owl-theme .owl-dots { display: flex; align-items: center; justify-content: flex-start; max-width: 1200px; width: 100%; position: absolute; bottom: 50px; left: 0; right: 0; padding: 0 15px; margin: 0 auto; height: 0; line-height: 0; } .main-slider .owl-theme .owl-dots .owl-dot + .owl-dot { margin-left: 10px; } .main-slider .owl-theme .owl-dots .owl-dot span { width: 10px; height: 10px; border-radius: 50%; background-color: rgba(var(--treck-white-rgb), .30); margin: 0; -webkit-transition: all 300ms ease; transition: all 300ms ease; } .main-slider .owl-theme .owl-dots .owl-dot:hover span, .main-slider .owl-theme .owl-dots .owl-dot.active span { background-color: rgba(var(--treck-white-rgb), 1); } /*-------------------------------------------------------------- # Main Slider Two --------------------------------------------------------------*/ .main-slider-two { position: relative; background-color: var(--treck-black); z-index: 10; } .main-slider-two .item { background-color: var(--treck-black); position: relative; padding-top: 292px; padding-bottom: 40px; z-index: 10; } .main-slider-two__bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; background-repeat: no-repeat; background-position: center; z-index: 1; } .main-slider-two__bg:before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(18, 19, 21, .50); z-index: 1; } .main-slider-two__shadow { position: absolute; top: 41px; left: 0; right: 0; height: 400px; background-repeat: no-repeat; background-position: center; background-size: cover; opacity: .80; z-index: 1; } .main-slider-two__content { position: relative; display: block; z-index: 15; } .main-slider-two__shape-1 { position: absolute; top: 38px; left: 421px; z-index: 5; } .main-slider-two__shape-1 img { width: auto !important; } .main-slider-two__title { position: relative; font-size: 80px; color: var(--treck-white); font-weight: 600; line-height: 90px; letter-spacing: -0.04em; opacity: 0; visibility: hidden; -webkit-transform: translateY(-120px); transform: translateY(-120px); -webkit-transition-delay: 1000ms; transition-delay: 1000ms; -webkit-transition: opacity 2000ms ease, -webkit-transform 2000ms ease; transition: opacity 2000ms ease, -webkit-transform 2000ms ease; transition: transform 2000ms ease, opacity 2000ms ease; transition: transform 2000ms ease, opacity 2000ms ease, -webkit-transform 2000ms ease; } .main-slider-two__points { position: relative; display: flex; align-items: center; margin-top: 29px; margin-bottom: 31px; opacity: 0; visibility: hidden; -webkit-transform: translateY(120px); transform: translateY(120px); -webkit-transition-delay: 1000ms; transition-delay: 1000ms; -webkit-transition: opacity 2000ms ease, -webkit-transform 2000ms ease; transition: opacity 2000ms ease, -webkit-transform 2000ms ease; transition: transform 2000ms ease, opacity 2000ms ease; transition: transform 2000ms ease, opacity 2000ms ease, -webkit-transform 2000ms ease; } .main-slider-two__points li { position: relative; display: flex; align-items: center; } .main-slider-two__points li + li { margin-left: 16px; } .main-slider-two__points li .icon { position: relative; display: flex; align-items: center; } .main-slider-two__points li .icon span { font-size: 19px; color: var(--treck-base); } .main-slider-two__points li .text { margin-left: 5px; } .main-slider-two__points li .text p { color: var(--treck-white); font-weight: 500; } .main-slider-two__btn-box { position: relative; display: block; opacity: 0; visibility: hidden; -webkit-transform: translateY(120px); transform: translateY(120px); -webkit-transition-delay: 1000ms; transition-delay: 1000ms; -webkit-transition: opacity 2000ms ease, -webkit-transform 2000ms ease; transition: opacity 2000ms ease, -webkit-transform 2000ms ease; transition: transform 2000ms ease, opacity 2000ms ease; transition: transform 2000ms ease, opacity 2000ms ease, -webkit-transform 2000ms ease; } .main-slider-two__btn:hover { color: var(--treck-base); } .main-slider-two__btn:before { background-color: var(--treck-white); } .main-slider__feature { position: relative; display: block; margin-top: 70px; z-index: 2; } .main-slider__feature:before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: var(--treck-white); mix-blend-mode: soft-light; opacity: .10; z-index: -1; } .main-slider__feature .row { --bs-gutter-x: 0px; } .main-slider__feature-single { position: relative; display: flex; padding: 37px 40px 33px; padding-right: 45px; border-right: 1px solid rgba(236, 240, 244, .10); -webkit-transition: all 500ms ease; transition: all 500ms ease; z-index: 3; } .main-slider__feature-single:hover { border-right: 1px solid transparent; } .main-slider__feature-single:before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: var(--treck-black); transition: all 900ms ease; -moz-transition: all 900ms ease; -webkit-transition: all 900ms ease; -ms-transition: all 900ms ease; -o-transition: all 900ms ease; transition: -webkit-transform 0.5s ease; transition: transform 0.5s ease; transition: transform 0.5s ease, -webkit-transform 0.5s ease; -webkit-transform: scale(1, 0); -ms-transform: scale(1, 0); transform: scale(1, 0); -webkit-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center; z-index: -1; } .main-slider__feature-single:hover:before { -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); -webkit-transform-origin: bottom center; -ms-transform-origin: bottom center; transform-origin: bottom center; } .main-slider__feature-single--3 { border-right: 1px solid transparent; } .main-slider__feature-icon { position: relative; display: flex; } .main-slider__feature-icon span { position: relative; display: inline-block; font-size: 64px; color: var(--treck-white); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .main-slider__feature-single:hover .main-slider__feature-icon span { color: var(--treck-base); } .main-slider__feature-content { margin-left: 20px; } .main-slider__feature-title { font-size: 20px; font-weight: 600; line-height: 20px; margin-bottom: 18px; } .main-slider__feature-title a { color: var(--treck-white); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .main-slider__feature-single:hover .main-slider__feature-title a { color: var(--treck-white); } .main-slider__feature-text { font-size: 14px; line-height: 30px; color: var(--treck-white); opacity: .70; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .main-slider__feature-single:hover .main-slider__feature-text { color: #68696c; } .main-slider__feature-arrow { position: absolute; bottom: 16px; right: 16px; } .main-slider__feature-arrow a { position: relative; display: flex; align-items: center; font-size: 22px; color: var(--treck-white); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .main-slider__feature-single:hover .main-slider__feature-arrow a { color: var(--treck-base); } .active .main-slider-two__title, .active .main-slider-two__points, .active .main-slider-two__btn-box { visibility: visible; opacity: 1; -webkit-transform: translateY(0) translateX(0); transform: translateY(0) translateX(0); } .main-slider-two .owl-theme .owl-nav { position: absolute; top: 46%; left: 50%; z-index: 100; transform: translateY(-50%) translateX(-50%); display: flex; align-items: flex-end; flex-direction: column; max-width: 100%; width: 100%; padding: 0 60px; margin: 0 auto; height: 0; line-height: 0; } .main-slider-two .owl-theme .owl-nav [class*=owl-] { position: relative; top: auto; left: auto; right: auto; bottom: auto; z-index: 100; width: 55px; height: 55px; display: flex; justify-content: center; align-items: center; font-size: 18px; color: rgba(var(--treck-black-rgb), 1); background-color: rgba(var(--treck-white-rgb), .20); border: none; border-radius: 0; margin: 0; text-align: center; transition: all 500ms ease; padding: 19px 0 !important; } .main-slider-two .owl-theme .owl-nav [class*=owl-]:hover { color: rgba(var(--treck-black-rgb), 1); background-color: rgba(var(--treck-white-rgb), 1); } .main-slider-two .owl-theme .owl-nav [class*=owl-] + [class*=owl-] { margin-top: 10px; } .main-slider-two .owl-theme .owl-dots { display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: column; max-width: 100%; width: 100%; position: absolute; left: 50%; top: 48%; transform: translateX(-50%) translateY(-50%); padding: 0 60px; margin: 0 auto; height: 0; line-height: 0; } .main-slider-two .owl-theme .owl-dots .owl-dot + .owl-dot { margin-top: 10px; } .main-slider-two .owl-theme .owl-dots .owl-dot span { width: 10px; height: 10px; border-radius: 50%; background-color: rgba(var(--treck-white-rgb), .30); margin: 0; -webkit-transition: all 300ms ease; transition: all 300ms ease; } .main-slider-two .owl-theme .owl-dots .owl-dot:hover span, .main-slider-two .owl-theme .owl-dots .owl-dot.active span { background-color: rgba(var(--treck-white-rgb), 1); } /*-------------------------------------------------------------- # Main Slider Three --------------------------------------------------------------*/ .main-slider-three { position: relative; background-color: #121315; z-index: 10; } .main-slider-three .item { background-color: #121315; position: relative; padding-top: 185px; padding-bottom: 195px; z-index: 10; } .main-slider-three__bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; background-repeat: no-repeat; background-position: center; z-index: 1; } .main-slider-three__bg:before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(18, 19, 21, .50); z-index: -1; } .main-slider-three__content { position: relative; display: block; text-align: center; z-index: 15; } .main-slider-three__sub-title { font-size: 16px; line-height: 30px; color: var(--treck-white); font-weight: 500; position: relative; display: inline-block; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0; visibility: hidden; -webkit-transform: translateY(-120px); transform: translateY(-120px); -webkit-transition-delay: 1000ms; transition-delay: 1000ms; -webkit-transition: opacity 2000ms ease, -webkit-transform 2000ms ease; transition: opacity 2000ms ease, -webkit-transform 2000ms ease; transition: transform 2000ms ease, opacity 2000ms ease; transition: transform 2000ms ease, opacity 2000ms ease, -webkit-transform 2000ms ease; } .main-slider-three__title { position: relative; font-size: 90px; color: var(--treck-white); font-weight: 300; line-height: 100px; letter-spacing: -0.04em; margin-top: 3px; margin-bottom: 37px; opacity: 0; visibility: hidden; -webkit-transform: translateY(-120px); transform: translateY(-120px); -webkit-transition-delay: 1000ms; transition-delay: 1000ms; -webkit-transition: opacity 2000ms ease, -webkit-transform 2000ms ease; transition: opacity 2000ms ease, -webkit-transform 2000ms ease; transition: transform 2000ms ease, opacity 2000ms ease; transition: transform 2000ms ease, opacity 2000ms ease, -webkit-transform 2000ms ease; } .main-slider-three__title span { font-weight: 800; } .main-slider-three__btn-box { position: relative; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; -webkit-transform: translateY(120px); transform: translateY(120px); -webkit-transition-delay: 1000ms; transition-delay: 1000ms; -webkit-transition: opacity 2000ms ease, -webkit-transform 2000ms ease; transition: opacity 2000ms ease, -webkit-transform 2000ms ease; transition: transform 2000ms ease, opacity 2000ms ease; transition: transform 2000ms ease, opacity 2000ms ease, -webkit-transform 2000ms ease; } .main-slider-three__btn-two { color: var(--treck-black); background-color: var(--treck-white); margin-left: 10px; } .active .main-slider-three__title, .active .main-slider-three__sub-title, .active .main-slider-three__btn-box { visibility: visible; opacity: 1; -webkit-transform: translateY(0) translateX(0); transform: translateY(0) translateX(0); } .main-slider-three .owl-theme .owl-nav { position: absolute; bottom: 28px; right: 0; left: 0; z-index: 100; display: flex; align-items: center; flex-direction: row; justify-content: flex-end; max-width: 1200px; width: 100%; padding: 0 15px; margin: 0 auto; height: 0; line-height: 0; } .main-slider-three .owl-theme .owl-nav [class*=owl-] { position: relative; top: auto; left: auto; right: auto; bottom: auto; z-index: 100; width: 55px; height: 55px; display: flex; justify-content: center; align-items: center; font-size: 18px; color: rgba(var(--treck-black-rgb), 1); background-color: rgba(var(--treck-white-rgb), .20); border: none; border-radius: 0; margin: 0; text-align: center; transition: all 500ms ease; padding: 0px 0px !important; } .main-slider-three .owl-theme .owl-nav [class*=owl-]:hover { color: rgba(var(--treck-black-rgb), 1); background-color: rgba(var(--treck-white-rgb), 1); } .main-slider-three .owl-theme .owl-nav [class*=owl-] + [class*=owl-] { margin-left: 10px; } .main-slider-three .owl-theme .owl-dots { display: flex; align-items: center; justify-content: flex-start; max-width: 1200px; width: 100%; position: absolute; bottom: 50px; left: 0; right: 0; padding: 0 15px; margin: 0 auto; height: 0; line-height: 0; } .main-slider-three .owl-theme .owl-dots .owl-dot + .owl-dot { margin-left: 10px; } .main-slider-three .owl-theme .owl-dots .owl-dot span { width: 10px; height: 10px; border-radius: 50%; background-color: rgba(var(--treck-white-rgb), .30); margin: 0; -webkit-transition: all 300ms ease; transition: all 300ms ease; } .main-slider-three .owl-theme .owl-dots .owl-dot:hover span, .main-slider-three .owl-theme .owl-dots .owl-dot.active span { background-color: rgba(var(--treck-white-rgb), 1); } /*-------------------------------------------------------------- # feature One --------------------------------------------------------------*/ .feature-one { position: relative; display: block; padding: 60px 0px; background-image: -moz-linear-gradient(90deg, rgb(244, 239, 237) 0%, rgb(255, 255, 255) 15%); background-image: -webkit-linear-gradient(90deg, rgb(244, 239, 237) 0%, rgb(255, 255, 255) 15%); background-image: -ms-linear-gradient(90deg, rgb(244, 239, 237) 0%, rgb(255, 255, 255) 15%); z-index: 1; } .feature-one .container { max-width: 1800px; } .feature-one__single { position: relative; display: block; background-color: var(--treck-primary); margin-bottom: 30px; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .feature-one__single:hover { transform: translateY(-10px); box-shadow: 0px 10px 40px 0px rgba(0, 0, 0, 0.1); } .feature-one__inner { position: relative; display: block; overflow: hidden; padding: 44px 40px 40px; z-index: 1; } .feature-one__shape-1 { position: absolute; top: -50px; left: -80px; z-index: -1; } .feature-one__shape-1 img { width: auto; } .feature-one__img-one { position: absolute; top: -62px; right: -40px; z-index: -1; } .feature-one__img-one img { width: auto; } .feature-one__img-two { top: -10px; right: -20px; } .feature-one__img-three { position: absolute; top: -134px; right: -60px; z-index: -1; } .feature-one__sub-title { font-size: 12px; font-weight: 600; line-height: 22px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--treck-gray); } .feature-one__title { font-size: 22px; font-weight: 600; line-height: 32px; } .feature-one__title a { color: #131519; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .feature-one__title a:hover { color: var(--treck-base); } .feature-one__btn-box { position: relative; display: block; margin-top: 20px; } .feature-one__btn { position: relative; display: inline-block; font-size: 14px; font-weight: 500; color: var(--treck-gray); border: 1px solid var(--treck-bdr-color); padding: 10px 35px 10px; background-color: var(--treck-white); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .feature-one__btn:hover { background-color: var(--treck-base); color: var(--treck-white); border: 1px solid var(--treck-base); } .feature-one__bottom { position: relative; display: block; text-align: center; margin-top: 32px; } .feature-one__text { font-size: 18px; } .feature-one__text a { position: relative; display: inline-block; color: var(--treck-black); font-weight: 600; } .feature-one__text a::before { content: ""; position: absolute; bottom: 2px; left: 0; right: 0; height: 2px; background-color: var(--treck-base); } /*-------------------------------------------------------------- # About One --------------------------------------------------------------*/ .about-one { position: relative; display: block; padding: 120px 0 120px; z-index: 1; } .about-one__shape-3 { position: absolute; right: 0; top: 60px; opacity: .10; z-index: -1; } .about-one__shape-3 img { width: auto; } .about-one__left { position: relative; display: block; margin-left: 130px; margin-right: 40px; } .about-one__shape-2 { position: absolute; left: -355px; top: 190px; z-index: -1; } .about-one__shape-2 img { width: auto; } .about-one__img-box { position: relative; display: block; } .about-one__img { position: relative; display: block; z-index: 1; } .about-one__img img { width: 100%; } .about-one__img-2 { position: absolute; left: -130px; bottom: -137px; z-index: -1; } .about-one__img-2 img { width: auto; } .about-one__shape-1 { position: absolute; bottom: -93px; right: 25px; z-index: -1; } .about-one__shape-1 img { width: auto; } .about-one__experience { position: absolute; bottom: -64px; left: 107px; background-color: var(--treck-white); padding: 22px 40px 23px; max-width: 239px; width: 100%; z-index: 1; } .about-one__experience::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 5px; background-color: var(--treck-base); z-index: -1; } .about-one__experience::after { content: ""; position: absolute; top: 50%; left: 5px; border-top: 10px solid transparent; border-left: 7px solid var(--treck-base); border-bottom: 10px solid transparent; z-index: -1; transform: translateY(-50%); } .about-one__experience h3 { font-size: 48px; font-weight: 600; line-height: 48px; color: var(--treck-base); } .about-one__experience p { margin-top: -2px; } .about-one__badge { position: absolute; top: 40px; left: -205px; } .about-one__badge img { width: auto; } .about-one__right { position: relative; display: block; } .about-one__right .section-title__border-box { margin-left: 0; } .about-one__right .section-title { margin-bottom: 21px; } .about-one__points { position: relative; display: block; margin-top: 23px; margin-bottom: 46px; } .about-one__points li { position: relative; display: flex; align-items: center; } .about-one__points li + li { margin-top: 18px; } .about-one__points li .icon { position: relative; display: inline-block; } .about-one__points li .icon span { position: relative; display: inline-block; font-size: 64px; color: var(--treck-base); -webkit-transition: all 500ms linear; transition: all 500ms linear; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } .about-one__points li:hover .icon span { transform: scale(.9); } .about-one__points li .content { position: relative; display: block; margin-left: 50px; padding-left: 30px; } .about-one__points li .content::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 4px; width: 2px; background-color: var(--treck-bdr-color); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .about-one__points li:hover .content::before { background-color: var(--treck-base); } .about-one__points li .content::after { content: ""; position: absolute; left: -5px; top: 50%; transform: translateY(-50%); border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-right: 5px solid var(--treck-bdr-color); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .about-one__points li:hover .content::after { border-right: 5px solid var(--treck-base); } .about-one__points li .content h3 { font-size: 20px; font-weight: 600; line-height: 30px; margin-bottom: 4px; } .about-one__points li .content p { font-size: 15px; font-weight: 500; line-height: 26px; } /*-------------------------------------------------------------- # Services One --------------------------------------------------------------*/ .services-one { position: relative; display: block; padding: 0 0 90px; } .services-one__single { position: relative; display: block; margin-bottom: 30px; z-index: 1; } .services-one__single-inner { position: relative; display: block; border: 1px solid var(--treck-bdr-color); text-align: center; padding: 14px 39px 31px; z-index: 1; } .services-one__single-inner:before { content: ""; position: absolute; top: -1px; left: -1px; width: 65px; height: 65px; background-color: var(--treck-white); border: 1px solid var(--treck-bdr-color); border-top: 0; border-left: 0; } .services-one__single-inner:after { content: ""; position: absolute; top: -1px; right: -1px; width: 65px; height: 65px; background-color: var(--treck-white); border: 1px solid var(--treck-bdr-color); border-top: 0; border-right: 0; } .services-one__icon { position: relative; display: flex; align-items: center; justify-content: center; height: 100px; width: 100px; background-color: var(--treck-base); margin: 0 auto 0; z-index: 1; } .services-one__icon span { position: relative; display: inline-block; font-size: 60px; color: var(--treck-white); } .services-one__title { font-size: 20px; font-weight: 600; line-height: 20px; margin-top: 27px; margin-bottom: 9px; } .services-one__title a { color: var(--treck-black); } .services-one__text { font-size: 15px; } .services-one__hover-content { position: absolute; top: -1px; left: -1px; right: -1px; bottom: -1px; background-position: center top; transition-delay: .1s; transition-timing-function: ease-in-out; transition-duration: .5s; transition-property: all; transform-origin: top; transform-style: preserve-3d; transform: scaleY(0); z-index: 2; } .services-one__single:hover .services-one__hover-content { transform: scaleY(1.0); } .services-one__hover-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-repeat: no-repeat; background-position: center; background-size: cover; z-index: 1; } .services-one__hover-title-box { position: absolute; bottom: 0; left: 0; right: 0; padding: 14px 30px 14px; background-color: var(--treck-base); text-align: left; overflow: hidden; z-index: 2; } .services-one__hover-shpae { position: absolute; top: 0; left: 0; opacity: .20; z-index: -1; } .services-one__hover-shpae img { width: auto; } .services-one__hover-title { font-size: 20px; font-weight: 600; line-height: 30px; } .services-one__hover-title a { color: var(--treck-white); } .services-one__arrow { position: absolute; bottom: 50px; right: 10px; z-index: 2; } .services-one__arrow a { position: relative; display: flex; align-items: center; justify-content: center; height: 50px; width: 50px; background-color: var(--treck-white); font-size: 17px; color: var(--treck-black); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .services-one__arrow a:hover { color: var(--treck-white); background-color: var(--treck-black); } /*-------------------------------------------------------------- # Video One --------------------------------------------------------------*/ .video-one { position: relative; display: block; background-color: #121315; padding-top: 120px; z-index: 2; } .video-one__bg { position: absolute; top: 0; left: 0; bottom: 0; right: 0; opacity: .50; background-repeat: no-repeat; background-size: cover; background-position: center; z-index: -1; ; } .video-one .section-title__title { font-size: 34px; line-height: 41px; } .video-one .section-title__border-box { margin-left: 0; } .video-one__left { position: relative; display: block; background-color: rgb(255, 255, 255); box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.1); padding: 60px 60px 60px; margin-bottom: -60px; } .video-one__left:before { content: ""; position: absolute; top: 10px; bottom: 10px; left: 10px; right: 10px; border: 1px dashed var(--treck-bdr-color); } .video-one__left .section-title { margin-bottom: 33px; } .video-one__points { position: relative; display: block; } .video-one__points li { position: relative; display: flex; align-items: center; background-image: -moz-linear-gradient(0deg, rgb(242, 237, 235) 0%, rgb(255, 255, 255) 100%); background-image: -webkit-linear-gradient(0deg, rgb(242, 237, 235) 0%, rgb(255, 255, 255) 100%); background-image: -ms-linear-gradient(0deg, rgb(242, 237, 235) 0%, rgb(255, 255, 255) 100%); padding: 10px 30px 13px; } .video-one__points li + li { margin-top: 10px; } .video-one__points li .icon { position: relative; display: inline-block; top: 4px; } .video-one__points li .icon span { position: relative; display: inline-block; font-size: 25px; color: var(--treck-base); } .video-one__points li .text { margin-left: 15px; } .video-one__points li .text p { font-size: 18px; font-weight: 500; line-height: 28px; } .video-one__right { position: relative; display: block; text-align: right; } .video-one__video-link { position: relative; display: inline-block; padding-right: 16px; padding-top: 16px; } .video-one__video-icon { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 85px; height: 85px; line-height: 100px; text-align: center; font-size: 21px; color: var(--treck-white); background-color: var(--treck-base); border-radius: 50%; transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; } .video-one__video-icon:hover { background-color: var(--treck-white); color: var(--treck-base); } .video-one__video-icon:before { position: absolute; top: -16px; left: -16px; right: -16px; bottom: -16px; content: ""; border-radius: 50%; border: 1px solid rgba(var(--treck-white-rgb), .10); z-index: 1; } .video-one__video-link .ripple, .video-one__video-icon .ripple:before, .video-one__video-icon .ripple:after { position: absolute; top: 50%; left: 50%; width: 117px; height: 117px; border-radius: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -ms-box-shadow: 0 0 0 0 rgba(var(--treck-white-rgb), 0.6); -o-box-shadow: 0 0 0 0 rgba(var(--treck-white-rgb), 0.6); -webkit-box-shadow: 0 0 0 0 rgba(var(--treck-white-rgb), 0.6); box-shadow: 0 0 0 0 rgba(var(--treck-white-rgb), 0.6); -webkit-animation: ripple 3s infinite; animation: ripple 3s infinite; } .video-one__video-icon .ripple:before { -webkit-animation-delay: 0.9s; animation-delay: 0.9s; content: ""; position: absolute; } .video-one__video-icon .ripple:after { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; content: ""; position: absolute; } .video-one__shape-1 { position: absolute; top: 55px; left: -140px; } .video-one__shape-1 img { width: auto; } .video-one__text { font-size: 20px; font-weight: 600; line-height: 36px; color: var(--treck-white); margin-top: 45px; } /*-------------------------------------------------------------- # Counter One --------------------------------------------------------------*/ .counter-one { position: relative; display: block; background-color: var(--treck-base); padding: 160px 0 70px; z-index: 1; } .counter-one__bg { position: absolute; bottom: 0; left: 0; right: 0; height: 297px; opacity: .10; mix-blend-mode: multiply; background-repeat: no-repeat; background-position: center; background-size: cover; z-index: -1; } .counter-one__single { position: relative; display: flex; align-items: center; padding: 30px 0 30px; margin-bottom: 30px; border-right: 1px solid #fffefe; z-index: 1; } .counter-one__single:before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background-image: -moz-linear-gradient(180deg, rgb(255, 254, 254) 0%, rgb(226, 9, 53) 100%); background-image: -webkit-linear-gradient(180deg, rgb(255, 254, 254) 0%, rgb(226, 9, 53) 100%); background-image: -ms-linear-gradient(180deg, rgb(255, 254, 254) 0%, rgb(226, 9, 53) 100%); } .counter-one__single:after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background-image: -moz-linear-gradient(180deg, rgb(255, 254, 254) 0%, rgb(226, 9, 53) 100%); background-image: -webkit-linear-gradient(180deg, rgb(255, 254, 254) 0%, rgb(226, 9, 53) 100%); background-image: -ms-linear-gradient(180deg, rgb(255, 254, 254) 0%, rgb(226, 9, 53) 100%); } .counter-one__icon { position: relative; display: inline-block; } .counter-one__icon span { position: relative; display: inline-block; font-size: 64px; color: var(--treck-white); -webkit-transition: all 500ms linear; transition: all 500ms linear; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } .counter-one__single:hover .counter-one__icon span { transform: scale(.9); } .counter-one__content { position: relative; display: block; margin-left: 20px; padding-left: 25px; } .counter-one__content::before { content: ""; position: absolute; top: 5px; left: 0; bottom: 5px; width: 2px; background-color: rgba(var(--treck-white-rgb), .20); } .counter-one__content::after { content: ""; position: absolute; top: 50%; left: 2px; border-top: 5px solid transparent; border-left: 4px solid rgba(var(--treck-white-rgb), .20); border-bottom: 5px solid transparent; transform: translateY(-50%); } .counter-one__count-box { position: relative; display: flex; align-items: center; } .counter-one__count-box h3 { font-size: 36px; font-weight: 600; line-height: 36px; color: var(--treck-white); } .counter-two__plus { font-size: 36px; font-weight: 600; line-height: 36px; color: var(--treck-white); } .counter-one__content p { font-weight: 500; color: var(--treck-white); margin-top: 5px; } /*-------------------------------------------------------------- # Coaching One --------------------------------------------------------------*/ .coaching-one { position: relative; display: block; padding: 120px 0 90px; z-index: 1; } .coaching-one__top { position: relative; display: block; } .coaching-one__left { position: relative; display: block; } .coaching-one__left .section-title__border-box { margin-left: 0; } .coaching-one__right { position: relative; display: block; } .coaching-one__text { margin-top: 27px; } .coaching-one__bottom { position: relative; display: block; } .coaching-one__bottom .container { max-width: 1540px; } .coaching-one__bottom .row { --bs-gutter-x: 50px; } .coaching-one__single { position: relative; display: block; margin-bottom: 30px; } .coaching-one__img-box { position: relative; display: block; } .coaching-one__img { position: relative; display: block; } .coaching-one__img img { width: 100%; } .coaching-one__content { position: absolute; bottom: 0; right: -20px; left: 50px; display: flex; align-items: center; justify-content: space-between; background-color: var(--treck-base); padding: 12px 30px 16px; overflow: hidden; -webkit-transition: all 500ms ease; transition: all 500ms ease; z-index: 1; } .coaching-one__single:hover .coaching-one__content { opacity: 0; } .coaching-one__shape-1 { position: absolute; top: 0; left: 0; opacity: .20; z-index: -1; } .coaching-one__shape-1 img { width: auto; } .coaching-one__title { font-size: 20px; font-weight: 600; line-height: 30px; } .coaching-one__title a { color: var(--treck-white); } .coaching-one__arrow-box { position: relative; display: block; } .coaching-one__arrow { position: relative; display: block; font-size: 24px; color: var(--treck-white); top: 3px; } .coaching-one__hover-content { position: absolute; bottom: 0; right: -20px; left: 50px; background-color: var(--treck-white); padding: 40px 40px 46px; background-position: center bottom; transition-delay: .1s; transition-timing-function: ease-in-out; transition-duration: .5s; transition-property: all; transform-origin: bottom; transform-style: preserve-3d; transform: scaleY(0); z-index: 2; } .coaching-one__single:hover .coaching-one__hover-content { transform: scaleY(1.0); } .coaching-one__hover-icon { position: relative; display: block; } .coaching-one__hover-icon img { width: auto; } .coaching-one__hover-title { font-size: 20px; font-weight: 600; line-height: 30px; margin-top: 12px; margin-bottom: 15px; } .coaching-one__hover-title a { color: var(--treck-black); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .coaching-one__hover-title a:hover { color: var(--treck-base); } .coaching-one__hover-text { font-size: 14px; font-weight: 500; line-height: 26px; color: #707072; } .coaching-one__hover-arrow-box { position: absolute; right: 30px; bottom: 30px; } .coaching-one__hover-arrow { font-size: 24px; color: var(--treck-black); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .coaching-one__hover-arrow:hover { color: var(--treck-base); } .coaching-one__hover-shape-1 { position: absolute; top: 45px; right: -20px; width: 172px; height: 26px; background-image: -moz-linear-gradient(0deg, rgb(242, 237, 235) 0%, rgba(255, 255, 255, 0) 100%); background-image: -webkit-linear-gradient(0deg, rgb(242, 237, 235) 0%, rgba(255, 255, 255, 0) 100%); background-image: -ms-linear-gradient(0deg, rgb(242, 237, 235) 0%, rgba(255, 255, 255, 0) 100%); } /*-------------------------------------------------------------- # Testimonial One --------------------------------------------------------------*/ .testimonial-one { position: relative; display: block; z-index: 1; } .testimonial-one__wrap { position: relative; display: block; background-color: var(--treck-primary); padding: 69px 80px 178px; z-index: 1; } .testimonial-one__bg { position: absolute; bottom: 0; left: 0; right: 0; height: 194px; background-repeat: no-repeat; background-size: cover; background-position: center; z-index: -1; } .testimonial-one__img-1 { position: absolute; bottom: -179px; right: -535px; z-index: 1; } .testimonial-one__img-1 img { width: auto; } .testimonial-one__shape-1 { position: absolute; top: 145px; left: 15px; z-index: -1; } .testimonial-one__shape-1 img { width: auto; } .testimonial-one__carousel { position: relative; display: block; max-width: 545px; width: 100%; } .testimonial-one__carousel.owl-carousel .owl-stage-outer { overflow: visible; } .testimonial-one__carousel.owl-carousel .owl-item { opacity: 0; visibility: hidden; transition: opacity 500ms ease, visibility 500ms ease; } .testimonial-one__carousel.owl-carousel .owl-item.active { opacity: 1; visibility: visible; } .testimonial-one__single { position: relative; display: block; z-index: 1; } .testimonial-one__inner { position: relative; display: block; } .testimonial-one__icon-and-ratting { position: relative; display: flex; align-items: center; justify-content: space-between; } .testimonial-one__icon { position: relative; display: inline-block; } .testimonial-one__icon span { position: relative; display: inline-block; font-size: 64px; color: var(--treck-white); } .testimonial-one__ratting { position: relative; display: flex; align-items: center; } .testimonial-one__ratting i { font-size: 15px; color: var(--treck-base); } .testimonial-one__ratting i + i { margin-left: 4px; } .testimonial-one__text { font-size: 20px; line-height: 38px; margin-top: 22px; margin-bottom: 31px; } .testimonial-one__client-name-box { position: relative; display: flex; align-items: center; justify-content: space-between; padding-left: 72px; } .testimonial-one__client-name { font-size: 20px; font-weight: 600; line-height: 30px; position: relative; display: block; } .testimonial-one__client-name::before { content: ""; position: absolute; left: -72px; top: 15px; height: 2px; width: 53px; background-image: -moz-linear-gradient(0deg, rgb(226, 9, 53) 0%, rgb(22, 23, 26) 100%); background-image: -webkit-linear-gradient(0deg, rgb(226, 9, 53) 0%, rgb(22, 23, 26) 100%); background-image: -ms-linear-gradient(0deg, rgb(226, 9, 53) 0%, rgb(22, 23, 26) 100%); } .testimonial-one__client-sub-title { font-size: 12px; font-weight: 600; line-height: 12px; text-transform: uppercase; letter-spacing: 0.1em; position: relative; display: block; border-bottom: 1px solid #b9b6b5; } .testimonial-one__carousel.owl-theme .owl-nav { position: absolute; bottom: -98px; left: 0; margin: 0; } .testimonial-one__carousel.owl-theme .owl-nav .owl-next { height: 55px; width: 55px; line-height: 55px; border-radius: 0; color: var(--treck-black); background-color: var(--treck-white); font-size: 15px; margin: 0; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .testimonial-one__carousel.owl-theme .owl-nav .owl-prev { height: 55px; width: 55px; line-height: 55px; color: var(--treck-black); border-radius: 0; background-color: var(--treck-white); font-size: 15px; margin: 0; text-align: center; -webkit-transition: all 500ms ease; transition: all 500ms ease; position: relative; display: inline-block; transform: rotate(180deg); } .testimonial-one__carousel.owl-theme .owl-nav .owl-next { margin-left: 5px; } .testimonial-one__carousel.owl-theme .owl-nav .owl-prev { margin-right: 5px; } .testimonial-one__carousel.owl-theme .owl-nav .owl-next span, .testimonial-one__carousel.owl-theme .owl-nav .owl-prev span { position: relative; display: flex; align-items: center; justify-content: center; } .testimonial-one__carousel.owl-theme .owl-nav .owl-next:hover, .testimonial-one__carousel.owl-theme .owl-nav .owl-prev:hover { background-color: var(--treck-base); color: var(--treck-white); } /*-------------------------------------------------------------- # Countries One --------------------------------------------------------------*/ .countries-one { position: relative; display: block; overflow: hidden; padding: 120px 0 80px; background-image: -moz-linear-gradient(90deg, rgb(244, 239, 237) 0%, rgb(255, 255, 255) 50%); background-image: -webkit-linear-gradient(90deg, rgb(244, 239, 237) 0%, rgb(255, 255, 255) 50%); background-image: -ms-linear-gradient(90deg, rgb(244, 239, 237) 0%, rgb(255, 255, 255) 50%); z-index: 1; } .countries-one__bg { position: absolute; left: 0; right: 0; bottom: 0; height: 485px; opacity: .04; background-repeat: no-repeat; background-size: cover; background-position: center; mix-blend-mode: luminosity; z-index: -1; } .countries-one__single { position: relative; display: block; text-align: center; border: 1px solid #e3dcd9; padding: 26px 30px 16px; margin-bottom: 40px; -webkit-transition: all 500ms ease; transition: all 500ms ease; z-index: 1; } .countries-one__single:hover { border: 1px solid transparent; } .countries-one__single::before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: -16px; background-color: rgb(255, 255, 255); box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.07); background-position: center bottom; transition-delay: .1s; transition-timing-function: ease-in-out; transition-duration: .5s; transition-property: all; transform-origin: bottom; transform-style: preserve-3d; transform: scaleY(0); z-index: -1; } .countries-one__single:hover::before { transform: scaleY(1.0); } .countries-one__img-box { position: relative; display: block; width: 52px; margin: 0 auto; border-radius: 50%; } .countries-one__img-box::before { content: ""; position: absolute; left: -28px; top: 50%; width: 16px; height: 1px; background-color: #e3dcd9; transform: translateY(-50%); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .countries-one__single:hover .countries-one__img-box::before { background-color: var(--treck-base) } .countries-one__img-box::after { content: ""; position: absolute; right: -28px; top: 50%; width: 16px; height: 1px; background-color: #e3dcd9; transform: translateY(-50%); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .countries-one__single:hover .countries-one__img-box::after { background-color: var(--treck-base) } .countries-one__img { position: relative; display: block; width: 52px; margin: 0 auto; border-radius: 50%; } .countries-one__img::before { content: ""; position: absolute; top: -7px; left: -7px; right: -7px; bottom: -7px; border: 1px solid var(--treck-bdr-color); border-radius: 50%; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .countries-one__single:hover .countries-one__img::before { border: 1px solid var(--treck-base); } .countries-one__img img { width: 100%; border-radius: 50%; } .countries-one__title { font-size: 18px; font-weight: 600; line-height: 28px; margin-bottom: 6px; margin-top: 20px; } .countries-one__title a { color: var(--treck-black); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .countries-one__title a:hover { color: var(--treck-base); } .countries-one__text { font-size: 14px; font-weight: 500; line-height: 24px; color: #68696c; } .countries-one__arrow-box { position: absolute; bottom: -33px; left: 50%; transform: translateX(-50%); } .countries-one__arrow { position: relative; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background-color: var(--treck-base); border-radius: 50%; font-size: 16px; color: var(--treck-white); -webkit-transform: scale(0); transform: scale(0); opacity: 0; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .countries-one__single:hover .countries-one__arrow { -webkit-transform: scale(1); transform: scale(1); transition-delay: 500ms; opacity: 1; } .countries-one__arrow:hover { background-color: var(--treck-black); color: var(--treck-white); } /*-------------------------------------------------------------- # Team One --------------------------------------------------------------*/ .team-one { position: relative; display: block; padding: 120px 0 90px; z-index: 1; } .team-one__single { position: relative; display: block; margin-bottom: 30px; } .team-one__img-box { position: relative; display: block; } .team-one__img { position: relative; display: block; z-index: 2; } .team-one__img:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: -moz-linear-gradient(90deg, rgb(226, 9, 53) 0%, rgba(255, 255, 255, 0) 100%); background-image: -webkit-linear-gradient(90deg, rgb(226, 9, 53) 0%, rgba(255, 255, 255, 0) 100%); background-image: -ms-linear-gradient(90deg, rgb(226, 9, 53) 0%, rgba(255, 255, 255, 0) 100%); background-position: center bottom; transition-delay: .1s; transition-timing-function: ease-in-out; transition-duration: .5s; transition-property: all; transform-origin: bottom; transform-style: preserve-3d; transform: scaleY(0); -webkit-transition: all 500ms ease; transition: all 500ms ease; z-index: 1; } .team-one__single:hover .team-one__img:before { transform: scaleY(1.0); border-top-left-radius: 130px; border-top-right-radius: 130px; } .team-one__img img { width: 100%; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .team-one__single:hover .team-one__img img { border-top-left-radius: 130px; border-top-right-radius: 130px; } .team-one__share-btn { position: absolute; right: 10px; bottom: 0; z-index: 2; } .team-one__share-btn a { position: relative; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background-color: var(--treck-black); font-size: 16px; color: var(--treck-white); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .team-one__single:hover .team-one__share-btn a { background-color: var(--treck-white); color: var(--treck-black); } .team-one__social { position: absolute; display: flex; align-items: center; right: 50px; bottom: 0; background-color: var(--treck-black); padding: 4px 20px 6px; transform: scaleX(0.0); transform-origin: center; transform-style: preserve-3d; -webkit-transition: all 0.4s linear; -o-transition: all 0.4s linear; transition: all 0.4s linear; transform-origin: right center; z-index: 2; } .team-one__single:hover .team-one__social { transform: scaleX(1.0); transform-origin: left center; transition-delay: 500ms; } .team-one__social li { position: relative; display: block; } .team-one__social li a { position: relative; display: block; font-size: 14px; color: var(--treck-white); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .team-one__social li a:hover { color: var(--treck-base); } .team-one__social li + li { margin-left: 20px; } .team-one__content { position: relative; display: block; padding: 23px 30px 23px; background-image: -moz-linear-gradient(90deg, rgb(242, 237, 235) 0%, rgb(255, 255, 255) 100%); background-image: -webkit-linear-gradient(90deg, rgb(242, 237, 235) 0%, rgb(255, 255, 255) 100%); background-image: -ms-linear-gradient(90deg, rgb(242, 237, 235) 0%, rgb(255, 255, 255) 100%); } .team-one__sub-title { font-size: 14px; font-weight: 500; line-height: 24px; } .team-one__title { font-size: 20px; font-weight: 600; line-height: 30px; margin-top: 1px; } .team-one__title a { color: #222222; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .team-one__title a:hover { color: var(--treck-base); } .team-one__arrow-box { position: absolute; top: 0; right: 10px; } .team-one__arrow { position: relative; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; font-size: 16px; color: var(--treck-white); background-color: var(--treck-base); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .team-one__arrow:hover { color: var(--treck-white); background-color: var(--treck-black); } /*-------------------------------------------------------------- # Contact One --------------------------------------------------------------*/ .contact-one { position: relative; display: block; padding: 0px 0px 0px; z-index: 1; } .contact-one__left { position: relative; display: block; margin-right: 70px; padding-top: 120px; z-index: 1; } .contact-one__bg { position: absolute; top: 0; left: -375px; right: -433px; bottom: -120px; background-repeat: no-repeat; background-position: center; background-size: cover; clip-path: polygon(0 0, 100% 0%, 73% 100%, 0% 100%); z-index: -1; } .contact-one__shape-1 { position: absolute; top: 0; bottom: -120px; left: -375px; right: -158px; background-repeat: no-repeat; background-position: left center; background-size: cover; opacity: .80; z-index: -1; } .contact-one__left .section-title__tagline { color: var(--treck-white); } .contact-one__left .section-title__border-box { background-color: var(--treck-white); } .contact-one__left .section-title__border-box:before { background-color: var(--treck-base); } .contact-one__left .section-title__border-box:after { background-color: var(--treck-base); border: 1px solid var(--treck-white); } .contact-one__left .section-title__title { color: var(--treck-white); } .contact-one__form-box { position: relative; display: block; } .contact-one__form .row { --bs-gutter-x: 10px; } .contact-one__form-input-box { position: relative; display: block; margin-bottom: 10px; } .contact-one__form-input-box input[type="text"], .contact-one__form-input-box input[type="email"] { height: 52px; width: 100%; border: none; background-color: var(--treck-white); padding-left: 30px; padding-right: 30px; outline: none; font-size: 14px; color: var(--treck-gray); display: block; font-weight: 500; } .contact-one__form-input-box textarea { font-size: 14px; color: var(--treck-gray); height: 122px; width: 100%; background-color: var(--treck-white); padding: 15px 30px 30px; border: none; outline: none; margin-bottom: 0px; font-weight: 500; } .contact-one__form-input-box.text-message-box { height: 122px; } .contact-one__form-btn { border: none; font-size: 14px; font-weight: 600; background-color: var(--treck-black); padding: 12px 50px 10px; } .contact-one__form-btn:hover { color: var(--treck-base); } .contact-one__form-btn:before { background-color: var(--treck-white); } .contact-one__form-input-box .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) { position: relative; display: block; max-width: 100%; width: 100% !important; } .contact-one__form-input-box .bootstrap-select > .dropdown-toggle::after { display: none; } .contact-one__form-input-box .bootstrap-select > .dropdown-toggle { position: relative; background-color: var(--treck-white) !important; border-radius: 0; color: var(--treck-gray) !important; font-size: 14px; font-weight: 500; height: 52px; line-height: 52px; padding-left: 30px; padding-right: 30px; padding-top: 0; padding-bottom: 0; width: 100%; outline: none !important; border: 0; box-shadow: none !important; background-repeat: no-repeat; background-size: 14px 12px; background-position: right 25.75px center; } .contact-one__form-input-box .bootstrap-select > .dropdown-toggle:before { position: absolute; top: 0; bottom: 0; right: 25px; font-family: "Font Awesome 5 Free"; content: "\f107"; font-weight: 900; font-size: 15px; color: var(--treck-gray); } .contact-one__right { position: relative; display: block; margin-left: -30px; margin-right: -375px; margin-top: 40px; } .contact-one__right:before { content: ""; position: absolute; top: -40px; left: 344px; border-bottom: 40px solid var(--treck-black); border-left: 20px solid transparent; border-right: 30px solid transparent; } .contact-one__google-map-box { position: relative; display: block; background-color: var(--treck-primary); clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%); } .google-map__one { position: relative; display: block; border: none; height: 658px; width: 100%; mix-blend-mode: luminosity; } .contact-one__address-box { position: absolute; top: 120px; right: 170px; background-color: rgb(255, 255, 255); box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.1); max-width: 312px; width: 100%; z-index: 2; } .contact-one__address-top { position: relative; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; background-image: -moz-linear-gradient(90deg, rgb(242, 237, 235) 0%, rgb(255, 255, 255) 100%); background-image: -webkit-linear-gradient(90deg, rgb(242, 237, 235) 0%, rgb(255, 255, 255) 100%); background-image: -ms-linear-gradient(90deg, rgb(242, 237, 235) 0%, rgb(255, 255, 255) 100%); padding-left: 40px; padding-right: 30px; padding-top: 19px; padding-bottom: 19px; z-index: 2; } .contact-one__address-top:before { content: ""; position: absolute; bottom: -10px; left: 40px; border-top: 10px solid var(--treck-primary); border-left: 10px solid transparent; border-right: 10px solid transparent; z-index: 2; } .contact-one__address-top-title { position: relative; display: block; } .contact-one__address-top-title h3 { font-size: 20px; font-weight: 600; line-height: 30px; } .contact-one__address-top-icon { position: relative; display: flex; align-items: center; } .contact-one__address-top-icon span { position: relative; display: inline-block; font-size: 65px; color: var(--treck-base); } .contact-one__address-faq { position: relative; display: block; } .contact-one__address-faq .faq-one-accrodion .accrodion { position: relative; display: block; -webkit-transition: all 500ms ease; transition: all 500ms ease; background-color: var(--treck-white); border-bottom: 1px solid var(--treck-bdr-color); } .contact-one__address-faq .faq-one-accrodion .accrodion.last-child { border-bottom: 0; } .contact-one__address-faq .faq-one-accrodion .accrodion-title { position: relative; display: block; cursor: pointer; padding: 13px 40px 13px; transition: all 200ms linear; transition-delay: 0.1s; } .contact-one__address-faq .faq-one-accrodion .accrodion-title h4 { margin: 0; font-size: 16px; font-weight: 600; line-height: 26px; color: var(--treck-black); position: relative; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .contact-one__address-faq .faq-one-accrodion .accrodion.active .accrodion-title h4 { color: var(--treck-black); } .contact-one__address-faq .faq-one-accrodion .accrodion-title h4::before { content: "\e907"; font-family: 'icomoon' !important; font-weight: 900; font-size: 11px; color: var(--treck-base); position: absolute; top: 50%; right: -5px; height: 20px; width: 20px; border-radius: 50%; text-align: center; display: flex; justify-content: center; align-items: center; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .contact-one__address-faq .faq-one-accrodion .accrodion.active .accrodion-title h4::before { content: "\e905"; color: var(--treck-black); height: 20px; width: 20px; border-radius: 50%; text-align: center; display: flex; justify-content: center; align-items: center; } .contact-one__address-faq .faq-one-accrodion .accrodion-content { position: relative; padding: 0px 40px 23px; margin-top: -8px; } .contact-one__address-list { position: relative; display: block; } .contact-one__address-list li { position: relative; display: flex; } .contact-one__address-list li:nth-child(1) { margin-bottom: 13px; } .contact-one__address-list li:nth-child(2) { margin-bottom: 7px; } .contact-one__address-list li .icon { position: relative; display: inline-block; } .contact-one__address-list li .icon i { position: relative; display: inline-block; font-size: 15px; color: var(--treck-base); } .contact-one__address-list li .text { margin-left: 20px; } .contact-one__address-list li .text p { font-size: 15px; font-weight: 500; line-height: 26px; } .contact-one__address-list li .text p a { color: var(--treck-gray); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .contact-one__address-list li .text p a:hover { color: var(--treck-base); } /*-------------------------------------------------------------- # Brand One --------------------------------------------------------------*/ .brand-one { position: relative; display: block; overflow: hidden; z-index: 1; } .brand-one__inner { position: relative; display: block; padding: 60px 0 60px; border-bottom: 1px solid var(--treck-bdr-color); } .brand-one .swiper-slide { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .brand-one .swiper-slide img { -webkit-transition: 500ms; transition: 500ms; opacity: 0.25; max-width: 100%; } .brand-one .swiper-slide img:hover { opacity: 0.60; } /*-------------------------------------------------------------- # Blog One --------------------------------------------------------------*/ .blog-one { position: relative; display: block; padding: 120px 0 90px; background-image: -moz-linear-gradient(90deg, rgb(242, 237, 235) 0%, rgb(255, 255, 255) 100%); background-image: -webkit-linear-gradient(90deg, rgb(242, 237, 235) 0%, rgb(255, 255, 255) 100%); background-image: -ms-linear-gradient(90deg, rgb(242, 237, 235) 0%, rgb(255, 255, 255) 100%); z-index: 1; } .blog-one__single { position: relative; display: block; margin-bottom: 30px; } .blog-one__img-box { position: relative; display: block; } .blog-one__img { position: relative; display: block; overflow: hidden; } .blog-one__img img { width: 100%; transition: all 500ms ease; transform: scale(1); } .blog-one__single:hover .blog-one__img img { transform: scale(1.05); } .blog-one__img > a { top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(var(--treck-black-rgb), 0.3); position: absolute; display: flex; justify-content: center; align-items: center; font-size: 30px; color: var(--thm-base); transition: opacity 500ms ease, visibility 500ms ease, transform 500ms ease; visibility: hidden; opacity: 0; transform: translateY(-30%); } .blog-one__img > a > span { position: relative; } .blog-one__img > a > span::before { content: ''; width: 20px; height: 2px; background-color: var(--treck-base); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all 500ms ease; } .blog-one__img > a > span::after { content: ''; transition: all 500ms ease; width: 2px; height: 20px; background-color: var(--treck-base); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .blog-one__img > a:hover > span::before, .blog-one__img > a:hover > span::after { background-color: var(--treck-white); } .blog-one__single:hover .blog-one__img > a { visibility: visible; transform: translateY(0%); opacity: 1; } .blog-one__date { position: absolute; left: 30px; bottom: 0; background-color: var(--treck-base); padding: 9px 15px 5px; z-index: 2; } .blog-one__date::before { content: ""; position: absolute; bottom: 0; left: -30px; border-top: 25px solid transparent; border-bottom: 25px solid #d1062f; border-left: 15px solid transparent; border-right: 15px solid #d1062f; } .blog-one__date p { font-size: 30px; font-weight: 600; line-height: 30px; color: var(--treck-white); } .blog-one__date p span { font-size: 16px; position: relative; left: -3px; } .blog-one__content { position: relative; display: block; padding: 30px 40px 11px; background-color: rgb(255, 255, 255); box-shadow: 0px 0px 43px 0px rgba(0, 0, 0, 0.09); } .blog-one__tag-and-user { position: relative; display: flex; align-items: center; } .blog-one__tag { position: relative; display: block; background-color: var(--treck-primary); padding: 4px 20px 6px; } .blog-one__tag p { font-size: 12px; font-weight: 500; line-height: 22px; } .blog-one__user { position: relative; display: flex; align-items: center; margin-left: 10px; } .blog-one__user .img { position: relative; display: block; width: 29px; } .blog-one__user .img img { width: 100%; border-radius: 50%; } .blog-one__user .text { margin-left: 10px; } .blog-one__user .text p { font-size: 14px; font-weight: 500; line-height: 14px; } .blog-one__title { font-size: 20px; line-height: 30px; font-weight: 600; margin-top: 12px; padding-bottom: 27px; margin-bottom: 9px; border-bottom: 1px solid var(--treck-bdr-color); } .blog-one__title a { color: var(--treck-black); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .blog-one__title a:hover { color: var(--treck-base); } .blog-one__comment-and-arrow { position: relative; display: flex; align-items: center; justify-content: space-between; } .blog-one__comment { position: relative; display: block; } .blog-one__comment p { font-size: 14px; font-weight: 500; line-height: 14px; } .blog-one__comment p span { font-size: 14px; color: var(--treck-base); margin-right: 4px; } .blog-one__arrow { position: relative; display: block; } .blog-one__arrow a { font-size: 25px; color: var(--treck-black); top: 4px; position: relative; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .blog-one__arrow a:hover { color: var(--treck-base); } /*-------------------------------------------------------------- # Site Footer --------------------------------------------------------------*/ .site-footer { position: relative; display: block; background-color: #fff; z-index: 1; } .site-footer__top { position: relative; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(var(--treck-white-rgb), .10); overflow: hidden; padding: 44px 0px 44px; z-index: 1; } .site-footer__map { position: absolute; top: 0; left: 30px; opacity: .40; z-index: -1; } .site-footer__map img { width: auto; } .site-footer__top-left { position: relative; display: block; } .site-footer__visa-box { position: relative; display: flex; align-items: center; } .site-footer__visa-list { position: relative; display: flex; align-items: center; } .site-footer__visa-list li + li { margin-left: 4px; } .site-footer__visa-img { position: relative; display: block; width: 30px; border-radius: 50%; } .site-footer__visa-img img { width: 100%; border-radius: 50%; } .site-footer__visa-content { margin-left: 20px; } .site-footer__visa-text { color: #68696c; font-weight: 500; } .site-footer__visa-text a { position: relative; display: inline-block; color: var(--treck-white); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .site-footer__visa-text a:before { content: ""; position: absolute; bottom: 4px; left: 0; right: 0; height: 1px; background-color: var(--treck-white); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .site-footer__visa-text a:hover:before { background-color: var(--treck-base); } .site-footer__visa-text a:hover { color: var(--treck-base); } .site-footer__call { position: relative; display: flex; align-items: center; } .site-footer__call-icon { position: relative; display: flex; align-items: center; } .site-footer__call-icon img { width: auto; } .site-footer__call-content { margin-left: 15px; } .site-footer__call-sub-title { font-size: 14px; color: #68696c; line-height: 14px; } .site-footer__call-number { font-size: 16px; font-weight: 600; line-height: 16px; margin-top: 9px; } .site-footer__call-number a { color: var(--treck-white); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .site-footer__call-number a span { font-size: 14px; color: #68696c; } .site-footer__call-number a:hover { color: var(--treck-base); } .site-footer__middle { position: relative; display: block; padding-top: 85px; padding-bottom: 79px; } .footer-widget__title-box { position: relative; display: block; margin-bottom: 24px; } .footer-widget__title { font-size: 18px; color: var(--treck-white); line-height: 28px; font-weight: 600; } .footer-widget__about { position: relative; display: block; margin-right: 10px; } .footer-widget__logo { position: relative; display: block; margin-bottom: 20px; } .footer-widget__about-text { font-size: 15px; color: #68696c; } .site-footer__social { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 29px; } .site-footer__social a { position: relative; height: 40px; width: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; color: var(--treck-white); background-color: transparent; font-size: 15px; border-radius: 50%; border: 1px solid var(--treck-base); overflow: hidden; -webkit-transition: all 500ms ease; transition: all 500ms ease; z-index: 1; } .site-footer__social a:hover { color: var(--treck-base); background-color: var(--treck-white); border: 1px solid var(--treck-white); } .site-footer__social a:after { position: absolute; content: ""; top: 0; left: 0; right: 0; height: 100%; background-color: var(--treck-white); -webkit-transition-delay: .1s; transition-delay: .1s; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; -webkit-transition-duration: .4s; transition-duration: .4s; -webkit-transition-property: all; transition-property: all; opacity: 1; -webkit-transform-origin: top; transform-origin: top; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: scaleY(0); transform: scaleY(0); z-index: -1; } .site-footer__social a:hover:after { opacity: 1; -webkit-transform: scaleY(1); transform: scaleY(1); } .site-footer__social a + a { margin-left: 10px; } .footer-widget__link { position: relative; display: block; margin-right: -30px; } .footer-widget__link-list { position: relative; display: block; } .footer-widget__link-list li + li { margin-top: 6px; } .footer-widget__link-list li a { position: relative; color: #68696c; font-size: 15px; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .footer-widget__link-list li a:hover { color: var(--treck-white); } .footer-widget__visa { position: relative; display: block; margin-left: 60px; } .footer-widget__visa-list { position: relative; display: block; } .footer-widget__visa-list li { position: relative; display: block; } .footer-widget__visa-list li + li { margin-top: 6px; } .footer-widget__visa-list li a { position: relative; color: #68696c; font-size: 15px; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .footer-widget__visa-list li a:hover { color: var(--treck-white); } .footer-widget__gallery { position: relative; display: block; margin-left: -9px; } .footer-widget__gallery .footer-widget__title-box { margin-bottom: 33px; } .footer-widget__gallery-list { position: relative; display: flex; align-items: center; flex-wrap: wrap; margin-right: -5px; margin-left: -5px; } .footer-widget__gallery-list li { position: relative; display: inline-block; padding-left: 5px; padding-right: 5px; margin-bottom: 10px; } .footer-widget__gallery-img { position: relative; display: block; overflow: hidden; width: 70px; z-index: 1; } .footer-widget__gallery-img:before { position: absolute; top: 0; bottom: 0; left: 0; right: 0; content: ""; background-color: rgba(var(--treck-black-rgb), .30); transition: all 700ms ease; transform: translateY(-100%); z-index: 1; } .footer-widget__gallery-list li:hover .footer-widget__gallery-img:before { transform: translateY(0%); } .footer-widget__gallery-img img { width: 100%; transition-delay: .1s; transition-timing-function: ease-in-out; transition-duration: .7s; transition-property: all; } .footer-widget__gallery-list li:hover .footer-widget__gallery-img img { transform: scale(1.1) rotate(2deg); } .footer-widget__gallery-img a { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; font-size: 17px; color: var(--treck-white); transform: translateY(100px); opacity: 0; transition: all 700ms ease; z-index: 2; } .footer-widget__gallery-list li:hover .footer-widget__gallery-img a { transform: translateY(0px); opacity: 1; transition-delay: 0.3s; } .footer-widget__gallery-list li .footer-widget__gallery-img a:hover { color: var(--treck-base); } .footer-widget__Contact { position: relative; display: block; } .footer-widget__Contact-list { position: relative; display: block; margin-top: -1px; } .footer-widget__Contact-list li { position: relative; display: flex; } .footer-widget__Contact-list li .icon { font-size: 16px; margin-right: 12px; } .footer-widget__Contact-list li:nth-child(1) { margin-bottom: 20px; } .footer-widget__Contact-list li:nth-child(2) { margin-bottom: 22px; } .footer-widget__Contact-list li .icon span { color: var(--treck-base); font-size: 15px; } .footer-widget__Contact-list li .text p { font-size: 15px; font-weight: 500; color: #68696c; line-height: 26px; } .footer-widget__Contact-list li .text p a { color: #68696c; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .footer-widget__Contact-list li .text p a:hover { color: var(--treck-base); transition: all 500ms ease; } .site-footer__bottom { position: relative; display: block; padding: 20px 0px; background: radial-gradient(circle, rgba(244, 116, 33, 1) 27%, rgba(229, 87, 17, 1) 100%); } .site-footer__bottom-inner { position: relative; display: block; text-align: center; } .site-footer__bottom-text { color: #fff; font-size: 15px; font-weight: 500; } .site-footer__bottom-text a { color: #727478; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .site-footer__bottom-text a:hover { color: var(--treck-white); } /*-------------------------------------------------------------- # About Two --------------------------------------------------------------*/ .about-two { position: relative; display: block; padding: 120px 0 120px; z-index: 1; } .about-two__shape-2 { position: absolute; top: 113px; left: 0; opacity: .10; z-index: -1; } .about-two__shape-2 img { width: auto; } .about-two__left { position: relative; display: block; margin-right: 50px; } .about-two__img-box { position: relative; display: block; } .about-two__img { position: relative; display: block; box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.1); border-top-left-radius: 250px; border-top-right-radius: 250px; border-bottom-left-radius: 250px; } .about-two__img::before { content: ""; position: absolute; top: -8px; left: -27px; bottom: 0; right: 30px; border: 8px solid var(--treck-base); border-top-right-radius: 250px; border-top-left-radius: 250px; border-bottom-right-radius: 250px; } .about-two__img img { width: 100%; border-top-left-radius: 250px; border-top-right-radius: 250px; border-bottom-left-radius: 250px; } .about-two__experience { position: absolute; bottom: 79px; left: -148px; border-bottom-left-radius: 45px; background-color: rgb(255, 255, 255); box-shadow: 14.982px 29.403px 87px 0px rgba(0, 0, 0, 0.07); } .about-two__experience-inner { position: relative; display: block; max-width: 247px; padding: 22px 80px 23px; padding-right: 20px; width: 100%; border-bottom-left-radius: 45px; overflow: hidden; z-index: 1; } .about-two__experience h3 { font-size: 45px; font-weight: 600; line-height: 45px; color: var(--treck-base); } .about-two__experience p { font-size: 15px; margin-top: -2px; } .about-two__shape-1 { position: absolute; left: -85px; bottom: -13px; } .about-two__shape-1 img { width: auto; mix-blend-mode: darken; } .about-two__right { position: relative; display: block; } .about-two__right .section-title { margin-bottom: 31px; } .about-two__right .section-title__border-box { margin-left: 0; } .about-two__points { position: relative; display: flex; align-items: center; margin-top: 27px; margin-bottom: 30px; } .about-two__points li { position: relative; display: flex; align-items: center; } .about-two__points li + li { margin-left: 48px; } .about-two__points li .icon { position: relative; display: inline-block; } .about-two__points li .icon span { position: relative; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; font-size: 22px; color: var(--treck-base); border-radius: 50%; background-color: var(--treck-primary); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .about-two__points li .icon:hover span { color: var(--treck-white); background-color: var(--treck-base); } .about-two__points li .text { margin-left: 20px; } .about-two__points li .text p { font-size: 18px; font-weight: 600; line-height: 26px; color: var(--treck-black); } .about-two__progress { position: relative; display: block; } .about-two__progress-title { font-size: 16px; font-weight: 600; line-height: 28px; color: var(--treck-black); margin-bottom: 3px; } .about-two__progress .bar { position: relative; width: 100%; height: 17px; border: 1px solid var(--treck-bdr-color); background-color: rgb(255, 255, 255); box-shadow: inset 0px 0px 7px 0px rgba(0, 0, 0, 0.15); } .about-two__progress .bar-inner { position: relative; display: block; width: 0px; height: 9px; background-image: -moz-linear-gradient(0deg, rgb(22, 23, 26) 0%, rgb(226, 9, 53) 100%); background-image: -webkit-linear-gradient(0deg, rgb(22, 23, 26) 0%, rgb(226, 9, 53) 100%); background-image: -ms-linear-gradient(0deg, rgb(22, 23, 26) 0%, rgb(226, 9, 53) 100%); -webkit-transition: all 1500ms ease; -ms-transition: all 1500ms ease; -o-transition: all 1500ms ease; -moz-transition: all 1500ms ease; transition: all 1500ms ease; top: 3px; left: 3px; } .about-two__progress .count-text { position: absolute; right: 0px; bottom: 18px; color: var(--treck-gray); line-height: 24px; font-size: 14px; text-align: center; font-weight: 400; opacity: 0; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; -moz-transition: all 500ms ease; transition: all 500ms ease; } .about-two__progress .bar-inner.counted .count-text { opacity: 1; } .about-two__progress .bar.marb-0 { margin-bottom: 0; } .about-two__btn-and-call-box { position: relative; display: flex; align-items: center; margin-top: 40px; } .about-two__btn-box { position: relative; display: block; } .about-two__call-box { position: relative; display: flex; align-items: center; margin-left: 20px; } .about-two__call-icon { position: relative; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border: 2px solid var(--treck-bdr-color); border-radius: 50%; } .about-two__call-icon span { position: relative; display: inline-block; font-size: 16px; color: var(--treck-black); } .about-two__call-content { position: relative; display: block; margin-left: 18px; } .about-two__call-content p { font-size: 14px; line-height: 24px; } .about-two__call-content h3 { font-size: 16px; font-weight: 600; line-height: 24px; } .about-two__call-content h3 a { color: var(--treck-black); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .about-two__call-content h3 a:hover { color: var(--treck-base); } .about-two__call-content h3 span { font-size: 14px; color: var(--treck-gray); font-weight: 400; } /*-------------------------------------------------------------- # countries Two --------------------------------------------------------------*/ .countries-two { position: relative; display: block; padding-bottom: 100px; } .countries-two__bottom { position: relative; display: block; } .countries-two__carousel { position: relative; display: block; } .countries-two__single { position: relative; display: block; border: 1px solid var(--treck-bdr-color); padding: 21px 30px 20px; background-color: var(--treck-white); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .countries-two__single:hover { box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.1); } .countries-two__name-and-img { position: relative; display: flex; align-items: center; justify-content: space-between; padding-bottom: 23px; border-bottom: 1px solid var(--treck-bdr-color); margin-bottom: 16px; } .countries-two__name-and-img:before { content: ""; position: absolute; bottom: -7px; left: 0; border-top: 6px solid #e3dbd8; border-left: 8px solid transparent; border-right: 8px solid transparent; } .countries-two__img { position: relative; display: block; width: 51px; border-radius: 50%; box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1); } .countries-two__img img { width: 100%; border-radius: 50%; border: 3px solid var(--treck-white); } .countries-two__name { position: relative; display: block; } .countries-two__name h3 { font-size: 20px; line-height: 30px; font-weight: 600; } .countries-two__name h3 a { color: var(--treck-black); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .countries-two__name h3 a:hover { color: var(--treck-base); } .countries-two__points { position: relative; display: block; } .countries-two__points li { position: relative; display: flex; align-items: center; } .countries-two__points li .icon { position: relative; display: inline-block; top: 2px; } .countries-two__points li .icon span { position: relative; display: inline-block; font-size: 18px; color: #e3dbd8; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .countries-two__points li:hover .icon span { color: var(--treck-base); } .countries-two__points li .text { margin-left: 10px; } .countries-two__points li .text p { font-size: 14px; font-weight: 500; line-height: 24px; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .countries-two__points li:hover .text p { color: var(--treck-black); } .countries-two__carousel.owl-carousel .owl-stage-outer { overflow: visible; } .countries-two__carousel.owl-carousel .owl-item { opacity: 0; visibility: hidden; transition: opacity 500ms ease, visibility 500ms ease; } .countries-two__carousel.owl-carousel .owl-item.active { opacity: 1; visibility: visible; } .countries-two__carousel.owl-theme .owl-nav { position: relative; display: block; margin-top: 28px; } .countries-two__carousel.owl-theme .owl-nav::before { content: ""; position: absolute; left: 0; bottom: 14px; width: 530px; height: 1px; background-color: #dfd7d4; } .countries-two__carousel.owl-theme .owl-nav::after { content: ""; position: absolute; right: 0; bottom: 14px; width: 530px; height: 1px; background-color: #dfd7d4; } .countries-two__carousel.owl-theme .owl-nav .owl-next { height: 27px; width: 26px; line-height: 26px; border-radius: 0; color: var(--treck-black); background-color: #f0ebe9; font-size: 15px; margin: 0; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .countries-two__carousel.owl-theme .owl-nav .owl-prev { height: 27px; width: 26px; line-height: 26px; border-radius: 0; color: var(--treck-black); background-color: #f0ebe9; font-size: 15px; margin: 0; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .countries-two__carousel.owl-theme .owl-nav .owl-next { margin-left: 2.50px; } .countries-two__carousel.owl-theme .owl-nav .owl-prev { margin-right: 2.50px; } .countries-two__carousel.owl-theme .owl-nav .owl-next span, .countries-two__carousel.owl-theme .owl-nav .owl-prev span { position: relative; display: flex; align-items: center; justify-content: center; } .countries-two__carousel.owl-theme .owl-nav .owl-next:hover, .countries-two__carousel.owl-theme .owl-nav .owl-prev:hover { background-color: var(--treck-base); color: var(--treck-white); } /*-------------------------------------------------------------- # Excellence One --------------------------------------------------------------*/ .excellence-one { position: relative; display: block; } .excellence-one__inner { position: relative; display: block; background-color: var(--treck-base); padding: 57px 80px 70px; border-left: 6px solid var(--treck-black); overflow: hidden; z-index: 1; } .excellence-one__bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: .70; background-repeat: no-repeat; background-position: center; background-size: cover; mix-blend-mode: luminosity; z-index: -1; } .excellence-one__inner::before { content: ""; position: absolute; top: 70px; left: 0; border-top: 24px solid transparent; border-left: 12px solid var(--treck-black); border-bottom: 25px solid transparent; } .excellence-one__shape-1 { position: absolute; bottom: -153px; right: -3px; z-index: 1; } .excellence-one__shape-1 img { width: auto; } .excellence-one__shape-2 { position: absolute; top: -46px; right: -162px; z-index: -1; } .excellence-one__shape-2 img { width: auto; } .excellence-one__title { font-size: 50px; font-weight: 600; line-height: 60px; color: var(--treck-white); position: relative; display: block; z-index: 5; } .excellence-one__btn-box { position: relative; display: block; margin-top: 30px; } .excellence-one__btn { background-color: var(--treck-black); } .excellence-one__btn:hover { color: var(--treck-base); } .excellence-one__btn::before { background-color: var(--treck-white); } /*-------------------------------------------------------------- # coaching Two --------------------------------------------------------------*/ .coaching-two { position: relative; display: block; padding: 120px 0 90px; background-color: var(--treck-primary); z-index: 1; } .coaching-two__bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: .65; mix-blend-mode: multiply; background-repeat: no-repeat; background-position: center; background-size: cover; z-index: -1; } .coaching-two__bg-2 { position: absolute; height: 297px; left: 0; right: 0; bottom: 0; opacity: .08; mix-blend-mode: multiply; background-repeat: no-repeat; background-position: center; background-size: cover; z-index: -1; } .coaching-two .container { max-width: 1500px; } .coaching-two .section-title { margin-bottom: 70px; } .coaching-two .section-title__border-box:before { background-color: var(--treck-primary); } .coaching-two .section-title__border-box:after { background-color: var(--treck-primary); } .coaching-two__single { position: relative; display: flex; align-items: center; background-color: rgb(255, 255, 255); box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.07); padding-right: 30px; padding-bottom: 20px; margin-bottom: 30px; } .coaching-two__img-box { position: relative; display: block; margin-top: -20px; } .coaching-two__img { position: relative; display: block; width: 200px; overflow: hidden; } .coaching-two__img:before { position: absolute; top: 0; left: 0; height: 100%; width: 100%; content: ""; background: rgba(var(--treck-black-rgb), .40); transition: all 900ms ease; -moz-transition: all 900ms ease; -webkit-transition: all 900ms ease; -ms-transition: all 900ms ease; -o-transition: all 900ms ease; transition: -webkit-transform 0.5s ease; transition: transform 0.5s ease; transition: transform 0.5s ease, -webkit-transform 0.5s ease; -webkit-transform: scale(0, 1); -ms-transform: scale(0, 1); transform: scale(0, 1); -webkit-transform-origin: right center; -ms-transform-origin: right center; transform-origin: right center; background-position: center center; z-index: 1; } .coaching-two__single:hover .coaching-two__img:before { -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; } .coaching-two__img img { width: 100%; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: opacity 500ms ease, -webkit-transform 500ms ease; transition: opacity 500ms ease, -webkit-transform 500ms ease; transition: transform 500ms ease, opacity 500ms ease; transition: transform 500ms ease, opacity 500ms ease, -webkit-transform 500ms ease; } .coaching-two__single:hover .coaching-two__img img { transform: scale(1.05); } .coaching-two__content { position: relative; display: block; margin-left: 30px; } .coaching-two__title { position: relative; display: block; font-size: 20px; font-weight: 600; line-height: 24px; padding-bottom: 16px; margin-bottom: 20px; border-bottom: 1px solid var(--treck-bdr-color); } .coaching-two__title::before { content: ""; position: absolute; bottom: -7px; left: 0; border-top: 6px solid #e3dbd8; border-left: 8px solid transparent; border-right: 8px solid transparent; } .coaching-two__title a { color: var(--treck-black); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .coaching-two__title a:hover { color: var(--treck-base); } .coaching-two__text { font-size: 14px; font-weight: 500; } .coaching-two__arrow-box { position: absolute; bottom: 10px; right: 10px; } .coaching-two__arrow { position: relative; display: flex; align-items: center; justify-content: center; width: 50px; height: 48px; font-size: 25px; color: var(--treck-black); background-color: #f4efed; -webkit-transition: all 500ms ease; transition: all 500ms ease; z-index: 1; } .coaching-two__arrow:hover { color: var(--treck-white); background-color: var(--treck-base); } /*-------------------------------------------------------------- # FAQ One --------------------------------------------------------------*/ .faq-one { position: relative; display: block; z-index: 1; } .faq-one__shape-1 { position: absolute; top: 87px; right: 0; opacity: .10; } .faq-one__shape-1 img { width: auto; } .faq-one__left { position: relative; display: block; margin-right: 190px; margin-left: -255px; } .faq-one__inner { position: relative; display: block; background-color: rgba(var(--treck-base-rgb), .90); padding: 100px 100px 110px; z-index: 1; } .faq-one__bg { position: absolute; top: 0; left: -120px; right: -120px; bottom: -120px; background-repeat: no-repeat; background-size: cover; background-position: center; z-index: -1; } .faq-one__icon { position: relative; display: flex; align-items: center; justify-content: center; width: 123px; height: 123px; border-radius: 50%; background-color: var(--treck-black); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .faq-one__icon:hover { background-color: var(--treck-white); } .faq-one__icon span { position: relative; display: inline-block; font-size: 64px; color: var(--treck-white); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .faq-one__icon:hover span { color: var(--treck-black); } .faq-one__title { font-size: 50px; font-weight: 600; line-height: 60px; color: var(--treck-white); margin-top: 24px; margin-bottom: 42px; } .faq-one__btn-box { position: relative; display: block; } .faq-one__btn { color: var(--treck-black); background-color: var(--treck-white); } .faq-one__right { position: relative; display: block; padding-top: 120px; } .faq-one__right .section-title__border-box { margin-left: 0; } .faq-one__faq-box { position: relative; display: block; border: 1px solid var(--treck-bdr-color); } .faq-one__faq-box .faq-one-accrodion .accrodion { position: relative; display: block; padding: 21px 40px 26px; border-bottom: 1px solid #e2dbd7; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .faq-one__faq-box .faq-one-accrodion .accrodion-title { position: relative; display: block; cursor: pointer; transition: all 200ms linear; transition-delay: 0.1s; } .faq-one__faq-box .faq-one-accrodion .accrodion-title h4 { margin: 0; font-size: 18px; font-weight: 600; line-height: 28px; color: var(--treck-black); position: relative; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .faq-one__faq-box .faq-one-accrodion .accrodion + .accrodion { margin-top: 0px; } .faq-one__faq-box .faq-one-accrodion .accrodion.active .accrodion-title h4 { color: var(--treck-base); } .faq-one__faq-box .faq-one-accrodion .accrodion-title h4::before { content: "\f067"; font-family: "Font Awesome 5 Free"; font-weight: 700; font-size: 14px; color: var(--treck-base); position: absolute; top: 4px; right: 0; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .faq-one__faq-box .faq-one-accrodion .accrodion.active .accrodion-title h4::before { content: "\f068"; color: var(--treck-black); } .faq-one__faq-box .faq-one-accrodion .accrodion-content { position: relative; padding-top: 24px; } .faq-one__faq-box .faq-one-accrodion .accrodion-content p { margin: 0; } .faq-one__faq-box .faq-one-accrodion .accrodion:last-child { border-bottom: 1px solid transparent; } /*-------------------------------------------------------------- # Services Two --------------------------------------------------------------*/ .services-two { position: relative; display: block; padding: 120px 0 0; } .services-two__wrap { position: relative; display: block; max-width: 1370px; width: 100%; margin: 0 auto; padding: 120px 0 120px; background-color: var(--treck-primary); overflow: hidden; z-index: 1; } .services-two__shape-1 { position: absolute; bottom: -50px; left: 0; right: -100px; height: 200px; background-repeat: no-repeat; background-position: center; background-size: cover; z-index: -1; } .services-two__inner { position: relative; display: block; } .services-two__carousel { position: relative; display: block; } .services-two__single { position: relative; display: block; box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.05); } .services-two__single-inner { position: relative; display: block; overflow: hidden; background-color: rgb(255, 255, 255); z-index: 1; } .services-two__content { position: relative; display: block; padding: 32px 40px 44px; } .services-two__title { font-size: 20px; font-weight: 600; line-height: 30px; margin-bottom: 2px; } .services-two__title a { color: var(--treck-black); } .services-two__img-box { position: relative; display: block; } .services-two__icon { position: absolute; top: -30px; right: 20px; background-color: var(--treck-base); height: 90px; width: 90px; display: flex; align-items: center; justify-content: center; z-index: 1; } .services-two__icon:before { content: ""; position: absolute; top: 0; left: -20px; border-bottom: 30px solid #d1062f; border-left: 20px solid transparent; } .services-two__icon span { position: relative; display: inline-block; font-size: 63px; color: var(--treck-white); } .services-two__img { position: relative; display: block; } .services-two__img img { width: 100%; } .services-two__hover-content-box { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-position: center top; transition-delay: .1s; transition-timing-function: ease-in-out; transition-duration: .5s; transition-property: all; transform-origin: top; transform-style: preserve-3d; transform: scaleY(0); z-index: 2; } .services-two__single:hover .services-two__hover-content-box { transform: scaleY(1.0); } .services-two__hover-bg { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-repeat: no-repeat; background-position: center; background-size: cover; z-index: -1; } .services-two__hover-bg:before { background-image: -moz-linear-gradient(90deg, rgb(22, 23, 26) 0%, rgba(22, 23, 26, 0) 100%); background-image: -webkit-linear-gradient(90deg, rgb(22, 23, 26) 0%, rgba(22, 23, 26, 0) 100%); background-image: -ms-linear-gradient(90deg, rgb(22, 23, 26) 0%, rgba(22, 23, 26, 0) 100%); position: absolute; left: 0; right: 0; bottom: 0; top: 0; content: ""; } .services-two__hover-content { position: absolute; bottom: 38px; left: 40px; z-index: 2; } .services-two__hover-title { font-size: 20px; font-weight: 600; line-height: 30px; margin-bottom: 4px; } .services-two__hover-title a { color: var(--treck-white); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .services-two__hover-title a:hover { color: var(--treck-base); } .services-two__hover-text { color: var(--treck-white); line-height: 26px; } .services-two__hover-icon { position: absolute; top: 20px; right: 20px; background-color: var(--treck-base); height: 90px; width: 90px; display: flex; align-items: center; justify-content: center; z-index: 1; } .services-two__hover-icon span { position: relative; display: inline-block; font-size: 63px; color: var(--treck-white); -webkit-transition: all 500ms linear; transition: all 500ms linear; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } .services-two__hover-icon:hover span { transform: scale(.9); } .services-two__carousel.owl-carousel .owl-stage-outer { overflow: visible; } .services-two__carousel.owl-carousel .owl-item { opacity: 0; visibility: hidden; transition: opacity 500ms ease, visibility 500ms ease; } .services-two__carousel.owl-carousel .owl-item.active { opacity: 1; visibility: visible; } .services-two__carousel.owl-theme .owl-nav { position: relative; display: block; margin-top: 28px; } .services-two__carousel.owl-theme .owl-nav::before { content: ""; position: absolute; left: 0; bottom: 14px; width: 530px; height: 1px; background-color: #e1d9d6; } .services-two__carousel.owl-theme .owl-nav::after { content: ""; position: absolute; right: 0; bottom: 14px; width: 530px; height: 1px; background-color: #e1d9d6; } .services-two__carousel.owl-theme .owl-nav .owl-next { height: 27px; width: 26px; line-height: 26px; border-radius: 0; color: var(--treck-black); background-color: #ffffff; font-size: 15px; margin: 0; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .services-two__carousel.owl-theme .owl-nav .owl-prev { height: 27px; width: 26px; line-height: 26px; border-radius: 0; color: var(--treck-black); background-color: #ffffff; font-size: 15px; margin: 0; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .services-two__carousel.owl-theme .owl-nav .owl-next { margin-left: 2.50px; } .services-two__carousel.owl-theme .owl-nav .owl-prev { margin-right: 2.50px; } .services-two__carousel.owl-theme .owl-nav .owl-next span, .services-two__carousel.owl-theme .owl-nav .owl-prev span { position: relative; display: flex; align-items: center; justify-content: center; } .services-two__carousel.owl-theme .owl-nav .owl-next:hover, .services-two__carousel.owl-theme .owl-nav .owl-prev:hover { background-color: var(--treck-base); color: var(--treck-white); } /*-------------------------------------------------------------- # Process One --------------------------------------------------------------*/ .process-one { position: relative; display: block; counter-reset: count; background-image: -moz-linear-gradient(90deg, rgb(244, 239, 237) 0%, rgb(255, 255, 255) 50%); background-image: -webkit-linear-gradient(90deg, rgb(244, 239, 237) 0%, rgb(255, 255, 255) 50%); background-image: -ms-linear-gradient(90deg, rgb(244, 239, 237) 0%, rgb(255, 255, 255) 50%); padding: 120px 0 29px; z-index: 1; } .process-one__bg { position: absolute; bottom: 0; left: 0; right: 0; height: 485px; opacity: .04; background-repeat: no-repeat; background-size: cover; background-position: center; mix-blend-mode: luminosity; z-index: -1; } .process-one .section-title { margin-bottom: 85px; } .process-one__single { position: relative; display: flex; align-items: center; margin-bottom: 137px; } .process-one__icon-box { position: relative; display: block; max-width: 127px; z-index: 1; } .process-one__icon { position: relative; display: flex; align-items: center; justify-content: center; height: 127px; width: 127px; border-radius: 50%; background-color: rgb(255, 255, 255); box-shadow: 0px 0px 27px 0px rgba(0, 0, 0, 0.09); top: 5px; overflow: hidden; z-index: 1; } .process-one__icon:before { position: absolute; top: 0; bottom: 0; left: 0; right: 0; content: ""; background-color: var(--treck-base); border-radius: 50%; -webkit-transition-delay: .1s; transition-delay: .1s; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; -webkit-transition-duration: .4s; transition-duration: .4s; -webkit-transition-property: all; transition-property: all; opacity: 1; -webkit-transform-origin: top; transform-origin: top; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: scaleY(0); transform: scaleY(0); z-index: -1; } .process-one__single:hover .process-one__icon:before { opacity: 1; -webkit-transform: scaleY(1); transform: scaleY(1); } .process-one__icon span { position: relative; display: inline-block; font-size: 56px; color: var(--treck-base); -webkit-transition: all 500ms linear; transition: all 500ms linear; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } .process-one__single:hover .process-one__icon span { transform: scale(.9); color: var(--treck-white); } .process-one__shape-1 { position: absolute; left: 55px; top: -51px; z-index: -1; } .process-one__shape-1 img { width: auto; } .process-one__shape-2 { position: absolute; left: 47px; top: 62px; z-index: -1; } .process-one__shape-2 img { width: auto; } .process-one__shape-3 { position: absolute; right: -27px; bottom: -13px; z-index: -1; } .process-one__shape-3 img { width: auto; } .process-one__content { position: relative; display: block; margin-left: 30px; z-index: 2; } .process-one__title { font-size: 22px; font-weight: 600; line-height: 27px; margin-bottom: 16px; margin-top: 6px; } .process-one__title a { color: var(--treck-black); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .process-one__title a:hover { color: var(--treck-base); } .process-one__text { font-size: 14px; font-weight: 500; line-height: 26px; } .process-one__step { position: relative; display: inline-block; } .process-one__step p { font-size: 16px; font-weight: 600; color: var(--treck-base); } .process-one__count { position: absolute; top: -3px; left: 40px; } .process-one__count:before { position: absolute; top: -7px; left: 0; right: 0; font-size: 16px; line-height: 50px; font-weight: 600; counter-increment: count; content: "0"counter(count); transition: all 200ms linear; transition-delay: 0.1s; color: var(--treck-base); text-align: center; } /*-------------------------------------------------------------- # Testimonial Two --------------------------------------------------------------*/ .testimonial-two { position: relative; display: block; padding: 120px 0 120px; z-index: 1; } .testimonial-two__top { position: relative; display: block; } .testimonial-two__left { position: relative; display: block; } .testimonial-two__left .section-title__border-box { margin-left: 0; } .testimonial-two__right { position: relative; display: block; } .testimonial-two__right-text { margin-top: 32px; } .testimonial-two__single { position: relative; display: block; background-color: rgb(255, 255, 255); box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.07); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .testimonial-two__single:hover { background-color: rgb(255, 255, 255); box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.15); } .testimonial-two__inner { position: relative; display: block; padding: 40px 40px 31px; padding-left: 230px; overflow: hidden; z-index: 1; } .testimonial-two__img { position: absolute; top: 58px; left: 18px; width: 154px; z-index: 1; } .testimonial-two__img > img { width: 100%; border-radius: 50%; border: 2px solid var(--treck-white); box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.1); } .testimonial-two__shape-1 { position: absolute; top: -18px; left: -18px; right: -18px; z-index: -1; } .testimonial-two__shape-1 > img { width: auto !important; } .testimonial-two__client-details-and-quote { position: relative; display: flex; align-items: center; justify-content: space-between; padding-bottom: 22px; border-bottom: 2px solid var(--treck-bdr-color); margin-bottom: 31px; } .testimonial-two__client-details-and-quote::before { content: ""; position: absolute; left: 0; bottom: -9px; border-top: 7px solid var(--treck-bdr-color); border-left: 10px solid transparent; border-right: 10px solid transparent; } .testimonial-two__client-details { position: relative; display: block; } .testimonial-two__client-rate { position: relative; display: flex; align-items: center; } .testimonial-two__client-rate span { position: relative; display: inline-block; font-size: 13px; color: var(--treck-base); } .testimonial-two__client-rate span + span { margin-left: 4px; } .testimonial-two__client-name { font-size: 24px; font-weight: 600; line-height: 34px; margin-top: 1px; margin-bottom: 2px; } .testimonial-two__client-name a { color: var(--treck-black); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .testimonial-two__client-name a:hover { color: var(--treck-base); } .testimonial-two__quote { position: relative; display: inline-block; } .testimonial-two__quote span { position: relative; display: inline-block; font-size: 64px; color: var(--treck-primary); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .testimonial-two__single:hover .testimonial-two__quote span { color: var(--treck-base); } .testimonial-two__carousel.owl-carousel .owl-stage-outer { overflow: visible; } .testimonial-two__carousel.owl-carousel .owl-item { opacity: 0; visibility: hidden; transition: opacity 500ms ease, visibility 500ms ease; } .testimonial-two__carousel.owl-carousel .owl-item.active { opacity: 1; visibility: visible; } /*-------------------------------------------------------------- # Awards One --------------------------------------------------------------*/ .awards-one { position: relative; display: block; background-color: var(--treck-black); padding: 120px 0 50px; overflow: hidden; z-index: 1; } .awards-one__shape-2 { position: absolute; left: 0; top: -125px; opacity: .40; mix-blend-mode: multiply; z-index: -1; } .awards-one__shape-2 img { width: auto; } .awards-one__shape-3 { position: absolute; left: 0; bottom: 0; z-index: -1; } .awards-one__shape-3 img { width: auto; } .awards-one__shape-4 { position: absolute; left: 226px; top: 0; z-index: -1; } .awards-one__shape-4 img { width: auto; } .awards-one__shape-5 { position: absolute; left: 0; bottom: -84px; z-index: -1; } .awards-one__shape-5 img { width: auto; } .awards-one__shape-6 { position: absolute; right: 0; top: -40px; opacity: .10; z-index: -1; } .awards-one__shape-6 img { width: auto; } .awards-one__left { position: relative; display: block; } .awards-one__left .section-title__border-box { margin-left: 0; } .awards-one__left .section-title { margin-bottom: 32px; } .awards-one__left .section-title__tagline { color: #68696c; } .awards-one__left .section-title__title { color: var(--treck-white); } .awards-one__left .section-title__border-box:before { background-color: var(--treck-black); } .awards-one__left .section-title__border-box:after { background-color: var(--treck-black); } .awards-one__text-and-points-box { position: relative; display: flex; align-items: center; } .awards-one__text { position: relative; max-width: 256px; width: 100%; color: #68696c; } .awards-one__text span { font-weight: 600; color: var(--treck-base); } .awards-one__points { position: relative; display: block; margin-left: 37px; top: 4px; } .awards-one__points li { position: relative; display: flex; align-items: center; } .awards-one__points li .icon { position: relative; display: inline-block; top: 2px; } .awards-one__points li .icon span { position: relative; display: inline-block; font-size: 20px; color: var(--treck-base); } .awards-one__points li .text { margin-left: 10px; } .awards-one__points li .text p { color: var(--treck-white); } .awards-one__right { position: relative; display: block; margin-left: 80px; z-index: 1; } .awards-one__shape-7 { position: absolute; right: -30px; top: -60px; z-index: -1; } .awards-one__shape-7 img { width: auto; } .awards-one__right .row { --bs-gutter-x: 20px; } .awards-one__single { position: relative; display: block; background-color: #111214; text-align: center; padding: 28px 20px 58px; margin-bottom: 70px; } .awards-one__single::before { content: ""; position: absolute; bottom: 0; left: 0; right: 0; border-bottom: 20px solid var(--treck-black); border-left: 75px solid transparent; border-right: 75px solid transparent; } .awards-one__year { font-size: 12px; font-weight: 500; line-height: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: #68696c; } .awards-one__img { position: relative; display: block; margin-bottom: 16px; margin-top: 17px; margin-left: auto; margin-right: auto; width: 110px; } .awards-one__img img { width: 100%; } .awards-one__title { font-size: 16px; font-weight: 600; line-height: 19px; } .awards-one__title a { color: var(--treck-white); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .awards-one__title a:hover { color: var(--treck-base); } .awards-one__shape-1 { position: absolute; bottom: -40px; left: 50%; transform: translateX(-50%); } .awards-one__shape-1 img { width: auto; } /*-------------------------------------------------------------- # Blog Two --------------------------------------------------------------*/ .blog-two { position: relative; display: block; padding: 120px 0 90px; z-index: 1; } .blog-two__single { position: relative; display: block; margin-bottom: 30px; } .blog-two__img-box { position: relative; display: block; } .blog-two__img { position: relative; display: block; overflow: hidden; } .blog-two__img::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: -moz-linear-gradient(90deg, rgb(18, 19, 21) 0%, rgba(18, 19, 21, 0) 100%); background-image: -webkit-linear-gradient(90deg, rgb(18, 19, 21) 0%, rgba(18, 19, 21, 0) 100%); background-image: -ms-linear-gradient(90deg, rgb(18, 19, 21) 0%, rgba(18, 19, 21, 0) 100%); z-index: 1; } .blog-two__img img { width: 100%; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .blog-two__single:hover .blog-two__img img { transform: scale(1.05); } .blog-two__date { position: absolute; top: 30px; right: 30px; background-color: var(--treck-base); padding: 13px 15px 8px; z-index: 2; } .blog-two__date p { font-size: 20px; font-weight: 600; line-height: 20px; color: var(--treck-white); } .blog-two__date p span { font-size: 12px; font-weight: 500; line-height: 12px; letter-spacing: 0.1em; text-transform: uppercase; position: relative; top: -6px; } .blog-two__content { position: absolute; bottom: 11px; left: 40px; right: 40px; z-index: 2; } .blog-two__tag { position: relative; display: inline-block; background-color: rgba(var(--treck-white-rgb), .10); padding: 4px 20px 6px; } .blog-two__tag p { font-size: 12px; font-weight: 500; line-height: 22px; color: var(--treck-white); } .blog-two__title { font-size: 20px; line-height: 30px; font-weight: 600; margin-top: 12px; padding-bottom: 27px; margin-bottom: 9px; border-bottom: 1px solid rgba(var(--treck-white-rgb), .10); } .blog-two__title a { color: var(--treck-white); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .blog-two__title a:hover { color: var(--treck-base); } .blog-two__comment-and-arrow { position: relative; display: flex; align-items: center; justify-content: space-between; } .blog-two__comment { position: relative; display: block; } .blog-two__comment p { font-size: 14px; font-weight: 500; line-height: 14px; color: var(--treck-white); } .blog-two__comment p span { font-size: 14px; color: var(--treck-base); margin-right: 4px; } .blog-two__arrow { position: relative; display: block; } .blog-two__arrow a { font-size: 25px; color: var(--treck-white); top: 4px; position: relative; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .blog-two__arrow a:hover { color: var(--treck-base); } .blog-two__single-two { position: relative; display: block; margin-bottom: 30px; } .blog-two__single-list { position: relative; display: block; } .blog-two__single-list li { position: relative; display: block; } .blog-two__single-list li + li { margin-top: 30px; } .blog-two__content-two { position: relative; display: block; padding: 30px 40px 11px; background-color: rgb(255, 255, 255); box-shadow: 0px 0px 43px 0px rgba(0, 0, 0, 0.09); } .blog-two__tag-and-user-two { position: relative; display: flex; align-items: center; } .blog-two__tag-two { position: relative; display: block; background-color: var(--treck-primary); padding: 4px 20px 6px; } .blog-two__tag-two p { font-size: 12px; font-weight: 500; line-height: 22px; } .blog-two__user-two { position: relative; display: flex; align-items: center; margin-left: 10px; } .blog-two__user-two .img { position: relative; display: block; width: 29px; } .blog-two__user-two .img img { width: 100%; border-radius: 50%; } .blog-two__user-two .text { margin-left: 10px; } .blog-two__user-two .text p { font-size: 14px; font-weight: 500; line-height: 14px; } .blog-two__title-two { font-size: 20px; line-height: 30px; font-weight: 600; margin-top: 12px; padding-bottom: 27px; margin-bottom: 9px; border-bottom: 1px solid var(--treck-bdr-color); } .blog-two__title-two a { color: var(--treck-black); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .blog-two__title-two a:hover { color: var(--treck-base); } .blog-two__comment-and-arrow-two { position: relative; display: flex; align-items: center; justify-content: space-between; } .blog-two__comment-two { position: relative; display: block; } .blog-two__comment-two p { font-size: 14px; font-weight: 500; line-height: 14px; } .blog-two__comment-two p span { font-size: 14px; color: var(--treck-base); margin-right: 4px; } .blog-two__arrow-two { position: relative; display: block; } .blog-two__arrow-two a { font-size: 25px; color: var(--treck-black); top: 4px; position: relative; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .blog-two__arrow-two a:hover { color: var(--treck-base); } /*-------------------------------------------------------------- # Contact Two --------------------------------------------------------------*/ .contact-two { position: relative; display: block; background-image: -moz-linear-gradient(90deg, rgb(255, 255, 255) 60%, rgb(242, 237, 235) 100%); background-image: -webkit-linear-gradient(90deg, rgb(255, 255, 255) 60%, rgb(242, 237, 235) 100%); background-image: -ms-linear-gradient(90deg, rgb(255, 255, 255) 60%, rgb(242, 237, 235) 100%); overflow: hidden; padding: 120px 0 60px; z-index: 1; } .contact-two__bg { position: absolute; left: 0; right: 0; top: 0; height: 708px; opacity: .05; mix-blend-mode: luminosity; background-repeat: no-repeat; background-size: cover; background-position: center; z-index: -1; } .contact-two .section-title__border-box:before { background-color: #f8f5f4; } .contact-two .section-title__border-box:after { background-color: #f8f5f4; } .contact-two__inner { position: relative; display: block; padding: 20px 20px 20px; background-color: rgb(226, 9, 53); box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.05); } .contact-two__left { position: relative; display: block; } .contact-two__form-box { position: relative; display: block; padding: 60px 60px 60px; background-color: rgb(255, 255, 255); box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1); } .contact-two__form .row { --bs-gutter-x: 10px; } .contact-two__form-input-box { position: relative; display: block; margin-bottom: 10px; } .contact-two__form-input-box input[type="text"], .contact-two__form-input-box input[type="email"] { height: 52px; width: 100%; border: none; background-color: var(--treck-primary); padding-left: 30px; padding-right: 30px; outline: none; font-size: 14px; color: var(--treck-gray); display: block; font-weight: 500; } .contact-two__form-input-box textarea { font-size: 14px; color: var(--treck-gray); height: 122px; width: 100%; background-color: var(--treck-primary); padding: 15px 30px 30px; border: none; outline: none; margin-bottom: 0px; font-weight: 500; } .contact-two__form-input-box.text-message-box { height: 122px; } .contact-two__form-btn { border: none; font-size: 14px; font-weight: 600; background-color: var(--treck-black); padding: 12px 50px 10px; } .contact-two__form-btn:before { background-color: var(--treck-base); } .contact-two__form-input-box .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) { position: relative; display: block; max-width: 100%; width: 100% !important; } .contact-two__form-input-box .bootstrap-select > .dropdown-toggle::after { display: none; } .contact-two__form-input-box .bootstrap-select > .dropdown-toggle { position: relative; background-color: var(--treck-primary) !important; border-radius: 0; color: var(--treck-gray) !important; font-size: 14px; font-weight: 500; height: 52px; line-height: 52px; padding-left: 30px; padding-right: 30px; padding-top: 0; padding-bottom: 0; width: 100%; outline: none !important; border: 0; box-shadow: none !important; background-repeat: no-repeat; background-size: 14px 12px; background-position: right 25.75px center; } .contact-two__form-input-box .bootstrap-select > .dropdown-toggle:before { position: absolute; top: 0; bottom: 0; right: 25px; font-family: "Font Awesome 5 Free"; content: "\f107"; font-weight: 900; font-size: 15px; color: var(--treck-gray); } .contact-two__right { position: relative; display: block; margin-left: -10px; } .contact-two__address-box { position: relative; display: block; background-color: var(--treck-base); } .contact-two__address-top { position: relative; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; background-color: var(--treck-black); padding-left: 40px; padding-right: 30px; padding-top: 19px; padding-bottom: 19px; z-index: 2; } .contact-two__address-top:before { content: ""; position: absolute; bottom: -10px; left: 40px; border-top: 10px solid var(--treck-black); border-left: 10px solid transparent; border-right: 10px solid transparent; z-index: 2; } .contact-two__address-top-title { position: relative; display: block; } .contact-two__address-top-title h3 { font-size: 20px; font-weight: 600; line-height: 30px; color: var(--treck-white); } .contact-two__address-top-icon { position: relative; display: flex; align-items: center; } .contact-two__address-top-icon span { position: relative; display: inline-block; font-size: 65px; color: var(--treck-base); } .contact-two__address-faq { position: relative; display: block; margin-top: 10px; } .contact-two__address-faq .faq-one-accrodion .accrodion { position: relative; display: block; -webkit-transition: all 500ms ease; transition: all 500ms ease; border-bottom: 1px solid rgba(var(--treck-white-rgb), .20) } .contact-two__address-faq .faq-one-accrodion .accrodion.last-child { border-bottom: 0; } .contact-two__address-faq .faq-one-accrodion .accrodion-title { position: relative; display: block; cursor: pointer; padding: 13px 40px 13px; transition: all 200ms linear; transition-delay: 0.1s; } .contact-two__address-faq .faq-one-accrodion .accrodion-title h4 { margin: 0; font-size: 16px; font-weight: 600; line-height: 26px; color: var(--treck-white); position: relative; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .contact-two__address-faq .faq-one-accrodion .accrodion.active .accrodion-title h4 { color: var(--treck-white); } .contact-two__address-faq .faq-one-accrodion .accrodion-title h4::before { content: "\e907"; font-family: 'icomoon' !important; font-weight: 900; font-size: 11px; color: var(--treck-black); position: absolute; top: 50%; right: -5px; height: 20px; width: 20px; border-radius: 50%; text-align: center; display: flex; justify-content: center; align-items: center; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .contact-two__address-faq .faq-one-accrodion .accrodion.active .accrodion-title h4::before { content: "\e905"; color: var(--treck-white); height: 20px; width: 20px; border-radius: 50%; text-align: center; display: flex; justify-content: center; align-items: center; } .contact-two__address-faq .faq-one-accrodion .accrodion-content { position: relative; padding: 0px 40px 23px; margin-top: -8px; } .contact-two__address-list { position: relative; display: block; } .contact-two__address-list li { position: relative; display: flex; } .contact-two__address-list li:nth-child(1) { margin-bottom: 13px; } .contact-two__address-list li:nth-child(2) { margin-bottom: 7px; } .contact-two__address-list li .icon { position: relative; display: inline-block; } .contact-two__address-list li .icon i { position: relative; display: inline-block; font-size: 15px; color: var(--treck-white); } .contact-two__address-list li .text { margin-left: 20px; } .contact-two__address-list li .text p { font-size: 15px; font-weight: 500; line-height: 26px; color: #fcc9d3; } .contact-two__address-list li .text p a { color: #fcc9d3; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .contact-two__address-list li .text p a:hover { color: var(--treck-white); } /*-------------------------------------------------------------- # Brand Two --------------------------------------------------------------*/ .brand-two { position: relative; display: block; padding: 66px 0 60px; z-index: 1; } .brand-two__title { color: var(--treck-gray); font-size: 12px; font-weight: 500; position: absolute; top: 0; right: 0; left: 0; max-width: 1170px; width: 100%; text-align: center; margin: 0 auto; margin-top: -2px; text-transform: uppercase; letter-spacing: 0.1em; } .brand-two__title:before { position: absolute; top: 7px; left: 0; content: ""; height: 1px; background-color: #e5dddb; max-width: 464px; width: 100%; transform: translateY(-50%); } .brand-two__title:after { position: absolute; top: 7px; right: 0; content: ""; height: 1px; background-color: #e5dddb; max-width: 464px; width: 100%; transform: translateY(-50%); } .brand-two .swiper-slide { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .brand-two .swiper-slide img { -webkit-transition: 500ms; transition: 500ms; opacity: 0.25; max-width: 100%; } .brand-two .swiper-slide img:hover { opacity: 0.60; } /*-------------------------------------------------------------- # Gallery Three --------------------------------------------------------------*/ .gallery-one { position: relative; display: block; padding-bottom: 60px; z-index: 1; } .gallery-one .container { max-width: 1620px; } .gallery-one__single { position: relative; display: block; } .gallery-one__img { position: relative; display: block; overflow: hidden; z-index: 1; } .gallery-one__img:before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(var(--treck-base-rgb), .90); visibility: hidden; -webkit-transform-origin: bottom center; transform-origin: bottom center; -webkit-transform: scaleY(0) translateZ(100px); transform: scaleY(0) translateZ(100px); -webkit-transition: opacity 500ms ease, visibility 500ms ease, -webkit-transform 700ms ease; transition: opacity 500ms ease, visibility 500ms ease, -webkit-transform 700ms ease; transition: opacity 500ms ease, visibility 500ms ease, transform 700ms ease; transition: opacity 500ms ease, visibility 500ms ease, transform 700ms ease, -webkit-transform 700ms ease; z-index: 1; } .gallery-one__single:hover .gallery-one__img:before { visibility: visible; -webkit-transform: scaleY(1) translateZ(0px); transform: scaleY(1) translateZ(0px); } .gallery-one__img img { width: 100%; transform: scale(1); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .gallery-one__single:hover .gallery-one__img img { transform: scale(1.05); } .gallery-one__icon { position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: center; z-index: 2; } .gallery-one__icon a { font-size: 20px; color: var(--treck-white); position: relative; display: flex; align-items: center; justify-content: center; transform: scale(0); transition: all 500ms ease; } .gallery-one__single:hover .gallery-one__icon a { transform: scale(1); transition-delay: 300ms; } /*-------------------------------------------------------------- # Feature Two --------------------------------------------------------------*/ .feature-two { position: relative; display: block; z-index: 1; } .feature-two__shape-3 { position: absolute; top: -45px; right: 0; opacity: .80; z-index: -1; } .feature-two__shape-3 img { width: auto; } .feature-two__wrap { position: relative; display: block; max-width: 1290px; width: 100%; margin: 0 auto; padding: 60px 0px 30px; background-image: -moz-linear-gradient(90deg, rgb(242, 237, 235) 25%, rgb(255, 255, 255) 100%); background-image: -webkit-linear-gradient(90deg, rgb(242, 237, 235) 25%, rgb(255, 255, 255) 100%); background-image: -ms-linear-gradient(90deg, rgb(242, 237, 235) 25%, rgb(255, 255, 255) 100%); } .feature-two__single { position: relative; display: block; background-color: rgb(255, 255, 255); box-shadow: 0px 0px 54px 0px rgba(0, 0, 0, 0.07); margin-bottom: 30px; } .feature-two__single-inner { position: relative; display: block; overflow: hidden; padding-top: 38px; padding-bottom: 49px; padding-left: 138px; z-index: 1; } .feature-two__shape-1 { position: absolute; left: -78px; top: -10px; border-radius: 50%; background-color: rgb(242, 237, 235); width: 191px; height: 192px; z-index: 1; } .feature-two__shape-2 { position: absolute; left: -7px; top: 0; border-radius: 50%; background-image: -moz-linear-gradient(0deg, rgb(242, 237, 235) 25%, rgb(255, 255, 255) 100%); background-image: -webkit-linear-gradient(0deg, rgb(242, 237, 235) 25%, rgb(255, 255, 255) 100%); background-image: -ms-linear-gradient(0deg, rgb(242, 237, 235) 25%, rgb(255, 255, 255) 100%); width: 191px; height: 192px; z-index: 1; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .feature-two__shape-2:before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: var(--treck-base); border-radius: 50%; opacity: 0; -webkit-transition: all 500ms ease; transition: all 500ms ease; z-index: -1; } .feature-two__single:hover .feature-two__shape-2:before { opacity: 1; } .feature-two__icon { position: absolute; top: 51%; right: 22px; transform: translateY(-50%); } .feature-two__icon span { position: relative; display: inline-block; font-size: 65px; color: var(--treck-base); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .feature-two__single:hover .feature-two__icon span { color: var(--treck-white); } .feature-two__content-box { position: relative; display: block; } .feature-two__sub-title { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; } .feature-two__title { font-size: 20px; font-weight: 600; line-height: 25px; margin-top: 3px; } .feature-two__title a { color: var(--treck-black); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .feature-two__title a:hover { color: var(--treck-base); } /*-------------------------------------------------------------- # About Three --------------------------------------------------------------*/ .about-three { position: relative; display: block; padding: 120px 0 120px; z-index: 2; } .about-thre__shape-1 { position: absolute; bottom: 90px; left: 0; z-index: -1; } .about-thre__shape-1 img { width: auto; } .about-three__left { position: relative; display: block; margin-left: 170px; margin-right: 10px; } .about-three__img-box { position: relative; display: block; } .about-three__img { position: relative; display: block; } .about-three__img img { width: 100%; } .about-three__img-two { position: absolute; top: 39px; left: -175px; z-index: -1; } .about-three__img-three { position: absolute; bottom: -95px; left: -75px; } .about-three__right { position: relative; display: block; margin-left: 30px; margin-top: -2px; } .about-three__top { position: relative; display: flex; align-items: center; } .about-three__icon { position: relative; display: flex; align-items: center; } .about-three__icon span { position: relative; display: inline-block; font-size: 63px; color: var(--treck-black); } .about-three__content { margin-left: 17px; } .about-three__content h4 { font-size: 24px; color: var(--treck-base); font-weight: 500; line-height: 30px; } .about-three__text-1 { padding-top: 34px; padding-bottom: 30px; } .about-three__points { position: relative; display: block; margin-top: 32px; margin-bottom: 41px; } .about-three__points li { position: relative; display: flex; align-items: center; } .about-three__points li .icon { position: relative; display: flex; align-items: center; } .about-three__points li .icon span { font-size: 21px; color: var(--treck-base); } .about-three__points li .text { margin-left: 6px; } .about-three__points li .text p { font-size: 16px; color: var(--treck-black); font-weight: 600; } /*-------------------------------------------------------------- # Services Three --------------------------------------------------------------*/ .services-three { position: relative; display: block; background-color: var(--treck-primary); padding: 120px 0 77px; z-index: 1; } .services-three__bg-one { position: absolute; bottom: 0; left: 0; right: 0; height: 485px; background-repeat: no-repeat; background-size: cover; background-position: bottom center; mix-blend-mode: luminosity; opacity: 0.05; z-index: 1; } .services-three__bg-two { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-repeat: no-repeat; background-size: cover; background-position: center; mix-blend-mode: multiply; opacity: 0.35; z-index: -1; } .services-three__top { position: relative; display: block; margin-bottom: 50px; } .services-three__top-left { position: relative; display: block; } .services-three__top-left .section-title { margin-bottom: 0; } .services-three__top-left .section-title__border-box { margin-left: 0; } .services-three__top-right { position: relative; display: block; margin-top: 34px; } .services-three__bottom { position: relative; display: block; } .services-three__single { position: relative; display: block; margin-bottom: 43px; } .services-three__img-box { position: relative; display: block; height: 191px; width: 191px; border-radius: 50%; margin: 0 auto; z-index: 2; } .services-three__icon { position: absolute; bottom: 0; right: 0; height: 63px; width: 63px; background-color: var(--treck-base); border-radius: 50%; display: flex; align-items: center; justify-content: center; -webkit-transition: all 500ms ease; transition: all 500ms ease; z-index: 2; } .services-three__icon span { position: relative; display: inline-block; font-size: 32px; color: var(--treck-white); } .services-three__single:hover .services-three__icon { opacity: 0; } .services-three__img { position: relative; display: block; overflow: hidden; height: 191px; width: 191px; border-radius: 50%; z-index: 1; } .services-three__img:before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(var(--treck-base-rgb), .80); border-radius: 50%; transform: scale(0.5); opacity: 0; -webkit-transition: all 0.4s linear; -o-transition: all 0.4s linear; transition: all 0.4s linear; z-index: 1; } .services-three__single:hover .services-three__img:before { transform: scale(1.0); opacity: 1; } .services-three__icon-two { position: absolute; top: 50%; left: 50%; height: 63px; width: 63px; background-color: var(--treck-white); border-radius: 50%; display: flex; align-items: center; justify-content: center; transform: translateX(-50%) translateY(-50%) scale(0); -webkit-transition: all 500ms ease; transition: all 500ms ease; z-index: 2; } .services-three__single:hover .services-three__icon-two { transform: translateX(-50%) translateY(-50%) scale(1); transition-delay: 500ms; } .services-three__icon-two span { position: relative; display: inline-block; font-size: 32px; color: var(--treck-black); } .services-three__img img { width: 100%; border: 6px solid var(--treck-white); border-radius: 50%; } .services-three__content { position: relative; display: block; background-color: var(--treck-white); border: 1px solid var(--treck-bdr-color); text-align: center; padding: 116px 38px 28px; margin-top: -90px; z-index: 1; } .services-three__content:before { content: ""; position: absolute; top: -1px; bottom: -13px; left: -1px; right: -1px; border: 1px solid var(--treck-bdr-color); background-color: var(--treck-white); box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.07); opacity: 0; visibility: hidden; -webkit-transition: all 500ms ease; transition: all 500ms ease; z-index: -1; } .services-three__single:hover .services-three__content:before { opacity: 1; visibility: visible; } .services-three__title-box { position: relative; display: block; border-bottom: 1px solid var(--treck-bdr-color); padding-bottom: 13px; margin-bottom: 21px; } .services-three__title-box:before { content: ""; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); border-top: 6px solid var(--treck-bdr-color); border-left: 8px solid transparent; border-right: 8px solid transparent; } .services-three__title { font-size: 20px; font-weight: 600; line-height: 30px; } .services-three__title a { color: var(--treck-black); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .services-three__title a:hover { color: var(--treck-base); } .services-three__text { font-size: 15px; font-weight: 500; } .services-three__arrow { position: relative; display: block; } .services-three__arrow a { position: relative; display: flex; align-items: center; justify-content: center; height: 30px; width: 30px; background-color: transparent; border-radius: 50%; color: var(--treck-black); font-size: 14px; margin: 11px auto 0; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .services-three__single:hover .services-three__arrow a { background-color: var(--treck-base); color: var(--treck-white); } /*-------------------------------------------------------------- # Countries Three --------------------------------------------------------------*/ .countries-three { position: relative; display: block; padding: 120px 0px 0px; overflow: hidden; z-index: 1; } .countries-three__shape-1 { position: absolute; top: -43px; left: 0; opacity: .80; z-index: -1; } .countries-three__shape-1 img { width: auto; } .countries-three__shape-2 { position: absolute; bottom: 60px; right: 362px; z-index: -1; } .countries-three__shape-2 img { width: auto; } .countries-three .section-title { margin-bottom: 83px; } .countries-three__top { position: relative; display: block; margin-bottom: 42px; } .countries-three__main-tab-box { position: relative; display: block; background-image: -moz-linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(242, 237, 235) 100%); background-image: -webkit-linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(242, 237, 235) 100%); background-image: -ms-linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(242, 237, 235) 100%); max-width: 710px; width: 100%; margin: 0 auto; padding: 130px 0 18px; border-top-left-radius: 358px; border-top-right-radius: 358px; z-index: 1; } .countries-three__main-tab-box .tab-buttons { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 30; } .countries-three__main-tab-box .tab-buttons .tab-btn { position: absolute; z-index: 2; } .countries-three__main-tab-box .tab-buttons .tab-btn:nth-child(1) { left: -25px; bottom: 39px; } .countries-three__main-tab-box .tab-buttons .tab-btn:nth-child(2) { bottom: 153px; left: 17px; } .countries-three__main-tab-box .tab-buttons .tab-btn:nth-child(3) { top: 25px; left: 135px; } .countries-three__main-tab-box .tab-buttons .tab-btn:nth-child(4) { top: -32px; left: 50%; transform: translateX(-50%); } .countries-three__main-tab-box .tab-buttons .tab-btn:nth-child(5) { right: 134px; top: 24px; } .countries-three__main-tab-box .tab-buttons .tab-btn:nth-child(6) { bottom: 154px; right: 23px; } .countries-three__main-tab-box .tab-buttons .tab-btn:nth-child(7) { right: -23px; bottom: 39px; } .countries-three__main-tab-box .tab-buttons .tab-btn .img-box { position: relative; display: block; height: 66px; width: 66px; border-radius: 50%; border: 1px solid var(--treck-bdr-color); padding: 6px; cursor: pointer; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .countries-three__main-tab-box .tab-buttons .tab-btn .img-box img { width: 100%; border-radius: 50%; } .countries-three__main-tab-box .tab-buttons .tab-btn.active-btn .img-box { border: 1px solid var(--treck-base); } .countries-three__main-tab-box .tabs-content { position: relative; display: block; max-width: 315px; margin: 0 auto; z-index: 100; } .countries-three__main-tab-box .tabs-content .tab { position: relative; display: none; -webkit-transform: translateY(35px); -ms-transform: translateY(35px); transform: translateY(35px); -webkit-transition: all 600ms ease; -moz-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; transition: all 600ms ease; z-index: 10; } .countries-three__main-tab-box .tabs-content .tab.active-tab { display: block; margin-top: 0px; -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } .countries-three__main-content-box { position: relative; display: block; text-align: center; } .countries-three__title-box { position: relative; display: inline-block; } .countries-three__title-box:before { content: ""; position: absolute; bottom: -24px; left: -35px; right: -35px; height: 1px; background-color: var(--treck-bdr-color); } .countries-three__title-box:after { content: ""; position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%); border-top: 6px solid var(--treck-bdr-color); border-left: 8px solid transparent; border-right: 8px solid transparent; } .countries-three__title { font-size: 24px; font-weight: 600; color: var(--treck-black); line-height: 34px; } .countries-three__text { padding-top: 43px; padding-bottom: 21px; } .countries-three__arrow { position: relative; display: flex; align-items: center; justify-content: center; } .countries-three__arrow a { position: relative; display: flex; align-items: center; justify-content: center; height: 50px; width: 50px; font-size: 26px; color: var(--treck-black); background-color: rgb(255, 255, 255); box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.07); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .countries-three__arrow a:hover { background-color: var(--treck-base); color: var(--treck-white); } .countries-three__bottom { position: relative; display: flex; align-items: center; justify-content: space-between; background-color: var(--treck-base); padding-left: 110px; padding-right: 30px; padding-top: 30px; padding-bottom: 30px; z-index: 1; } .countries-three__bottom-shape { position: absolute; top: 0; left: 0; bottom: 0; opacity: .20; z-index: -1; } .countries-three__bottom-shape img { width: auto; } .countries-three__bottom-content { position: relative; display: block; } .countries-three__bottom-text { font-size: 18px; color: #fcc9d3; line-height: 24px; } .countries-three__bottom-text a { font-weight: 600; color: var(--treck-white); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .countries-three__bottom-text a:hover { color: var(--treck-black); } .countries-three__btn-box { position: relative; display: block; } .countries-three__btn { padding: 4px 30px 4px; font-size: 12px; background-color: var(--treck-black); } .countries-three__btn:hover { color: var(--treck-base); } .countries-three__btn:before { background-color: var(--treck-white); } /*-------------------------------------------------------------- # Benefits One --------------------------------------------------------------*/ .benefits-one { position: relative; display: block; padding: 120px 0 120px; z-index: 1; } .benefits-one__shape-1 { position: absolute; top: 0; right: 0; opacity: .10; z-index: -1; } .benefits-one__shape-1 img { width: auto; } .benefits-one__left { position: relative; display: block; margin-left: -60px; margin-right: 330px; } .benefits-one__img-box { position: relative; display: block; } .benefits-one__img-one { position: relative; display: block; } .benefits-one__img-one img { width: 100%; } .benefits-one__img-two { position: absolute; top: 120px; right: -330px; } .benefits-one__img-two img { width: auto; } .benefits-one__solution { position: absolute; bottom: -80px; right: -70px; background-color: var(--treck-base); padding: 30px 30px 30px; z-index: 1; } .benefits-one__solution-icon { position: relative; display: block; margin-bottom: 3px; } .benefits-one__solution-icon span { position: relative; display: inline-block; font-size: 33px; color: var(--treck-white); } .benefits-one__solution-title { font-size: 20px; color: var(--treck-white); font-weight: 600; line-height: 25px; } .benefits-one__right { position: relative; display: block; margin-left: 70px; } .benefits-one__right .section-title { margin-bottom: 31px; } .benefits-one__right .section-title__border-box { margin-left: 0; } .benefits-one__points { position: relative; display: block; margin-top: 41px; } .benefits-one__points li { position: relative; display: flex; align-items: center; border: 1px solid var(--treck-bdr-color); padding: 23.5px 30px 23.5px; } .benefits-one__points li + li { margin-top: 10px; } .benefits-one__points li .icon { position: relative; display: flex; align-items: center; } .benefits-one__points li .icon span { position: relative; display: inline-block; font-size: 65px; color: var(--treck-base); -webkit-transition: all 500ms linear; transition: all 500ms linear; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } .benefits-one__points li:hover .icon span { transform: scale(.9); } .benefits-one__points li .content { position: relative; display: block; margin-left: 30px; padding-left: 30px; } .benefits-one__points li .content:before { content: ""; position: absolute; top: -10px; bottom: -9px; left: 0; width: 1px; background-color: var(--treck-bdr-color); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .benefits-one__points li:hover .content:before { background-color: var(--treck-base); } .benefits-one__points li .content:after { content: ""; position: absolute; top: 50%; left: 0; border-left: 6px solid var(--treck-bdr-color); border-top: 8px solid transparent; border-bottom: 8px solid transparent; transform: translateY(-50%); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .benefits-one__points li:hover .content:after { border-left: 6px solid var(--treck-base); } .benefits-one__points li .content h4 { font-size: 20px; font-weight: 600; } /*-------------------------------------------------------------- # Coaching Three --------------------------------------------------------------*/ .coaching-three { position: relative; display: block; background-color: var(--treck-black); padding: 120px 0 119px; z-index: 1; } .coaching-three__bg { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-repeat: no-repeat; background-position: center; background-size: cover; mix-blend-mode: luminosity; opacity: 0.08; z-index: -1; } .coaching-three .section-title__border-box:before { background-color: #232427; } .coaching-three .section-title__border-box:after { background-color: #232427; } .coaching-three .section-title__title { color: var(--treck-white); } .coaching-three__carousel { position: relative; display: block; } .coaching-three__single { position: relative; display: block; } .coaching-three__img { position: relative; display: block; overflow: hidden; z-index: 1; } .coaching-three__img img { width: 100%; } .coaching-three__img-content { position: absolute; bottom: 20px; left: 20px; right: 20px; background-color: var(--treck-base); text-align: center; padding: 9px 0; transition: all 500ms ease; z-index: 2; } .coaching-three__img-content p { font-size: 12px; color: var(--treck-white); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; line-height: 12px; } .coaching-three__single:hover .coaching-three__img-content { opacity: 0; } .coaching-three__hover { position: absolute; top: 20px; left: 20px; right: 20px; bottom: 20px; background-color: rgba(var(--treck-base-rgb), .90); display: flex; align-items: center; justify-content: center; transform: scaleY(0); transform-origin: center; transform-style: preserve-3d; transition: all 0.5s cubic-bezier(0.62, 0.21, 0.45, 1.52); z-index: 2; } .coaching-three__hover p { font-size: 12px; color: var(--treck-white); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; line-height: 12px; } .coaching-three__single:hover .coaching-three__hover { transform: scaleY(1); } .coaching-three__arrow { position: absolute; bottom: 0; right: 0; z-index: 2; } .coaching-three__arrow a { position: relative; display: flex; align-items: center; justify-content: center; height: 50px; width: 50px; background-color: var(--treck-black); font-size: 22px; color: var(--treck-white); transition: all 500ms ease; } .coaching-three__arrow a:hover { color: var(--treck-base); background-color: var(--treck-white); } .coaching-three__content { position: relative; display: block; background-color: rgb(255, 255, 255); box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.07); text-align: center; padding: 22px 40px 31px; z-index: 1; } .coaching-three__title-box { position: relative; display: block; border-bottom: 1px solid var(--treck-bdr-color); padding-bottom: 13px; margin-bottom: 21px; } .coaching-three__title-box:before { content: ""; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); border-top: 6px solid var(--treck-bdr-color); border-left: 8px solid transparent; border-right: 8px solid transparent; } .coaching-three__title { font-size: 20px; font-weight: 600; line-height: 30px; } .coaching-three__title a { color: var(--treck-black); transition: all 500ms ease; } .coaching-three__title a:hover { color: var(--treck-base); } .coaching-three__carousel.owl-carousel .owl-stage-outer { overflow: visible; } .coaching-three__carousel.owl-carousel .owl-item { opacity: 0; visibility: hidden; transition: opacity 500ms ease, visibility 500ms ease; } .coaching-three__carousel.owl-carousel .owl-item.active { opacity: 1; visibility: visible; } .coaching-three__carousel.owl-theme .owl-nav { position: relative; display: block; margin-top: 28px; } .coaching-three__carousel.owl-theme .owl-nav::before { content: ""; position: absolute; left: 0; bottom: 14px; width: 530px; height: 1px; background-color: rgba(var(--treck-white-rgb), .10); } .coaching-three__carousel.owl-theme .owl-nav::after { content: ""; position: absolute; right: 0; bottom: 14px; width: 530px; height: 1px; background-color: rgba(var(--treck-white-rgb), .10); } .coaching-three__carousel.owl-theme .owl-nav .owl-next { height: 27px; width: 26px; line-height: 26px; border-radius: 0; color: var(--treck-black); background-color: #ffffff; font-size: 15px; margin: 0; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .coaching-three__carousel.owl-theme .owl-nav .owl-prev { height: 27px; width: 26px; line-height: 26px; border-radius: 0; color: var(--treck-black); background-color: #ffffff; font-size: 15px; margin: 0; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .coaching-three__carousel.owl-theme .owl-nav .owl-next { margin-left: 2.50px; } .coaching-three__carousel.owl-theme .owl-nav .owl-prev { margin-right: 2.50px; } .coaching-three__carousel.owl-theme .owl-nav .owl-next span, .coaching-three__carousel.owl-theme .owl-nav .owl-prev span { position: relative; display: flex; align-items: center; justify-content: center; } .coaching-three__carousel.owl-theme .owl-nav .owl-next:hover, .coaching-three__carousel.owl-theme .owl-nav .owl-prev:hover { background-color: var(--treck-base); color: var(--treck-white); } /*-------------------------------------------------------------- # Testimonial Three --------------------------------------------------------------*/ .testimonial-three { position: relative; display: block; z-index: 1; } .testimonial-three__map { position: absolute; top: 58px; left: 0; opacity: .10; z-index: 2; } .testimonial-three__map img { width: auto; } .testimonial-three__shape-1 { position: absolute; bottom: 0; left: 0; mix-blend-mode: multiply; opacity: .10; z-index: -1; } .testimonial-three__shape-1 img { width: auto; } .testimonial-three__shape-2 { position: absolute; top: 120px; right: -120px; z-index: 2; } .testimonial-three__shape-2 img { width: auto; } .testimonial-three__left { position: relative; display: block; margin-left: -120px; margin-right: 90px; z-index: 1; } .testimonial-three__left:before { content: ""; position: absolute; top: 0; left: -375px; right: -120px; bottom: 0; background-image: -moz-linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(242, 237, 235) 100%); background-image: -webkit-linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(242, 237, 235) 100%); background-image: -ms-linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(242, 237, 235) 100%); z-index: -1; } .testimonial-three__slider { position: relative; display: block; background-color: var(--treck-white); padding-left: 120px; padding-right: 100px; padding-top: 80px; padding-bottom: 114px; } .testimonial-three__thumb-outer-box { position: relative; display: block; max-width: 260px; width: 100%; margin-left: 0; margin-right: auto; padding-top: 40px; padding-bottom: 53px; } .testimonial-three__thumb-carousel { position: relative; width: 100%; margin: 0 auto; } .testimonial-three__thumb-carousel.owl-carousel .owl-stage-outer { overflow: visible; } .testimonial-three__thumb-carousel .owl-item { position: relative; opacity: 1; } .testimonial-three__thumb-item { position: relative; display: block; } .testimonial-three__img-holder-box { position: relative; display: block; border-radius: 50%; } .testimonial-three__img-holder { position: relative; display: block; border-radius: 50%; transition: all 500ms ease; transform: scale(.85); cursor: pointer; -webkit-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; -moz-transition: all 300ms ease; transition: all 300ms ease; z-index: 1; } .testimonial-three__img-holder > img { border-radius: 50%; border: 5px solid var(--treck-white); box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.1); transition: all 0.5s ease-in-out; } .testimonial-three__thumb-outer-box .owl-item.current .testimonial-three__img-holder > img { border: 5px solid var(--treck-base); } .testimonial-three__thumb-outer-box .owl-item.current .testimonial-three__img-holder { transform: scale(1); } .testimonial-three__quote { position: absolute; bottom: 0; right: 0; height: 30px; width: 30px; background-color: var(--treck-base); border-radius: 50%; display: flex; align-items: center; justify-content: center; -webkit-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; -moz-transition: all 300ms ease; transition: all 300ms ease; opacity: 0; z-index: 2; } .testimonial-three__quote img { width: auto !important; } .testimonial-three__thumb-outer-box .owl-item.current .testimonial-three__quote { opacity: 1; } .testimonial-three__main-content { position: relative; display: block; } .testimonial-three__carousel { position: relative; display: block; } .testimonial-three__item { position: relative; display: block; } .testimonial-three__inner-content { position: relative; display: block; } .testimonial-three__rating { position: relative; display: flex; align-items: center; } .testimonial-three__rating i { font-size: 15px; color: var(--treck-base); } .testimonial-three__rating i + i { margin-left: 4px; } .testimonial-three__text { font-size: 20px; line-height: 38px; padding-top: 18px; margin-bottom: 23px; } .testimonial-three__client-info { position: relative; display: block; margin-left: 63px; } .testimonial-three__client-info:before { content: ""; position: absolute; top: 15px; left: -63px; height: 2px; width: 53px; background-image: -moz-linear-gradient(0deg, rgb(226, 9, 53) 0%, rgb(22, 23, 26) 100%); background-image: -webkit-linear-gradient(0deg, rgb(226, 9, 53) 0%, rgb(22, 23, 26) 100%); background-image: -ms-linear-gradient(0deg, rgb(226, 9, 53) 0%, rgb(22, 23, 26) 100%); } .testimonial-three__client-name { font-size: 20px; font-weight: 600; line-height: 30px; margin-bottom: 5px; } .testimonial-three__client-sub-title { font-size: 12px; font-weight: 500; color: var(--treck-base); text-transform: uppercase; letter-spacing: 0.1em; line-height: 20px; } .testimonial-three__carousel.owl-theme .owl-nav { position: absolute; bottom: -96px; left: 0; display: flex; align-items: center; z-index: 100; } .testimonial-three__carousel .owl-nav .owl-next, .testimonial-three__carousel .owl-nav .owl-prev { position: relative; top: auto; left: auto; right: auto; bottom: auto; width: 55px; height: 55px; display: flex; justify-content: center; align-items: center; font-size: 15px !important; color: var(--treck-black) !important; background-color: var(--treck-primary) !important; border-radius: 0; margin: 0; text-align: center; opacity: 1; transition: all 500ms ease; z-index: 100; } .testimonial-three__carousel.owl-theme .owl-nav .owl-next { margin-left: 5px; } .testimonial-three__carousel.owl-theme .owl-nav .owl-prev { margin-right: 5px; } .testimonial-three__carousel.owl-theme .owl-nav .owl-next span, .testimonial-three__carousel.owl-theme .owl-nav .owl-prev span { position: relative; display: flex; align-items: center; justify-content: center; } .testimonial-three__carousel.owl-theme .owl-nav .owl-next:hover, .testimonial-three__carousel.owl-theme .owl-nav .owl-prev:hover { background-color: var(--treck-base) !important; color: var(--treck-white) !important; } .testimonial-three__right { position: relative; display: block; background-color: var(--treck-base); padding: 120px 0 120px; z-index: 1; } .testimonial-three__right:before { content: ""; position: absolute; top: 0; bottom: 0; right: -1000000px; left: 0; background-color: var(--treck-base); z-index: -1; } .testimonial-three__counter-box { position: relative; display: block; padding-left: 120px; } .testimonial-three__counter-box li { position: relative; display: block; } .testimonial-three__counter-box li + li { margin-top: 20px; } .testimonial-three__counter-single { position: relative; display: flex; align-items: center; padding: 25px 0 25px; border-right: 1px solid #fffefe; z-index: 1; } .testimonial-three__counter-single:before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background-image: -moz-linear-gradient(180deg, rgb(255, 254, 254) 0%, rgb(226, 9, 53) 100%); background-image: -webkit-linear-gradient(180deg, rgb(255, 254, 254) 0%, rgb(226, 9, 53) 100%); background-image: -ms-linear-gradient(180deg, rgb(255, 254, 254) 0%, rgb(226, 9, 53) 100%); } .testimonial-three__counter-single:after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background-image: -moz-linear-gradient(180deg, rgb(255, 254, 254) 0%, rgb(226, 9, 53) 100%); background-image: -webkit-linear-gradient(180deg, rgb(255, 254, 254) 0%, rgb(226, 9, 53) 100%); background-image: -ms-linear-gradient(180deg, rgb(255, 254, 254) 0%, rgb(226, 9, 53) 100%); } .testimonial-three__counter-icon { position: relative; display: flex; align-items: center; } .testimonial-three__counter-icon span { position: relative; display: inline-block; font-size: 63px; color: var(--treck-white); -webkit-transition: all 500ms linear; transition: all 500ms linear; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } .testimonial-three__counter-box li:hover .testimonial-three__counter-icon span { transform: scale(.9); } .testimonial-three__counter-content-box { position: relative; display: block; margin-left: 34px; padding-left: 34px; } .testimonial-three__counter-content-box:before { content: ""; position: absolute; top: 5px; bottom: 5px; left: 0; width: 2px; background-color: rgba(var(--treck-white-rgb), .20); } .testimonial-three__counter-content-box:after { content: ""; position: absolute; top: 50%; left: 2px; border-left: 5px solid rgba(var(--treck-white-rgb), .20); border-top: 5px solid transparent; border-bottom: 5px solid transparent; transform: translateY(-50%); } .testimonial-three__counter-count-box { position: relative; display: flex; align-items: center; margin-bottom: 5px; } .testimonial-three__counter-count-box h3 { font-size: 36px; font-weight: 600; line-height: 36px; color: var(--treck-white); } .testimonial-three__counter-plus { font-size: 36px; font-weight: 600; line-height: 36px; color: var(--treck-white); } .testimonial-three__counter-content-box p { font-size: 16px; font-weight: 500; color: var(--treck-white); } /*-------------------------------------------------------------- # Blog Three --------------------------------------------------------------*/ .blog-three { position: relative; display: block; padding: 120px 0 90px; z-index: 1; } /*-------------------------------------------------------------- # Contact Three --------------------------------------------------------------*/ .contact-three { position: relative; display: block; background-image: -moz-linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(242, 237, 235) 100%); background-image: -webkit-linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(242, 237, 235) 100%); background-image: -ms-linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(242, 237, 235) 100%); padding: 120px 0 120px; z-index: 1; } .contact-three__bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-repeat: no-repeat; background-position: center; background-size: cover; mix-blend-mode: luminosity; opacity: 0.05; z-index: -1; } .contact-three__left { position: relative; display: block; } .contact-three__left .section-title { margin-bottom: 40px; } .contact-three__left .section-title__border-box { margin-left: 0; } .contact-three__main-tab-box .tab-buttons { position: relative; display: block; } .contact-three__main-tab-box .tab-buttons .tab-btn { position: relative; display: inline-block; } .contact-three__main-tab-box .tab-buttons .tab-btn + .tab-btn { margin-left: 5px; } .contact-three__main-tab-box .tab-buttons .tab-btn span { position: relative; display: block; text-align: center; transition: all 200ms linear; transition-delay: 0.1s; font-size: 18px; line-height: 18px; color: var(--treck-black); background-color: var(--treck-bdr-color); padding: 16px 40px 16px; font-weight: 600; letter-spacing: 0; cursor: pointer; transition: all 0.3s ease; z-index: 1; } .contact-three__main-tab-box .tab-buttons .tab-btn.active-btn span { color: var(--treck-white); } .contact-three__main-tab-box .tab-buttons .tab-btn span:before { position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 0%; content: ""; background-color: var(--treck-base); transition: all 0.3s ease; z-index: -1; } .contact-three__main-tab-box .tab-buttons .tab-btn.active-btn span:before { height: 100%; } .contact-three__main-tab-box .tab-buttons .tab-btn span:after { content: ""; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); border-top: 6px solid var(--treck-base); border-left: 10px solid transparent; border-right: 10px solid transparent; opacity: 0; transition: all 0.3s ease; } .contact-three__main-tab-box .tab-buttons .tab-btn.active-btn span:after { opacity: 1; } .contact-three__main-tab-box .tabs-content { position: relative; display: block; } .contact-three__main-tab-box .tabs-content .tab { position: relative; display: none; -webkit-transform: translateY(35px); -ms-transform: translateY(35px); transform: translateY(35px); -webkit-transition: all 600ms ease; -moz-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; transition: all 600ms ease; z-index: 10; } .contact-three__main-tab-box .tabs-content .tab.active-tab { display: block; margin-top: 0px; -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } .contact-three__tab-content-inner { position: relative; display: block; margin-top: 31px; } .contact-three__tab-content-text { padding-bottom: 21px; } .contact-three__contact-details { position: relative; display: flex; align-items: center; flex-wrap: wrap; } .contact-three__contact-details-img { position: relative; display: block; width: 199px; border-radius: 50%; z-index: 1; } .contact-three__contact-details-img img { width: 100%; border-radius: 50%; } .contact-three__contact-list { position: relative; display: block; margin-left: 30px; } .contact-three__contact-list li { position: relative; display: flex; align-items: center; } .contact-three__contact-list li:first-child { padding-bottom: 7px; } .contact-three__contact-list li + li { margin-top: 10px; } .contact-three__contact-list li .icon { position: relative; display: flex; align-items: center; justify-content: center; height: 40px; width: 40px; border-radius: 50%; background-color: rgb(255, 255, 255); box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.1); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .contact-three__contact-list li:hover .icon { background-color: var(--treck-base); } .contact-three__contact-list li .icon i { position: relative; display: inline-block; font-size: 16px; color: var(--treck-base); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .contact-three__contact-list li:hover .icon i { color: var(--treck-white); } .contact-three__contact-list li .text { margin-left: 20px; } .contact-three__contact-list li .text p { font-size: 18px; font-weight: 500; line-height: 26px; } .contact-three__contact-list li .text p a { color: var(--treck-gray); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .contact-three__contact-list li .text p a:hover { color: var(--treck-base); } .contact-three__right { position: relative; display: block; } .contact-three__form-box { position: relative; display: block; background-color: rgb(255, 255, 255); box-shadow: 0px 0px 70px 0px rgba(0, 0, 0, 0.1); } .contact-three__form-top { position: relative; display: block; background-color: var(--treck-base); padding: 28px 60px 30px; } .contact-three__form-top:before { content: ""; position: absolute; bottom: -10px; left: 60px; border-top: 10px solid var(--treck-base); border-left: 25px solid transparent; border-right: 25px solid transparent; } .contact-three__form-top p { font-size: 24px; font-weight: 600; line-height: 24px; color: var(--treck-white); } .contact-three__form { position: relative; display: block; padding: 60px; } .contact-three__form .row { --bs-gutter-x: 10px; } .contact-three__form-input-box { position: relative; display: block; margin-bottom: 10px; } .contact-three__form-input-box input[type="text"], .contact-three__form-input-box input[type="email"] { height: 52px; width: 100%; border: none; background-color: var(--treck-primary); padding-left: 30px; padding-right: 30px; outline: none; font-size: 14px; color: var(--treck-gray); display: block; font-weight: 500; } .contact-three__form-input-box textarea { font-size: 14px; color: var(--treck-gray); height: 122px; width: 100%; background-color: var(--treck-primary); padding: 15px 30px 30px; border: none; outline: none; margin-bottom: 0px; font-weight: 500; } .contact-three__form-input-box.text-message-box { height: 122px; } .contact-three__form-btn { border: none; font-size: 14px; font-weight: 600; background-color: var(--treck-black); padding: 12px 50px 10px; } .contact-three__form-btn:before { background-color: var(--treck-base); } .contact-three__form-input-box .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) { position: relative; display: block; max-width: 100%; width: 100% !important; } .contact-three__form-input-box .bootstrap-select > .dropdown-toggle::after { display: none; } .contact-three__form-input-box .bootstrap-select > .dropdown-toggle { position: relative; background-color: var(--treck-primary) !important; border-radius: 0; color: var(--treck-gray) !important; font-size: 14px; font-weight: 500; height: 52px; line-height: 52px; padding-left: 30px; padding-right: 30px; padding-top: 0; padding-bottom: 0; width: 100%; outline: none !important; border: 0; box-shadow: none !important; background-repeat: no-repeat; background-size: 14px 12px; background-position: right 25.75px center; } .contact-three__form-input-box .bootstrap-select > .dropdown-toggle:before { position: absolute; top: 0; bottom: 0; right: 25px; font-family: "Font Awesome 5 Free"; content: "\f107"; font-weight: 900; font-size: 15px; color: var(--treck-gray); } /*-------------------------------------------------------------- # Page Header --------------------------------------------------------------*/ .page-header { position: relative; display: block; background-color: var(--treck-black); z-index: 1; } .page-header .container { max-width: 1480px; } .page-header-bg { position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: .50; background-repeat: no-repeat; background-position: center; background-size: cover; z-index: -1; } .page-header__inner { position: relative; display: block; text-align: center; padding: 190px 0 171px; z-index: 15; } .page-header__inner h2 { font-size: 40px; color: var(--treck-white); line-height: 50px; font-weight: 600; } .thm-breadcrumb { position: absolute; left: 0; bottom: 33px; z-index: 2; } .thm-breadcrumb li { position: relative; display: inline-block; font-size: 14px; font-weight: 500; color: #9fa0a3; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .thm-breadcrumb li + li { margin-left: 6px; } .thm-breadcrumb li a { position: relative; display: inline-block; font-size: 14px; font-weight: 500; color: #9fa0a3; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .thm-breadcrumb li:hover a { color: var(--treck-white); opacity: 1; } .thm-breadcrumb li.active { color: var(--treck-white); opacity: 1; } .thm-breadcrumb li span { font-size: 14px; color: var(--treck-white); } /*-------------------------------------------------------------- # Blog Page --------------------------------------------------------------*/ .blog-page { position: relative; display: block; padding: 120px 0 90px; } /*-------------------------------------------------------------- # Blog Sidebar --------------------------------------------------------------*/ .blog-sidebar { position: relative; display: block; } .blog-sidebar__left { position: relative; display: block; padding: 120px 0 120px; } .blog-sidebar__content-box { position: relative; display: block; } .blog-sidebar__single { position: relative; display: block; } .blog-sidebar__single + .blog-sidebar__single { margin-top: 30px; } .blog-sidebar__img { position: relative; display: block; } .blog-sidebar__img img { width: 100%; } .blog-sidebar__date { position: absolute; left: 30px; bottom: 0; background-color: var(--treck-base); padding: 9px 15px 5px; z-index: 2; } .blog-sidebar__date::before { content: ""; position: absolute; bottom: 0; left: -30px; border-top: 25px solid transparent; border-bottom: 25px solid #d1062f; border-left: 15px solid transparent; border-right: 15px solid #d1062f; } .blog-sidebar__date p { font-size: 30px; font-weight: 600; line-height: 30px; color: var(--treck-white); } .blog-sidebar__date p span { font-size: 16px; position: relative; left: -3px; } .blog-sidebar__content { position: relative; display: block; margin-top: 21px; } .blog-sidebar__meta { position: relative; display: flex; align-items: center; } .blog-sidebar__meta li + li { margin-left: 12px; } .blog-sidebar__meta li a { font-size: 14px; color: var(--treck-gray); font-weight: 500; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .blog-sidebar__meta li a:hover { color: var(--treck-base); } .blog-sidebar__meta li a i { color: var(--treck-base); padding-right: 7px; } .blog-sidebar__title { font-size: 28px; font-weight: 600; line-height: 38px; margin-top: 4px; } .blog-sidebar__title a { color: var(--treck-black); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .blog-sidebar__title a:hover { color: var(--treck-base); } .blog-sidebar__text { padding-top: 13px; padding-bottom: 21px; } .blog-sidebar__btn { position: relative; display: block; } .blog-sidebar__btn a { position: relative; display: inline-block; font-size: 14px; font-weight: 500; color: var(--treck-gray); border: 1px solid var(--treck-bdr-color); padding: 10px 30px 10px; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .blog-sidebar__btn a:hover { background-color: var(--treck-base); color: var(--treck-white); border: 1px solid var(--treck-base); } .blog-sidebar__bottom-box { position: relative; display: block; background-color: var(--treck-primary); padding: 60px 60px 51px; margin-top: 30px; overflow: hidden; z-index: 1; } .blog-sidebar__bottom-box-icon { margin-bottom: 21px; } .blog-sidebar__provide-services { position: relative; display: block; background-color: var(--treck-primary); padding: 60px 60px 60px; margin-top: 30px; margin-bottom: 30px; overflow: hidden; z-index: 1; } .blog-sidebar__provide-services-icon { margin-bottom: 24px; } .blog-sidebar__provide-services-title { font-size: 30px; line-height: 35px; font-weight: 600; } .blog-sidebar__provide-services-title a { color: var(--treck-black); transition: all 500ms ease; } .blog-sidebar__provide-services-title a:hover { color: var(--treck-base); } .blog-sidebar__col { display: flex; } .blog-sidebar__right { position: relative; display: flex; flex: 1; width: 100%; } @media (min-width: 992px) { .blog-sidebar__right { margin-left: 20px; } } .sidebar { position: relative; display: block; width: 100%; flex: 1; } @media (min-width: 992px) { .sidebar { padding-top: 120px; padding-left: 50px; background-image: -moz-linear-gradient(0deg, rgb(242, 237, 235) 0%, rgb(255, 255, 255) 10%); background-image: -webkit-linear-gradient(0deg, rgb(242, 237, 235) 0%, rgb(255, 255, 255) 10%); background-image: -ms-linear-gradient(0deg, rgb(242, 237, 235) 0%, rgb(255, 255, 255) 10%); } } .sidebar__search { position: relative; display: block; } .sidebar__search-form { position: relative; } .sidebar__search-form input[type="search"] { display: block; border: 1px solid var(--treck-bdr-color); outline: none; background-color: var(--treck-white); color: var(--treck-gray); font-size: 16px; padding-left: 30px; height: 64px; width: 100%; padding-right: 50px; } .sidebar__search-form ::-webkit-input-placeholder { color: var(--treck-gray); opacity: 1; } .sidebar__search-form :-ms-input-placeholder { color: var(--treck-gray); opacity: 1; } .sidebar__search-form ::-ms-input-placeholder { color: var(--treck-gray); opacity: 1; } .sidebar__search-form ::placeholder { color: var(--treck-gray); opacity: 1; } .sidebar__search-form :-ms-input-placeholder { color: var(--treck-gray); } .sidebar__search-form ::-ms-input-placeholder { color: var(--treck-gray); } .sidebar__search-form button[type="submit"] { background-color: transparent; color: var(--treck-gray); font-size: 22px; position: absolute; top: 0; right: 0; bottom: 0; width: 42px; outline: none; border: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0; } .sidebar__post { position: relative; display: block; margin-top: 42px; margin-bottom: 37px; z-index: 1; } .sidebar__title { font-size: 20px; font-weight: 600; line-height: 30px; margin-bottom: 17px; } .sidebar__post-list { margin: 0; } .sidebar__post-list li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transition: all 500ms ease; transition: all 500ms ease; border-bottom: 1px solid var(--treck-bdr-color); padding-bottom: 15px; margin-bottom: 14px; } .sidebar__post-list li:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; } .sidebar__post-image { margin-right: 20px; } .sidebar__post-image > img { width: 70px; } .sidebar__post-content { position: relative; top: -1px; } .sidebar__post-content h3 { font-size: 16px; margin: 0; line-height: 26px; font-weight: 600; margin-bottom: 9px; } .sidebar__post-content h3 a { color: var(--treck-black); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .sidebar__post-content h3 a:hover { color: var(--treck-base); } .sidebar__post-content-meta { position: relative; display: block; font-size: 13px; line-height: 23px; color: var(--treck-gray); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .sidebar__post-content-meta i { color: var(--treck-base); font-size: 14px; padding-right: 4px; } .sidebar__category { position: relative; display: block; } .sidebar__category .sidebar__title { margin-bottom: 7px; } .sidebar__category-list { position: relative; display: block; } .sidebar__category-list li { position: relative; display: block; } .sidebar__category-list li a { position: relative; display: block; font-size: 16px; color: var(--treck-gray); border-bottom: 1px solid var(--treck-bdr-color); padding-left: 15px; padding-top: 7px; padding-bottom: 10px; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .sidebar__category-list li a:hover { color: var(--treck-base); } .sidebar__category-list li a span { position: absolute; top: 16px; left: 0; font-size: 16px; color: var(--treck-gray); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .sidebar__category-list li a:hover span { color: var(--treck-base); } .sidebar__category-list li:last-child a { border-bottom: 0; } .sidebar__project { position: relative; display: block; margin-top: 24px; } .sidebar__project .sidebar__title { margin-bottom: 23px; } .sidebar__project-box { position: relative; display: block; min-height: 163px; z-index: 1; } .sidebar__project-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-repeat: no-repeat; background-position: center; background-size: cover; z-index: -1; } .sidebar__project-bg:before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgb(22, 23, 26); background: linear-gradient(0deg, rgba(22, 23, 26, 1) 5%, rgba(22, 23, 26, 0) 51%); } .sidebar__project-carousel { position: relative; display: block; } .sidebar__project-single { position: relative; display: block; min-height: 163px; } .sidebar__project-single p { color: var(--treck-white); font-weight: 600; position: absolute; bottom: 15px; left: 20px; } .sidebar__project-carousel.owl-carousel .owl-dots { position: absolute; bottom: 20px; right: 20px; text-align: center; margin: 0 !important; display: flex; align-items: center; } .sidebar__project-carousel.owl-carousel .owl-dots .owl-dot { position: relative; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background-color: rgba(var(--treck-white-rgb), .30); margin: 0px 2.5px; padding: 0px; transition: all 100ms linear; transition-delay: 0.1s; } .sidebar__project-carousel.owl-carousel .owl-dot.active { background-color: rgba(var(--treck-white-rgb), 1); } .sidebar__project-carousel.owl-carousel .owl-dot:focus { outline: none; } .sidebar__project-carousel.owl-carousel .owl-dots .owl-dot span { display: none; } .sidebar__tags { position: relative; display: block; margin-top: 42px; margin-bottom: 42px; z-index: 1; } .sidebar__tags .sidebar__title { margin-bottom: 23px; } .sidebar__tags-list { margin-top: -10px; margin-left: -7px; } .sidebar__tags-list a { font-size: 12px; color: var(--treck-gray); -webkit-transition: all 0.4s ease; transition: all 0.4s ease; background-color: rgb(255, 255, 255); box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.07); display: inline-block; padding: 4px 20px 4px; margin-left: 7px; font-weight: 600; } .sidebar__tags-list a + a { margin-left: 7px; margin-top: 10px; } .sidebar__tags-list a:hover { color: var(--treck-white); background: var(--treck-base); } .sidebar__comments { position: relative; display: block; z-index: 1; } .sidebar__comments .sidebar__title { margin-bottom: 23px; } .sidebar__comments-list { position: relative; display: block; } .sidebar__comments-list li { position: relative; display: block; padding-left: 65px; } .sidebar__comments-list li + li { margin-top: 28px; } .sidebar__comments-icon { height: 45px; width: 45px; background-color: var(--treck-white); box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.07); border-radius: 50%; font-size: 15px; color: var(--treck-black); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; top: 0; left: 0; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .sidebar__comments-list li:hover .sidebar__comments-icon { background-color: var(--treck-base); color: var(--treck-white); } .sidebar__comments-text-box p { font-size: 15px; font-weight: 500; margin: 0; line-height: 24px; } .sidebar__comments-text-box p span { color: var(--treck-black); } /*-------------------------------------------------------------- # Blog Details --------------------------------------------------------------*/ .blog-details { position: relative; display: block; } .blog-details__left { position: relative; display: block; padding: 120px 0 120px; } .blog-details__img-box { position: relative; display: block; } .blog-details__img-box img { width: 100%; } .blog-details__date { position: absolute; left: 30px; bottom: 0; background-color: var(--treck-base); padding: 9px 15px 5px; z-index: 2; } .blog-details__date::before { content: ""; position: absolute; bottom: 0; left: -30px; border-top: 25px solid transparent; border-bottom: 25px solid #d1062f; border-left: 15px solid transparent; border-right: 15px solid #d1062f; } .blog-details__date p { font-size: 30px; font-weight: 600; line-height: 30px; color: var(--treck-white); } .blog-details__date p span { font-size: 16px; position: relative; left: -3px; } .blog-details__content { position: relative; display: block; margin-top: 21px; } .blog-details__meta { position: relative; display: flex; align-items: center; } .blog-details__meta li + li { margin-left: 12px; } .blog-details__meta li a { font-size: 14px; color: var(--treck-gray); font-weight: 500; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .blog-details__meta li a:hover { color: var(--treck-base); } .blog-details__meta li a i { color: var(--treck-base); padding-right: 7px; } .blog-details__title { font-size: 28px; font-weight: 600; line-height: 38px; margin-top: 3px; margin-bottom: 13px; } .blog-details__text-2 { padding-top: 30px; } .blog-details__bottom { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 30px 0 30px; margin-top: 51px; border-top: 1px solid var(--treck-bdr-color); } .blog-details__bottom p { margin: 0; } .blog-details__tags span { color: var(--treck-black); font-size: 20px; margin-right: 6px; font-weight: 600; } .blog-details__tags a { position: relative; color: var(--treck-gray); font-size: 12px; background-color: var(--treck-white); box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.07); display: inline-block; padding: 4px 20px 4px; font-weight: 600; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .blog-details__tags a:hover { background-color: var(--treck-base); color: var(--treck-white); } .blog-details__tags a + a { margin-left: 7px; } .blog-details__social-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .blog-details__social-list a { position: relative; height: 43px; width: 43px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; color: var(--treck-black); font-size: 14px; border: 1px solid var(--treck-bdr-color); border-radius: 50%; overflow: hidden; -webkit-transition: all 500ms ease; transition: all 500ms ease; z-index: 1; } .blog-details__social-list a:hover { color: var(--treck-white); border: 1px solid var(--treck-base); } .blog-details__social-list a:after { position: absolute; content: ""; top: 0; left: 0; right: 0; height: 100%; background-color: var(--treck-base); -webkit-transition-delay: .1s; transition-delay: .1s; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; -webkit-transition-duration: .4s; transition-duration: .4s; -webkit-transition-property: all; transition-property: all; opacity: 1; -webkit-transform-origin: top; transform-origin: top; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: scalex(0); transform: scalex(0); z-index: -1; } .blog-details__social-list a:hover:after { opacity: 1; -webkit-transform: scalex(1); transform: scalex(1); } .blog-details__social-list a + a { margin-left: 10px; } .blog-details__pagenation { position: relative; display: flex; align-items: center; justify-content: space-between; background-color: var(--treck-primary); padding: 30px 30px 30px; margin-bottom: 53px; } .blog-details__pagenation-left { position: relative; display: flex; align-items: center; } .blog-details__pagenation-left:before { content: ""; position: absolute; top: 0; bottom: 0; right: -19px; width: 1px; background-color: var(--treck-bdr-color); } .blog-details__pagenation-left-img { position: relative; display: block; width: 90px; } .blog-details__pagenation-left-img img { width: 100%; } .blog-details__pagenation-left-content { margin-left: 20px; } .blog-details__pagenation-left-title { font-size: 16px; font-weight: 600; line-height: 26px; margin-bottom: 4px; } .blog-details__pagenation-left-title a { color: var(--treck-black); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .blog-details__pagenation-left-title a:hover { color: var(--treck-base); } .blog-details__pagenation-left-date { font-size: 13px; font-weight: 500; } .blog-details__pagenation-left-date i { font-size: 15px; color: var(--treck-base); padding-right: 4px; } .blog-details__pagenation-right { position: relative; display: flex; align-items: center; } .blog-details__pagenation-right-content { position: relative; display: block; text-align: right; } .blog-details__pagenation-right-title { font-size: 16px; font-weight: 600; line-height: 26px; margin-bottom: 4px; } .blog-details__pagenation-right-title a { color: var(--treck-black); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .blog-details__pagenation-right-title a:hover { color: var(--treck-base); } .blog-details__pagenation-right-date { font-size: 13px; font-weight: 500; } .blog-details__pagenation-right-date i { font-size: 15px; color: var(--treck-base); padding-right: 4px; } .blog-details__pagenation-right-img { position: relative; display: block; width: 90px; margin-left: 20px; } .blog-details__pagenation-right-img img { width: 100%; } /*-------------------------------------------------------------- ## Comments --------------------------------------------------------------*/ .comment-one__title, .comment-form__title { margin: 0; color: var(--treck-black); font-size: 30px; margin-bottom: 54px; font-weight: 600; } .comment-one__single { display: -webkit-box; display: -ms-flexbox; display: flex; align-items: center; border-bottom: 1px solid var(--treck-bdr-color); padding-bottom: 60px; margin-bottom: 60px; } .comment-one__content { position: relative; margin-left: 45px; } .comment-one__content h3 { margin: 0; font-size: 20px; color: var(--treck-black); margin-bottom: 24px; font-weight: 600; } .comment-one__btn { padding: 4px 20px 4px; position: absolute; top: -12px; right: 0; font-size: 12px; font-weight: 600; color: var(--treck-gray); background-color: var(--treck-primary); } .comment-one__image { position: relative; display: block; border-radius: 50%; } .comment-one__image img { border-radius: 50%; } .comment-form .comment-form__title { margin-top: -7px; } .comment-one__form .row { --bs-gutter-x: 20px; } .comment-form__input-box { position: relative; display: block; margin-bottom: 20px; background-color: var(--treck-primary); } .comment-form__input-box input[type="text"], .comment-form__input-box input[type="email"] { height: 52px; width: 100%; border: none; background-color: var(--treck-primary); padding-left: 30px; padding-right: 30px; outline: none; font-size: 14px; color: var(--treck-gray); display: block; font-weight: 500; } .comment-form__input-box textarea { font-size: 14px; color: var(--treck-gray); height: 190px; width: 100%; background-color: var(--treck-primary); padding: 25px 30px 30px; border: none; outline: none; margin-bottom: 0px; font-weight: 500; } .comment-form__btn { border: none; } .comment-form__input-box.text-message-box { height: 190px; } .blog-details__right { position: relative; display: block; margin-left: 20px; } /*-------------------------------------------------------------- # Team Page --------------------------------------------------------------*/ .team-page { position: relative; display: block; padding: 120px 0 90px; } /*-------------------------------------------------------------- # Team Details --------------------------------------------------------------*/ .team-details { position: relative; display: block; padding: 120px 0 0; z-index: 1; } .team-details__shape-1 { position: absolute; bottom: -204px; left: 105px; } .team-details__shape-1 img { width: auto; } .team-details__left { position: relative; display: block; margin-right: 20px; } .team-details__img { position: relative; display: block; } .team-details__img img { width: 100%; } .team-details__guarantee { position: absolute; bottom: 40px; left: -116px; padding: 20px; background-color: rgb(255, 255, 255); box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.07); } .team-details__guarantee-inner { position: relative; display: block; background-color: var(--treck-base); padding: 26px 30px 29px; } .team-details__guarantee-icon { position: relative; display: flex; align-items: center; margin-bottom: 8px; } .team-details__guarantee-icon span { position: relative; display: inline-block; font-size: 73px; color: var(--treck-white); } .team-details__guarantee-title { font-size: 24px; font-weight: 600; color: var(--treck-white); line-height: 29px; } .team-details__right { position: relative; display: block; margin-left: 70px; margin-top: -11px; } .team-details__name { font-size: 40px; font-weight: 600; line-height: 50px; } .team-details__sub-title { font-weight: 500; padding-top: 6px; padding-bottom: 21px; } .team-details__social { position: relative; display: flex; align-items: center; } .team-details__social a { position: relative; height: 40px; width: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; color: var(--treck-black); background-color: transparent; font-size: 15px; border-radius: 50%; border: 1px solid var(--treck-bdr-color); overflow: hidden; -webkit-transition: all 500ms ease; transition: all 500ms ease; z-index: 1; } .team-details__social a:hover { color: var(--treck-white); background-color: var(--treck-black); border: 1px solid var(--treck-black); } .team-details__social a:after { position: absolute; content: ""; top: 0; left: 0; right: 0; height: 100%; background-color: var(--treck-black); -webkit-transition-delay: .1s; transition-delay: .1s; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; -webkit-transition-duration: .4s; transition-duration: .4s; -webkit-transition-property: all; transition-property: all; opacity: 1; -webkit-transform-origin: top; transform-origin: top; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: scaleY(0); transform: scaleY(0); z-index: -1; } .team-details__social a:hover:after { opacity: 1; -webkit-transform: scaleY(1); transform: scaleY(1); } .team-details__social a + a { margin-left: 10px; } .team-details__text-1 { padding-top: 21px; padding-bottom: 33px; } .team-details__points-box { position: relative; display: block; } .team-details__points-title { font-size: 22px; font-weight: 600; color: var(--treck-base); line-height: 32px; margin-bottom: 35px; } .team-details__points { position: relative; display: block; } .team-details__points li { position: relative; display: flex; align-items: center; } .team-details__points li + li { margin-top: 7px; } .team-details__points li .icon { position: relative; display: flex; align-items: center; justify-content: center; height: 14px; width: 14px; background-color: var(--treck-base); border-radius: 50%; font-size: 7px; color: var(--treck-white); } .team-details__points li .text { margin-left: 10px; } .team-details__points li .text p { font-size: 16px; font-weight: 600; color: var(--treck-black); } /*-------------------------------------------------------------- # Team Details Experience --------------------------------------------------------------*/ .team-details-experience { position: relative; display: block; } .team-details-experience__inner { position: relative; display: block; border-top: 1px solid var(--treck-bdr-color); margin-top: 100px; padding-top: 92px; padding-bottom: 100px; } .team-details-experience-left { position: relative; display: block; margin-right: 80px; margin-top: 20px; } .team-details-experience-left-title { font-size: 36px; font-weight: 700; line-height: 46px; letter-spacing: -0.04em; } .team-details-experience-left-text { padding-top: 22px; } .team-details-experience-right { position: relative; display: block; margin-left: 70px; } .team-details__progress { position: relative; display: block; width: 100%; } .team-details__progress-single { position: relative; display: block; } .team-details__progress-title { font-size: 16px; font-weight: 600; line-height: 28px; color: var(--treck-black); margin-bottom: 3px; } .team-details__progress .bar { position: relative; width: 100%; height: 17px; border-style: solid; border-width: 1px; border-color: rgb(227, 219, 216); background-color: rgb(255, 255, 255); box-shadow: inset 0px 0px 7px 0px rgba(0, 0, 0, 0.15); border-radius: 0px; margin-bottom: 12px; } .team-details__progress .bar-inner { position: relative; display: block; width: 0px; height: 9px; border-radius: 0px; top: 3px; left: 3px; background-image: -moz-linear-gradient(0deg, rgb(22, 23, 26) 0%, rgb(226, 9, 53) 100%); background-image: -webkit-linear-gradient(0deg, rgb(22, 23, 26) 0%, rgb(226, 9, 53) 100%); background-image: -ms-linear-gradient(0deg, rgb(22, 23, 26) 0%, rgb(226, 9, 53) 100%); -webkit-transition: all 1500ms ease; transition: all 1500ms ease; } .team-details__progress .count-text { position: absolute; right: 0px; bottom: 18px; color: var(--treck-gray); line-height: 24px; font-size: 14px; text-align: center; opacity: 0; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .team-details__progress .bar-inner.counted .count-text { opacity: 1; } .team-details__progress .bar.marb-0 { margin-bottom: 0; } /*-------------------------------------------------------------- # Contact Four --------------------------------------------------------------*/ .contact-four { position: relative; display: block; background-color: var(--treck-primary); overflow: hidden; padding: 120px 0 120px; z-index: 1; } .contact-four__bg-1 { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-repeat: no-repeat; background-size: cover; background-position: center; mix-blend-mode: multiply; opacity: .35; z-index: -1; } .contact-four__bg-2 { position: absolute; bottom: 0; left: 0; right: 0; height: 485px; background-repeat: no-repeat; background-position: center; background-size: cover; mix-blend-mode: luminosity; opacity: 0.08; z-index: -1; } .contact-four .container { max-width: 800px; } .contact-four__form-box { position: relative; display: block; } .contact-four__form { position: relative; display: block; } .contact-four__form .row { --bs-gutter-x: 20px; } .contact-four__input-box { position: relative; display: block; margin-bottom: 20px; } .contact-four__input-box input[type="text"], .contact-four__input-box input[type="email"] { height: 52px; width: 100%; border: none; background-color: var(--treck-white); padding-left: 30px; padding-right: 30px; outline: none; font-size: 14px; font-weight: 500; color: var(--treck-gray); display: block; } .contact-four__input-box textarea { font-size: 14px; color: var(--treck-gray); font-weight: 500; height: 190px; width: 100%; background-color: var(--treck-white); padding: 20px 30px 30px; border: none; outline: none; margin-bottom: 0px; } .contact-four__btn-box { position: relative; display: block; margin: 0 auto; text-align: center; } .contact-four__btn { border: none; } .contact-four__input-box.text-message-box { height: 190px; } /*-------------------------------------------------------------- # Success Stories --------------------------------------------------------------*/ .success-stories { position: relative; display: block; padding: 120px 0 90px; } .success-stories .testimonial-two__single { margin-bottom: 30px; } /*-------------------------------------------------------------- # Story Details --------------------------------------------------------------*/ .story-details { position: relative; display: block; } .story-details__wrap { position: relative; display: block; max-width: 1410px; width: 100%; margin: 0 auto; padding: 107px 0 120px; background-image: -moz-linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(242, 237, 235) 100%); background-image: -webkit-linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(242, 237, 235) 100%); background-image: -ms-linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(242, 237, 235) 100%); } .story-details__inner { position: relative; display: block; } .story-details__content { position: relative; display: block; max-width: 615px; width: 100%; } .story-details__title { font-size: 50px; font-weight: 600; line-height: 60px; } .story-details__icon-and-rating { position: relative; display: flex; align-items: center; justify-content: space-between; padding-right: 50px; margin-top: 39px; } .story-details__icon { position: relative; display: flex; align-items: center; } .story-details__icon span { position: relative; display: inline-block; font-size: 65px; color: var(--treck-white); } .story-details__rating { position: relative; display: flex; align-items: center; } .story-details__rating i { font-size: 15px; color: var(--treck-base); } .story-details__rating i + i { margin-left: 4px; } .story-details__text-1 { font-size: 20px; line-height: 40px; } .story-details__text-2 { font-size: 20px; line-height: 40px; padding-top: 40px; padding-bottom: 30px; } .story-details__list { position: relative; display: block; } .story-details__list li { position: relative; display: block; font-size: 20px; font-weight: 400; } .story-details__list li + li { margin-top: 10px; } .story-details__list li span { font-weight: 600; color: var(--treck-base); } .story-details__client-name { position: relative; display: block; padding-left: 72px; margin-top: 15px; margin-bottom: 53px; } .story-details__client-name:before { content: ""; position: absolute; top: 14px; left: 0; width: 53px; height: 2px; background-image: -moz-linear-gradient(0deg, rgb(226, 9, 53) 0%, rgb(22, 23, 26) 100%); background-image: -webkit-linear-gradient(0deg, rgb(226, 9, 53) 0%, rgb(22, 23, 26) 100%); background-image: -ms-linear-gradient(0deg, rgb(226, 9, 53) 0%, rgb(22, 23, 26) 100%); } .story-details__client-name h3 { font-size: 20px; font-weight: 600; line-height: 30px; } .story-details__btn-box { position: relative; display: flex; align-items: center; } .story-details__btn-two { background-color: var(--treck-black); margin-left: 10px; } .story-details__btn-two::before { background-color: var(--treck-base); } .story-details__img-box { position: absolute; top: 107px; right: -35px; z-index: 1; } .story-details__img { position: relative; display: block; } .story-details__img img { width: auto; } .story-details__badge { position: absolute; top: -22px; left: 10px; } .story-details__badge img { width: auto; } .story-details__shape { position: absolute; top: -88px; right: 61px; z-index: -1; } .story-details__shape img { width: auto; } .story-details__flag { position: absolute; bottom: 53px; left: 187px; } .story-details__flag img { width: auto; } /*-------------------------------------------------------------- # Visa Offers --------------------------------------------------------------*/ .visa-offers { position: relative; display: block; padding: 120px 0 90px; } .visa-offers__single { position: relative; display: block; overflow: hidden; background-color: #e10835; padding: 40px 40px 40px; margin-bottom: 30px; z-index: 1; transition: transform 700ms ease; transform: translateY(0px); } .visa-offers__single:hover { transform: translateY(-10px); } .visa-offers__shape-1 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-repeat: no-repeat; background-position: center; background-size: cover; z-index: -1; } .visa-offers__shape-2 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-repeat: no-repeat; background-position: center; background-size: cover; mix-blend-mode: luminosity; opacity: .15; z-index: -1; } .visa-offers__img { position: absolute; bottom: 73px; right: 76px; height: 246px; width: 246px; border-radius: 50%; z-index: 1; } .visa-offers__img img { width: 100%; transform: scale(1); border-radius: 50%; transition: transform 700ms ease; } .visa-offers__img:hover img { transform: scale(.95); } .visa-offers__dot { position: absolute; bottom: 162px; left: 222px; z-index: -1; } .visa-offers__dot img { width: auto; } .visa-offers__plane { position: absolute; top: 40px; left: 273px; z-index: -1; } .visa-offers__plane img { width: auto; } .visa-offers__flag { position: absolute; top: 33px; right: 50px; height: 50px; width: 50px; border-radius: 50%; box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.07); } .visa-offers__flag img { width: 100%; border-radius: 50%; } .visa-offers__time { position: absolute; bottom: 14px; right: 20px; } .visa-offers__time p { font-size: 14px; color: var(--treck-white); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; line-height: 24px; } .visa-offers__sub-title-box { position: relative; display: inline-block; background-color: var(--treck-white); padding-top: 10px; padding-bottom: 8px; padding-left: 15px; padding-right: 25px; clip-path: polygon(100% 0, 92% 50%, 100% 100%, 0% 100%, 0 48%, 0% 0%); } .visa-offers__sub-title { font-size: 12px; line-height: 12px; color: var(--treck-base); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; } .visa-offers__title { font-size: 26px; font-weight: 600; line-height: 36px; margin-top: 12px; margin-bottom: 13px; } .visa-offers__title a { color: var(--treck-black); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .visa-offers__title a:hover { color: var(--treck-base); } .visa-offers__points { position: relative; display: block; } .visa-offers__points li { position: relative; display: flex; align-items: center; } .visa-offers__points li .icon { position: relative; display: flex; align-items: center; } .visa-offers__points li .icon span { font-size: 22px; color: var(--treck-gray); } .visa-offers__points li .text { margin-left: 14px; } .visa-offers__price-box { position: relative; display: block; margin-top: 105px; } .visa-offers__price-start { font-size: 14px; color: var(--treck-white); font-weight: 600; } .visa-offers__price { position: relative; display: inline-block; background-color: var(--treck-black); padding: 10px 20px 10px; margin-top: 4px; } .visa-offers__price p { font-size: 24px; font-weight: 600; color: var(--treck-white); line-height: 24px; } .visa-offers__single--2 { background-color: #3558c5; } .visa-offers__single--2 .visa-offers__sub-title { color: #063388; } .visa-offers__single--3 { background-color: #429fb9; } .visa-offers__single--3 .visa-offers__sub-title { color: #46a6d1; } .visa-offers__single--4 { background-color: #e49f14; } .visa-offers__single--4 .visa-offers__sub-title { color: #f3b903; } .visa-offers__single--5 { background-color: #d76c24; } .visa-offers__single--5 .visa-offers__sub-title { color: #f79034; } .visa-offers__single--6 { background-color: #37c46f; } .visa-offers__single--6 .visa-offers__sub-title { color: #079e3c; } /*-------------------------------------------------------------- # Countries Details --------------------------------------------------------------*/ .countries-details { position: relative; display: block; padding: 120px 0 120px; } .countries-details__sidebar { position: relative; display: block; background-color: var(--treck-primary); padding: 30px 30px 30px; } .countries-details__services-list { position: relative; display: block; } .countries-details__services { position: relative; display: block; } .countries-details__services li { position: relative; display: block; } .countries-details__services li + li { margin-top: 10px; } .countries-details__services li a { position: relative; display: block; font-size: 16px; font-weight: 600; line-height: 26px; color: var(--treck-black); background-color: var(--treck-white); padding: 14px 26px 15px; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .countries-details__services li:hover a { background-color: rgb(255, 255, 255); box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.07); } .countries-details__services li.active a { background-color: rgb(255, 255, 255); box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.07); } .countries-details__services li a::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 2px; background-color: var(--treck-bdr-color); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .countries-details__services li:hover a::before { background-color: var(--treck-base); } .countries-details__services li.active a::before { background-color: var(--treck-base); } .countries-details__services li a::after { content: ""; position: absolute; top: 50%; left: 2px; border-top: 5px solid transparent; border-left: 4px solid var(--treck-bdr-color); border-bottom: 5px solid transparent; transform: translateY(-50%); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .countries-details__services li:hover a::after { border-left: 4px solid var(--treck-base); } .countries-details__services li.active a::after { border-left: 4px solid var(--treck-base); } .countries-details__countries-flag { position: absolute; right: 10px; top: 50%; width: 35px; transform: translateY(-50%); } .countries-details__countries-flag img { width: 100%; border-radius: 50%; } .banner-one { position: relative; display: block; background-color: var(--treck-primary); border: 4px solid var(--treck-base); padding: 20px 30px 36px; padding-left: 145px; margin-top: 30px; overflow: hidden; z-index: 1; } .banner-one__shape-1 { position: absolute; bottom: 0; left: 0; z-index: -1; } .banner-one__shape-1 img { width: auto; } .banner-one__bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: .30; mix-blend-mode: multiply; background-repeat: no-repeat; background-size: cover; background-position: center; z-index: -1; } .banner-one__img { position: absolute; left: 0; bottom: -4px; } .banner-one__img img { width: auto; } .banner-one__title { font-size: 24px; font-weight: 600; line-height: 29px; } .banner-one__btn-box { position: relative; display: inline-block; margin-top: 216px; left: 8px; } .banner-one__btn { position: relative; display: inline-block; font-size: 12px; font-weight: 600; line-height: 12px; color: var(--treck-gray); background-color: rgb(255, 255, 255); box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.07); padding: 13px 30px 13px; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .banner-one__btn:hover { background-color: var(--treck-base); color: var(--treck-white); } .countries-details__documents { position: relative; display: flex; align-items: center; padding: 20px 25px 20px; margin-top: 30px; background-color: rgb(255, 255, 255); box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05); } .countries-details__documents .icon { position: relative; display: inline-block; } .countries-details__documents .icon span { position: relative; display: flex; align-items: center; justify-content: center; width: 51px; height: 51px; font-size: 23px; color: var(--treck-white); background-color: var(--treck-base); border-radius: 50%; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .countries-details__documents .icon span:hover { color: var(--treck-white); background-color: var(--treck-black); } .countries-details__documents .content { position: relative; display: block; margin-left: 10px; } .countries-details__documents .content h3 { font-size: 16px; font-weight: 600; line-height: 16px; } .countries-details__documents .content h3 a { color: var(--treck-black); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .countries-details__documents .content h3 a:hover { color: var(--treck-base); } .countries-details__documents .content p { font-size: 12px; font-weight: 500; line-height: 20px; letter-spacing: 0.1em; margin-top: 4px; } .countries-details__right { position: relative; display: block; margin-top: -4px; } .countries-details__title { font-size: 30px; font-weight: 600; line-height: 30px; } .countries-details__text { margin-top: 18px; margin-bottom: 31px; } .countries-details__img-box { position: relative; display: block; } .countries-details__img { position: relative; display: block; margin-bottom: 30px; } .countries-details__img img { width: 100%; } .countries-details__text-two { margin-bottom: 29px; } .countries-details__text-three { font-size: 18px; font-weight: 600; line-height: 30px; color: var(--treck-base); } .countries-details__text-four { margin-top: 31px; } .countries-details__title-two { font-size: 30px; font-weight: 600; line-height: 40px; margin-top: 42px; margin-bottom: 13px; } .countries-details__points { position: relative; display: flex; align-items: center; margin-top: 31px; } .countries-details__points li { position: relative; display: flex; align-items: center; border: 1px solid var(--treck-bdr-color); max-width: 250px; width: 100%; padding: 28px 30px 21px; } .countries-details__points li + li { margin-left: 10px; } .countries-details__points li .icon { position: relative; display: inline-block; } .countries-details__points li .icon span { position: relative; display: inline-block; font-size: 32px; color: var(--treck-base); } .countries-details__points li .text { margin-left: 23px; } .countries-details__points li .text p { font-size: 17px; font-weight: 600; line-height: 20px; } .countries-details__points li .text p a { color: var(--treck-black); transition: all 500ms ease; } .countries-details__points li .text p a:hover { color: var(--treck-base); } /*-------------------------------------------------------------- # Coaching Four --------------------------------------------------------------*/ .coaching-four { position: relative; display: block; padding: 120px 0 90px; z-index: 1; } .coaching-four .coaching-three__single { margin-bottom: 30px; } /*-------------------------------------------------------------- # Feature Three --------------------------------------------------------------*/ .feature-three { position: relative; display: block; padding: 120px 0 90px; background-color: var(--treck-black); z-index: 1; } .feature-three__bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: .07; background-repeat: no-repeat; background-size: cover; background-position: center; mix-blend-mode: luminosity; z-index: -1; } /*-------------------------------------------------------------- # Coaching five --------------------------------------------------------------*/ .coaching-five { position: relative; display: block; padding: 120px 0 90px; z-index: 1; } .coaching-five .container { max-width: 1540px; } /*-------------------------------------------------------------- # Countries-Four --------------------------------------------------------------*/ .countries-four { position: relative; display: block; padding-top: 150px; } /*-------------------------------------------------------------- # Travel One --------------------------------------------------------------*/ .travel-one { position: relative; display: block; padding: 120px 0 120px; background-color: var(--treck-primary); z-index: 1; } .travel-one__bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: .65; mix-blend-mode: multiply; background-repeat: no-repeat; background-size: cover; background-position: center; z-index: -1; } .travel-one__bg-two { position: absolute; height: 297px; left: 0; right: 0; bottom: 0; opacity: .10; mix-blend-mode: multiply; background-repeat: no-repeat; background-size: cover; background-position: center; z-index: -1; } .travel-one__left { position: relative; display: block; } .travel-one__img { position: relative; display: block; } .travel-one__img img { width: 100%; } .travel-one__right { position: relative; display: block; margin-top: -9px; } .travel-one__text-2 { margin-top: 30px; margin-bottom: 32px; } .travel-one__points { position: relative; display: block; } .travel-one__points li { position: relative; display: flex; align-items: center; } .travel-one__points li .icon { position: relative; display: inline-block; top: 3px; } .travel-one__points li .icon span { position: relative; display: inline-block; font-size: 21px; color: var(--treck-base); } .travel-one__points li .text { position: relative; display: block; margin-left: 7px; } .travel-one__points li .text p { font-size: 16px; font-weight: 600; line-height: 30px; color: var(--treck-black); } .travel-one__btn-box { position: relative; display: block; margin-top: 41px; } /*-------------------------------------------------------------- # Gallery Two --------------------------------------------------------------*/ .gallery-two { position: relative; display: block; padding-top: 120px; z-index: 1; } /*-------------------------------------------------------------- # Countries Page --------------------------------------------------------------*/ .countries-page-brand .brand-one__inner { border-bottom: none } /*-------------------------------------------------------------- # Countries Details --------------------------------------------------------------*/ .coaching-details { position: relative; display: block; padding: 120px 0 120px; } .coaching-details__sidebar { position: relative; display: block; background-color: var(--treck-primary); padding: 30px 30px 30px; } .coaching-details__services-list { position: relative; display: block; } .coaching-details__services { position: relative; display: block; } .coaching-details__services li { position: relative; display: block; } .coaching-details__services li + li { margin-top: 10px; } .coaching-details__services li a { position: relative; display: block; font-size: 16px; font-weight: 600; line-height: 26px; color: var(--treck-black); background-color: var(--treck-white); padding: 14px 26px 15px; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .coaching-details__services li:hover a { background-color: rgb(255, 255, 255); box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.07); } .coaching-details__services li.active a { background-color: rgb(255, 255, 255); box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.07); } .coaching-details__services li a::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 2px; background-color: var(--treck-bdr-color); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .coaching-details__services li:hover a::before { background-color: var(--treck-base); } .coaching-details__services li.active a::before { background-color: var(--treck-base); } .coaching-details__services li a::after { content: ""; position: absolute; top: 50%; left: 2px; border-top: 5px solid transparent; border-left: 4px solid var(--treck-bdr-color); border-bottom: 5px solid transparent; transform: translateY(-50%); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .coaching-details__services li:hover a::after { border-left: 4px solid var(--treck-base); } .coaching-details__services li.active a::after { border-left: 4px solid var(--treck-base); } .coaching-details__right { position: relative; display: block; } .coaching-details__img { position: relative; display: block; } .coaching-details__img img { width: 100%; } .coaching-details__title-1 { font-size: 30px; font-weight: 600; line-height: 40px; margin-top: 21px; margin-bottom: 23px; } .coaching-details__text-1 { position: relative; display: block; } .coaching-details__title-2 { font-size: 24px; line-height: 34px; color: var(--treck-base); margin-top: 24px; margin-bottom: 32px; } .coaching-details__text-2 { position: relative; display: block; } .coaching-details__title-3 { font-size: 30px; font-weight: 600; line-height: 30px; margin-top: 47px; margin-bottom: 37px; } .coaching-details__why { position: relative; display: block; } .coaching-details__why-single { position: relative; display: block; background-color: var(--treck-primary); text-align: center; padding: 30px 30px 31px; margin-bottom: 30px; z-index: 1; } .coaching-details__why-single::before { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-image: -moz-linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(242, 237, 235) 100%); background-image: -webkit-linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(242, 237, 235) 100%); background-image: -ms-linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(242, 237, 235) 100%); background-position: center bottom; transition-delay: .1s; transition-timing-function: ease-in-out; transition-duration: .5s; transition-property: all; transform-origin: bottom; transform-style: preserve-3d; transform: scaleY(0); z-index: -1; } .coaching-details__why-single:hover::before { transform: scaleY(1.0); } .coaching-details__why-icon { position: relative; display: inline-block; z-index: 1; } .coaching-details__why-icon span { position: relative; display: inline-block; font-size: 64px; color: var(--treck-base); } .coaching-details__why-shape-1 { position: absolute; width: 79px; height: 79px; left: 50%; bottom: 19px; transform: translateX(-50%); border-radius: 50%; background-image: -moz-linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(242, 237, 235) 100%); background-image: -webkit-linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(242, 237, 235) 100%); background-image: -ms-linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(242, 237, 235) 100%); z-index: -1; } .coaching-details__why-title { position: relative; display: block; } .coaching-details__why-title h3 { font-size: 17px; font-weight: 600; line-height: 20px; margin-top: 9px; } .coaching-details__hover-single { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--treck-primary); text-align: center; padding: 20px 30px 15px; background-image: -moz-linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(242, 237, 235) 100%); background-image: -webkit-linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(242, 237, 235) 100%); background-image: -ms-linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(242, 237, 235) 100%); background-position: center bottom; transition-delay: .1s; transition-timing-function: ease-in-out; transition-duration: .5s; transition-property: all; transform-origin: bottom; transform-style: preserve-3d; transform: scaleY(0); z-index: 2; } .coaching-details__why-single:hover .coaching-details__hover-single { transform: scaleY(1.0); } .coaching-details__hover-icon { position: relative; display: inline-block; z-index: 1; } .coaching-details__hover-icon span { position: relative; display: flex; align-items: center; justify-content: center; width: 78px; height: 78px; border-radius: 50%; background-color: var(--treck-base); font-size: 64px; color: var(--treck-white); } .coaching-details__hover-title { position: relative; display: block; } .coaching-details__hover-title h3 { font-size: 17px; font-weight: 600; line-height: 20px; margin-top: 28px; } .coaching-details__benefit { position: relative; display: block; margin-top: 30px; margin-bottom: 60px; } .coaching-details__benefit-img { position: relative; display: block; max-width: 369px; width: 100%; } .coaching-details__benefit-img img { width: 100%; border-radius: 50%; } .coaching-details__benefit-content { position: relative; display: block; margin-top: 37px; } .coaching-details__benefit-title { font-size: 30px; font-weight: 600; line-height: 30px; } .coaching-details__benefit-text { font-size: 18px; font-weight: 500; line-height: 30px; color: var(--treck-base); margin-top: 29px; margin-bottom: 37px; } .coaching-details__benefit-points { position: relative; display: block; } .coaching-details__benefit-points li { position: relative; display: flex; align-items: center; } .coaching-details__benefit-points li + li { margin-top: 10px; } .coaching-details__benefit-points li .icon { position: relative; display: inline-block; } .coaching-details__benefit-points li .icon span { position: relative; display: flex; align-items: center; justify-content: center; width: 14px; height: 14px; font-size: 9px; color: var(--treck-white); background-color: var(--treck-base); border-radius: 50%; } .coaching-details__benefit-points li .text { margin-left: 12px; } .coaching-details__benefit-points li .text p { font-size: 16px; font-weight: 500; line-height: 26px; } .coaching-details__importance { position: relative; display: flex; align-items: center; justify-content: space-between; background-image: -moz-linear-gradient(0deg, rgb(242, 237, 235) 0%, rgb(255, 255, 255) 100%); background-image: -webkit-linear-gradient(0deg, rgb(242, 237, 235) 0%, rgb(255, 255, 255) 100%); background-image: -ms-linear-gradient(0deg, rgb(242, 237, 235) 0%, rgb(255, 255, 255) 100%); padding: 40px 40px 40px; padding-left: 50px; z-index: 1; } .coaching-details__importance-bg { position: absolute; top: 0; right: 33px; bottom: 0; width: 537px; background-repeat: no-repeat; background-size: cover; background-position: right center; mix-blend-mode: luminosity; opacity: .30; z-index: -1; } .coaching-details__importance-title-box { position: relative; display: block; } .coaching-details__importance-title { font-size: 22px; font-weight: 600; line-height: 34px; } .coaching-details__importance-btn-box { position: relative; display: block; margin-top: 29px; } .coaching-details__importance-btn { font-size: 12px; font-weight: 600; line-height: 22px; color: var(--treck-gray); background-color: rgb(255, 255, 255); box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.07); padding: 11px 30px 12px; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .coaching-details__importance-btn:hover { color: var(--treck-white); background-color: var(--treck-base); } .coaching-details__importance-points-list { position: relative; display: block; background-color: var(--treck-base); padding: 23px 30px 26px; max-width: 210px; width: 100%; } .coaching-details__importance-points-list li { position: relative; display: flex; align-items: center; line-height: 26px; } .coaching-details__importance-points-list li .icon { position: relative; display: inline-block; top: 2px; } .coaching-details__importance-points-list li .icon span { position: relative; display: inline-block; font-size: 19px; color: var(--treck-white); } .coaching-details__importance-points-list li .text { margin-left: 7px; } .coaching-details__importance-points-list li .text p { font-size: 16px; font-weight: 600; line-height: 16px; color: var(--treck-white); } /*-------------------------------------------------------------- # Visa Details --------------------------------------------------------------*/ .visa-details { position: relative; display: block; padding: 120px 0 120px; z-index: 1; } .visa-details__left { position: relative; display: block; } .visa-details__img { position: relative; display: block; max-width: 370px; } .visa-details__img img { width: 100%; border-radius: 50%; } .visa-details__points-box { position: relative; display: block; margin-top: 24px; } .visa-details__points-box-title { font-size: 30px; font-weight: 600; line-height: 30px; } .visa-details__points-box-text { font-size: 18px; font-weight: 500; line-height: 30px; color: var(--treck-base); margin-top: 19px; margin-bottom: 35px; } .visa-details__points-list { position: relative; display: block; } .visa-details__points-list li { position: relative; display: flex; align-items: center; } .visa-details__points-list li + li { margin-top: 6px; } .visa-details__points-list li .icon { position: relative; display: inline-block; } .visa-details__points-list li .icon span { position: relative; display: flex; align-items: center; justify-content: center; width: 14px; height: 14px; font-size: 10px; color: var(--treck-white); background-color: var(--treck-base); border-radius: 50%; } .visa-details__points-list li .text { margin-left: 12px; } .visa-details__points-list li .text p { font-size: 16px; font-weight: 500; } .visa-details__text-1 { margin-top: 42px; margin-bottom: 42px; } .visa-details__text-box { position: relative; display: block; background-color: rgb(255, 255, 255); box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.07); padding: 18px 35px 22px; } .visa-details__text-box::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 6px; background-color: var(--treck-base); } .visa-details__text-box p { font-size: 18px; font-weight: 600; line-height: 28px; color: var(--treck-black); } .visa-details__text-2 { margin-top: 42px; margin-bottom: 47px; } .visa-details__visa-process { position: relative; display: block; } .visa-details__visa-process-title { font-size: 30px; font-weight: 600; line-height: 30px; } .visa-details__visa-process-list { position: relative; display: flex; align-items: center; margin-top: 37px; } .visa-details__visa-process-list li { position: relative; display: block; text-align: center; } .visa-details__visa-process-list li + li { margin-left: 50px; } .visa-details__visa-process-list li .icon-box { position: relative; display: inline-block; } .visa-details__visa-process-list li .icon-box::before { content: ""; position: absolute; bottom: -44px; left: 50%; width: 1px; height: 44px; background-color: #e3dbd8; transform: translateX(-50%); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .visa-details__visa-process-list li:hover .icon-box::before { background-color: var(--treck-base); } .visa-details__visa-process-list li .icon-box::after { content: ""; position: absolute; bottom: -49px; left: 50%; transform: translateX(-50%); border-top: 5px solid #e3dbd8; border-left: 5px solid transparent; border-right: 5px solid transparent; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .visa-details__visa-process-list li:hover .icon-box::after { border-top: 5px solid var(--treck-base); } .visa-details__visa-process-list li .icon { position: relative; display: inline-block; } .visa-details__visa-process-list li .icon::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%; background-color: var(--treck-base); -webkit-transition: all 500ms ease; transition: all 500ms ease; opacity: 0; z-index: -1; } .visa-details__visa-process-list li:hover .icon::before { opacity: 1; } .visa-details__visa-process-list li .icon span { position: relative; display: flex; align-items: center; justify-content: center; width: 110px; height: 110px; font-size: 64px; color: var(--treck-base); border-radius: 50%; background-image: -moz-linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(242, 237, 235) 100%); background-image: -webkit-linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(242, 237, 235) 100%); background-image: -ms-linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(242, 237, 235) 100%); -webkit-transition: all 500ms ease; transition: all 500ms ease; z-index: 1; } .visa-details__visa-process-list li:hover .icon span { color: var(--treck-white); background-image: none; } .visa-details__visa-process-list li .title { margin-top: 65px; } .visa-details__visa-process-list li .title p { font-size: 17px; font-weight: 600; line-height: 20px; color: var(--treck-black); } .visa-details__btn-box { position: relative; display: block; margin-top: 61px; } /*-------------------------------------------------------------- # Services Four --------------------------------------------------------------*/ .services-four { position: relative; display: block; padding: 120px 0 90px; z-index: 1; } /*-------------------------------------------------------------- # Feature Four --------------------------------------------------------------*/ .feature-four { position: relative; display: block; padding-bottom: 58px; z-index: 1; } .feature-four .container { max-width: 1800px; } /*-------------------------------------------------------------- # Benefits Two --------------------------------------------------------------*/ .benefits-two { background-color: var(--treck-primary); } .benefits-two__bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: .65; mix-blend-mode: multiply; background-repeat: no-repeat; background-size: cover; background-position: center; z-index: -1; } .benefits-two__bg-two { position: absolute; bottom: 0; left: 0; right: 0; height: 297px; opacity: .10; mix-blend-mode: multiply; background-repeat: no-repeat; background-size: cover; background-position: center; z-index: -1; } .benefits-two .benefits-one__points li { background-color: var(--treck-white); } /*-------------------------------------------------------------- # Services Five --------------------------------------------------------------*/ .services-five { position: relative; display: block; padding: 120px 0 77px; z-index: 1; } /*-------------------------------------------------------------- # Pricing Page --------------------------------------------------------------*/ .pricing-page { position: relative; display: block; padding: 112px 0 90px; } .pricing-page__main-tab-box { position: relative; display: block; } .pricing-page__main-tab-box .tab-buttons { position: relative; display: flex; align-items: center; justify-content: center; margin-bottom: 40px; } .pricing-page__main-tab-box .tab-buttons .tab-btn { position: relative; display: flex; align-items: center; } .pricing-page__main-tab-box .tab-buttons .tab-btn + .tab-btn { margin-left: 0px; } .pricing-page__main-tab-box .tab-buttons .tab-btn span { position: relative; display: block; text-align: center; font-size: 14px; line-height: 14px; color: var(--treck-gray); background-color: var(--treck-primary); padding: 15px 30px 15px; font-weight: 600; cursor: pointer; overflow: hidden; border-radius: 0px; transition: all 0.5s linear; z-index: 1; } .pricing-page__main-tab-box .tab-buttons .tab-btn.active-btn span { color: var(--treck-white); } .pricing-page__main-tab-box .tab-buttons .tab-btn span:before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; height: 0%; background-color: var(--treck-base); transition: all 0.3s ease; z-index: -1; } .pricing-page__main-tab-box .tab-buttons .tab-btn.active-btn span:before { height: 100%; } .pricing-page__main-tab-box .tabs-content { position: relative; display: block; } .pricing-page__main-tab-box .tabs-content .tab { position: relative; display: none; -webkit-transform: translateY(35px); -ms-transform: translateY(35px); transform: translateY(35px); -webkit-transition: all 600ms ease; -moz-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; transition: all 600ms ease; z-index: 10; } .pricing-page__main-tab-box .tabs-content .tab.active-tab { display: block; margin-top: 0px; -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } .pricing-page__inner { position: relative; display: block; } .pricing-page__single { position: relative; display: block; margin-bottom: 30px; -webkit-transition: all 500ms ease; transition: all 500ms ease; z-index: 1; } .pricing-page__single:hover { box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.1); } .pricing-page__single-inner { position: relative; display: block; overflow: hidden; border: 1px solid var(--treck-bdr-color); background-color: var(--treck-white); padding: 43px 49px 49px; z-index: 1; } .pricing-page__shape-1 { position: absolute; bottom: 0; left: 0; right: 0; z-index: -1; } .pricing-page__shape-1 img { width: auto; } .pricing-page__price-box { position: relative; display: block; text-align: center; } .pricing-page__price { font-size: 34px; font-weight: 800; line-height: 44px; } .pricing-page__icon { position: relative; display: flex; align-items: center; justify-content: center; height: 120px; width: 120px; border-radius: 50%; background-image: -moz-linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(242, 237, 235) 100%); background-image: -webkit-linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(242, 237, 235) 100%); background-image: -ms-linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(242, 237, 235) 100%); margin: 21px auto 15px; z-index: 1; } .pricing-page__icon:before { content: ""; position: absolute; top: 50%; left: -75px; width: 75px; height: 1px; background-color: var(--treck-bdr-color); z-index: -1; } .pricing-page__icon:after { content: ""; position: absolute; top: 50%; right: -75px; width: 75px; height: 1px; background-color: var(--treck-bdr-color); z-index: -1; } .pricing-page__icon span { position: relative; display: inline-block; font-size: 64px; color: var(--treck-base); -webkit-transition: all 500ms linear; transition: all 500ms linear; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } .pricing-page__single:hover .pricing-page__icon span { transform: scale(.9); } .pricing-page__content { position: relative; display: block; text-align: center; } .pricing-page__title { font-size: 16px; font-weight: 600; } .pricing-page__service-list { position: relative; display: block; margin-top: 18px; margin-bottom: 31px; } .pricing-page__service-list li { position: relative; display: flex; align-items: center; justify-content: center; } .pricing-page__service-list li + li { margin-top: 10px; } .pricing-page__service-list li .icon { position: relative; display: flex; align-items: center; justify-content: center; height: 13px; width: 13px; background-color: var(--treck-base); border-radius: 50%; font-size: 7px; color: var(--treck-white); } .pricing-page__service-list li .text { margin-left: 10px; } .pricing-page__btn-box { position: relative; display: block; } /*-------------------------------------------------------------- # Login Page --------------------------------------------------------------*/ .login-page { position: relative; display: block; padding: 120px 0 90px; z-index: 1; } .login-page__top { position: relative; display: block; background-color: var(--treck-primary); padding: 16px 30px 18px; margin-bottom: 50px; } .login-page__top p { font-size: 14px; font-weight: 500; line-height: 24px; } .login-page__top p span { color: var(--treck-black); } .login-page__top p a { color: var(--treck-base); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .login-page__top p a:hover { color: var(--treck-black); } .login-page__single { position: relative; display: block; margin-bottom: 30px; } .login-page__title { font-size: 30px; font-weight: 600; line-height: 40px; letter-spacing: -0.04em; margin-bottom: 32px; } .login-page__form { position: relative; display: block; padding: 60px 60px 60px; border: 1px solid var(--treck-bdr-color); background-color: rgb(255, 255, 255); box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.05); } .login-page__form-input-box { position: relative; display: block; margin-bottom: 20px; } .login-page__form-input-box input[type="email"], .login-page__form-input-box input[type="password"] { height: 52px; width: 100%; border: none; background-color: var(--treck-primary); padding-left: 30px; padding-right: 30px; outline: none; font-size: 14px; color: var(--treck-gray); display: block; font-weight: 500; } .login-page__form-btn-box { position: relative; display: flex; align-items: center; } .login-page__form-btn { border: none; } .login-page__form .checked-box { position: relative; display: block; margin-top: -8px; margin-bottom: 14px; } .login-page__form .checked-box label { position: relative; display: inline-block; padding-left: 30px; margin-right: 0px; margin-bottom: 0; color: var(--treck-gray); font-size: 14px; line-height: 22px; font-weight: 500; text-transform: none; cursor: pointer; } .login-page__form .checked-box input[type="checkbox"] { display: none; } .login-page__form .checked-box input[type="checkbox"] + label span { position: absolute; top: 2px; left: 0; width: 16px; height: 16px; vertical-align: middle; background: var(--treck-white); cursor: pointer; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; border: 1px solid var(--treck-bdr-color); } .login-page__form .checked-box label span:before { position: absolute; top: 2px; left: 3px; display: block; border-bottom: 2px solid #e1e5e8; border-right: 2px solid #e1e5e8; content: ''; width: 6px; height: 9px; pointer-events: none; -webkit-transform-origin: 66% 66%; -ms-transform-origin: 66% 66%; transform-origin: 66% 66%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; opacity: 1; } .login-page__form.checked-box input[type="checkbox"]:checked + label span { border-color: #e1e5e8; } .login-page__form .checked-box input[type="checkbox"]:checked + label span:before { opacity: 0; } .login-page__form-forgot-password { position: relative; display: block; margin-left: 20px; } .login-page__form-forgot-password a { font-size: 14px; font-weight: 500; color: var(--treck-gray); position: relative; display: inline-block; } .login-page__form-btn { padding: 9px 40px 14px; } /*-------------------------------------------------------------- # Gallery Two --------------------------------------------------------------*/ .gallery-page { position: relative; display: block; padding: 120px 0 110px; } .gallery-page .row { --bs-gutter-x: 10px; } .gallery-page .container { max-width: 1572px; } .gallery-page__single { position: relative; display: block; margin-bottom: 10px; } .gallery-page__img { position: relative; display: block; overflow: hidden; z-index: 1; } .gallery-page__img:before { content: ""; position: absolute; top: 0; bottom: -2px; left: 0; right: 0; background-color: var(--treck-base); opacity: 0; visibility: hidden; -webkit-transform-origin: top center; transform-origin: top center; -webkit-transform: scaleY(0) translateZ(100px); transform: scaleY(0) translateZ(100px); -webkit-transition: opacity 500ms ease, visibility 500ms ease, -webkit-transform 700ms ease; transition: opacity 500ms ease, visibility 500ms ease, -webkit-transform 700ms ease; transition: opacity 500ms ease, visibility 500ms ease, transform 700ms ease; transition: opacity 500ms ease, visibility 500ms ease, transform 700ms ease, -webkit-transform 700ms ease; } .gallery-page__single:hover .gallery-page__img:before { opacity: .90; visibility: visible; -webkit-transform: scaleY(1) translateZ(0px); transform: scaleY(1) translateZ(0px); } .gallery-page__img img { width: 100%; } .gallery-page__icon { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; z-index: 2; } .gallery-page__icon a { height: 50px; width: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; color: var(--treck-white); -webkit-transform: scale(0); transform: scale(0); opacity: 0; -webkit-transition: all 500ms ease; transition: all 500ms ease; z-index: 2; } .gallery-page__single:hover .gallery-page__icon a { -webkit-transform: scale(1); transform: scale(1); transition-delay: 500ms; opacity: 1; } .gallery-page__icon a:hover { color: var(--treck-black); } /*-------------------------------------------------------------- # Faq Search Box --------------------------------------------------------------*/ .faq-search-box { position: relative; display: block; } .faq-search-box__inner { position: relative; display: block; background-image: -moz-linear-gradient(90deg, rgb(242, 237, 235) 0%, rgb(255, 255, 255) 100%); background-image: -webkit-linear-gradient(90deg, rgb(242, 237, 235) 0%, rgb(255, 255, 255) 100%); background-image: -ms-linear-gradient(90deg, rgb(242, 237, 235) 0%, rgb(255, 255, 255) 100%); padding-left: 120px; padding-top: 111px; padding-bottom: 120px; z-index: 1; } .faq-search-box__shape { position: absolute; right: 60px; bottom: 0px; z-index: -1; } .faq-search-box__shape img { width: auto; } .faq-search-box__left { position: relative; display: block; max-width: 485px; width: 100%; } .faq-search-box__title { font-size: 34px; font-weight: 600; line-height: 44px; } .faq-search-box__text { font-size: 14px; font-weight: 500; padding-top: 11px; padding-bottom: 26px; } .faq-search-box__form { position: relative; display: block; } .faq-search-box__form-input { position: relative; display: block; margin-bottom: 20px; } .faq-search-box__form-input input[type="search"] { height: 54px; width: 100%; border: none; outline: none; background-color: var(--treck-white); font-size: 16px; color: var(--treck-gray); font-weight: 500; padding-left: 50px; padding-right: 75px; } .faq-search-box__form-input button[type="submit"] { background-color: transparent; color: var(--treck-black); font-size: 22px; position: absolute; top: 0; right: 0px; bottom: 0; width: 72px; outline: none; border: none; display: flex; align-items: center; padding: 0; } .faq-search-box__form-btn-and-text { position: relative; display: flex; align-items: center; } .faq-search-box__form-text { margin-left: 20px; } /*-------------------------------------------------------------- # Faq Page --------------------------------------------------------------*/ .faq-page { position: relative; display: block; padding: 120px 0 110px; } .faq-page__left { position: relative; display: block; margin-right: 30px; } .faq-page__content { position: relative; display: block; background-color: var(--treck-base); padding: 44px 50px 47px; } .faq-page__content-title { font-size: 24px; font-weight: 600; color: var(--treck-white); line-height: 29px; margin-bottom: 22px; } .faq-page__call { position: relative; display: flex; align-items: center; } .faq-page__call-icon { position: relative; display: flex; align-items: center; justify-content: center; height: 40px; width: 40px; background-color: var(--treck-black); border-radius: 50%; font-size: 15px; color: var(--treck-white); } .faq-page__call-content { margin-left: 15px; } .faq-page__call-sub-title { font-size: 14px; color: #fcc9d3; line-height: 20px; } .faq-page__call-number { font-size: 16px; font-weight: 600; line-height: 26px; } .faq-page__call-number span { font-size: 14px; color: #fcc9d3; font-weight: 400; } .faq-page__call-number a { color: var(--treck-white); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .faq-page__call-number a:hover { color: var(--treck-black); } .faq-page__right { position: relative; display: block; margin-left: -30px; } /*-------------------------------------------------------------- ## Error Page --------------------------------------------------------------*/ .error-page { position: relative; display: block; padding: 35px 0 120px; z-index: 1; } .error-page__bg { position: absolute; bottom: 0; left: 0; right: 0; height: 378px; opacity: .30; background-repeat: no-repeat; background-size: cover; background-position: center; z-index: -1; } .error-page__inner { position: relative; display: block; text-align: center; z-index: 1; } .error-page__img { position: absolute; left: 50%; bottom: 54px; transform: translateX(-50%); z-index: -1; } .error-page__img img { width: auto; } .error-page__title-box { position: relative; display: inline-block; } .error-page__title { position: relative; display: inline-block; font-size: 350px; line-height: 350px; font-weight: 600; color: var(--treck-base); letter-spacing: -0.04em; } .error-page__title span { margin-left: 141px; } .error-page__tagline { font-size: 40px; font-weight: 600; line-height: 50px; margin-top: 62px; margin-bottom: 13px; color: var(--treck-black); } .error-page__text { margin: 0; font-size: 20px; font-weight: 400; } .error-page__form { position: relative; display: block; margin: 32px auto 20px; } .error-page__form-input { position: relative; display: block; max-width: 550px; width: 100%; margin: 0 auto; } .error-page__form input[type="search"] { height: 52px; width: 100%; border: none; outline: none; background-color: rgb(255, 255, 255); box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.07); font-size: 14px; color: var(--treck-gray); font-weight: 500; padding-left: 50px; padding-right: 75px; } .error-page__form button[type="submit"] { background-color: transparent; color: var(--treck-black); font-size: 22px; position: absolute; top: 0; right: 0px; bottom: 0; width: 72px; outline: none; border: none; display: flex; align-items: center; padding: 0; } /*-------------------------------------------------------------- # Contact Five --------------------------------------------------------------*/ .contact-five { position: relative; display: block; overflow: hidden; padding: 120px 0 120px; background-image: -moz-linear-gradient(90deg, rgb(242, 237, 235) 0%, rgb(255, 255, 255) 20%); background-image: -webkit-linear-gradient(90deg, rgb(242, 237, 235) 0%, rgb(255, 255, 255) 20%); background-image: -ms-linear-gradient(90deg, rgb(242, 237, 235) 0%, rgb(255, 255, 255) 20%); z-index: 1; } .contact-five__bg { position: absolute; bottom: 0; left: 0; right: 0; height: 485px; background-repeat: no-repeat; background-position: center; background-size: cover; mix-blend-mode: luminosity; opacity: 0.05; z-index: -1; } .contact-five .container { max-width: 800px; } .contact-five__form-box { position: relative; display: block; } .contact-five__form { position: relative; display: block; } .contact-five__form .row { --bs-gutter-x: 20px; } .contact-five__input-box { position: relative; display: block; margin-bottom: 20px; } .contact-five__input-box input[type="text"], .contact-five__input-box input[type="email"] { height: 52px; width: 100%; border: none; background-color: var(--treck-primary); padding-left: 30px; padding-right: 30px; outline: none; font-size: 14px; font-weight: 500; color: var(--treck-gray); display: block; } .contact-five__input-box textarea { font-size: 14px; color: var(--treck-gray); font-weight: 500; height: 190px; width: 100%; background-color: var(--treck-primary); padding: 20px 30px 30px; border: none; outline: none; margin-bottom: 0px; } .contact-five__btn-box { position: relative; display: block; margin: 0 auto; text-align: center; } .contact-five__btn { border: none; } .contact-five__input-box.text-message-box { height: 190px; } /*-------------------------------------------------------------- # Location One --------------------------------------------------------------*/ .location-one { position: relative; display: block; padding: 120px 0 0; z-index: 2; } .location-one__top { position: relative; display: block; margin-bottom: 50px; } .location-one__top-left { position: relative; display: block; } .location-one__top-left .section-title { margin-bottom: 0; } .location-one__top-left .section-title__border-box { margin-left: 0; } .location-one__top-right { position: relative; display: block; margin-top: 31px; } .location-one__bottom { position: relative; display: block; z-index: 2; } .location-one__bottom:before { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 60px; background: #fff; z-index: -1; } .location-one__main-tab-box .tab-buttons { position: relative; display: block; } .location-one__main-tab-box .tab-buttons .tab-btn { position: relative; display: inline-block; } .location-one__main-tab-box .tab-buttons .tab-btn + .tab-btn { margin-left: 5px; } .location-one__main-tab-box .tab-buttons .tab-btn span { position: relative; display: block; text-align: center; transition: all 200ms linear; transition-delay: 0.1s; font-size: 18px; line-height: 18px; color: var(--treck-black); background-color: var(--treck-bdr-color); padding: 21px 50px 21px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; z-index: 1; } .location-one__main-tab-box .tab-buttons .tab-btn.active-btn span { color: var(--treck-white); } .location-one__main-tab-box .tab-buttons .tab-btn span:before { position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 0%; content: ""; background-color: var(--treck-base); transition: all 0.3s ease; z-index: -1; } .location-one__main-tab-box .tab-buttons .tab-btn.active-btn span:before { height: 100%; } .location-one__main-tab-box .tabs-content { position: relative; display: block; border: 1px solid var(--treck-bdr-color); } .location-one__main-tab-box .tabs-content .tab { position: relative; display: none; -webkit-transform: translateY(35px); -ms-transform: translateY(35px); transform: translateY(35px); -webkit-transition: all 600ms ease; -moz-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; transition: all 600ms ease; z-index: 10; } .location-one__main-tab-box .tabs-content .tab.active-tab { display: block; margin-top: 0px; -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } .location-one__tab-content-box { position: relative; display: block; box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.1); } .location-one__tab-content-box-inner { position: relative; display: flex; flex-wrap: wrap; overflow: hidden; padding: 50px 50px 50px; z-index: 1; } .location-one__bg { position: absolute; bottom: -60px; left: 0; right: 0; height: 252px; background-repeat: no-repeat; background-position: center; background-size: cover; opacity: .20; z-index: -1; } .location-one__tab-content-left { position: relative; display: flex; align-items: center; flex-wrap: wrap; } .location-one__tab-content-img { position: relative; display: block; max-width: 370px; width: 100%; } .location-one__tab-content-img img { width: 100%; } .location-one__tab-content-contact { position: relative; display: block; margin-left: 40px; margin-top: -12px; } .location-one__tab-content-contact-title { font-size: 20px; font-weight: 600; line-height: 30px; margin-bottom: 37px; } .location-one__tab-content-contact-list { position: relative; display: block; } .location-one__tab-content-contact-list li { position: relative; display: flex; align-items: center; } .location-one__tab-content-contact-list li + li { margin-top: 22px; } .location-one__tab-content-contact-list li .icon { position: relative; display: flex; align-items: center; } .location-one__tab-content-contact-list li:first-child .icon { top: -12px; } .location-one__tab-content-contact-list li .icon i { font-size: 16px; color: var(--treck-base); } .location-one__tab-content-contact-list li .content { margin-left: 20px; } .location-one__tab-content-contact-list li .content p { font-size: 18px; line-height: 26px; } .location-one__tab-content-contact-list li .content p a { color: var(--treck-gray); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .location-one__tab-content-contact-list li .content p a:hover { color: var(--treck-base); } .location-one__tab-content-right { position: relative; display: block; margin-left: 160px; } .location-one__tab-content-right:before { content: ""; position: absolute; bottom: -8px; top: -5px; left: -50px; width: 1px; background-color: var(--treck-bdr-color); } .location-one__tab-content-time { position: relative; display: block; } .location-one__tab-content-time li { position: relative; display: block; } .location-one__tab-content-time li + li { margin-top: 37px; } .location-one__tab-content-day-name { font-size: 12px; color: var(--treck-base); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500; line-height: 12px; margin-bottom: 12px; } .location-one__tab-content-time-box { font-size: 18px; font-weight: 400; line-height: 18px; } /*-------------------------------------------------------------- # Google Map Two --------------------------------------------------------------*/ .google-map-two { position: relative; display: block; margin-top: -60px; background-color: var(--treck-primary); } .google-map__two { position: relative; display: block; border: none; height: 565px; width: 100%; mix-blend-mode: luminosity; } /*-------------------------------------------------------------- # Product --------------------------------------------------------------*/ .product { position: relative; display: block; padding: 120px 0 90px; } .product__sidebar { position: relative; display: block; } .product__sidebar-single + .product__sidebar-single { margin-top: 30px; } .product__sidebar-title { font-size: 20px; font-weight: 600; line-height: 20px; margin: 0; margin-bottom: 22px; } .shop-search { position: relative; display: block; } .shop-search form { border-radius: 0; position: relative; } .shop-search form input[type=search], .shop-search form input[type=text] { width: 100%; height: 60px; background-color: transparent; padding-left: 30px; padding-right: 30px; font-size: 14px; color: var(--treck-gray); font-family: var(--treck-font); border: 1px solid var(--treck-bdr-color); outline: none; font-weight: 500; border-radius: 0; } .shop-search form ::placeholder { color: inherit; opacity: 1; } .product__price-ranger { position: relative; padding: 27px 30px 31px; margin: 0; background-color: var(--treck-primary); } .product__price-ranger.price-ranger { margin-top: 7px; margin-bottom: 0px; } .product__price-ranger .price-ranger .ui-widget-content { background: var(--treck-white); border: none; height: 5px; border-radius: 0; } .product__price-ranger .price-ranger .ui-slider-handle { position: absolute; top: -5px; background: var(--treck-base); border: 0; height: 14px; width: 14px !important; border-radius: 50%; margin-left: -2px; outline: medium none; cursor: pointer; z-index: 2; } .product__price-ranger .price-ranger .ui-slider .ui-slider-range { background: var(--treck-base); } .product__price-ranger .price-ranger #slider-range { margin-left: 3px; margin-right: 0; margin-top: 0; } .product__price-ranger .price-ranger .ranger-min-max-block { position: relative; display: block; margin-top: 17px; } .product__price-ranger .price-ranger .ranger-min-max-block input { display: inline-block; } .product__price-ranger .price-ranger .ranger-min-max-block input[type="submit"] { position: relative; display: block; background: var(--treck-white); float: right; text-align: center; border: none; color: var(--treck-gray); font-size: 12px; font-weight: 600; margin-top: 3px; cursor: pointer; padding: 4px 20px 4px; border-radius: 0; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .product__price-ranger .price-ranger .ranger-min-max-block input[type="submit"]:hover { background-color: var(--treck-base); color: var(--treck-white); } .product__price-ranger .price-ranger .ranger-min-max-block input[type="text"] { position: relative; display: inline-block; color: var(--treck-gray); font-size: 14px; font-weight: 500; width: 40px; line-height: 30px; border: none; padding: 0; text-align: center; background-color: transparent; } .product__price-ranger .price-ranger .ranger-min-max-block span { position: relative; display: inline-block; color: var(--treck-gray); font-size: 14px; font-weight: 400; line-height: 40px; left: -2px; } .shop-category { position: relative; display: block; padding: 27px 15px 13px; background-color: var(--treck-primary); } .shop-category .product__sidebar-title { margin-left: 15px; margin-bottom: 13px; } .shop-category ul { position: relative; display: block; } .shop-category ul li { position: relative; line-height: 24px; font-size: 16px; text-transform: capitalize; color: var(--treck-gray); margin-bottom: 6px; } .shop-category ul li:last-child { margin-bottom: 0; } .shop-category ul li a { position: relative; display: block; line-height: 24px; font-size: 16px; text-transform: capitalize; color: var(--treck-gray); font-weight: 400; transition: all 0.3s ease; z-index: 1; padding: 8px 30px 10px; } .shop-category ul li a::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 100%; background: var(--treck-white); z-index: -1; transform: scaleY(0.0); transform-origin: left; transform-style: preserve-3d; transition: all 200ms linear; transition-delay: 0.1s; } .shop-category ul li a:hover:before { transform: scaleY(1.0); } .shop-category ul li:hover a, .shop-category ul li.active a { color: var(--treck-black); color: var(--treck-black); background: var(--treck-white); } .shop-category ul li a:after { position: absolute; left: 15px; top: 5px; font-family: "Font Awesome 5 Free"; font-weight: 700; content: "\f0da"; opacity: 1; font-size: 15px; color: var(--treck-gray); line-height: 30px; transition: all 200ms linear; transition-delay: 0.1s; z-index: 1; } .shop-category ul li a:hover:after, .shop-category ul li.active a:after { color: var(--treck-base); } .product__items { position: relative; display: block; } .product__showing-result { position: relative; display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px; } .product__showing-text-box { position: relative; display: block; } .product__showing-text { font-size: 18px; } .product__showing-sort { position: relative; display: block; max-width: 340px; width: 100%; } .product__showing-sort .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) { position: relative; display: block; max-width: 340px; width: 100% !important; } .product__showing-sort .bootstrap-select > .dropdown-toggle::after { display: none; } .product__showing-sort .bootstrap-select > .dropdown-toggle { position: relative; height: 64px; outline: none !important; border-radius: 0; border: 0; background-color: var(--treck-primary) !important; margin: 0; padding: 0; padding-left: 30px; padding-right: 30px; color: var(--treck-gray) !important; font-size: 14px; line-height: 64px; font-weight: 500; box-shadow: none !important; background-repeat: no-repeat; background-size: 14px 12px; background-position: right 25.75px center; } .product__showing-sort .bootstrap-select > .dropdown-toggle:before { position: absolute; top: 0; bottom: 0; right: 26px; font-family: "Font Awesome 5 Free"; content: "\f107"; font-weight: 900; font-size: 14px; color: var(--treck-gray); } .product__all { position: relative; display: block; } .product__all-single { position: relative; display: block; margin-bottom: 30px; text-align: center; -webkit-transition: all 500ms ease; transition: all 500ms ease; z-index: 1; } .product__all-single:hover { box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.07); } .product__all-single-inner { position: relative; display: block; overflow: hidden; border: 1px solid var(--treck-bdr-color); background-color: var(--treck-white); z-index: 1; } .product__all-img { position: relative; display: block; overflow: hidden; background-color: var(--treck-white); z-index: 1; } .product__all-img:before { position: absolute; content: ""; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(var(--treck-primary-rgb), .30); -webkit-transition: opacity 500ms ease, visibility 500ms ease, -webkit-transform 500ms ease; transition: opacity 500ms ease, visibility 500ms ease, -webkit-transform 500ms ease; transition: opacity 500ms ease, visibility 500ms ease, transform 500ms ease; transition: opacity 500ms ease, visibility 500ms ease, transform 500ms ease, -webkit-transform 500ms ease; visibility: hidden; opacity: 0; -webkit-transform: translateY(-70%); transform: translateY(-70%); z-index: 1; } .product__all-single:hover .product__all-img:before { visibility: visible; -webkit-transform: translateY(0%); transform: translateY(0%); opacity: 1; } .product__all-img img { width: 100%; mix-blend-mode: darken; transition: all 500ms ease; } .product__all-single:hover .product__all-img img { transform: scale(1.05); } .product__all-content { position: relative; display: block; text-align: center; padding-top: 30px; padding-bottom: 30px; } .product__all-review { position: relative; display: flex; align-items: center; justify-content: center; } .product__all-review i { color: var(--treck-base); font-size: 15px; } .product__all-review i + i { margin-left: 5px; } .product__all-title { font-size: 20px; font-weight: 600; line-height: 30px; margin-top: 2px; } .product__all-title a { color: var(--treck-black); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .product__all-title a:hover { color: var(--treck-base); } .product__all-price { font-weight: 500; line-height: 25px; font-size: 16px; } .product__all-btn-box { position: relative; display: block; margin-top: 16px; z-index: 2; } .product__all-btn { font-weight: 600; padding: 4px 20px 4px; font-size: 12px; color: var(--treck-gray); background-color: rgb(255, 255, 255); box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.07); } .product__all-btn:hover { color: var(--treck-white); } .product__all-btn:before { background-color: var(--treck-base); } .products__all-icon-boxes { position: absolute; top: 20px; right: 20px; z-index: 2; display: flex; align-items: center; flex-direction: column; opacity: 0; -webkit-transform: perspective(400px) rotateX(20deg) translateX(100%); -ms-transform: perspective(400px) rotateX(20deg) translateX(100%); transform: perspective(400px) rotateX(20deg) translateX(100%); -webkit-transform-origin: bottom; -ms-transform-origin: bottom; transform-origin: bottom; transition-delay: .1s; transition-timing-function: ease-in-out; transition-duration: .5s; transition-property: all; z-index: 1; } .product__all-single:hover .products__all-icon-boxes { opacity: 1.0; -webkit-transform: perspective(400px) rotateX(0deg) translateX(0%); -ms-transform: perspective(400px) rotateX(0deg) translateX(0%); transform: perspective(400px) rotateX(0deg) translateX(-0%); transition-delay: .3s; transition-timing-function: ease-in-out; transition-duration: .5s; transition-property: all; } .products__all-icon-boxes a { position: relative; display: flex; align-items: center; justify-content: center; height: 40px; width: 40px; background-color: var(--treck-primary); border-radius: 50%; font-size: 14px; color: var(--treck-black); transition: all 200ms linear; transition-delay: 0.1s; } .products__all-icon-boxes a:hover { background-color: var(--treck-base); color: var(--treck-white); } .products__all-icon-boxes a + a { margin-top: 10px; } /*-------------------------------------------------------------- # Product Details --------------------------------------------------------------*/ .product-details { position: relative; display: block; padding: 112px 0px 56px; } .product-details__img { position: relative; display: block; overflow: hidden; } .product-details__img img { width: 100%; border: 1px solid var(--treck-bdr-color); } .product-details__img-search { position: absolute; top: 30px; right: 30px; } .product-details__img-search a span { position: relative; display: flex; align-items: center; font-size: 21px; color: var(--treck-black); } .product-details__top { position: relative; display: block; margin-top: -9px; } .product-details__title { font-size: 34px; line-height: 44px; font-weight: 600; margin: 0; } .product-details__title span { position: relative; display: inline-block; color: var(--treck-base); font-size: 20px; line-height: 24px; font-weight: 500; margin-left: 15px; letter-spacing: 0; } .product-details__reveiw { display: flex; align-items: center; margin-top: 20px; padding-bottom: 30px; margin-bottom: 21px; border-bottom: 1px solid var(--treck-bdr-color); } .product-details__reveiw i { font-size: 15px; color: var(--treck-base); } .product-details__reveiw i + i { margin-left: 4px; } .product-details__reveiw span { position: relative; top: 1px; line-height: 1; font-size: 16px; color: var(--treck-gray); font-weight: 500; margin-left: 20px; } .product-details__content { position: relative; display: block; } .product-details__content-text1 { font-size: 16px; line-height: 30px; margin: 0; margin-bottom: 31px; } .product-details__content-text2 { font-size: 16px; line-height: 30px; margin: 0; } .product-details__quantity { position: relative; display: flex; align-items: center; margin-top: 21px; } .product-details__quantity-title { margin: 0; color: var(--treck-black); font-size: 18px; line-height: 30px; font-weight: 600; margin-right: 30px; } .product-details__quantity .quantity-box { position: relative; width: 98px; height: 50px; } .product-details__quantity .quantity-box input { width: 98px; height: 50px; border: 1px solid var(--treck-bdr-color); -webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield; font-family: var(--treck-font); padding-left: 30px; outline: none; font-size: 18px; font-weight: 400; color: var(--treck-gray); background-color: var(--treck-white); } .product-details__quantity .quantity-box button { width: 24px; height: 24px; color: var(--treck-gray); font-size: 8px; position: absolute; top: 1px; right: 1px; background-color: var(--treck-white); border: none; border-left: 1px solid var(--treck-bdr-color); display: flex; align-items: center; justify-content: center; outline: none; } .product-details__quantity .quantity-box button.sub { bottom: 1px; top: auto; border-top: 1px solid var(--treck-bdr-color); } .product-details__buttons { position: relative; display: flex; align-items: center; margin-bottom: 30px; margin-top: 30px; } .product-details__buttons-1 { position: relative; display: block; } .product-details__buttons-1 .thm-btn { background-color: var(--treck-black); color: var(--treck-white); } .product-details__buttons-1 .thm-btn:hover { color: var(--treck-white); } .product-details__buttons-1 .thm-btn::before { background-color: var(--treck-base); } .product-details__buttons-2 { position: relative; display: block; margin-left: 10px; } .product-details__buttons-2 .thm-btn { background-color: var(--treck-base); } .product-details__social { position: relative; display: flex; align-items: center; } .product-details__social .title { position: relative; display: block; } .product-details__social .title h3 { color: var(--treck-black); font-size: 18px; line-height: 18px; font-weight: 600; } .product-details__social-link { position: relative; display: flex; align-items: center; margin-left: 30px; } .product-details__social-link a { position: relative; display: flex; align-items: center; justify-content: center; color: var(--treck-black); font-size: 15px; transition: all 200ms linear; transition-delay: 0.1s; background-color: transparent; border-radius: 50%; height: 40px; width: 40px; border: 1px solid var(--treck-bdr-color); } .product-details__social-link a + a { margin-left: 10px; } .product-details__social-link a:hover { color: var(--treck-white); background-color: var(--treck-base); border: 1px solid var(--treck-base); } /*-------------------------------------------------------------- # Product Description --------------------------------------------------------------*/ .product-description { position: relative; display: block; background: #ffffff; padding: 0px 0px 50px; } .product-description__title { font-size: 30px; line-height: 30px; font-weight: 600; margin-bottom: 28px; } .product-description__text1 { font-size: 16px; line-height: 30px; margin: 0; } .product-description__list { position: relative; display: block; margin-top: 30px; margin-bottom: 30px; } .product-description__list ul { position: relative; display: block; } .product-description__list ul li { position: relative; display: block; margin-bottom: 2px; } .product-description__list ul li:last-child { margin-bottom: 0px; } .product-description__list ul li p { color: var(--treck-black); margin: 0; font-weight: 600; font-size: 16px; } .product-description__list ul li p span:before { position: relative; display: inline-block; color: var(--treck-base); font-size: 17px; line-height: 17px; margin-right: 11px; top: 2px; } .product-description__tex2 { font-size: 16px; line-height: 30px; margin: 0; } /*-------------------------------------------------------------- # Review One --------------------------------------------------------------*/ .review-one { position: relative; display: block; } .comments-area { position: relative; display: block; border-top: 1px solid var(--treck-bdr-color); padding-top: 56px; } .review-one__title { position: relative; display: block; margin-bottom: 37px; } .review-one__title h3 { font-size: 30px; line-height: 30px; font-weight: 600; margin: 0; } .comments-area .comment-box { position: relative; display: block; margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--treck-bdr-color); } .comments-area .comment { position: relative; display: flex; align-items: center; } .comments-area .comment-box .author-thumb { position: relative; display: block; width: 165px; height: 165px; border-radius: 50%; overflow: hidden; } .comments-area .comment-box .author-thumb img { width: 100%; } .comments-area .comment-box .author-thumb figure { margin: 0; } .review-one__content { position: relative; display: block; padding-left: 45px; flex: 1; } .review-one__content-top { position: relative; display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; } .review-one__content-top .info { position: relative; display: block; } .review-one__content-top .info h2 { font-size: 20px; line-height: 30px; font-weight: 600; } .review-one__content-top .info h2 span { color: var(--treck-base); font-size: 16px; font-weight: 500; letter-spacing: 0; text-transform: capitalize; } .review-one__content-top .reply-btn { position: relative; display: block; } .review-one__content-top .reply-btn i:before { color: var(--treck-base); font-size: 15px; } .review-one__content-bottom { position: relative; display: block; } .review-one__content-bottom p { font-size: 16px; line-height: 30px; margin: 0px; } /*-------------------------------------------------------------- # Review Form One --------------------------------------------------------------*/ .review-form-one { position: relative; display: block; padding: 16px 0 120px; } .review-form-one__inner { position: relative; display: block; } .review-form-one__title { font-size: 30px; font-weight: 600; line-height: 30px; } .review-form-one__rate-box { position: relative; display: flex; align-items: center; margin-top: 18px; margin-bottom: 26px; } .review-form-one__rate-text { font-size: 18px; font-weight: 400; } .review-form-one__rate { position: relative; display: flex; align-items: center; margin-left: 17px; } .review-form-one__rate i { font-size: 16px; color: var(--treck-base); } .review-form-one__rate i + i { margin-left: 5px; } .review-form-one__form { position: relative; display: block; } .review-form-one__form .row { --bs-gutter-x: 20px; } .review-form-one__input-box textarea { font-size: 14px; color: var(--treck-gray); height: 190px; width: 100%; background-color: var(--treck-primary); padding: 20px 30px 30px; border: none; outline: none; margin-bottom: 0px; font-weight: 500; } .review-form-one__input-box.text-message-box { height: 190px; } .review-form-one__input-box { position: relative; display: block; margin-bottom: 20px; } .review-form-one__input-box input[type="text"], .review-form-one__input-box input[type="email"] { height: 52px; width: 100%; border: none; background-color: var(--treck-primary); padding-left: 30px; padding-right: 30px; outline: none; font-size: 14px; color: var(--treck-gray); display: block; font-weight: 500; } .review-form-one__btn { border: none; } /*-------------------------------------------------------------- # Cart Page --------------------------------------------------------------*/ .cart-page { position: relative; display: block; background: var(--treck-white); padding: 110px 0px 120px; } .cart-page .table-responsive { position: relative; display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } @media(max-width: 1199px) { .cart-table { min-width: 1170px; } } .cart-table { margin-bottom: 60px; } .cart-table thead th { color: var(--treck-black); font-size: 20px; line-height: 30px; font-weight: 600; padding: 0; border: none; padding-bottom: 23px; } .cart-table thead th:last-child { text-align: right; } .cart-table tbody tr { vertical-align: middle; } .cart-table tbody tr:last-child { border-bottom: 1px solid #eeede5; } .cart-table tbody td { font-size: 18px; font-weight: 400; color: var(--treck-gray); vertical-align: middle; border-top: 1px solid var(--treck-bdr-color); border-bottom: 1px solid var(--treck-bdr-color); padding-top: 30px; padding-bottom: 30px; padding-left: 0; padding-right: 0; letter-spacing: 0; } .cart-table tbody td:last-child { text-align: right; } .cart-table .product-box { display: flex; align-items: center; } .cart-table .product-box .img-box { position: relative; display: block; width: 120px; overflow: hidden; margin-right: 35px; } .cart-table .product-box .img-box img { width: 100%; border: 1px solid var(--treck-bdr-color); } .cart-table h3 { color: var(--treck-black); font-size: 20px; font-weight: 600; margin: 0; text-transform: none; } .cart-table h3 a { color: var(--treck-black); transition: all 200ms linear; transition-delay: 0.1s; } .cart-table h3 a:hover { color: var(--treck-base); } .cart-table .quantity-box { position: relative; width: 98px; height: 50px; } .cart-table .quantity-box input { width: 98px; height: 50px; border: 1px solid var(--treck-bdr-color); -webkit-appearance: textfield; appearance: textfield; font-family: var(--treck-font); padding-left: 30px; outline: none; font-size: 18px; font-weight: 400; color: var(--treck-gray); background-color: transparent; } .cart-table .quantity-box button { width: 24px; height: 24px; background-color: transparent; color: var(--treck-gray); font-size: 8px; position: absolute; top: 1px; right: 1px; background-color: transparent; border: none; border-left: 1px solid var(--treck-bdr-color); display: flex; align-items: center; justify-content: center; outline: none; } .cart-table .quantity-box button.sub { bottom: 1px; top: auto; border-top: 1px solid var(--treck-bdr-color); } .cart-table .cross-icon { position: relative; display: block; } .cart-table .cross-icon i:before { position: relative; display: inline-block; color: var(--treck-black); font-size: 16px; } .cart-cupon__form { position: relative; display: block; margin-bottom: 30px; } .cart-cupon__input { width: 100%; max-width: 375px; background-color: var(--treck-primary); padding-left: 30px; padding-right: 30px; margin-right: 20px; font-family: var(--treck-font); font-size: 14px; color: var(--treck-gray); height: 52px; margin-bottom: 20px; border: none; outline: none; font-weight: 500; } .cart-cupon__form ::placeholder { color: var(--treck-gray); opacity: 1; } .cart-cupon__form button { top: -2px; border: none; outline: none !important; } .cart-total { position: relative; display: block; margin-bottom: 23px; margin-top: -8px; } .cart-total li { display: flex; justify-content: flex-end; align-items: center; color: var(--treck-gray); font-size: 18px; font-weight: 400; letter-spacing: 0; } .cart-total li + li { margin-top: 15px; } .cart-total li span:first-child { display: block; color: var(--treck-black); font-size: 20px; margin-right: 75px; font-weight: 600; width: 135px; text-align: right; } .cart-total li:nth-child(2) span:first-child { position: relative; right: 6px; } .cart-total-amount { color: var(--treck-base); font-weight: 400; } .cart-page__buttons { position: relative; display: flex; align-items: center; justify-content: flex-end; } .cart-page__buttons-1 { position: relative; display: block; } .cart-page__buttons-1 .thm-btn { background: var(--treck-black); color: var(--treck-white); } .cart-page__buttons-1 .thm-btn:before { background-color: var(--treck-base); } .cart-page__buttons-2 { position: relative; display: block; margin-left: 10px; } .cart-page__buttons-2 .thm-btn { background-color: var(--treck-base); } /*-------------------------------------------------------------- # Checkout --------------------------------------------------------------*/ .checkout-page { position: relative; display: block; padding: 110px 0 120px; } .checkout-page .billing_details { position: relative; display: block; } .billing_title { position: relative; display: block; margin-bottom: 33px; } .billing_title p { font-size: 16px; margin: 0; } .billing_title span { color: var(--treck-base); } .billing_title h2 { font-size: 30px; line-height: 30px; margin: 0; font-weight: 600; margin-top: 17px; } .billing_details_form { position: relative; display: block; } .billing_details_form .bs-gutter-x-20 { --bs-gutter-x: 20px; } .billing_details_form .btn-light { border: none; } .billing_details_form .btn-light:hover { border: none; } .billing_input_box { position: relative; display: block; margin-bottom: 20px; } .billing_input_box input[type="text"], .billing_input_box input[type="email"], .billing_input_box input[type="tel"] { height: 52px; width: 100%; border: none; background-color: var(--treck-primary); padding-left: 30px; padding-right: 30px; outline: none; font-size: 14px; color: var(--treck-gray); display: block; font-weight: 500; } .billing_details .checked-box { position: relative; display: block; margin-top: -6px; } .billing_details .checked-box label { position: relative; display: inline-block; padding-left: 30px; margin-right: 0px; margin-bottom: 0; color: var(--treck-gray); font-size: 16px; line-height: 24px; font-weight: 400; text-transform: none; cursor: pointer; font-family: var(--treck-font); } .billing_details .checked-box input[type="checkbox"] { display: none; } .billing_details .checked-box input[type="checkbox"] + label span { position: absolute; top: 2px; left: 0; width: 20px; height: 20px; border-radius: 50%; vertical-align: middle; background: var(--treck-base); cursor: pointer; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; border: 0; } .billing_details .checked-box label span:before { position: absolute; top: 4px; left: 6px; display: block; border-bottom: 2px solid #fff; border-right: 2px solid #fff; content: ''; width: 6px; height: 9px; pointer-events: none; -webkit-transform-origin: 66% 66%; -ms-transform-origin: 66% 66%; transform-origin: 66% 66%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; opacity: 0; } .billing_details.checked-box input[type="checkbox"]:checked + label span { border-color: #ffffff; } .billing_details .checked-box input[type="checkbox"]:checked + label span:before { opacity: 1; } .ship_different_address_title { margin-top: 44px; } .ship_different_address_title h2 span::before { position: relative; display: inline-block; color: var(--treck-white); font-size: 10px; top: -5px; left: 2px; height: 20px; width: 20px; background-color: var(--treck-base); border-radius: 50%; text-align: center; line-height: 20px; } .ship_different_address_form .ship_different_input { position: relative; display: block; height: 122px; } .ship_different_address_form .ship_different_input textarea { font-size: 14px; color: var(--treck-gray); height: 122px; width: 100%; background-color: var(--treck-primary); padding: 15px 30px 20px; border: none; outline: none; margin-bottom: 0px; font-weight: 500; } .billing_details_form .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) { position: relative; display: block; max-width: 100%; width: 100% !important; } .billing_details_form .bootstrap-select > .dropdown-toggle::after { display: none; } .billing_details_form .bootstrap-select > .dropdown-toggle { position: relative; height: 52px; outline: none !important; border-radius: 0; border: 0; background-color: var(--treck-primary) !important; margin: 0; padding: 0; padding-left: 30px; padding-right: 30px; color: var(--treck-gray) !important; font-size: 14px; line-height: 52px; font-weight: 500; box-shadow: none !important; background-repeat: no-repeat; background-size: 14px 12px; background-position: right 25.75px center; } .billing_details_form .bootstrap-select > .dropdown-toggle:before { position: absolute; top: 0; bottom: 0; right: 26px; font-family: "Font Awesome 5 Free"; content: "\f107"; font-weight: 900; font-size: 14px; color: var(--treck-gray); } .your_order { position: relative; display: block; padding-top: 56px; } .your_order h2 { font-size: 30px; line-height: 30px; font-weight: 600; margin: 0; margin-bottom: 57px; } .order_table_box { position: relative; width: 100%; border-bottom: 1px solid var(--treck-bdr-color); padding-bottom: 24px; } .order_table_detail { position: relative; width: 100%; } .order_table_head { position: relative; width: 100%; border-bottom: 1px solid var(--treck-bdr-color); border-top: 1px solid var(--treck-bdr-color); } .order_table_head th { font-size: 20px; color: var(--treck-black); font-weight: 600; margin: 0; padding: 22px 0 23px; } .order_table_head th.right { float: right; } .order_table_detail tbody td { padding: 29px 0 2px; } .order_table_detail tbody td.pro__title { color: var(--treck-gray); font-size: 16px; line-height: 18px; font-weight: 400; } .order_table_detail tbody td.pro__price { color: var(--treck-gray); font-size: 16px; line-height: 18px; text-align: right; font-weight: 400; letter-spacing: 0; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .checkout__payment { background-color: var(--treck-primary); padding: 52px 50px 20px; margin-bottom: 20px; } .checkout__payment__item + .checkout__payment__item { margin-top: 39px; } .checkout__payment__title { display: flex; color: var(--treck-black); font-size: 18px; font-weight: 600; margin: 0; align-items: center; margin-bottom: 27px; cursor: pointer; } .checkout__payment__title::before { content: ''; width: 23px; height: 23px; background-color: #ffffff; border: 2px solid #e3dbd8; border-radius: 50%; margin-right: 10px; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 10px; color: #fff; display: flex; justify-content: center; align-items: center; margin-right: 15px; position: relative; top: -2px; transition: all 500ms ease; } .checkout__payment__title img { margin-left: 15px; } .checkout__payment__item--active .checkout__payment__title::before { background-color: var(--treck-base); border-color: var(--treck-base); content: '\f00c'; color: var(--treck-white); } .checkout__payment__content { font-size: 16px; line-height: 30px; color: var(--treck-gray); font-weight: 500; margin-left: 39px; } /*-------------------------------------------------------------- # About Four --------------------------------------------------------------*/ .about-four { position: relative; display: block; padding: 120px 0 120px; overflow: hidden; z-index: 1; } .about-four__shape-2 { position: absolute; left: 70px; bottom: -55px; z-index: -1; } .about-four__shape-2 img { width: auto; } .about-four__left { position: relative; display: block; margin-right: 80px; } .about-four__left .section-title { margin-bottom: 38px; } .about-four__left .section-title__border-box { margin-left: 0; } .about-four__top { position: relative; display: flex; align-items: center; } .about-four__icon { position: relative; display: flex; align-items: center; } .about-four__icon span { position: relative; display: inline-block; font-size: 63px; color: var(--treck-black); } .about-four__content { margin-left: 17px; } .about-four__content h4 { font-size: 24px; color: var(--treck-base); font-weight: 500; line-height: 30px; } .about-four__text-1 { padding-top: 34px; padding-bottom: 22px; } .about-four__points-box { position: relative; display: flex; align-items: center; } .about-four__points { position: relative; display: block; } .about-four__points li { position: relative; display: flex; align-items: center; } .about-four__points li .icon { position: relative; display: flex; align-items: center; } .about-four__points li .icon span { font-size: 21px; color: var(--treck-base); } .about-four__points li .text { margin-left: 6px; } .about-four__points li .text p { font-size: 16px; color: var(--treck-black); font-weight: 600; } .about-four__points--two { margin-left: 25px; } .about-four__btn-box { position: relative; display: block; margin-top: 45px; } .about-four__right { position: relative; display: block; margin-left: -40px; margin-right: 310px; } .about-four__img-box { position: relative; display: block; } .about-four__img-one { position: relative; display: block; } .about-four__img-one img { width: 100%; } .about-four__img-two { position: absolute; top: 0; right: -310px; } .about-four__img-two img { width: auto; } .about-four__experience { position: absolute; bottom: -60px; left: -54px; border-bottom-left-radius: 45px; background-color: rgb(255, 255, 255); box-shadow: 14.982px 29.403px 87px 0px rgba(0, 0, 0, 0.07); } .about-four__experience-inner { position: relative; display: block; max-width: 247px; padding: 22px 80px 23px; padding-right: 20px; width: 100%; border-bottom-left-radius: 45px; overflow: hidden; z-index: 1; } .about-four__experience h3 { font-size: 45px; font-weight: 600; line-height: 45px; color: var(--treck-base); } .about-four__experience p { font-size: 15px; margin-top: -2px; } .about-four__shape-1 { position: absolute; left: -85px; bottom: -13px; } .about-four__shape-1 img { width: auto; mix-blend-mode: darken; } /*-------------------------------------------------------------- # About Page Testimonial --------------------------------------------------------------*/ .about-page-testimonial { position: relative; display: block; background-color: var(--treck-primary); z-index: 1; } .about-page-testimonial__bg-1 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-repeat: no-repeat; background-position: center; background-size: cover; mix-blend-mode: multiply; opacity: 0.35; z-index: -1; } .about-page-testimonial__bg-2 { position: absolute; bottom: 0; left: 0; right: 0; height: 485px; background-repeat: no-repeat; background-position: center; background-size: cover; mix-blend-mode: luminosity; opacity: 0.05; z-index: -1; } /*-------------------------------------------------------------- # About Page Counter --------------------------------------------------------------*/ .about-page-counter { padding-top: 100px; } /*-------------------------------------------------------------- # Boxed Version --------------------------------------------------------------*/ body.boxed-wrapper { background-color: var(--treck-primary); } .boxed-wrapper .page-wrapper { max-width: 1530px; margin-left: auto; margin-right: auto; background-color: #fff; box-shadow: 0px 0px 100px 0px rgba(0, 0, 0, 0.08); } .boxed-wrapper .main-menu__call { display: none; } .boxed-wrapper .main-menu .main-menu__list > li + li, .boxed-wrapper .stricky-header .main-menu__list > li + li { margin-left: 42px; } .blog-bg { background: #eee; }