/*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Utility # Cards # Common # Form # Navigation # Animations # Mobile Nav # Search Popup # Page Header # Google Map # Client Carousel --------------------------------------------------------------*/ /*-------------------------------------------------------------- # Common --------------------------------------------------------------*/ /*== Default Css ==*/ :root { --thm-font: 'Inter', sans-serif; --thm-font-2: 'Plus Jakarta Sans', sans-serif; --thm-primary-color: #6c1afd; --thm-primary-color-rgb: 108, 26, 253; --thm-secondary-color: #ed746c; --thm-secondary-color-rgb: 237, 116, 108; --thm-body-font-color: #6d6b71; --thm-body-font-size: 16px; --thm-body-line-height: 26px; --thm-body-font-weight: 400; --thm-heading-font-color: #141316; --thm-white: #ffffff; --thm-black: #141316; --thm-black-bg: #141316; --thm-gray-bg: #F5F6FA; --thm-border-color: #e3dfe8; --thm-border-radius: 10px; } .thm-gradient { background-image: -moz-linear-gradient(0deg, rgb(109, 26, 255) 10%, rgb(237, 116, 108) 100%); background-image: -webkit-linear-gradient(0deg, rgb(109, 26, 255) 10%, rgb(237, 116, 108) 100%); background-image: -ms-linear-gradient(0deg, rgb(109, 26, 255) 10%, rgb(237, 116, 108) 100%); } body { font-family: var(--thm-font); color: var(--thm-body-font-color); font-size: var(--thm-body-font-size); line-height: var(--thm-body-line-height); font-weight: var(--thm-body-font-weight); } .body-bg-1 { background-color: #fbf8ff; } p { font-family: var(--thm-font); color: var(--thm-body-font-color); font-size: var(--thm-body-font-size); line-height: var(--thm-body-line-height); font-weight: var(--thm-body-font-weight); margin: 0; } a { color: var(--thm-black); transition: all 200ms linear; transition-delay: 0.1s; } .container { padding-left: 15px; padding-right: 15px; } @media (min-width: 1200px) { .container { max-width: 1200px; } } .auto-container { position: static; max-width: 1200px; padding: 0px 15px; margin: 0 auto; } .row { --bs-gutter-x: 30px; } .gutter-y-30 { --bs-gutter-y: 30px; } section { position: relative; display: block; z-index: 1; } body.locked { overflow: hidden; } 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 { color: var(--thm-heading-font-color); font-family: var(--thm-font-2); font-weight: 700; 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; } .fancybox-slide .fancybox-image-wrap { border-radius: 10px; overflow: hidden; } .page-wrapper { position: relative; margin: 0 auto; width: 100%; min-width: 300px; overflow: hidden; } ::-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; } button { cursor: pointer; border: none; background: transparent; padding: 0; } ul, li { list-style: none; margin: 0; padding: 0; } ol, li { margin: 0; padding: 0; } img { max-width: 100%; height: auto; transition-delay: 0.1s; transition-timing-function: ease-in-out; transition-duration: 0.7s; transition-property: all; } /* Form validation styles */ input:focus, textarea:focus, select:focus { border-color: #43c3ea; outline: none; } #contact-form input[type="text"].error { border-color: red; } #contact-form input[type="email"].error { border-color: red; } #contact-form select.error { border-color: red; } #contact-form textarea.error { border-color: red; } #contact-form label.error { display: none !important; } /*=============== scrollbar-Css =============*/ ::-webkit-scrollbar-track, ::-webkit-scrollbar-track { box-shadow: none; -webkit-box-shadow: none; background-color: var(--thm-secondary-color); border-radius: 10px; } ::-webkit-scrollbar, ::-webkit-scrollbar { width: 8px; background-color: var(--thm-secondary-color); } ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb { border-radius: 10px; background-image: linear-gradient(0deg, var(--thm-primary-color) 0%, var(--thm-secondary-color) 47.60%, var(--thm-black) 99.23%); } .xs-sidebar-widget::-webkit-scrollbar { width: 0px; } .rating-box-style1 { position: relative; display: block; } .rating-box-style1 ul { position: relative; display: flex; } .rating-box-style1 ul li { position: relative; display: block; line-height: 0; } .rating-box-style1 ul li+li { padding-left: 5px; } .rating-box-style1 ul li span { position: relative; display: inline-block; color: var(--thm-primary-color); font-size: 16px; cursor: pointer; } /** Thm Social Link **/ .thm-social-link { position: relative; display: block; padding-top: 30px; } .thm-social-link ul { position: relative; display: block; } .thm-social-link ul li { position: relative; float: left; margin-right: 10px; } .thm-social-link ul li:last-child { margin-right: 0; } .thm-social-link ul li a { position: relative; display: flex; align-items: center; justify-content: center; height: 50px; width: 50px; background-color: rgba(var(--thm-primary-color-rgb), 0.1); border-radius: 5px; color: var(--thm-primary-color); font-size: 18px; text-align: center; transition: all 200ms linear; transition-delay: 0.1s; z-index: 1; } .thm-social-link ul li a:before { position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; background-color: rgba(var(--thm-primary-color-rgb), 1); border-radius: 5px; content: ""; opacity: 0; transform: scale(0.5); transform-style: preserve-3d; transition: all 0.4s cubic-bezier(0.62, 0.21, 0.45, 1.52); z-index: -1; } .thm-social-link ul li:hover a:before { opacity: 1; transform: scale(1); } .thm-social-link ul li:hover a { color: #ffffff; } /** xs sidebar **/ .xs-sidebar-group .xs-overlay { position: fixed; top: 0; left: 0%; bottom: 0; right: 0; opacity: 0; visibility: hidden; cursor: url(../images/icon/cross-out.png), pointer; z-index: 99999999; transition: -webkit-transform 0.4s ease; transition: transform 0.4s ease; transition: transform 0.4s ease, -webkit-transform 0.4s ease; transform-origin: left right; -webkit-transform: scale(1, 0); transform: scale(1, 0); } .xs-sidebar-group.isActive .xs-overlay { opacity: 0.95; visibility: visible; right: 100%; background: var(--thm-black); -webkit-transform: scale(1, 1); transform: scale(1, 1); transform-origin: left center; } .xs-sidebar-widget { position: fixed; top: 0; right: -100%; bottom: 0; max-width: 460px; width: 100%; background-color: #ffffff; overflow: hidden; overflow-y: auto; transition-timing-function: ease-out; transition: 0.5s; visibility: hidden; opacity: 1; z-index: 999999999; } .xs-sidebar-group.isActive .xs-sidebar-widget { opacity: 1; visibility: visible; right: 0; transition-timing-function: ease-in; transition: 0.5s; } .sidebar-widget-container { position: relative; top: 150px; opacity: 0; visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: all 300ms ease 100ms; } .xs-sidebar-group.isActive .sidebar-widget-container { top: 0px; opacity: 1; visibility: visible; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: all 900ms ease 500ms; } .xs-overlay { position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: 0.8; z-index: 0; background-color: #000000; } .sidebar-textwidget { padding: 50px 45px; } .xs-sidebar-group .widget-heading { position: absolute; top: 0; right: 0; padding: 25px; } .xs-sidebar-group .widget-heading a { position: relative; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--thm-black); border-radius: 50%; color: var(--thm-black); font-size: 20px; font-weight: 400; transition: all 200ms linear; transition-delay: 0.1s; } .xs-sidebar-group .widget-heading a:hover { color: var(--thm-primary-color); border-color: var(--thm-primary-color); } .xs-sidebar-group .content-inner .logo { position: relative; display: block; border-bottom: 1px solid #e0e0e0; padding-bottom: 30px; } .xs-sidebar-group .content-inner .logo a { position: relative; display: inline-block; } .xs-sidebar-group .content-inner h3 { color: var(--thm-black); font-size: 28px; line-height: 40px; font-weight: 700; text-transform: capitalize; font-family: var(--thm-font); margin-bottom: 22px; } .xs-sidebar-group .content-inner h3 span { color: var(--thm-base); font-size: 25px; font-weight: 900; } .xs-sidebar-group .content-inner .content-box { position: relative; display: block; padding-top: 33px; padding-bottom: 47px; } .xs-sidebar-group .content-inner .content-box .inner-text { position: relative; display: block; } .xs-sidebar-group .content-inner .content-box p { color: var(--thm-black); } .xs-sidebar-group .content-inner .sidebar-contact-info { position: relative; display: block; } .xs-sidebar-group .content-inner .sidebar-contact-info h3 { color: var(--thm-black); font-size: 25px; line-height: 30px; font-weight: 700; margin: 0 0 27px; } .sidebar-contact-info ul { position: relative; display: block; } .sidebar-contact-info ul li { position: relative; display: block; margin-bottom: 23px; } .sidebar-contact-info ul li:last-child { margin-bottom: 0; } .sidebar-contact-info ul li .inner { position: relative; display: block; padding-left: 0; } /*** .sidebar-contact-info ul li .inner .icon { position: absolute; top: 0px; left: 0; } .sidebar-contact-info ul li .inner .icon span { position: relative; display: block; color: var(--thm-base); font-size: 27px; line-height: 27px; font-weight: 500; } .sidebar-contact-info ul li .inner .icon span.map-marker { color: var(--thm-base); position: relative; top: 8px; font-size: 32px; } **/ .sidebar-contact-info ul li .inner .text { position: relative; display: block; } .sidebar-contact-info ul li .inner .text p { color: var(--thm-black); line-height: 24px; } .sidebar-contact-info ul li .inner .text p a { color: var(--thm-black); transition: all 200ms linear; transition-delay: 0.1s; } .sidebar-contact-info ul li .inner .text p a:hover { color: var(--thm-base); text-shadow: -0.45px -0.45px 0 var(--thm-base), 0.45px 0.45px var(--thm-base); } .xs-sidebar-group .content-inner .side-content-newsletter-box { position: relative; display: block; padding-top: 49px; } .xs-sidebar-group .content-inner .side-content-newsletter-box h3 { color: var(--thm-black); font-size: 25px; line-height: 30px; font-weight: 700; margin: 0 0 24px; } .side-content-newsletter-box .form-group input[type="email"] { position: relative; display: block; width: 100%; height: 60px; color: #444444; font-size: 18px; font-weight: 400; background-color: rgb(248, 248, 248); border: 1px solid #e3dfdf; padding-left: 30px; padding-right: 20px; border-radius: 6px; font-family: var(--thm-font); } .side-content-newsletter-box .form-group button { margin-top: 30px; } /*== Review Css ======*/ .review-box { position: relative; display: block; overflow: hidden; line-height: 15px; } .review-box ul { display: block; overflow: hidden; } .review-box ul li { display: inline-block; float: left; margin-right: 5px; cursor: pointer; } .review-box ul li:last-child { margin-right: 0px; } .review-box ul li i { color: #fbaf02; font-size: 15px; } /*== Section Title Css ======*/ .sec-title { position: relative; display: block; margin-top: -7px; padding-bottom: 49px; } .sec-title .sub-title { position: relative; display: block; margin-bottom: 9px; } .sec-title .sub-title h4 { color: var(--thm-primary-color); font-size: 14px; line-height: 24px; font-weight: 800; text-transform: uppercase; } .sec-title .sub-title h4 span { position: relative; top: -2px; font-size: 12px; } .sec-title h2 { color: var(--thm-heading-font-color); font-size: 52px; line-height: 1.2em; text-transform: none; } /*== Btn One Css ======*/ .btn-box { position: relative; display: block; } .btn-one { position: relative; display: inline-flex; align-items: center; overflow: hidden; padding-top: 10px; padding-left: 30px; padding-right: 30px; padding-bottom: 10px; background-color: transparent; color: var(--thm-white); font-size: 16px; line-height: 40px; font-family: var(--thm-font-2); font-weight: 700; border-radius: var(--thm-border-radius); text-transform: capitalize; -webkit-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; z-index: 2; } .btn-one:after { content: ""; position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; transform: scaleX(1); transition-duration: 800ms; background-color: var(--thm-primary-color); z-index: -1; } .btn-one:hover:after { transform: scaleX(0); transition-duration: 1500ms; } .btn-one:before { position: absolute; top: 0px; left: -10px; bottom: 0; right: 100%; content: ""; background: var(--thm-secondary-color); -webkit-transform: translateX(-100%); transform: translateX(-100%); border-radius: 0%; transition-duration: 800ms; z-index: 1; } .btn-one:hover:before { right: 0px; left: 0; -webkit-transform: translateX(0); transform: translateX(0); } .btn-one .txt { position: relative; display: inline-flex; align-items: center; z-index: 1; } .btn-one:hover, .btn-one:focus { color: #ffffff; -webkit-box-shadow: 2px 2px 20px 0px rgba(var(--thm-black-rgb), 0.1); -moz-box-shadow: 2px 2px 20px 0px rgba(var(--thm-black-rgb), 0.1); box-shadow: 2px 2px 20px 0px rgba(var(--thm-black-rgb), 0.1); } .btn-one i { position: relative; display: inline-block; font-size: 20px; font-weight: 400; margin-right: 10px; top: 0px; z-index: 1; } /*== Btn Two Css ======*/ .btn-two { position: relative; display: inline-flex; align-items: center; color: var(--thm-base); font-size: 15px; line-height: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-family: var(--thm-font-3); transition: all 200ms linear; transition-delay: 0.1s; } .btn-two span { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; color: var(--thm-black); font-size: 18px; margin-left: 10px; transition: border-color 0.5s ease; transition: all 0.5s ease; z-index: 1; } .btn-two:hover span { color: #ffffff; } .btn-two span:after { position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; background: var(--thm-base); border-radius: 50%; content: ""; opacity: 0; transform: scale(0.5); transform-style: preserve-3d; z-index: -1; transition: background-color 0.5s ease; transition: all 0.5s ease; } .btn-two:hover span:after { opacity: 1.0; transform: scale(1.0); } .btn-two:hover { color: var(--thm-base); letter-spacing: normal; } /*== Owl Dot Style One Css ======*/ .owl-carousel.owl-dot-style1 .owl-dots { position: relative; text-align: center; line-height: 0; margin-top: 53px !important; display: block; } .owl-carousel.owl-dot-style1 .owl-dots .owl-dot { position: relative; display: inline-block; width: 10px; height: 10px; background-color: #d8d8d8; border: 1px solid #d8d8d8; margin: 0px 10px; padding: 0px; border-radius: 50%; transition: all 100ms linear; transition-delay: 0.1s; } .owl-carousel.owl-dot-style1 .owl-dots .owl-dot.active {} .owl-carousel.owl-dot-style1 .owl-dots .owl-dot::before { content: ""; position: absolute; top: -5px; left: -1px; bottom: -5px; right: -1px; border-radius: 9px; background-color: var(--thm-base); transition: -webkit-transform 0.4s ease; transition: transform 0.4s ease; transition: transform 0.4s ease, -webkit-transform 0.4s ease; transform-origin: bottom right; -webkit-transform: scale(1, 0); transform: scale(1, 0); transition: all 900ms ease; } .owl-carousel.owl-dot-style1 .owl-dots .owl-dot.active::before { -webkit-transform: scale(1, 1); transform: scale(1, 1); transform-origin: top center; } .owl-carousel.owl-dot-style1 .owl-dots .owl-dot span { display: none; } /*== Owl Dot Style Two Css ======*/ .owl-carousel.owl-dot-style2 .owl-dots { position: relative; text-align: center; line-height: 0; margin-top: 30px !important; display: block; } .owl-carousel.owl-dot-style2 .owl-dots .owl-dot { position: relative; display: inline-block; width: 16px; height: 16px; background-color: transparent; border: 5px solid #ffffff; margin: 0px 5px; padding: 0px; border-radius: 50%; transition: all 100ms linear; transition-delay: 0.1s; } .owl-carousel.owl-dot-style2 .owl-dots .owl-dot:before { content: ""; position: absolute; top: -5px; left: -5px; bottom: -5px; right: -5px; border: 1px solid var(--thm-base); border-radius: 50%; transform: scale(0); transition: all 500ms ease; } .owl-carousel.owl-dot-style2 .owl-dots .owl-dot.active { border: 5px solid #1a1c23; background-color: var(--thm-base); } .owl-carousel.owl-dot-style2 .owl-dots .owl-dot.active:before { transform: scale(1); } .owl-carousel.owl-dot-style2 .owl-dots .owl-dot span { display: none; } /*== Owl Nav Style One Css ======*/ .owl-nav-style-one.owl-theme .owl-stage-outer { position: relative; display: block; padding-top: 0px; padding-bottom: 0px; } .owl-nav-style-one.owl-theme .owl-nav { position: relative; display: flex; align-items: center; justify-content: center; height: 60px; width: 110px; border: 1px solid var(--thm-border-color); border-radius: var(--thm-border-radius); margin: 0; z-index: 10; } .owl-nav-style-one.owl-theme .owl-nav:before { content: ""; position: absolute; top: 20px; left: 50%; bottom: 20px; width: 1px; background-color: var(--thm-border-color); margin: 0 auto; } .owl-nav-style-one.owl-theme .owl-nav [class*="owl-"] { position: relative; display: inline-block; width: 40px; height: 34px; background-color: transparent; border: 0px solid #a7a7a7; border-radius: 0%; margin: 0 0px; padding: 0; z-index: 1; transition: all 700ms ease 0s; } .owl-nav-style-one.owl-theme .owl-nav [class*="owl-"]:before { content: ""; position: absolute; top: 0px; left: -1px; bottom: -1px; right: -1px; background-color: var(--thm-base); border-radius: 50%; z-index: -1; opacity: 0; -webkit-transform: perspective(400px) rotateX(0deg) scale(0); -ms-transform: perspective(400px) rotateX(0deg) scale(0); transform: perspective(400px) rotateX(0deg) scale(0); -webkit-transform-origin: bottom; -ms-transform-origin: bottom; transform-origin: bottom; transition: background-color 0.5s ease; transition: all 0.5s ease; display: none; } .owl-nav-style-one.owl-theme .owl-nav [class*="owl-"]:hover::before { opacity: 1; -webkit-transform: perspective(400px) rotateX(0deg) scale(1); -ms-transform: perspective(400px) rotateX(0deg) scale(1); transform: perspective(400px) rotateX(0deg) scale(1); } .owl-nav-style-one.owl-theme .owl-nav [class*="owl-"] span { position: relative; display: block; color: var(--thm-black); font-size: 34px; line-height: 34px; font-weight: 400; transition: all 200ms linear; transition-delay: 0.1s; } .owl-nav-style-one.owl-theme .owl-nav .owl-prev { transform: rotate(0deg); } .owl-nav-style-one.owl-theme .owl-nav .owl-next { transform: rotate(0deg); } .owl-nav-style-one.owl-theme .owl-nav [class*="owl-"] span { transition: all 200ms linear; transition-delay: 0.1s; } .owl-nav-style-one.owl-theme .owl-nav [class*="owl-"]:hover span { color: var(--thm-primary-color); } /*== Scrool To Top Css ======*/ .scroll-to-top { position: fixed; right: -10px; bottom: 80px; transform: rotate(90deg); z-index: 99999999999; } .scroll-to-top .visible { visibility: visible !important; opacity: 1 !important; } .scroll-to-top .scroll-top-inner { opacity: 0; visibility: hidden; } .scroll-to-top .scroll-top-inner { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.4s; -o-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.4s; transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.4s; } .scroll-to-top .scroll-bar { width: 50px; height: 4px; margin-right: 10px; position: relative; } .scroll-to-top .scroll-bar:before { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-color: var(--thm-primary-color); opacity: 1; } .scroll-to-top .scroll-bar .bar-inner { position: absolute; top: 0; right: 0; height: 100%; background-color: var(--thm-secondary-color); } .scroll-to-top .scroll-bar-text { color: var(--thm-primary-color); font-size: 16px; font-weight: 700; cursor: pointer; font-family: var(--thm-font-2); transition: all 500ms ease; } .scroll-to-top .scroll-bar-text:hover { transform: scale(1); } .scroll-to-top--style2 { position: relative; top: -5px; right: 0; bottom: 0; transform: rotate(0deg); } .scroll-to-top--style2 .scroll-bar { display: none; } .scroll-to-top--style2 .scroll-bar-text { color: #ffffff; font-size: 14px; font-weight: 700; text-transform: uppercase; cursor: pointer; font-family: var(--thm-font-2); transition: all 500ms ease; } .scroll-to-top--style2 .scroll-bar-text span { position: relative; top: 8px; display: inline-block; padding-left: 1px; font-size: 30px; } /*== Styled Pagination Css ======*/ .styled-pagination { position: relative; display: flex; align-items: center; width: 100%; height: auto; padding-top: 20px; } .styled-pagination.pdtop0 { padding-top: 0; } .styled-pagination li { position: relative; display: block; float: left; margin-right: 10px; } .styled-pagination li:last-child { margin-right: 0; } .styled-pagination li a { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 50px; border-radius: 3px; background: var(--thm-primary-color); border: 1px solid #D9D9D9; color: var(--thm-white); font-size: 20px; line-height: 48px; font-weight: 600; text-align: center; text-transform: uppercase; transition: all 500ms ease; font-family: var(--thm-font); z-index: 1; } .styled-pagination li a span:before { position: relative; top: 0px; font-size: 34px; font-weight: 100; } .styled-pagination li.prev a span:before { position: relative; display: inline-block; } .styled-pagination li.next a span:before { position: relative; display: inline-block; } .styled-pagination li:hover a, .styled-pagination li.active a { color: #ffffff; border-color: var(--thm-secondary-color); background: var(--thm-secondary-color); } .styled-pagination li.prev a, .styled-pagination li.next a { width: 70px; } .styled-pagination li.prev a:hover, .styled-pagination li.next a:hover { color: #ffffff; } /*== checked Css Css ======*/ .checked-box1 { position: relative; display: block; min-height: 26px; } .checked-box1 input[type="checkbox"] { display: none; } .checked-box1 label { position: relative; display: inline-block; padding-left: 35px; color: var(--thm-body-font-color); font-size: 15px; line-height: 26px; font-weight: 400; cursor: pointer; font-family: var(--thm-font); } .checked-box1 input[type="checkbox"]+label span { position: absolute; display: block; top: 3px; left: 0; width: 20px; height: 20px; vertical-align: middle; background-color: transparent; border: 1px solid #c3cadb; cursor: pointer; border-radius: 8px; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .checked-box1 label span:before { position: absolute; top: 0px; left: 0px; bottom: 0; right: 0; content: ""; width: 12px; height: 12px; background: var(--thm-primary-color); border-radius: 50%; margin: 3px auto 0px; transform: scale(0); -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .checked-box1 input[type="checkbox"]:checked+label span { border-color: #c3cadb; } .checked-box1 input[type="checkbox"]:checked+label span:before { transform: scale(1.0); } /*== checked Css Css ======*/ .checked-box2 { position: relative; display: block; min-height: 26px; } .checked-box2 input[type="checkbox"] { display: none; } .checked-box2 label { position: relative; display: inline-block; padding-left: 25px; color: var(--thm-body-font-color); font-size: 16px; line-height: 26px; font-weight: 400; cursor: pointer; font-family: var(--thm-font); } .checked-box2 input[type="checkbox"]+label span { position: absolute; top: 3px; left: 0; width: 20px; height: 20px; vertical-align: middle; background-color: transparent; border: 1px solid var(--thm-border-color); cursor: pointer; border-radius: 5px; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .checked-box2 label span:before { position: absolute; top: 0px; left: 0px; bottom: 0; right: 0; content: "\e979"; font-family: 'icomoon' !important; color: var(--thm-primary-color); font-size: 15px; font-weight: 700; transform: scale(0); -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; display: flex; align-items: center; justify-content: center; } .checked-box2 input[type="checkbox"]:checked+label span { border-color: #c3cadb; } .checked-box2 input[type="checkbox"]:checked+label span:before { transform: scale(1.0); } /*== Accordion Box Css ======*/ .accordion-box { position: relative; display: block; } .accordion-box .block { position: relative; display: block; margin-bottom: 20px; transition: all 500ms ease; } .accordion-box .block:last-child { margin-bottom: 0px; } .accordion-box .block .acc-btn { position: relative; display: block; cursor: pointer; background: #ffffff; padding-top: 9px; padding-left: 55px; padding-bottom: 9px; padding-right: 20px; border: 1px solid #d4d4d4; transition: all 500ms ease; } .accordion-box .block .acc-btn.active { background: #ffffff; border-bottom: 1px solid transparent; } .accordion-box .block .acc-btn h3 { color: var(--thm-black); font-size: 19px; line-height: 30px; font-weight: 600; font-family: var(--thm-font); transition: all 500ms ease; } .accordion-box .block .acc-btn.active h3 { color: var(--thm-base); } .accordion-box .block .acc-btn .icon-outer { position: absolute; top: 50%; left: 20px; width: 20px; height: 20px; color: var(--thm-black); font-size: 18px; text-align: left; line-height: 20px; cursor: pointer; transform: translateY(-50%) rotate(0deg); transition: all 500ms ease; z-index: 1; } .accordion-box .block .acc-btn.active .icon-outer { color: var(--thm-base); transform: translateY(-50%) rotate(0deg); } .accordion-box .block .acc-btn .icon-outer i:before { font-weight: 700; } .accordion-box .block .acc-btn.active .icon-outer i:before { content: "\e90b"; } .accordion-box .block .acc-content { position: relative; display: none; padding-top: 1px; padding-left: 55px; padding-bottom: 21px; padding-right: 20px; border: 1px solid #d4d4d4; border-top: 1px solid transparent; } .accordion-box .block .acc-content.current { display: block; } .accordion-box .block .acc-content p { margin: 0; } /*== Accordion Box Style 1 Css ======*/ .accordion-box-style1 { position: relative; display: block; } .accordion-box-style1 .accordion { position: relative; display: block; margin-bottom: 31px; } .accordion-box-style1 .accordion:last-child { margin-bottom: 0; } .accordion-box-style1 .accordion .accord-btn { position: relative; display: block; cursor: pointer; padding-left: 80px; transition: all 500ms ease; z-index: 1; } .accordion-box-style1 .accordion .accord-btn h4 { color: var(--thm-black); font-size: 21px; line-height: 31px; transition: all 500ms ease; } .accordion-box-style1 .accordion .accord-btn.active h4 { color: var(--thm-primary-color); } .accordion-box-style1 .accordion .accord-btn::after { font-family: 'icomoon' !important; position: absolute; content: "\e969"; top: 50%; left: 0px; margin-top: 2px; width: 55px; height: 55px; border: 1px solid var(--thm-border-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--thm-black); font-size: 20px; line-height: 20px; font-weight: 700; transform: translateY(-50%); transition: all 500ms ease 0s; } .accordion-box-style1 .accordion .accord-btn.active { -webkit-transition: all 0.4s linear; -o-transition: all 0.4s linear; transition: all 0.4s linear; } .accordion-box-style1 .accordion .accord-btn.active:after { color: #ffffff; content: "\e96c"; border-color: var(--thm-primary-color); background-color: var(--thm-primary-color); } .accordion-box-style1 .accordion .accord-content { position: relative; padding-top: 29px; padding-left: 80px; padding-bottom: 0px; padding-right: 0px; display: none; margin-top: -8px; } .accordion-box-style1 .accordion .accord-content.collapsed { display: block; } .accordion-box-style1 .accordion .accord-content p { margin: 0; } /*== Accordion Box Style 2 Css ======*/ .accordion-box-style2 { position: relative; display: block; padding-top: 33px; } .accordion-box-style2 .accordion { position: relative; display: block; background: transparent; } .accordion-box-style2 li+li { margin-top: 20px; } .accordion-box-style2 .accordion:last-child { margin-bottom: 0; } .accordion-box-style2 .accordion .accord-btn { position: relative; display: flex; align-items: center; justify-content: space-between; cursor: pointer; border-radius: 10px; border: 1px solid var(--thm-border-color); padding: 16px 30px 17px; transition: all 500ms ease 0s; z-index: 1; } .accordion-box-style2 .accordion .accord-btn:hover, .accordion-box-style2 .accordion .accord-btn.active { border: 1px solid var(--thm-primary-color); border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; } .accordion-box-style2 .accordion .accord-btn h4 { font-size: 19px; line-height: 29px; transition: all 500ms ease; } .accordion-box-style2 .accordion .accord-btn:hover h4, .accordion-box-style2 .accordion .accord-btn.active h4 { color: var(--thm-white); } .accordion-box-style2 .accordion .accord-btn:before { content: ""; position: absolute; top: 0; left: 0px; bottom: 0px; right: 0px; background-color: var(--thm-primary-color); transition: -webkit-transform 0.4s ease; transition: transform 0.4s ease; transition: transform 0.4s ease, -webkit-transform 0.4s ease; transform-origin: bottom right; -webkit-transform: scale(1, 0); transform: scale(1, 0); z-index: -1; } .accordion-box-style2 .accordion .accord-btn:hover:before, .accordion-box-style2 .accordion .accord-btn.active:before { border-top-left-radius: 7px; border-top-right-radius: 7px; -webkit-transform: scale(1, 1); transform: scale(1, 1); transform-origin: top center; } .accordion-box-style2 .accordion .accord-btn .icon-box { position: relative; display: block; line-height: 0; } .accordion-box-style2 .accordion .accord-btn .icon-box span { position: relative; display: flex; align-items: center; justify-content: center; width: 35px; height: 35px; border-radius: 50%; background-color: #f0ebf5; color: var(--thm-black); font-size: 15px; line-height: 15px; font-weight: 900; transition: all 500ms ease; } .accordion-box-style2 .accordion .accord-btn:hover .icon-box span, .accordion-box-style2 .accordion .accord-btn.active .icon-box span { background-color: var(--thm-white); color: var(--thm-black); transform: rotate(90deg); } .accordion-box-style2 .accordion .accord-content { position: relative; display: none; border: 1px solid var(--thm-border-color); border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; padding: 33px 30px 33px; } .accordion-box-style2 .accordion .accord-content.collapsed { display: block; } .accordion-box-style2 .accordion .accord-btn.active { -webkit-transition: all 0.4s linear; -o-transition: all 0.4s linear; transition: all 0.4s linear; } .accordion-box-style2 .accordion .accord-content p { margin: 0; } /*== Search Popup Css ======*/ .search-popup { position: fixed; top: 0; left: 0; width: 100vw; height: 300px; 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; opacity: 0; visibility: hidden; -webkit-transform: translateY(-10%); transform: translateY(-10%); z-index: 9999; } .search-popup.active { opacity: 1; visibility: visible; -webkit-transform: translateY(0%); transform: translateY(0%); -webkit-transition: all 0.3s; transition: all 0.3s; } .search-popup__overlay { position: absolute; top: 0%; left: 0%; right: 0%; height: 300px; background-color: var(--thm-primary-color); opacity: 1.0; cursor: pointer; } .search-popup__close-btn { position: absolute; top: 10px; right: 10px; width: 60px; height: 60px; background-color: var(--thm-black); display: flex; align-items: center; justify-content: center; color: var(--thm-white); font-size: 30px; } .search-popup__content { width: 100%; max-width: 560px; background-color: #000000; padding: 10px; z-index: 10; } .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: 0px; overflow: hidden; } .search-popup__content form input[type="search"], .search-popup__content form input[type="text"] { position: relative; display: block; width: 100%; height: 70px; background-color: #fff; color: var(--thm-black); font-size: 16px; border: none; outline: none; padding-left: 30px; padding-right: 80px; } .search-popup__content .thm-btn { position: absolute; top: 0; right: 0px; padding: 0; width: 60px; height: 70px; 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; border-radius: 0; background-color: var(--thm-black); border: 0; border-top-right-radius: 0px; border-bottom-right-radius: 0px; color: #ffffff; font-size: 20px; font-weight: 400; transition: background-color 0.5s ease; transition: all 0.5s ease; } .search-popup__content .thm-btn i { background-color: transparent; margin-left: 0; } .search-popup__content .thm-btn:hover { color: #ffffff; background-color: var(--thm-primary-color); } /* Preloader */ .handle-preloader { position: fixed; left: 0; top: 0; width: 100%; height: 100%; display: flex; display: -ms-flexbox; align-items: center; -webkit-align-items: center; justify-content: center; -webkit-justify-content: center; z-index: 9999999; } .handle-preloader .animation-preloader { position: absolute; z-index: 100; } .handle-preloader .animation-preloader .spinner { height: 150px; width: 150px; border-radius: 50%; margin: 0 auto 45px auto; animation: spinner 1s infinite linear; } .handle-preloader .animation-preloader .txt-loading { text-align: center; user-select: none; } .handle-preloader .animation-preloader .txt-loading .letters-loading { position: relative; display: inline-block; font-family: var(--thm-font-3); font-weight: 700; letter-spacing: 15px; font-size: 70px; line-height: 70px; text-transform: uppercase; color: transparent; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: rgba(255, 255, 255, 0.3); } .handle-preloader .animation-preloader .txt-loading .letters-loading:before { animation: letters-loading 4s infinite; content: attr(data-text-preloader); position: absolute; top: 0; left: 0; opacity: 0; } .handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(2):before { animation-delay: 0.1s; } .handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(3):before { animation-delay: 0.2s; } .handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(4):before { animation-delay: 0.3s; } .handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(5):before { animation-delay: 0.4s; } .handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(6):before { animation-delay: 0.5s; } .handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(7):before { animation-delay: 0.6s; } .handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(8):before { animation-delay: 0.7s; } .handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(9):before { animation-delay: 0.8s; } .handle-preloader .loader-section { background-color: #ffffff; height: 100%; position: fixed; top: 0; width: calc(50% + 1px); } .preloader .loaded .animation-preloader { opacity: 0; transition: 0.3s ease-out; } .handle-preloader .animation-preloader .txt-loading .letters-loading:before { color: #ffffff; } .handle-preloader .animation-preloader .spinner { border: 3px solid #ffffff; border-top-color: rgba(255, 255, 255, 0.7); } /* AnimaciƃĀ³n del preloader */ @keyframes spinner { to { transform: rotateZ(360deg); } } @keyframes letters-loading { 0%, 75%, 100% { opacity: 0; transform: rotateY(-90deg); } 25%, 50% { opacity: 1; transform: rotateY(0deg); } } .loader-wrap .layer-one { position: absolute; left: 0%; top: 0; width: 33.3333%; height: 100%; overflow: hidden; } .loader-wrap .layer-two { position: absolute; left: 33.3333%; top: 0; width: 33.3333%; height: 100%; overflow: hidden; } .loader-wrap .layer-three { position: absolute; left: 66.6666%; top: 0; width: 33.3333%; height: 100%; overflow: hidden; } .loader-wrap .layer .overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--thm-black); } @media screen and (max-width: 767px) { .handle-preloader .animation-preloader .spinner { height: 8em; width: 8em; } } @media screen and (max-width: 500px) { .handle-preloader .animation-preloader .spinner { height: 7em; width: 7em; } .handle-preloader .animation-preloader .txt-loading .letters-loading { font-size: 40px; letter-spacing: 10px; } } @-webkit-keyframes pulse10 { 0% { -webkit-box-shadow: 0 0 0 0 #ee212b; box-shadow: 0 0 0 0 #ee212b; } 40% { -webkit-box-shadow: 0 0 0 50px rgba(255, 194, 17, 0); box-shadow: 0 0 0 50px rgba(255, 194, 17, 0); } 70% { -webkit-box-shadow: 0 0 0 50px rgba(255, 194, 17, 0); box-shadow: 0 0 0 50px rgba(255, 194, 17, 0); } 100% { -webkit-box-shadow: 0 0 0 0 rgba(255, 194, 17, 0); box-shadow: 0 0 0 0 rgba(255, 194, 17, 0); } } @keyframes pulse10 { 0% { -webkit-box-shadow: 0 0 0 0 #ee212b; box-shadow: 0 0 0 0 #ee212b; } 40% { -webkit-box-shadow: 0 0 0 50px rgba(255, 194, 17, 0); box-shadow: 0 0 0 50px rgba(255, 194, 17, 0); } 70% { -webkit-box-shadow: 0 0 0 50px rgba(255, 194, 17, 0); box-shadow: 0 0 0 50px rgba(255, 194, 17, 0); } 100% { -webkit-box-shadow: 0 0 0 0 rgba(255, 194, 17, 0); box-shadow: 0 0 0 0 rgba(255, 194, 17, 0); } } /*------------------------------------------ Revolution Style1 Css --------------------------------------------*/ .revolution-style1 { padding: 140px 0px 100px; } .revolution-style1 .container { max-width: 1160px; } .revolution-style1 .row { --bs-gutter-x: 70px; } .revolution-style1__single { position: relative; display: block; margin-bottom: 30px; } .revolution-style1__single-img { position: relative; display: block; } .revolution-style1__single-img .count-text { position: absolute; top: 30px; left: -40px; z-index: 3; } .revolution-style1__single-img .count-text h2 { position: relative; display: inline-block; color: transparent; font-size: 72px; line-height: 1em; font-weight: 700; -webkit-background-clip: text; -webkit-text-stroke: 1px var(--thm-secondary-color); } .revolution-style1__single-img .count-text h2:before { overflow: hidden; position: absolute; top: 0; left: 0; width: 0; color: var(--thm-secondary-color); white-space: nowrap; content: attr(data-hover); transition: all 0.5s cubic-bezier(0.17, 0.67, 0.32, 0.87); } .revolution-style1__single-img:hover .count-text h2:before { width: 100%; } .revolution-style1__single-img .inner { position: relative; display: block; overflow: hidden; border-radius: var(--thm-border-radius); z-index: 1; } .revolution-style1__single-img .inner::before { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: rgb(0, 0, 0); background: linear-gradient(0deg, rgba(0, 0, 0, 0.8995973389355743) 0%, rgba(0, 0, 0, 0.5046393557422969) 35%, rgba(0, 0, 0, 0) 70%); content: ""; z-index: 1; } .revolution-style1__single-img .inner img { width: 100%; transform: scale(1.0); transition: all 0.3s ease-in-out 0.1s; } .revolution-style1__single:hover .revolution-style1__single-img .inner img { transform: scale(1.08) rotate(0deg); } .revolution-style1__single-img .overlay-content { position: absolute; left: 0; bottom: 0px; right: 0; transform: translateY(27px); z-index: 5; -webkit-transition: all 0.5s cubic-bezier(0.4, 0.28, 0.31, 1.28) 0.2s; transition: all 0.5s cubic-bezier(0.4, 0.28, 0.31, 1.28) 0.2s; } .revolution-style1__single:hover .revolution-style1__single-img .overlay-content { transform: translateY(-25px); } .revolution-style1__single-img .overlay-content .icon { position: relative; display: block; line-height: 0; margin-bottom: 13px; } .revolution-style1__single-img .overlay-content .icon a { color: var(--thm-white); } .revolution-style1__single-img .overlay-content .icon a:hover { color: var(--thm-primary-color); } .revolution-style1__single-img .overlay-content .icon a span { position: relative; display: inline-block; font-size: 32px; line-height: 32px; } .revolution-style1__single-img .overlay-content .text-box { position: relative; display: block; } .revolution-style1__single-img .overlay-content .text-box h2 { font-size: 24px; line-height: 34px; font-weight: 700; text-transform: capitalize; margin-bottom: 7px; } .revolution-style1__single-img .overlay-content .text-box h2 a { color: var(--thm-white); } .revolution-style1__single-img .overlay-content .text-box h2 a:hover { color: var(--thm-primary-color); } .revolution-style1__single-img .overlay-content .text-box p { color: #a3a0a7; font-size: 13px; line-height: 23px; font-weight: 700; text-transform: uppercase; font-family: var(--thm-font-2); } .revolution-style1__single-img .overlay-content .btn-box { position: relative; display: block; margin-top: 23px; transition: all 200ms linear; transition-delay: 0.1s; } .revolution-style1__single:hover .revolution-style1__single-img .overlay-content .btn-box { margin-top: 13px; } .revolution-style1__single-img .overlay-content .btn-box a { position: relative; display: inline-flex; align-items: center; color: var(--thm-white); font-size: 16px; line-height: 26px; font-weight: 700; text-transform: capitalize; } .revolution-style1__single-img .overlay-content .btn-box a:hover { color: var(--thm-primary-color); } .revolution-style1__single-img .overlay-content .btn-box a span { position: relative; display: inline-block; padding-right: 5px; font-size: 32px; line-height: 32px; } /*------------------------------------------ Features Style1 Css --------------------------------------------*/ .features-style1 { padding: 0px 0px 110px; } .features-style1.pdtop { padding-top: 140px; } .features-style1 .row { --bs-gutter-x: 0px; } .features-style1 .sec-title { padding-bottom: 52px; } .features-style1__single { position: relative; display: block; overflow: hidden; padding: 0px 30px 0px; z-index: 1; } .features-style1__single::before { position: absolute; top: 8px; left: 0; bottom: 14px; width: 1px; background: var(--thm-border-color); content: ""; } .features-style1__single .title { position: relative; display: block; margin-bottom: 33px; } .features-style1__single .title h2 { font-size: 21px; line-height: 31px; text-transform: capitalize; } .features-style1__single .icon-box { position: relative; display: block; padding: 10px 0px 10px; z-index: 1; } .features-style1__single .icon-box__bg { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-size: cover; background-repeat: no-repeat; background-position: center center; z-index: -1; } .features-style1__single .icon-box .icon { position: relative; display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; background: #fbf8ff; border-radius: 50%; border: 1px solid var(--thm-border-color); margin: 0 auto; z-index: 1; } .features-style1__single .icon-box .icon::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; border-radius: 50%; background-color: var(--thm-primary-color); transition: -webkit-transform 0.4s ease; transition: transform 0.4s ease; transition: transform 0.4s ease, -webkit-transform 0.4s ease; transform-origin: bottom right; -webkit-transform: scale(1, 0); transform: scale(1, 0); z-index: -1; } .features-style1__single:hover .icon-box .icon::before { -webkit-transform: scale(1, 1); transform: scale(1, 1); transform-origin: top center; } .features-style1__single .icon-box .icon span, .features-style1__single .icon-box .icon i { position: relative; display: inline-block; color: var(--thm-primary-color); font-size: 40px; line-height: 40px; transition: all 200ms linear; transition-delay: 0.1s; } .features-style1__single:hover .icon-box .icon span, .features-style1__single:hover .icon-box .icon i { color: var(--thm-white); } .features-style1__single .text { position: relative; display: block; margin-top: 33px; } .features-style1__single .text p { margin: 0; } .features-style1__single .btn-box { position: relative; display: block; margin-top: 17px; } .features-style1__single .btn-box a { position: relative; display: inline-flex; align-items: center; color: var(--thm-black); font-size: 16px; line-height: 26px; font-weight: 700; text-transform: capitalize; font-family: var(--thm-font-2); z-index: 1; } .features-style1__single .btn-box a:hover { color: var(--thm-primary-color); } .features-style1__single .btn-box a span { position: relative; display: inline-block; padding-right: 4px; font-size: 34px; line-height: 34px; font-weight: 400; } .features-style1-carousel { position: relative; } .features-style1-carousel:before { content: ""; position: absolute; top: 8px; right: 0; bottom: 14px; width: 1px; background-color: var(--thm-border-color); } .features-style1-carousel.owl-nav-style-one.owl-theme .owl-nav { position: absolute; top: -122px; right: 0; } /*------------------------------------------ Project Style1 Css --------------------------------------------*/ .project-style1 { padding: 140px 0px 140px; } .project-style1 .auto-container { max-width: 1900px; width: 100%; } .project-style1__inner { position: relative; display: block; } .project-style1__inner>ul { position: relative; display: block; margin-left: -15px; margin-right: -15px; } .project-style1__inner>ul>li { display: block; float: left; width: 20%; padding: 0px 15px 0px; } .project-style1__inner>ul>li.width40 { width: 40%; } .project-style1__single { position: relative; display: block; margin-bottom: 30px; } .project-style1__single-img { position: relative; display: block; z-index: 1; } .project-style1__single-img .inner { position: relative; display: block; border-radius: var(--thm-border-radius); overflow: hidden; } .project-style1__single-img .inner img { width: 100%; } .project-style1__single-img .inner .overlay-img { position: absolute; top: 0; left: 0; width: 100%; height: 0%; background-color: var(--thm-black); -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .project-style1__single:hover .project-style1__single-img .inner .overlay-img { height: 100%; } .project-style1__single-img .inner .overlay-img img { transform: translateY(-50%) scaleY(1.5); opacity: 0; filter: blur(10px); object-fit: cover; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .project-style1__single:hover .project-style1__single-img .inner .overlay-img img { transform: translateY(0%) scaleY(1); opacity: 0.2; filter: blur(0px); } .project-style1__single-img .text-box { position: absolute; top: 20px; left: 20px; display: flex; align-items: center; z-index: 2; opacity: 0; transform: translateY(-50px); transition: all 0.1s ease-in-out 0.2s; } .project-style1__single:hover .project-style1__single-img .text-box { opacity: 1; transform: translateY(0px); transition: all 0.5s ease-in-out 0.5s; } .project-style1__single-img .text-box .icon-box { position: relative; display: flex; align-items: center; justify-content: center; margin-right: 10px; width: 30px; height: 30px; background: var(--thm-white); border-radius: 50%; } .project-style1__single-img .text-box .icon-box span { position: relative; display: inline-block; color: #cf9945; font-size: 15px; line-height: 15px; } .project-style1__single-img .text-box p { color: #ffffff; } .project-style1__single-img .overlay-box { position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(50px); } .project-style1__single:hover .project-style1__single-img .overlay-box { opacity: 1; transform: translateY(0px); transition: all 0.5s ease-in-out 0.5s; transition-timing-function: ease-in-out; } .project-style1__single-img .overlay-box a { position: relative; display: inline-block; color: var(--thm-white); font-size: 37px; } .project-style1__single-img .overlay-box a:hover { color: var(--thm-primary-color); } .project-style1__single-content { position: absolute; left: 0; bottom: 23px; right: 0; text-align: center; z-index: 2; opacity: 0; transform: translateY(50px); } .project-style1__single:hover .project-style1__single-content { opacity: 1; transform: translateY(0px); transition: all 0.5s ease-in-out 0.5s; } .project-style1__single-content h3 { font-size: 21px; line-height: 31px; text-transform: capitalize; margin-bottom: 6px; color: var(--thm-white); } .project-style1__single-content h3 a{ color: var(--thm-white); } .project-style1__single-content h3 a:hover { color: var(--thm-primary-color); } .project-style1__single-content p { margin: 0; } .project-style1__btn-box { position: relative; display: block; text-align: center; padding-top: 30px; } /*------------------------------------------ Ai Tool Style1 Css --------------------------------------------*/ .ai-tools-style1 { padding: 161px 0px 140px; } .ai-tools-style1__single { position: relative; display: block; border: 1px solid var(--thm-border-color); padding: 40px 30px 30px; border-radius: var(--thm-border-radius); } .ai-tools-style1__single .icon-box { position: relative; display: flex; align-items: center; justify-content: center; width: 70px; height: 80px; background-color: var(--thm-primary-color); border-top-left-radius: 40px; border-top-right-radius: 40px; margin: 0 auto; z-index: 3; } .ai-tools-style1__single .icon-box:before { content: ""; position: absolute; left: 0; bottom: 0px; right: 0; height: 100%; background-color: var(--thm-secondary-color); border-top-left-radius: 40px; border-top-right-radius: 40px; transition: -webkit-transform 0.4s ease; transition: transform 0.4s ease; transition: transform 0.4s ease, -webkit-transform 0.4s ease; transform-origin: top center; -webkit-transform: scale(0); transform: scale(0); z-index: -1; } .ai-tools-style1__single:hover .icon-box:before { -webkit-transform: scale(1); transform: scale(1); transform-origin: bottom center; } .ai-tools-style1__single .icon-box span { position: relative; display: inline-block; color: var(--thm-white); font-size: 45px; line-height: 45px; } .ai-tools-style1__single .icon-box .border-box { position: absolute; top: 10px; width: 96px; height: 60px; z-index: -1; } .ai-tools-style1__single .icon-box .border-box img { transition: all 200ms linear; transition-delay: 0.1s; opacity: 1; } .ai-tools-style1__single:hover .icon-box .border-box img { opacity: 0; } .ai-tools-style1__single .icon-box .border-box .overlay-border { position: absolute; top: 0px; width: 96px; height: 60px; z-index: -2; } .ai-tools-style1__single .icon-box .border-box .overlay-border img { opacity: 0; transition: all 200ms linear; transition-delay: 0.1s; } .ai-tools-style1__single:hover .icon-box .border-box .overlay-border img { opacity: 1; } .ai-tools-style1__single .content-box { position: relative; display: block; padding-top: 25px; } .ai-tools-style1__single .content-box h3 { font-size: 24px; line-height: 34px; margin-bottom: 16px; } .ai-tools-style1__single .content-box h3 a { color: var(--thm-heading-font-color); transition: all 200ms linear; transition-delay: 0.1s; } .ai-tools-style1__single .content-box h3 a:hover { color: var(--thm-secondary-color); } .ai-tools-style1__single .content-box .text { position: relative; display: block; } .ai-tools-style1__single .content-box .text p { margin: 0; } .ai-tools-style1__single .content-box .btn-box { position: relative; display: inline-flex; align-items: center; padding-left: 30px; padding-right: 30px; margin-top: 23px; padding-top: 19px; border-top: 1px solid var(--thm-border-color); line-height: 0; } .ai-tools-style1__single .content-box .btn-box a { position: relative; display: inline-flex; align-items: center; justify-content: center; color: var(--thm-heading-font-color); font-size: 16px; line-height: 25px; font-family: var(--thm-font-2); font-weight: 700; transition: all 200ms linear; transition-delay: 0.1s; } .ai-tools-style1__single .content-box .btn-box a:hover { color: var(--thm-secondary-color); } .ai-tools-style1__single .content-box .btn-box a span { position: relative; display: inline-block; padding-right: 4px; font-size: 34px; line-height: 34px; font-weight: 400; transition: all 200ms linear; } .ai-tools-style1__single .content-box .btn-box a:hover span { color: var(--thm-secondary-color); } .ai-tools-style1-carousel.owl-nav-style-one.owl-theme .owl-nav { position: relative; margin: 60px auto 0; } /*------------------------------------------ Channels Style1 Css --------------------------------------------*/ .channels-style1 { position: relative; display: block; background: var(--thm-black-bg); padding: 140px 0px 110px; z-index: 1; } .channels-style1 .sec-title h2 { color: var(--thm-white); } .channels-style1__inner { position: relative; display: block; } .channels-style1__single { position: relative; display: block; background: var(--thm-black-bg-2); border-radius: 10px; margin-bottom: 30px; padding: 40px 25px 33px; overflow: hidden; z-index: 1; } .channels-style1__single .pattern-bg { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-size: cover; background-repeat: no-repeat; background-position: center center; z-index: -1; } .channels-style1__single .pattern-bg:before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 100%; background: rgb(27, 28, 33); background: linear-gradient(144deg, rgba(27, 28, 33, 1) 0%, rgba(27, 28, 33, 1) 50%, rgba(27, 28, 33, 0) 70%); transition: background-color 0.5s ease; transition: all 0.5s ease; } .channels-style1__single:hover .pattern-bg:before { width: 200%; } .channels-style1__single-inner { position: relative; display: block; } .channels-style1__single .icon-box { position: relative; display: flex; align-items: center; justify-content: center; width: 90px; height: 90px; border-radius: 50%; border: 1px solid #2f3035; margin-bottom: 32px; z-index: 1; } .channels-style1__single .icon-box::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; border-radius: 50%; background-color: var(--thm-white); transition: -webkit-transform 0.4s ease; transition: transform 0.4s ease; transition: transform 0.4s ease, -webkit-transform 0.4s ease; transform-origin: bottom right; -webkit-transform: scale(1, 0); transform: scale(1, 0); z-index: -1; } .channels-style1__single:hover .icon-box::before { -webkit-transform: scale(1, 1); transform: scale(1, 1); transform-origin: top center; } .channels-style1__single .icon-box span { position: relative; display: inline-block; color: var(--thm-white); font-size: 45px; line-height: 45px; transition: all 200ms linear; transition-delay: 0.1s; } .channels-style1__single:hover .icon-box span { color: var(--thm-primary-color); } .channels-style1__single .text-box { position: relative; display: block; } .channels-style1__single .text-box h3 { font-size: 21px; line-height: 31px; font-weight: 700; text-transform: capitalize; margin-bottom: 11px; } .channels-style1__single .text-box h3 a { color: var(--thm-white); } .channels-style1__single .text-box h3 a:hover { color: var(--thm-primary-color); } .channels-style1__single .text-box p { color: #a3a4af; } .channels-style1__single .text-box p.more-text { opacity: 1; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; transition-delay: 0.7s; width: 0%; white-space: nowrap; overflow: hidden; } .channels-style1__single:hover .text-box p.more-text { opacity: 1; -webkit-transform: perspective(400px) rotateY(0deg) translateY(0); -ms-transform: perspective(400px) rotateY(0deg) translateY(0); -moz-transform: perspective(400px) rotateY(0deg) translateY(0); -o-transform: perspective(400px) rotateY(0deg) translateY(0); transform: perspective(400px) rotateY(0deg) translateY(0); -webkit-transition: width 0.7s ease-in-out; -moz-transition: width 0.7s ease-in-out; -o-transition: width 0.7s ease-in-out; transition: width 0.7s ease-in-out; width: 100%; } .channels-style1__single .text-box p.more-text2 { opacity: 1; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; transition-delay: 0.3s; width: 0%; white-space: nowrap; overflow: hidden; } .channels-style1__single:hover .text-box p.more-text2 { opacity: 1; -webkit-transform: perspective(400px) rotateY(0deg) translateY(0); -ms-transform: perspective(400px) rotateY(0deg) translateY(0); -moz-transform: perspective(400px) rotateY(0deg) translateY(0); -o-transform: perspective(400px) rotateY(0deg) translateY(0); transform: perspective(400px) rotateY(0deg) translateY(0); -webkit-transition: width 0.7s ease-in-out; -moz-transition: width 0.7s ease-in-out; -o-transition: width 0.7s ease-in-out; transition: width 0.7s ease-in-out; width: 100%; transition-delay: 0.7s; } .channels-style1__single .btn-box { position: relative; display: block; margin-top: 19px; } .channels-style1__single .btn-box a { color: var(--thm-white); font-size: 16px; line-height: 26px; font-weight: 700; text-transform: capitalize; font-family: var(--thm-font-2); } .channels-style1__single .btn-box a:hover { color: var(--thm-primary-color); } .channels-style1__single .btn-box a span { position: relative; display: inline-block; font-size: 28px; line-height: 28px; top: 6px; } .channels-style1-carousel.owl-nav-style-one.owl-theme .owl-nav { position: absolute; top: -120px; right: 0; border: 1px solid #2b2c33; } .channels-style1-carousel.owl-nav-style-one.owl-theme .owl-nav [class*="owl-"] span { color: var(--thm-white); opacity: 0.50; } .channels-style1-carousel.owl-nav-style-one.owl-theme .owl-nav [class*="owl-"]:hover span { opacity: 1.0; } .channels-style1-carousel.owl-nav-style-one.owl-theme .owl-nav:before { background-color: #2b2c33; } /*------------------------------------------ Templates Style1 Css --------------------------------------------*/ .templates-style1 { position: relative; display: block; background: var(--thm-gray-bg); padding: 140px 0px 140px; z-index: 1; } .templates-style1 .container { max-width: 1800px; width: 100%; } .templates-style1__inner { position: relative; display: block; } .templates-style1__single { position: relative; display: block; width: 100%; background: var(--thm-white); border-radius: var(--thm-border-radius); padding: 32px 30px 40px; overflow: hidden; z-index: 1; } .templates-style1__single .shape1 { position: absolute; left: 0; bottom: 10px; z-index: -1; } .templates-style1__single .text-box { position: relative; display: block; } .templates-style1__single .text-box p { color: #a3a4af; font-size: 14px; line-height: 24px; font-weight: 700; text-transform: uppercase; font-family: var(--thm-font-2); } .templates-style1__single .text-box h3 { font-size: 21px; line-height: 31px; font-weight: 700; text-transform: capitalize; margin-top: 6px; } .templates-style1__single .text-box h3 a { color: var(--thm-black); } .templates-style1__single .text-box h3 a:hover { color: var(--thm-primary-color); } .templates-style1__single-bottom { position: relative; display: flex; align-items: flex-end; justify-content: space-between; margin-top: 52px; } .templates-style1__single-bottom .btn-box { position: relative; display: block; } .templates-style1__single-bottom .btn-box a { position: relative; display: flex; align-items: center; justify-content: center; color: var(--thm-black); width: 45px; height: 45px; background: var(--thm-white); border: 1px solid var(--thm-border-color); border-radius: var(--thm-border-radius); overflow: hidden; z-index: 1; } .templates-style1__single-bottom .btn-box a:hover { color: var(--thm-white); border-color: var(--thm-white); } .templates-style1__single-bottom .btn-box a:before { position: absolute; content: ''; width: 100%; height: 100%; left: 0px; top: 0px; background: var(--thm-primary-color); transform: scale(0.6); opacity: 0; z-index: -1; border-radius: var(--thm-border-radius); transition: all 500ms ease; } .templates-style1__single-bottom .btn-box a:hover:before { opacity: 1; transform: scale(1); } .templates-style1__single-bottom .btn-box a span { position: relative; display: inline-block; font-size: 25px; line-height: 25px; } .templates-style1__single-bottom .icon-box { position: relative; display: block; } .templates-style1__single-bottom .icon-box span { position: relative; display: inline-block; color: var(--thm-primary-color); font-size: 70px; line-height: 70px; transition: all 500ms linear; transition-delay: 0.1s; transform: scale(1); } .templates-style1__single:hover .templates-style1__single-bottom .icon-box span { transform: scale(0.9); } .templates-style1-carousel.owl-nav-style-one.owl-theme .owl-nav { margin: 60px auto 0px; } /*------------------------------------------ Templates Style2 Css --------------------------------------------*/ .templates-style2 { position: relative; display: block; background-color: var(--thm-gray-bg); padding: 140px 0px 0px; } .templates-style2__shape1 { position: absolute; left: 0; top: -400px; z-index: -1; display: none; } .templates-style2__top-box { position: relative; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; padding-bottom: 47px; } .templates-style2__top-box .sec-title { padding-bottom: 0; } .templates-style2__top-box .btn-box { position: relative; display: block; } .templates-style2__top-box .btn-box a { position: relative; top: 4px; display: inline-flex; align-items: center; color: var(--thm-black); font-size: 16px; font-weight: 700; font-family: var(--thm-font-2); } .templates-style2__top-box .btn-box a span { position: relative; display: inline-block; padding-right: 3px; font-size: 34px; } .templates-style2__single { position: relative; display: block; overflow: hidden; border-radius: var(--thm-border-radius); background-color: var(--thm-white); padding: 43px 40px 44px; } .templates-style2__single .overlay-icon { position: absolute; top: 50px; right: 50px; line-height: 0; } .templates-style2__single .overlay-icon span { font-size: 140px; color: transparent; -webkit-background-clip: text; -webkit-text-stroke: 1px var(--thm-primary-color); transition: all 200ms linear; transition-delay: 0.1s; } .templates-style2__single:hover .overlay-icon span { -webkit-text-stroke: 2px var(--thm-primary-color); } .templates-style2__single-content { position: relative; display: block; } .templates-style2__single-content .counting { position: relative; display: block; } .templates-style2__single-content .counting span { color: #cec8c7; font-size: 24px; line-height: 30px; font-family: var(--thm-font-2); font-weight: 700; } .templates-style2__single-content .title-box { position: relative; display: block; padding-top: 144px; } .templates-style2__single-content .title-box h3 { font-size: 24px; line-height: 34px; margin-bottom: 16px; } .templates-style2__single-content .title-box h3 a { color: var(--thm-black); transition: all 200ms linear; transition-delay: 0.1s; } .templates-style2__single-content .title-box h3 a:hover { color: var(--thm-primary-color); } .templates-style2__single-content .title-box p { margin: 0; } .templates-style2__single-content .btn-box { position: relative; display: block; line-height: 0; padding-top: 26px; } .templates-style2__single-content .btn-box a { position: relative; display: inline-flex; align-items: center; color: var(--thm-black); font-size: 16px; line-height: 25px; font-family: var(--thm-font-2); font-weight: 700; text-transform: capitalize; transition: all 200ms linear; transition-delay: 0.1s; } .templates-style2__single-content .btn-box a:hover { color: var(--thm-primary-color); } .templates-style2__single-content .btn-box a span { position: relative; display: inline-block; font-size: 34px; font-weight: 400; margin-right: 6px; top: 1px; transition: all 200ms linear; transition-delay: 0.1s; } .templates-style2__single-content .btn-box a:hover span { color: var(--thm-primary-color); } .templates-style2__carousel.owl-carousel .owl-stage-outer { margin-right: -375px; } /*------------------------------------------ Newsletter style1 Css --------------------------------------------*/ .newsletter-style1 { position: relative; display: block; padding: 190px 0px 136px; z-index: 1; } .scrolling-text-style4 { position: absolute; top: -80px; left: 0; right: 0; display: block; overflow: hidden; } .scrolling-text-style4 .inner { position: relative; display: block; } .scrolling-text-style4 .inner ul { display: flex; align-items: center; flex-wrap: nowrap; width: fit-content; } .scrolling-text-style4 .inner ul li { position: relative; display: block; white-space: nowrap; float: left; font-size: 120px; line-height: 1.3em; font-weight: 700; text-transform: capitalize; font-family: var(--thm-font-2); margin-left: 80px; transition: all .4s ease; color: transparent; -webkit-background-clip: text; -webkit-text-stroke: 2px var(--thm-primary-color); opacity: 0.50; transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease; } .scrolling-text-style4 .inner ul li:hover { opacity: 1.0; } .scrolling-text-style4 .inner ul li:before { overflow: hidden; position: absolute; top: 0; left: 0; width: 0; color: var(--thm-primary-color); white-space: nowrap; content: attr(data-hover); transition: all 0.5s cubic-bezier(0.17, 0.67, 0.32, 0.87); } .scrolling-text-style4 .inner ul li:hover:before { width: 100%; } .newsletter-style1__bg { position: absolute; top: 0; left: 0; bottom: 0; width: calc((100% - 230px) / 2); background-attachment: scroll; background-size: cover; background-repeat: no-repeat; background-position: top left; border-top-right-radius: 10px; z-index: -1; } .newsletter-style1__bg .text-box { position: absolute; top: 50%; right: -70px; transform: translateY(-50%); color: var(--thm-white); font-size: 16px; line-height: 26px; font-weight: 700; text-transform: capitalize; font-family: var(--thm-font-2); background: var(--thm-primary-color); border-radius: var(--thm-border-radius); padding: 8px 20px 8px; z-index: 5; transform: rotate(-15deg); } .newsletter-style1__inner { position: relative; display: block; } .newsletter-style1__content { position: relative; display: block; max-width: 570px; width: 100%; float: right; } .newsletter-style1__content .title-box { position: relative; display: block; } .newsletter-style1__content .sec-title { padding-bottom: 18px; } .newsletter-style1__content .title-box .title-box p { margin: 0; } .newsletter-style1__content form { position: relative; } .newsletter-style1__content form .form-group { position: relative; display: block; margin: 13px 0 0px; } .newsletter-style1__content form .form-group input[type='email'] { position: relative; display: block; width: 100%; height: 72px; color: #a3a4af; font-size: 15px; font-weight: 400; background: transparent; border: none; border-bottom: 1px solid var(--thm-border-color); padding-left: 0px; padding-right: 0px; border-radius: 0px; } .newsletter-style1__content form .form-group-outer { position: relative; display: flex; align-items: center; justify-content: space-between; margin-top: 24px; } .newsletter-style1__content form .form-group-outer button { position: relative; line-height: 0; } .newsletter-style1__content form .form-group-outer button span { position: relative; display: inline-flex; align-items: center; color: var(--thm-black); font-size: 16px; line-height: 26px; font-weight: 700; text-transform: capitalize; font-family: var(--thm-font-2); transition: all 200ms linear; transition-delay: 0.1s; } .newsletter-style1__content form .form-group-outer button span:hover { color: var(--thm-primary-color); } .newsletter-style1__content form .form-group-outer button span i { position: relative; display: inline-block; font-size: 30px; line-height: 30px; padding-right: 3px; } /*** ============================================= Dashboard Style1 Css ============================================= ***/ .dashboard-style1 { position: relative; display: block; } .dashboard-style1__shape1 { position: absolute; left: 0; bottom: -480px; z-index: -1; } .dashboard-style1__shape2 { position: absolute; right: 0; bottom: -480px; z-index: -1; } .dashboard-style1__content { position: relative; display: block; overflow: hidden; min-height: 600px; border-radius: var(--thm-border-radius); } .dashboard-style1__bg { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-size: cover; background-repeat: no-repeat; background-position: center center; } /*** ============================================= Features Style2 Css ============================================= ***/ .features-style2 { position: relative; display: block; padding: 140px 0px 63px; z-index: 1; } .features-style2 .sec-title { padding-bottom: 69px; } .features-style2__single { position: relative; display: block; margin-bottom: 73px; } .features-style2__single .icon-box { position: relative; display: block; margin-bottom: 52px; z-index: 1; } .features-style2__single .icon-box .shape1 { position: absolute; top: 0; left: 0; bottom: -30px; right: 0; display: flex; align-items: center; justify-content: center; z-index: -1; } .features-style2__single .icon-box .shape1 img { transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease; } .features-style2__single:hover .icon-box .shape1 img { opacity: 0.60; } .features-style2__single .icon-box .inner { position: relative; display: flex; align-items: center; justify-content: center; width: 70px; height: 70px; border-radius: 50%; border: 1px solid var(--thm-border-color); background: var(--thm-black-bg); overflow: hidden; margin: 0 auto; transition: border 0.3s ease, transform 0.3s ease, visibility 0.3s ease; z-index: 1; } .features-style2__single:hover .icon-box .inner { border-color: transparent; } .features-style2__single .icon-box .inner:before { content: ""; position: absolute; left: 0; bottom: 0px; right: 0; height: 100%; background-color: var(--thm-primary-color); border-radius: 50%; transition: -webkit-transform 0.4s ease; transition: transform 0.4s ease; transition: transform 0.4s ease, -webkit-transform 0.4s ease; transform-origin: top center; -webkit-transform: scale(0); transform: scale(0); z-index: -1; } .features-style2__single:hover .icon-box .inner:before { -webkit-transform: scale(1); transform: scale(1); transform-origin: bottom center; } .features-style2__single .icon-box .inner span { position: relative; display: inline-block; color: var(--thm-primary-color); font-size: 30px; line-height: 30px; transition: all 200ms linear; transition-delay: 0.1s; } .features-style2__single:hover .icon-box .inner span { color: var(--thm-black); } .features-style2__single .content-box { position: relative; display: block; max-width: 250px; width: 100%; margin: 0 auto; } .features-style2__single .content-box h3 { font-size: 21px; line-height: 31px; text-transform: capitalize; margin-bottom: 11px; } .features-style2__single .content-box h3 a { color: var(--thm-white); } .features-style2__single .content-box h3 a:hover { color: var(--thm-primary-color); } .features-style2__single .content-box p { margin: 0; } /*------------------------------------------ Wave Style1 Css ------------------------------------------*/ .wave-style1 { position: relative; display: flex; align-items: center; justify-content: center; } .wave-style1__inner { position: relative; display: inline-block; } /*------------------------------------------ Ai Voices Style1 Css ------------------------------------------*/ .ai-voices-style1 { position: relative; display: block; padding: 140px 0px 130px; z-index: 1; } .ai-voices-style1__top { position: relative; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end; padding-bottom: 43px; } .ai-voices-style1__top .sec-title { padding-bottom: 0; } .ai-voices-style1__top .btn-box { position: relative; display: block; line-height: 0; bottom: 11px; } .ai-voices-style1__top .btn-box a { color: var(--thm-white); } .ai-voices-style1__top .btn-box a:hover { color: var(--thm-black); } .ai-voices-style1__top .btn-box .btn-one:after { border: 2px solid var(--thm-primary-color); background-color: transparent; border-radius: var(--thm-border-radius); } .ai-voices-style1__top .btn-box .btn-one::before { background: var(--thm-primary-color); } .ai-voices-style1__content { position: relative; display: block; } .ai-voices-style1__content ul { position: relative; display: block; } .ai-voices-style1__content ul li { position: relative; display: block; border-bottom: 1px solid var(--thm-border-color); padding-top: 36px; padding-bottom: 36px; } .ai-voices-style1__content ul li:first-child { padding-top: 0px; } .ai-voices-style1__content ul li:last-child { padding-bottom: 0px; border-bottom: none; } .ai-voices-style1__single { position: relative; display: flex; align-items: center; justify-content: space-between; } .ai-voices-style1__single-left { position: relative; display: block; padding-left: 100px; } .ai-voices-style1__single-left .icon { position: absolute; top: 6px; left: 0; } .ai-voices-style1__single-left .icon span { position: relative; display: inline-block; color: var(--thm-primary-color); font-size: 50px; line-height: 50px; transition: all 500ms linear; transition-delay: 0.1s; transform: scale(1); } .ai-voices-style1__content ul li:hover .ai-voices-style1__single-left .icon span { transform: scale(0.9); } .ai-voices-style1__single-left .title { position: relative; display: block; } .ai-voices-style1__single-left .title h3 { font-size: 21px; line-height: 31px; margin: 0 0 11px; } .ai-voices-style1__single-left .title h3 a { color: var(--thm-white); } .ai-voices-style1__single-left .title h3 a:hover { color: var(--thm-primary-color); } .ai-voices-style1__single-left .title p { margin: 0; } .ai-voices-style1__single-right { position: relative; display: flex; align-items: center; } .ai-voices-style1__single-right .wave-box { position: relative; display: block; } .ai-voices-style1__single-right .wave-box img { width: auto; filter: grayscale(100%); opacity: 0.40; } .ai-voices-style1__single:hover .ai-voices-style1__single-right .wave-box img { filter: grayscale(0%); opacity: 1.0; } .ai-voices-style1__single-right .icon-box { position: relative; display: block; margin-left: 40px; } .ai-voices-style1__single-right .icon-box a { position: relative; display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border: 1px solid var(--thm-border-color); border-radius: 50%; color: var(--thm-white); font-size: 20px; line-height: 20px; cursor: pointer; } .ai-voices-style1__single-right .icon-box a:hover { color: var(--thm-black); background: var(--thm-white); } /*------------------------------------------ Scrolling Text Style5 Css ------------------------------------------*/ .scrolling-text-style5 { position: relative; border-bottom: 1px solid var(--thm-border-color); } .scrolling-text-style5__title { position: relative; display: block; text-align: center; } .scrolling-text-style5__title::before { content: ""; position: absolute; top: 13px; left: 0; right: 0; height: 1px; background-color: var(--thm-border-color); } .scrolling-text-style5__title h6 { position: relative; display: inline-block; background-color: var(--thm-black-bg); padding: 0 10px; color: var(--thm-white); font-size: 14px; text-transform: uppercase; } .scrolling-text-style5__title--style2 { margin-top: -14px; } .scrolling-text-style5__title--style2::before { display: none; } .scrolling-text-style5 .inner { position: relative; display: block; padding: 14px 0 27px; } .scrolling-text-style5 .inner ul { display: flex; align-items: center; flex-wrap: nowrap; width: max-content; } .scrolling-text-style5 .inner ul li { position: relative; display: block; white-space: nowrap; float: left; color: var(--thm-white); font-size: 52px; line-height: 1.3em; font-weight: 700; text-transform: capitalize; font-family: var(--thm-font-2); margin-left: 120px; transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease; } .scrolling-text-style5 .inner ul li:before { content: ""; position: absolute; top: 22px; right: -70px; width: 20px; height: 30px; background-color: var(--thm-black-bg-2); -webkit-clip-path: polygon(50% 1%, 100% 50%, 50% 100%, 50% 100%, 0 50%); clip-path: polygon(50% 1%, 100% 50%, 50% 100%, 50% 100%, 0 50%); } .scrolling-text-style5 .inner ul li:after { overflow: hidden; position: absolute; top: 0; left: 0; width: 0; white-space: nowrap; content: attr(data-hover); transition: all 0.9s cubic-bezier(0.17, 0.67, 0.32, 0.87); color: transparent; background: linear-gradient(to right, #cde58d 10%, #e4f0c3 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .scrolling-text-style5 .inner ul li:hover:after { width: 100%; } .scrolling-text-style5 .pattern-box { position: relative; display: block; height: 70px; border-top: 1px solid var(--thm-border-color); border-bottom: 1px solid var(--thm-border-color); } .pattern-box__bg { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-repeat: repeat-x; background-color: var(--thm-black-bg); background-blend-mode: luminosity; animation: slide-2 60s linear infinite; -webkit-animation: slide-2 60s linear infinite; } .pattern-box__bg--style2 { animation: slide-3 60s linear infinite; -webkit-animation: slide-3 60s linear infinite; } /*------------------------------------------ Cases Style1 Css --------------------------------------------*/ .cases-style1 { position: relative; display: block; padding: 140px 0px 100px; z-index: 1; } .cases-style1 .row { --bs-gutter-x: 80px; } .cases-style1__single { position: relative; display: block; margin-bottom: 33px; } .cases-style1__single::before { position: absolute; top: 0px; right: -40px; bottom: 7px; width: 1px; background: var(--thm-border-color); content: ""; } li:last-child .cases-style1__single::before { display: none; } .cases-style1__single-inner { position: relative; display: block; } .cases-style1__single-top { position: relative; display: block; margin-bottom: 28px; } .cases-style1__single-top .author-box { position: relative; display: flex; align-items: center; margin-bottom: 23px; } .cases-style1__single-top .author-box .img-box { position: relative; display: block; width: 45px; border-radius: 50%; overflow: hidden; } .cases-style1__single-top .author-box .img-box img { width: 100%; } .cases-style1__single-top .author-box .text-box { position: relative; display: block; margin-left: 15px; } .cases-style1__single-top .author-box .text-box p { margin: 0 0 5px; line-height: 20px; } .cases-style1__single-top .author-box .text-box h4 { color: var(--thm-white); font-size: 16px; line-height: 20px; font-weight: 400; text-transform: capitalize; } .cases-style1__single-top .category-box { position: relative; display: flex; align-items: center; justify-content: space-between; } .cases-style1__single-top .category-box .text { position: relative; display: block; } .cases-style1__single-top .category-box .text p { position: relative; display: inline-flex; align-items: center; } .cases-style1__single-top .category-box .text p span { position: relative; display: inline-block; color: var(--thm-primary-color); font-size: 20px; line-height: 20px; padding-right: 10px; } .cases-style1__single-top .category-box .text p a { color: var(--thm-white); font-size: 14px; line-height: 24px; font-weight: 700; text-transform: uppercase; font-family: var(--thm-font-2); } .cases-style1__single-top .category-box .text p a:hover { color: var(--thm-primary-color); } .cases-style1__single-top .category-box .btn-box { position: relative; display: block; overflow: hidden; line-height: 0; transition: all 200ms linear; transition-delay: 0.1s; } .cases-style1__single-top .category-box .btn-box a { position: relative; display: inline-flex; align-items: center; color: var(--thm-white); transform: translateX(83%); transition: all 400ms linear; transition-delay: 0.1s; } .cases-style1__single-top .category-box .btn-box a:hover { transform: translateX(0%); } .cases-style1__single-top .category-box .btn-box a i { position: relative; display: inline-block; font-size: 20px; line-height: 20px; transform: rotate(45deg); } .cases-style1__single-top .category-box .btn-box a .txt { position: relative; display: inline-block; font-size: 16px; line-height: 26px; font-weight: 700; text-transform: capitalize; padding-left: 7px; font-family: var(--thm-font-2); } .cases-style1__single-top .category-box .btn-box a:hover { color: var(--thm-primary-color); } .cases-style1__single-img { position: relative; display: block; border-radius: var(--thm-border-radius); overflow: hidden; z-index: 1; } .cases-style1__single-img::before { position: absolute; content: ''; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--thm-black); opacity: 0; z-index: 1; transition: opacity 0.5s ease; transition: all 0.5s ease; } .cases-style1__single:hover .cases-style1__single-img::before { opacity: 0.40; } .cases-style1__single-img img { width: 100%; transform: scale(1.0); transition: all 1500ms ease; } .cases-style1__single:hover .cases-style1__single-img img { transform: scale(1.05) rotate(0deg); } .cases-style1__single-title { position: relative; display: block; margin-top: 22px; } .cases-style1__single-title h2 { font-size: 21px; line-height: 31px; } .cases-style1__single-title h2 a { color: var(--thm-white); } .cases-style1__single-title h2 a:hover { color: var(--thm-primary-color); } /*------------------------------------------ Faq Style1 Css --------------------------------------------*/ .faq-style1 { padding: 140px 0 136px; height: 920px; background-color: #f0ebf5; overflow: hidden; } .faq-style1__bg { position: absolute; top: 0; left: 0; bottom: 0; max-width: 1920px; width: 100%; background-attachment: scroll; background-repeat: no-repeat; background-size: cover; background-position: left top; z-index: -1; } .faq-style1 .container { display: flex; justify-content: flex-end; } .faq-style1__content { position: relative; display: block; max-width: 570px; width: 100%; } .faq-content-box .sec-title { padding-bottom: 53px; } /*------------------------------------------ Faq Style1 In Style2 Css --------------------------------------------*/ .faq-style1--style2 { overflow: revert; background-color: var(--thm-black-bg); } .faq-style1--style2__shadow { position: absolute; top: -260px; right: -80px; opacity: 0.15; z-index: -1; } .accordion-box-style1--instyle2 .accordion .accord-btn h4 { color: var(--thm-white); } .accordion-box-style1--instyle2 .accordion .accord-btn::after { border: 1px solid var(--thm-border-color); color: var(--thm-white); } .accordion-box-style1--instyle2 .accordion .accord-btn.active:after { color: var(--thm-black); } /*------------------------------------------ Faq Page One Css --------------------------------------------*/ .faq-page-one { position: relative; display: block; padding: 135px 0 136px; } /*------------------------------------------ Slogan Style1 Css --------------------------------------------*/ .slogan-style1 { padding: 140px 0px 140px; } .slogan-style1__bg { position: absolute; left: 0; bottom: 0; right: -40px; height: 440px; opacity: 0.25; background-size: cover; background-repeat: no-repeat; background-attachment: scroll; background-position: center center; } .slogan-style1 .sec-title { padding-bottom: 23px; } .slogan-style1__content { position: relative; display: block; } .slogan-style1__content .text { position: relative; display: block; } .slogan-style1__content .text p { font-size: 18px; font-weight: 500; margin: 0; } .slogan-style1__content .btn-box { position: relative; display: block; line-height: 0; margin-top: 33px; } .slogan-style1__content .btn-box a { position: relative; display: inline-block; color: var(--thm-white); font-size: 16px; line-height: 60px; font-family: var(--thm-font-2); font-weight: 700; border: 2px solid var(--thm-primary-color); border-radius: 10px; padding: 0px 30px 0px; transition: background-color 0.5s ease; transition: all 0.5s ease; } .slogan-style1__content .btn-box a:hover { color: var(--thm-secondary-color); border-color: var(--thm-primary-color); background-color: var(--thm-primary-color); } /*----------------------------------------------- Case style2 Css ------------------------------------------------*/ .case-style2 { position: relative; display: block; padding: 140px 0px 90px; overflow: hidden; } .case-style2__shape1 { position: absolute; top: -160px; left: -30px; z-index: -1; } .case-style2 .sec-title { padding-bottom: 55px; } .case-style2__single { position: relative; display: block; margin-bottom: 43px; } .case-style2__single-img { position: relative; display: block; } .case-style2__single-img::before { position: absolute; content: ""; top: 0; left: 0; bottom: 0; right: 0; height: 100%; background: var(--thm-black); border-radius: 8px; opacity: 0; transition: opacity .5s ease-out; z-index: 1; } .case-style2__single:hover .case-style2__single-img::before { opacity: 0.9; } .case-style2__single-img .inner { position: relative; display: block; overflow: hidden; border-radius: 10px; } .case-style2__single-img .inner img { width: 100%; transform: scale(1.0) translateX(0); transition: transform .5s cubic-bezier(.61, 1, .88, 1); } .case-style2__single:hover .case-style2__single-img .inner img { transform: scale(1.02) translateX(0px); } .case-style2__single-overlay-icon { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(50px); transition: all 0.5s ease-in-out 0.2s; z-index: 5; } .case-style2__single:hover .case-style2__single-overlay-icon { opacity: 1; transform: translateY(0px); } .case-style2__single-overlay-icon a { position: relative; display: flex; align-items: center; justify-content: center; color: var(--thm-black); font-size: 30px; width: 55px; height: 55px; border-radius: 10px; background-color: var(--thm-white); } .case-style2__single-overlay-icon a:hover { color: var(--thm-white); background-color: var(--thm-primary-color); } .case-style2__single-content { position: relative; display: block; padding: 23px 0 0; } .case-style2__single-content h3 { font-size: 21px; line-height: 30px; margin-bottom: 6px; } .case-style2__single-content h3 a { color: var(--thm-white); transition: all 200ms linear; transition-delay: 0.1s; } .case-style2__single-content h3 a:hover { color: var(--thm-primary-color); } .case-style2__single-content p { color: #a9afac; margin: 0; } /*----------------------------------------------- Case style3 Css ------------------------------------------------*/ .cases-style3 { position: relative; display: block; background-color: var(--thm-gray-bg); padding: 140px 0px 110px; } .cases-style3__single { position: relative; display: block; margin-bottom: 30px; } .cases-style3__single-img { position: relative; display: block; } .cases-style3__single-img .inner { position: relative; display: block; overflow: hidden; border-radius: var(--thm-border-radius); } .cases-style3__single-img .inner::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: var(--thm-black); opacity: 0; transform: scale(1.1); transition: opacity .37s ease-out, transform .7s cubic-bezier(.43, .76, .33, 1), -webkit-clip-path .7s; transition: opacity .37s ease-out, transform .7s cubic-bezier(.43, .76, .33, 1), clip-path .7s; transition: opacity .37s ease-out, transform .7s cubic-bezier(.43, .76, .33, 1), clip-path .7s, -webkit-clip-path .7s; z-index: 1; } .cases-style3__single:hover .cases-style3__single-img .inner::before { opacity: 0.85; transform: scale(1.0); } .cases-style3__single-img .inner img { width: 100%; transform: scale(1.0); } .cases-style3__single:hover .cases-style3__single-img .inner img { transform: scale(1.03); } .cases-style3__single-img .inner .overlay-text-box { position: absolute; top: 21px; right: 28px; transform: translateY(-100px); opacity: 0; transition: all 0.5s ease-in-out 0.2s; z-index: 2; } .cases-style3__single:hover .cases-style3__single-img .inner .overlay-text-box { opacity: 1; transform: translateY(0px); } .cases-style3__single-img .inner .overlay-text-box p { color: #cec8c7; font-size: 16px; line-height: 30px; font-family: var(--thm-font-2); font-weight: 500; font-style: italic; text-align: right; text-transform: capitalize; } .cases-style3__single-img .overlay-box { position: absolute; display: flex; align-items: center; left: 30px; bottom: 30px; z-index: 2; } .cases-style3__single-img .overlay-box .title-box { position: relative; display: block; border-radius: 25px; border: 1px solid var(--thm-white); padding: 0px 25px 0px; } .cases-style3__single-img .overlay-box .title-box h3 { color: var(--thm-white); font-size: 21px; line-height: 48px; } .cases-style3__single-img .overlay-box .btn-box { position: relative; display: inline-block; padding-left: 0px; line-height: 0; transition: all 200ms linear; transition-delay: 0.1s; } .cases-style3__single:hover .cases-style3__single-img .overlay-box .btn-box { transform: translateX(10px); } .cases-style3__single-img .overlay-box .btn-box a { position: relative; display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--thm-white); background-color: transparent; transition: all 200ms linear; transition-delay: 0.1s; } .cases-style3__single-img .overlay-box .btn-box a:hover { background-color: var(--thm-white); } .cases-style3__single-img .overlay-box .btn-box a span { position: relative; display: inline-block; color: var(--thm-white); font-size: 28px; font-weight: 400; transition: all 200ms linear; transition-delay: 0.1s; } .cases-style3__single-img .overlay-box .btn-box a:hover span { color: var(--thm-primary-color); } /*----------------------------------------------- Features Style3 Css ------------------------------------------------*/ .features-style3 { position: relative; display: block; } .features-style3 .container { max-width: 1900px; padding-left: 0; padding-right: 0; } .features-style3__inner { position: relative; display: flex; } .features-style3__inner:before { content: ""; position: absolute; top: 0; left: -10000px; right: -10000px; height: 1px; background-color: var(--thm-border-color); } .features-style3__inner:after { content: ""; position: absolute; left: -10000px; bottom: 0; right: -100000px; height: 1px; background-color: var(--thm-border-color); } .features-style3__inner li { position: relative; display: block; max-width: 20%; width: 100%; border-right: 1px solid var(--thm-border-color); } .features-style3__inner li:last-child { border-right: 0px solid #2c302e; } .features-style3__single { position: relative; display: block; overflow: hidden; padding: 41px 40px 43px; } .features-style3__single .title-box { position: relative; display: block; margin-bottom: 30px; z-index: 1; } .features-style3__single .title-box h3 { font-size: 24px; line-height: 34px; } .features-style3__single .title-box h3 a { color: var(--thm-white); transition: all 200ms linear; transition-delay: 0.1s; } .features-style3__single .title-box h3 a:hover { color: var(--thm-primary-color); padding-left: 35px; } .features-style3__single .title-box h3 a:before { font-family: 'icomoon' !important; content: "\e90a"; position: absolute; top: 2px; left: 0; font-size: 34px; font-weight: 100; transform: perspective(400px) scaleX(0); transform-origin: center; transition: all 200ms linear; transition-delay: 0.1s; z-index: 1; } .features-style3__single .title-box h3 a:hover:before { transform: perspective(400px) scaleX(1.0); } .features-style3__single .icon-box { position: relative; display: block; padding: 70px 0px 70px; line-height: 0; } .features-style3__single .icon-box .icon-box__shape1 { position: absolute; display: flex; align-items: center; justify-content: center; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; } .features-style3__single .icon-box span { position: relative; display: inline-block; color: var(--thm-primary-color); font-size: 100px; font-weight: 100; } .features-style3__single .text { position: relative; display: block; margin-top: 30px; } .features-style3__single .text p { color: #a9afac; } /** Features Style3 Single Black **/ .features-style3__single--black .title-box h3 a { color: var(--thm-black); } .features-style3__single--black .text p { color: #6e6c72; } /*----------------------------------------------- Insta Post style1 Css -----------------------------------------------*/ .insta-post-style1 { position: relative; display: block; } .insta-post-style1 .container { max-width: 1800px; } .insta-post-style1__single { position: relative; display: block; } .insta-post-style1__single-img { position: relative; display: block; border-radius: 10px; overflow: hidden; } .insta-post-style1__single-img::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.75) 100%); transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease; z-index: 2; } .insta-post-style1__single:hover .insta-post-style1__single-img::after { opacity: 1.0; } .insta-post-style1__single-img .overlay-box { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(50px); transition: all 0.5s ease-in-out 0.2s; z-index: 5; } .insta-post-style1__single:hover .insta-post-style1__single-img .overlay-box { opacity: 1; transform: translateY(0px); } .insta-post-style1__single-img .overlay-box a { position: relative; display: flex; align-items: center; justify-content: center; color: var(--thm-black); font-size: 30px; width: 55px; height: 55px; border-radius: 10px; background-color: var(--thm-white); transition: background-color 0.5s ease; transition: all 0.5s ease; } .insta-post-style1__single-img .overlay-box a:hover { color: var(--thm-white); background-color: var(--thm-primary-color); } .insta-post-style1__single-img img { width: 100%; transition: .5s ease; transform: scale(1.05); } .insta-post-style1__single-img:hover img { transform: scale(1); } /*** ============================================= Pricing Style1 Css ============================================= ***/ .pricing-style1 { padding: 140px 0px 140px; } .pricing-style1__single { position: relative; display: block; border-radius: var(--thm-border-radius); border: 1px solid var(--thm-border-color); background-image: -moz-linear-gradient(-90deg, rgb(28, 30, 29) 0%, rgb(17, 19, 18) 100%); background-image: -webkit-linear-gradient(-90deg, rgb(28, 30, 29) 0%, rgb(17, 19, 18) 100%); background-image: -ms-linear-gradient(-90deg, rgb(28, 30, 29) 0%, rgb(17, 19, 18) 100%); padding: 65px 40px 50px; } .pricing-style1__single-icon { position: absolute; display: flex; align-items: center; justify-content: center; top: -36px; left: 0; right: 0; width: 75px; height: 75px; border: 1px solid var(--thm-border-color); border-radius: 50%; background-color: var(--thm-black-bg); margin: 0 auto; line-height: 0; } .pricing-style1__single-icon span { position: relative; display: inline-block; color: var(--thm-primary-color); font-size: 40px; } .pricing-style1__single-title { position: relative; display: block; } .pricing-style1__single-title h3 { color: var(--thm-white); font-size: 24px; line-height: 34px; padding-bottom: 6px; } .pricing-style1__single-title p { margin: 0; } .pricing-style1__single-value { position: relative; display: block; padding-top: 24px; } .pricing-style1__single-value h2 { position: relative; display: inline-flex; align-items: center; color: var(--thm-primary-color); font-size: 44px; line-height: 1.1em; } .pricing-style1__single-value h2 sup { font-size: 25px; top: -3px; margin-right: 5px; line-height: 25px; } .pricing-style1__single-value h2 sub { margin-left: 4px; font-size: 16px; bottom: -10px; } .pricing-style1__single-value h2 sub p span { color: var(--thm-primary-color); } .pricing-style1__single-list { position: relative; display: block; border-top: 1px solid var(--thm-border-color); padding-top: 33px; margin-top: 18px; } .pricing-style1__single-list li { position: relative; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .pricing-style1__single-list li+li { margin-top: 16px; } .pricing-style1__single-list li p { margin: 0; } .pricing-style1__single-list li span { position: relative; display: inline-block; color: var(--thm-body-font-color); font-size: 16px; line-height: 16px; } .pricing-style1__single-list li p.color { color: #414342; } .pricing-style1__single-list li span.color { color: #414342; } .pricing-style1__single-btn-box { position: relative; display: block; padding-top: 33px; } .pricing-style1__single-btn-box .btn-one::after { background-color: transparent; border: 2px solid var(--thm-white); border-radius: var(--thm-border-radius); } .pricing-style1__single-btn-box .btn-one::before { background-color: var(--thm-primary-color); } .pricing-style1__switch-toggle { position: relative; display: block; margin-bottom: 85px; } .pricing-style1__switch-toggle ul.switch-toggler-list { display: flex; align-items: center; justify-content: center; } .pricing-style1__switch-toggle ul.switch-toggler-list li a { font-size: 16px; font-weight: 400; color: var(--thm-body-font-color); padding-left: 10px; padding-right: 10px; display: block; } .pricing-style1__switch-toggle ul.switch-toggler-list li.active a { color: var(--thm-white); } .pricing-style1__switch-toggle .switch { position: relative; display: inline-block; vertical-align: middle; margin: 0; border-radius: 15px; width: 45px; height: 25px; } .pricing-style1__switch-toggle .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; -webkit-transition: .4s; transition: .4s; background-color: var(--thm-primary-color); } .pricing-style1__switch-toggle .slider.round { border-radius: 15px; } .pricing-style1__switch-toggle .slider:before { position: absolute; content: ""; height: 15px; width: 15px; left: 5px; right: 5px; top: 50%; -webkit-transform: translateX(0px) translateY(-50%); transform: translateX(0px) translateY(-50%); background-color: var(--thm-white); -webkit-transition: .4s; transition: .4s; } .pricing-style1__switch-toggle .slider.round:before { border-radius: 50%; } .pricing-style1__switch-toggle .switch.off .slider:before { -webkit-transform: translateX(20px) translateY(-50%); transform: translateX(20px) translateY(-50%); } /*** ============================================= Subscribe Style2 ============================================= ***/ .subscribe-style2 { position: relative; display: block; padding-bottom: 76px; } .subscribe-style2.pdb { padding-bottom: 0; } .subscribe-style2 .is-animetion span:nth-of-type(8) { margin-left: 0px; } .subscribe-style2 .is-animetion span:nth-of-type(10) { margin-left: 20px; } .subscribe-style2 .is-animetion span:nth-of-type(11) { margin-left: 0px; } .subscribe-style2 .is-animetion span:nth-of-type(12) { margin-left: 20px; } .subscribe-style2 .is-animetion span:nth-of-type(17) { margin-left: 0px; } .subscribe-style2 .scrolling-text-style1 .inner ul li:hover span { -webkit-text-stroke: 1px var(--thm-primary-color); -webkit-text-fill-color: var(--thm-primary-color); } .subscribe-style2__form { position: relative; display: block; padding-top: 20px; } .subscribe-style2__form .newsletter-style1__content { max-width: 100%; float: none; } .subscribe-style2__form .newsletter-style1__content form .form-group-outer button span { color: var(--thm-body-font-color); } /*** ============================================= Features Style5 ============================================= ***/ .features-style5 { position: relative; display: block; padding: 128px 0 133px; z-index: 10; } .features-style5__bg { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-repeat: no-repeat; background-size: cover; background-position: top center; z-index: -1; } .features-style5__bg:before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: rgb(15, 19, 22); background: linear-gradient(0deg, rgba(15, 19, 22, 0.9023984593837535) 20%, rgba(15, 19, 22, 0.5018382352941176) 50%, rgba(15, 19, 22, 0) 100%); } .features-style5__inner { position: relative; display: block; } .video-holder-box-style5 { position: relative; display: block; } .video-holder-box-style5 h2 { color: var(--thm-white); font-size: 52px; line-height: 62px; margin: 0 0 40px; } .video-holder-box-style5 .icon { position: relative; display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; background: rgba(255, 255, 255, 0.2); padding: 5px; margin: 0 auto; border-radius: 50%; transition: all 200ms linear; transition-delay: 0.1s; z-index: 2; } .video-holder-box-style5 .icon:after, .video-holder-box-style5 .icon:before { content: ""; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; border-radius: 50%; background: transparent; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-animation-delay: .9s; animation-delay: .9s; -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.9); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.9); -webkit-animation: ripple 3s infinite; animation: ripple 3s infinite; -webkit-transition: all .4s ease; transition: all .4s ease; z-index: -1; } .video-holder-box-style5 .icon:after { -webkit-animation-delay: .6s; animation-delay: .6s; } .video-holder-box-style5 .icon .video-popup { position: relative; display: flex; align-items: center; justify-content: center; background: var(--thm-white); border-radius: 50%; width: 100%; height: 100%; text-align: center; } .video-holder-box-style5 .icon .video-popup span::before { position: relative; color: var(--thm-black); font-size: 25px; transition: all 200ms linear; transition-delay: 0.1s; } .video-holder-box-style5 .icon:hover .video-popup span::before { color: var(--thm-primary-color); } .video-holder-box-style5 h5 { color: var(--thm-white); font-size: 16px; line-height: 20px; margin: 21px 0 0; } .features-style5-tab__button { position: relative; display: block; border-top: 1px solid rgba(255, 255, 255, 0.25); padding-top: 23px; margin-top: 116px; } .features-style5-tab__button .tabs-button-box { position: relative; display: flex; flex-direction: row; justify-content: center; align-items: center; } .features-style5-tab__button .tabs-button-box li { position: relative; display: block; margin: 0 30px; } .features-style5-tab__button .tabs-button-box li span { position: relative; display: inline-block; color: var(--thm-white); opacity: 0.60; font-size: 24px; line-height: 30px; font-weight: 700; font-family: var(--thm-font-2); cursor: pointer; transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease; } .features-style5-tab__button .tabs-button-box li:hover span, .features-style5-tab__button .tabs-button-box li.active-btn-item span { opacity: 1.0; } .tab-box-style1 .tabs-content-box { position: relative; display: block; } .tab-box-style1 .tab-content-box-item { position: absolute; left: 0px; top: 0px; width: 100%; height: auto; visibility: hidden; } .tab-box-style1 .tab-content-box-item.tab-content-box-item-active { position: relative; visibility: visible; z-index: 5; } .tab-box-style1 .tab-content-box-item .features-style5__content-tab-item { opacity: 0; transform: translateY(-10px); transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease; } .tab-box-style1 .tab-content-box-item.tab-content-box-item-active .features-style5__content-tab-item { opacity: 1.0; transform: translateY(0px); } /*** ============================================= Intro Style1 ============================================= ***/ .Intro-style1 { position: relative; display: block; padding: 180px 0 140px; margin-top: 125px; z-index: 10; } .Intro-style1__bg { position: absolute; top: 0; right: 0; bottom: 0; width: calc((100% - 270px) / 2); background-size: cover; background-repeat: no-repeat; background-position: left top; border-top-left-radius: 10px; border-bottom-left-radius: 10px; } .Intro-style1 #particles-js { top: -180px; left: 0; right: 0; height: 200px; } .intro-style1__content { position: relative; display: block; } .intro-style1__content .sec-title { padding-bottom: 0; } .about-round-text-box { position: absolute; top: 50%; left: -120px; width: 240px; height: 240px; border: 1px solid var(--thm-primary-color); border-radius: 50%; transform: translateY(-50%); z-index: 5; } .about-round-text1 { top: 66px; left: -115px; bottom: 0; right: 0; letter-spacing: -1px; word-spacing: 2px; transform: rotate(-90deg); } .about-round-text1 span { color: var(--thm-black); font-size: 16px; font-weight: 700; text-transform: uppercase; font-family: var(--thm-font-2); } .about-round-text2 { top: 67px; left: 0; bottom: 0; right: -120px; letter-spacing: 0px; word-spacing: 2px; transform: rotate(-90deg); } .about-round-text2 span { color: var(--thm-white); font-size: 16px; font-weight: 700; text-transform: uppercase; font-family: var(--thm-font-2); } .about-round-text-box .overlay-logo { position: absolute; top: 55px; left: 55px; bottom: 55px; right: 55px; background-color: #f0ebf5; border-radius: 50%; display: flex; align-items: center; justify-content: center; animation: textRotate 15s linear 0s forwards infinite; } .about-round-text-box .overlay-logo span { color: var(--thm-primary-color); font-size: 50px; } @keyframes textRotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /*** ============================================= Intro Style2 ============================================= ***/ .intro-style2 { padding: 0px 0px 140px; } .Intro-style2__img { position: relative; display: block; margin-right: 70px; } .Intro-style2__img .inner { position: relative; display: block; overflow: hidden; border-radius: var(--thm-border-radius); } .Intro-style2__img .inner img { width: 100%; } .intro-style2__content { position: relative; display: block; padding-top: 133px; } .intro-style2__content-top { position: relative; display: block; } .intro-style2__content-top p+p { margin-top: 26px; } .intro-style2__content-bottom { position: relative; display: block; padding-top: 93px; } .intro-style2__content-bottom-img { position: relative; display: block; width: 240px; border-radius: 50%; overflow: hidden; } .intro-style2__content-bottom-img img { width: 100%; } .intro-style2__content-bottom-content { position: relative; display: block; border-top: 1px solid var(--thm-border-color); padding-top: 21px; } .intro-style2__content-bottom-content .single-content { position: relative; display: block; } .intro-style2__content-bottom-content .single-content h2 { font-size: 24px; line-height: 34px; text-transform: capitalize; margin-bottom: 16px; } .intro-style2__content-bottom-content .single-content p { margin: 0; } .intro-style2-carousel.owl-carousel .owl-dots { position: relative; text-align: left; line-height: 0; margin-top: 26px !important; display: block; margin-left: -10px; } .intro-style2-carousel.owl-carousel .owl-dots .owl-dot { position: relative; display: inline-block; width: 12px; height: 12px; background-color: transparent; border: 2px solid #d1ced6; margin: 0px 10px; padding: 0px; border-radius: 50%; transition: all 100ms linear; transition-delay: 0.1s; } .intro-style2-carousel.owl-carousel .owl-dots .owl-dot:before { content: ""; position: absolute; top: -1px; left: -1px; bottom: -1px; right: -1px; background: var(--thm-primary-color); border-radius: 50%; transform: scale(0.7); opacity: 0; transition: all 500ms ease; } .intro-style2-carousel.owl-carousel .owl-dots .owl-dot.active { border-color: var(--thm-primary-color); } .intro-style2-carousel.owl-carousel .owl-dots .owl-dot.active:before { background: var(--thm-primary-color); transform: scale(1.0); opacity: 1; } .intro-style2-carousel.owl-theme .owl-dots .owl-dot span { display: none; } /*** ============================================= Revolution Style2 ============================================= ***/ .revolution-style2 { padding: 140px 0px 110px; z-index: 1; } .revolution-style2__single { position: relative; display: block; margin-bottom: 30px; border-radius: var(--thm-border-radius); overflow: hidden; z-index: 1; } .revolution-style2__single-text { position: relative; display: block; padding: 33px 30px 35px; z-index: 1; } .revolution-style2__single-text::before { position: absolute; top: 0; left: 0; bottom: -28px; right: 0; background: #f0ebf5; content: ""; z-index: -1; } .revolution-style2__single-text p { color: #6e6c72; } .revolution-style2__single-img { position: relative; display: block; padding-top: 28px; } .revolution-style2__single-img .overlay-text { position: absolute; top: 0; left: 0; right: 30px; display: flex; align-items: center; justify-content: space-between; z-index: 3; } .revolution-style2__single-img .overlay-text .text-box { position: relative; display: block; background: var(--thm-white); border-top-right-radius: 10px; border-bottom-right-radius: 10px; padding: 12px 30px 13px; } .revolution-style2__single-img .overlay-text .text-box h3 { font-size: 21px; line-height: 31px; text-transform: capitalize; } .revolution-style2__single-img .overlay-text .text-box h3 a { color: var(--thm-heading-font-color); } .revolution-style2__single-img .overlay-text .text-box h3 a:hover { color: var(--thm-primary-color); } .revolution-style2__single-img .overlay-text .btn-box { position: relative; display: block; } .revolution-style2__single-img .overlay-text .btn-box a { position: relative; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; background: var(--thm-primary-color); border-radius: var(--thm-border-radius); color: var(--thm-white); } .revolution-style2__single-img .overlay-text .btn-box a:hover { background: var(--thm-secondary-color); } .revolution-style2__single-img .overlay-text .btn-box a span { position: relative; display: inline-block; font-size: 25px; line-height: 25px; } .revolution-style2__single-img .inner { position: relative; display: block; overflow: hidden; z-index: 1; } .revolution-style2__single-img .inner::before { position: absolute; content: ''; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; z-index: 1; transition: opacity 0.5s ease; transition: all 0.5s ease; background: rgb(0, 0, 0); background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6054796918767507) 50%, rgba(0, 0, 0, 1) 100%); } .revolution-style2__single:hover .revolution-style2__single-img .inner::before { opacity: 1.0; } .revolution-style2__single-img .inner img { width: 100%; transform: scale(1); transition: all 1500ms ease 0s; } .revolution-style2__single:hover .revolution-style2__single-img .inner img { transform: scale(1.05) rotate(0deg); } /*** ============================================= Team Style1 ============================================= ***/ .team-style1 { padding: 140px 0px 110px; } .team-style1__top { position: relative; display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 50px; } .team-style1__top .sec-title { padding-bottom: 0px; } .team-style1__top .btn-box { position: relative; display: block; top: -10px; } .team-style1__single { position: relative; display: block; margin-bottom: 30px; } .team-style1__single-img { position: relative; display: block; } .team-style1__single-img .inner { position: relative; display: block; border-radius: var(--thm-border-radius); overflow: hidden; } .team-style1__single-img .inner img { position: relative; display: block; width: 100%; transition: all 500ms ease; } .team-style1__single-img .inner img:first-child { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; transform: translatex(50%) scaleX(1.5); opacity: 0; filter: blur(10px); transition: opacity 0.3s ease; transition: background-color 0.3s ease; transition: all 0.3s ease; z-index: 1; } .team-style1__single:hover .team-style1__single-img .inner img:first-child { transform: translatex(0) scaleX(1); opacity: 1; filter: blur(0); } .team-style1__single .team-style1__single-img .inner img:nth-child(2) { transition: opacity 0.3s ease; transition: background-color 0.3s ease; transition: all 0.3s ease; } .team-style1__single:hover .team-style1__single-img .inner img:nth-child(2) { transform: translatex(-50%) scaleX(1.5); opacity: 0; filter: blur(10px); } .team-style1__single-img .inner .overlay-content { position: absolute; left: 0; bottom: 24px; right: 0; text-align: center; opacity: 1.0; transform: translateY(0px); transform-origin: bottom top; transition: all 0.7s ease; z-index: 2; } .team-style1__single:hover .team-style1__single-img .inner .overlay-content { transform: translateY(100px); transform-origin: top bottom; } .team-style1__single-img .inner .overlay-content h3 { color: var(--thm-white); font-size: 19px; line-height: 32px; text-transform: capitalize; } .team-style1__single-img .inner .overlay-content h2 { font-size: 24px; line-height: 32px; text-transform: capitalize; } .team-style1__single-img .inner .overlay-content h2 a { color: var(--thm-white); } .team-style1__single-img .inner .overlay-content h2 a:hover { color: var(--thm-primary-color); } .team-style1__single-img .inner .text-box { position: absolute; left: 0; bottom: 23px; right: 0; text-align: center; opacity: 0; transform: scaleY(0.9); transform-origin: top bottom; transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease; z-index: 2; } .team-style1__single:hover .team-style1__single-img .inner .text-box { opacity: 1.0; transform: scaleY(1); transform-origin: bottom top; } .team-style1__single-img .inner .text-box p { color: var(--thm-white); } .team-style1__single-img .inner .social-links { position: absolute; top: 30px; right: 20px; z-index: 2; } .team-style1__single-img .inner .social-links a { position: relative; display: flex; align-items: center; justify-content: center; width: 45px; height: 45px; border-radius: var(--thm-border-radius); background: var(--thm-white); overflow: hidden; z-index: 1; } .team-style1__single-img .inner .social-links a::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: var(--thm-primary-color); border-radius: var(--thm-border-radius); transform: scale(0.7); opacity: 0; -webkit-transition: all 0.4s linear; -o-transition: all 0.4s linear; transition: all 0.4s linear; z-index: -1; } .team-style1__single-img .inner .social-links a:hover::before { transform: scale(1.0); opacity: 1; } .team-style1__single-img .inner .social-links a+a { margin-top: 15px; } .team-style1__single-img .inner .social-links a span { position: relative; display: inline-block; color: #a3a0a7; font-size: 20px; line-height: 20px; transition: all 200ms linear; transition-delay: 0.1s; } .team-style1__single-img .inner .social-links a:hover span { color: var(--thm-white); } .team-style1__single-img .inner .social-links a.fb { opacity: 0; transform: perspective(400px) rotateX(0deg) translateX(80px); transform-origin: bottom; transition: all 500ms ease; } .team-style1__single:hover .team-style1__single-img .inner .social-links a.fb { opacity: 1; transform: perspective(400px) rotateX(0deg) translateX(0px); transition-delay: 200ms; } .team-style1__single-img .inner .social-links a.tw { opacity: 0; transform: perspective(400px) rotateX(0deg) translateX(80px); transform-origin: bottom; transition: all 500ms ease; } .team-style1__single:hover .team-style1__single-img .inner .social-links a.tw { opacity: 1; transform: perspective(400px) rotateX(0deg) translateX(0px); transition-delay: 280ms; } .team-style1__single-img .inner .social-links a.in { opacity: 0; transform: perspective(400px) rotateX(0deg) translateX(80px); transform-origin: bottom; transition: all 500ms ease; } .team-style1__single:hover .team-style1__single-img .inner .social-links a.in { opacity: 1; transform: perspective(400px) rotateX(0deg) translateX(0px); transition-delay: 360ms; } /*** ============================================= Pricing Page One ============================================= ***/ .pricing-page-one { position: relative; display: block; padding: 140px 0px 0px; z-index: 1; } .pricing-page-one .shape1 { position: absolute; top: 150px; right: 0; z-index: -1; } .pricing-page-one .shape2 { position: absolute; top: 0px; left: 0; z-index: -1; } .pricing-page-one__content { position: relative; display: block; max-width: 770px; width: 100%; margin: 0 auto; } .pricing-page-one__content .row { --bs-gutter-x: 100px; } .tab-btn-box-style2 { position: relative; display: block; text-align: center; margin-bottom: 50px; } .tab-btn-box-style2 .tab-btns { position: relative; display: block; } .tab-btn-box-style2 .tab-btns:before { position: absolute; left: 0; right: 0; margin: 0 auto; height: 25px; width: 45px; content: ""; border-radius: 13px; background: var(--thm-black); } .tab-btn-box-style2 .tab-btns li { position: relative; display: inline-block; color: var(--thm-body-font-color); font-size: 16px; line-height: 26px; font-weight: 400; min-width: 160px; text-align: right; padding: 0px 40px 0px 0px; cursor: pointer; transition: all 500ms ease; } .tab-btn-box-style2 .tab-btns li:last-child { padding-right: 0; padding-left: 40px; text-align: left; } .tab-btn-box-style2 .tab-btns li:before { position: absolute; top: 5px; right: -20px; height: 15px; width: 15px; background: var(--thm-primary-color); border-radius: 50%; content: ""; -webkit-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .tab-btn-box-style2 .tab-btns li:last-child:before { display: none; } .tab-btn-box-style2 .tab-btns li.active-btn:before { right: 0px; } .pricing-page-one__content .tabs-content { position: relative; } .pricing-page-one__content .tabs-content .tab { position: relative; display: none; opacity: 0; transform: translateY(10px); transition: all 250ms ease-in-out; } .pricing-page-one__content .tabs-content .tab.active-tab { display: block; opacity: 1.0; transform: translateY(0px); } .single-pricing-style2 { position: relative; display: block; background: var(--thm-black); padding: 41px 50px 50px; border-radius: 20px; overflow: hidden; z-index: 1; } .single-pricing-style2 .popular-text { position: absolute; top: 0px; right: 50px; display: flex; align-items: center; justify-content: center; color: var(--thm-white); font-size: 16px; font-weight: 700; text-transform: capitalize; font-family: var(--thm-font-2); width: 100px; height: 40px; background-image: -moz-linear-gradient(0deg, rgb(108, 26, 253) 0%, rgb(237, 116, 108) 100%); background-image: -webkit-linear-gradient(0deg, rgb(108, 26, 253) 0%, rgb(237, 116, 108) 100%); background-image: -ms-linear-gradient(0deg, rgb(108, 26, 253) 0%, rgb(237, 116, 108) 100%); border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; z-index: 5; } .single-pricing-style2__left { position: relative; display: block; } .single-pricing-style2__left .inner-title { position: relative; display: inline-block; padding-bottom: 7px; margin-bottom: 32px; } .single-pricing-style2__left .inner-title::before { position: absolute; left: 0; bottom: 0; right: 0; height: 4px; background: var(--thm-primary-color); content: ""; } .single-pricing-style2__left .inner-title h3 { color: var(--thm-white); font-size: 24px; line-height: 34px; text-transform: capitalize; } .single-pricing-style2__left h4 { color: var(--thm-white); font-size: 21px; line-height: 31px; text-transform: capitalize; margin-bottom: 6px; } .single-pricing-style2__left h4 span { position: relative; display: inline-block; color: var(--thm-primary-color); font-size: 30px; line-height: 20px; top: 6px; padding-left: 8px; } .single-pricing-style2__left p { color: #a3a0a7; } .single-pricing-style2__left>ul { position: relative; display: block; margin-top: 23px; } .single-pricing-style2__left>ul>li { position: relative; display: block; border-top: 1px solid #29282c; padding: 22px 0px 23px; } .single-pricing-style2__left>ul>li:last-child { padding-bottom: 0px; } .single-pricing-style2__left>ul>li h4 { color: #2d2c30; font-size: 21px; line-height: 31px; text-transform: capitalize; } .single-pricing-style2__left>ul>li p { color: #2d2c30; } .single-pricing-style2__left .bottom-box { position: relative; display: flex; align-items: center; justify-content: space-between; background: var(--thm-white); border-radius: 20px; padding: 32px 25px 33px; margin-top: 43px; } .single-pricing-style2__left .bottom-box h3 { font-size: 19px; line-height: 29px; } .single-pricing-style2__left .bottom-box a { position: relative; display: flex; align-items: center; justify-content: center; width: 45px; height: 45px; background: var(--thm-primary-color); border-radius: var(--thm-border-radius); } .single-pricing-style2__left .bottom-box a span { position: relative; display: inline-block; color: var(--thm-white); font-size: 26px; line-height: 20px; } .single-pricing-style2__right { position: relative; display: block; } .single-pricing-style2__right::before { position: absolute; top: 9px; left: -50px; bottom: 0; width: 1px; background: #29282c; content: ""; } .single-pricing-style2__right .inner-title { position: relative; display: block; border-bottom: 1px solid #29282c; } .single-pricing-style2__right .inner-title .left { position: relative; display: block; padding-bottom: 16px; } .single-pricing-style2__right .inner-title .left span { position: relative; display: inline-block; color: var(--thm-primary-color); font-size: 60px; line-height: 60px; } .single-pricing-style2__right .inner-title .left h2 { color: var(--thm-white); font-size: 44px; line-height: 54px; text-transform: capitalize; margin-top: 8px; } .single-pricing-style2__right .inner-title .right { position: absolute; right: 0; bottom: -5px; display: block; color: #201f23; font-size: 120px; line-height: 0.9em; font-weight: 800; text-transform: uppercase; font-family: var(--thm-font-2); } .single-pricing-style2__right ul { position: relative; display: block; margin-top: 33px; } .single-pricing-style2__right ul li { position: relative; display: flex; align-items: center; justify-content: space-between; color: #a3a0a7; font-size: 16px; line-height: 26px; font-weight: 400; margin-bottom: 16px; } .single-pricing-style2__right ul li.color2 { color: #2d2c30; } .single-pricing-style2__right ul li span { position: relative; display: inline-block; font-size: 18px; line-height: 18px; } .single-pricing-style2__right .btn-box { position: relative; display: block; padding-top: 33px; } /*** ============================================= Pricing Page Two ============================================= ***/ .pricing-page-two { position: relative; display: block; padding: 140px 0px 0px; z-index: 1; } .pricing-page-two .shape1 { position: absolute; top: 150px; right: 0; z-index: -1; } .pricing-page-two .shape2 { position: absolute; top: 0px; left: 0; z-index: -1; } .pricing-page-two .pricing-style1__single { border: 1px solid #141316; background-image: none; background-color: #141316; padding: 65px 40px 50px; } .pricing-page-two .pricing-style1__switch-toggle ul.switch-toggler-list li.active a { color: var(--thm-primary-color); } .pricing-page-two .pricing-style1__single-icon { border: 1px solid #29282c; background-color: var(--thm-black-bg); } .pricing-page-two .pricing-style1__single-title p { color: #a3a0a7; } .pricing-page-two .pricing-style1__single-value h2 { color: var(--thm-white); } .pricing-page-two .pricing-style1__single-value h2 sub p { color: var(--thm-white); } .pricing-page-two .pricing-style1__single-value h2 sub p span { color: var(--thm-white); } .pricing-page-two .pricing-style1__single-list li p { color: #a3a0a7; } .pricing-page-two .pricing-style1__single-list li span { color: #a3a0a7; } .pricing-page-two .pricing-style1__single-list li p.color { color: #2d2c30; } .pricing-page-two .pricing-style1__single-list li span.color { color: #2d2c30; } /*** ============================================= Coming Soon Page Style1 ============================================= ***/ .coming-soon-page-style1 { position: relative; display: block; overflow: hidden; z-index: 10; } .coming-soon-page-style1__bg { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-attachment: scroll; background-repeat: no-repeat; background-position: center center; background-size: cover; background-color: var(--thm-black); background-blend-mode: luminosity; z-index: -1; } .coming-soon-page-style1__bg:before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: linear-gradient(0deg, #000000 5%, rgba(0, 0, 0, 0.5) 100%); } .coming-soon-page-style1__content { position: relative; display: block; max-width: 1300px; width: 100%; margin: 0 auto; top: 50%; transform: translateY(-50%); } .coming-soon-page-style1__content .inner { position: relative; display: block; width: 100%; height: 100%; text-align: center; } .coming-soon-page-style1__content .big-title { position: relative; display: inline-block; color: transparent; font-size: 80px; line-height: 1.1em; font-family: var(--thm-font-2); font-weight: 700; text-transform: uppercase; -webkit-background-clip: text; -webkit-text-stroke: 1px var(--thm-white); word-spacing: 15px; } .timer-box { position: relative; display: flex; align-items: center; justify-content: center; margin: 57px 0 42px; z-index: 2; } .timer-box .countdown-timer li { position: relative; display: flex; align-items: center; justify-content: center; float: left; width: 170px; height: 170px; margin: 0px 15px; border: 2px solid rgba(255, 255, 255, 0.1); background-color: var(--thm-base); border-radius: 50%; } .timer-box .countdown-timer li span.days, .timer-box .countdown-timer li span.hours, .timer-box .countdown-timer li span.minutes, .timer-box .countdown-timer li span.seconds { color: #ffffff; font-size: 55px; line-height: 60px; font-weight: 700; font-family: var(--thm-font); } .timer-box .countdown-timer li span.timeRef { position: relative; display: block; color: #ffffff; font-size: 18px; line-height: 20px; font-weight: 700; text-transform: uppercase; margin-top: 11px; font-family: var(--thm-font); } .coming-soon-page-style1__content .inner .text { position: relative; display: block; padding-bottom: 60px; } .coming-soon-page-style1__content .inner .text p { color: #ffffff; font-size: 20px; line-height: 30px; font-weight: 400; } .subscribe-box-style1 { position: relative; display: block; max-width: 770px; width: 100%; margin: 0 auto; } .subscribe-box-style1 form { position: relative; display: block; width: 100%; } .subscribe-box-style1 form input[type="email"] { position: relative; display: block; max-width: 560px; width: 100%; height: 70px; border-radius: 7px; background: #ffffff; border: 1px solid #ffffff !important; color: var(--thm-gray); font-size: 18px; font-weight: 400; padding-left: 30px; padding-right: 30px; transition: all 500ms ease 0s; font-family: var(--thm-font); } .subscribe-box-style1 form button { position: absolute; top: 0px; right: 0px; bottom: 0px; width: 195px; background: var(--thm-primary-color); border-radius: 7px; color: #ffffff; font-size: 14px; font-weight: 700; line-height: 70px; text-transform: uppercase; letter-spacing: 0.1em; display: block; text-align: center; border: 0px solid #e1e1e1 !important; transition: all 500ms ease 0s; } .subscribe-box-style1 form input[type="email"]:focus { color: var(--thm-black); } .subscribe-box-style1 form input[type="email"]:focus+button, .subscribe-box-style1 form button:hover { color: var(--thm-black); } .subscribe-box-style1 form input::-webkit-input-placeholder { color: #444444; } .subscribe-box-style1 form input:-moz-placeholder { color: #444444; } .subscribe-box-style1 form input::-moz-placeholder { color: #444444; } .subscribe-box-style1 form input:-ms-input-placeholder { color: #444444; } /*** ============================================= Error Page Css ============================================= ***/ .error-page { position: relative; display: flex; align-items: center; justify-content: center; text-align: center; z-index: 10; } .error-page__bg { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-attachment: scroll; background-repeat: no-repeat; background-position: center center; background-size: cover; z-index: -1; } .error-content { position: relative; display: block; } .error-content .big-title { position: relative; display: block; margin-bottom: 5px; } .error-content .big-title h2 { position: relative; display: inline-block; color: transparent; font-size: 280px; line-height: 1.1em; font-family: var(--thm-font-2); font-weight: 700; -webkit-background-clip: text; -webkit-text-stroke: 2px var(--thm-white); } .error-content .big-title h2::before { overflow: hidden; position: absolute; top: 0; left: 0; width: 0; color: var(--thm-white); white-space: nowrap; content: attr(data-hover); transition: all 0.5s cubic-bezier(0.17, 0.67, 0.32, 0.87); } .error-content .big-title h2:hover::before { width: 100%; } .error-content .title { position: relative; display: block; margin-bottom: 15px; } .error-content .title h2 { color: #ffffff; font-size: 44px; line-height: 1.2em; } .error-content .text { position: relative; display: block; } .error-content .text p { color: #ffffff; } .error-content .btns-box { position: relative; display: block; line-height: 0; margin-top: 33px; } /*--------------------------------------- Scrolling Text Style1 Css ---------------------------------------*/ .scrolling-text-style1 { overflow: hidden; } .scrolling-text-style1 .inner { position: relative; display: block; } .scrolling-text-style1 .inner ul { display: flex; align-items: center; flex-wrap: nowrap; width: fit-content; } .scrolling-text-style1 .inner ul:hover { animation-play-state: paused; } .scrolling-text-style1 .inner ul li { position: relative; display: block; white-space: nowrap; float: left; font-size: 52px; line-height: 60px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-family: var(--thm-font-2); margin-left: 80px; transition: all .4s ease; } .is-animetion { margin-top: 0.5em; } .is-animetion span { color: transparent; -webkit-background-clip: text; -webkit-text-stroke: 1px var(--thm-primary-color); display: inline-block; float: left; -webkit-animation: wave-text 2s ease-in-out infinite; animation: wave-text 2s ease-in-out infinite; } .is-animetion span:nth-of-type(1) { -webkit-animation-delay: 0s; animation-delay: 0s; } .is-animetion span:nth-of-type(2) { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } .is-animetion span:nth-of-type(3) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .is-animetion span:nth-of-type(4) { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .is-animetion span:nth-of-type(5) { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .is-animetion span:nth-of-type(6) { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } .is-animetion span:nth-of-type(7) { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .is-animetion span:nth-of-type(8) { -webkit-animation-delay: 0.7s; animation-delay: 0.7s; margin-left: 20px; } .is-animetion span:nth-of-type(9) { -webkit-animation-delay: 0.8s; animation-delay: 0.8s; } .is-animetion span:nth-of-type(10) { -webkit-animation-delay: 0.9s; animation-delay: 0.9s; margin-left: 20px; } .is-animetion span:nth-of-type(11) { -webkit-animation-delay: 1.0s; animation-delay: 1.0s; margin-left: 20px; } .is-animetion span:nth-of-type(12) { -webkit-animation-delay: 1.1s; animation-delay: 1.1s; } .is-animetion span:nth-of-type(13) { -webkit-animation-delay: 1.2s; animation-delay: 1.2s; } .is-animetion span:nth-of-type(14) { -webkit-animation-delay: 1.3s; animation-delay: 1.3s; } .is-animetion span:nth-of-type(15) { -webkit-animation-delay: 1.4s; animation-delay: 1.4s; } .is-animetion span:nth-of-type(16) { -webkit-animation-delay: 1.5s; animation-delay: 1.5s; } .is-animetion span:nth-of-type(17) { -webkit-animation-delay: 1.6s; animation-delay: 1.6s; margin-left: 20px; } .is-animetion span:nth-of-type(18) { -webkit-animation-delay: 1.7s; animation-delay: 1.7s; } .is-animetion span:nth-of-type(19) { -webkit-animation-delay: 1.8s; animation-delay: 1.8s; } .is-animetion span:nth-of-type(20) { -webkit-animation-delay: 1.9s; animation-delay: 1.9s; } .is-animetion span:nth-of-type(21) { -webkit-animation-delay: 1.9s; animation-delay: 2.0s; } .is-animetion span:nth-of-type(22) { -webkit-animation-delay: 1.9s; animation-delay: 2.1s; } .is-animetion-style2 span:nth-of-type(6) { margin-left: 20px; } .is-animetion-style2 span:nth-of-type(8) { margin-left: 0px; } .is-animetion-style2 span:nth-of-type(10) { margin-left: 0px; } .is-animetion-style2 span:nth-of-type(11) { margin-left: 0px; } .is-animetion-style2 span:nth-of-type(17) { margin-left: 0px; } .is-animetion-style3 span:nth-of-type(4) { margin-left: 20px; } .is-animetion-style3 span:nth-of-type(6) { margin-left: 0px; } .is-animetion-style3 span:nth-of-type(8) { margin-left: 0px; } .is-animetion-style3 span:nth-of-type(10) { margin-left: 0px; } .is-animetion-style3 span:nth-of-type(11) { margin-left: 0px; } .is-animetion-style3 span:nth-of-type(13) { margin-left: 20px; } .is-animetion-style3 span:nth-of-type(17) { margin-left: 0px; } @-webkit-keyframes fill { from { -webkit-text-fill-color: var(--thm-primary-color); } to { -webkit-text-fill-color: var(--thm-secondary-color); } } .scrolling-text-style1 .inner ul li:hover span { -webkit-text-stroke: 1px var(--thm-secondary-color); -webkit-text-fill-color: var(--thm-primary-color); -webkit-animation: fill 0.5s infinite alternate; } @-webkit-keyframes wave-text { 00% { transform: translateY(0em); } 60% { transform: translateY(-0.6em); } 100% { transform: translateY(0em); } } @keyframes wave-text { 00% { transform: translateY(0em); } 60% { transform: translateY(-0.6em); } 100% { transform: translateY(0em); } } /* Cursor */ .cursor { position: fixed; background-color: var(--thm-primary-color); width: 6px; height: 6px; border-radius: 100%; z-index: 1; -webkit-transition: 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity, 0.3s cubic-bezier(0.75, -1.27, 0.3, 2.33) -webkit-transform; transition: 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity, 0.3s cubic-bezier(0.75, -1.27, 0.3, 2.33) -webkit-transform; transition: 0.3s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity; transition: 0.3s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity, 0.3s cubic-bezier(0.75, -1.27, 0.3, 2.33) -webkit-transform; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none; z-index: 10000; -webkit-transform: scale(1); transform: scale(1); } .cursor::before { content: ""; position: absolute; top: -7px; left: -7px; bottom: -7px; right: -7px; border: 1px solid var(--thm-primary-color); border-radius: 50%; } .cursor.active { opacity: 1; -webkit-transform: scale(0); transform: scale(0); } .cursor.menu-active { opacity: 1; -webkit-transform: scale(0); transform: scale(0); } .cursor.hovered { opacity: 1; } .cursor-follower { position: fixed; background-color: var(--thm-primary-color); opacity: 0.30; width: 33px; height: 33px; border-radius: 100%; z-index: 1; -webkit-transition: 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) background, 0.6s cubic-bezier(0.75, -1.27, 0.3, 2.33) -webkit-transform; transition: 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) background, 0.6s cubic-bezier(0.75, -1.27, 0.3, 2.33) -webkit-transform; transition: 0.6s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) background; transition: 0.6s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) background, 0.6s cubic-bezier(0.75, -1.27, 0.3, 2.33) -webkit-transform; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none; z-index: 10000; -webkit-transform: translate(2px, 2px); transform: translate(2px, 2px); } .cursor-follower.active { opacity: 0.10; -webkit-transform: scale(1.03); transform: scale(1.03); } .cursor-follower.menu-active { opacity: 1; -webkit-transform: scale(3); transform: scale(3); } .cursor-follower.hovered { opacity: 1; } /* Cursor End */ #ui-datepicker-div.ui-widget-content { border: 1px solid #c5c5c5; background: #fff none repeat scroll 0 0; border: 1px solid #777; color: #252525; font-family: "Poppins", sans-serif; font-size: 14px; border-radius: 0px; width: 270px; padding: 5px; z-index: 999 !important; } #ui-datepicker-div.ui-datepicker .ui-datepicker-header { background: #151515 none repeat scroll 0 0; border: 2px solid #252525; border-radius: 0; color: #fff; font-weight: 700; padding: 5px 0; position: relative; } .ui-datepicker td a { color: #000000 !important; text-align: center; background-image: none !important; background: #f5f5f5 !important; border: 1px solid #f9f9f9 !important; } .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight { border: 1px solid #333333 !important; background: #333333 !important; color: #ffffff !important; } .ui-datepicker .ui-datepicker-prev { left: 5px; } .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { border-radius: 30%; height: 20px; position: absolute; top: 7px; width: 20px; transition: all 500ms ease; cursor: pointer; } .ui-datepicker .ui-datepicker-next { right: 5px; } .ui-datepicker .ui-datepicker-prev:hover, .ui-datepicker .ui-datepicker-next:hover { top: 7px; background: #fff; border: none; } .ui-datepicker table { border-collapse: collapse; font-size: 13px; margin: 0 0 0.4em; width: 100%; } .ui-datepicker th { border: medium none; font-weight: 600; padding: 2px 3px; text-align: center; } .ui-datepicker-calendar .ui-state-default:hover, .ui-datepicker-calendar .ui-state-default:active { background: #43c3ea; color: #fff; border-color: #43c3ea; } /*-------------------------------------------------- # End Css ----------------------------------------------------*/