/*----------------------------------------------------------------------------------- Template Name: Soles - Solar Panel Installation & Maintenance Html Template Author: Or-Factor Support: hello.orfactor@gmail.com Description: Soles - Solar Panel Installation & Maintenance Html Template Version: 1.1 ----------------------------------------------------------------------------------- /************ TABLE OF CONTENTS *************** ----------------- 01. THEME CSS ----------------- 1.1 Common Classes ----------------- 02. COMPONENTS css ----------------- 2.1 Back to top 2.2 Buttons 2.3 Animation 2.4 Preloader 2.5 Background 2.6 Nice Select 2.7 Pagination 2.8 Offcanvas 2.9 Breadcrumb 2.10 Accordion 2.11 Tab 2.12 Section Title 2.13 Search ----------------- 03. HEADER CSS ----------------- 3.1 Header Style 1 3.2 Header Style 2 3.3 Header Style 3 3.4 Header Style 4 3.5 Header Style 5 --------------------------------- 04. MENU CSS --------------------------------- 4.1 Main menu css 4.2 Mobilemenu css --------------------------------- 05. BLOG CSS --------------------------------- 5.1 Postbox css 5.2 Sidebar css 5.3 Recent Post css 5.4 Blog css --------------------------------- 06. FOOTER CSS --------------------------------- 6.1 Footer Style 1 6.2 Footer Style 2 6.3 Footer Style 3 6.4 Footer Style 4 6.5 Footer Style 5 --------------------------------- 07. PAGES CSS --------------------------------- 7.1 About css 7.2 Cta css 7.3 Faq css 7.4 Feature css 7.5 Funfact css 7.6 Hero css 7.7 Newsletter css 7.8 Order css 7.9 Process css 7.10 Project css 7.11 Service css 7.12 Shop css 7.13 Cart css 7.14 Checkout css 7.15 Skill css 7.17 Team css 7.18 Testimonial css 7.19 Video css 7.20 Contact css 7.21 Brand css 7.22 Case study css 7.23 Price css 7.24 Choose css 7.25 Slider css **********************************************/ /*----------------------------------------*/ /* 1.1 Theme Default /*----------------------------------------*/ @import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap"); a, button, p, input, select, textarea, li, .transition-3 { -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } /* transform */ @media (min-width: 1600px) { .col-xxxl-1 { flex: 0 0 auto; width: 8.333333%; } .col-xxxl-2 { flex: 0 0 auto; width: 16.666667%; } .col-xxxl-3 { flex: 0 0 auto; width: 25%; } .col-xxxl-4 { flex: 0 0 auto; width: 33.333333%; } .col-xxxl-5 { flex: 0 0 auto; width: 41.666667%; } .col-xxxl-6 { flex: 0 0 auto; width: 50%; } .col-xxxl-7 { flex: 0 0 auto; width: 58.333333%; } .col-xxxl-8 { flex: 0 0 auto; width: 66.666667%; } .col-xxxl-9 { flex: 0 0 auto; width: 75%; } .col-xxxl-10 { flex: 0 0 auto; width: 83.333333%; } .col-xxxl-11 { flex: 0 0 auto; width: 91.666667%; } .col-xxxl-12 { flex: 0 0 auto; width: 100%; } } @media (min-width: 1600px) { .order-xxxl-first { order: -1 !important; } .order-xxxl-0 { order: 0 !important; } .order-xxxl-1 { order: 1 !important; } .order-xxxl-2 { order: 2 !important; } .order-xxxl-3 { order: 3 !important; } .order-xxxl-4 { order: 4 !important; } .order-xxxl-5 { order: 5 !important; } .order-xxxl-last { order: 6 !important; } } :root { /** @font family declaration */ --ot-title-font: "Montserrat", sans-serif; --ot-body-font: "Noto Sans", sans-serif; --ot-style-font: "Montserrat", sans-serif; --ot-icon-font: "fontawesome"; /** @ripple declaration */ --ot-ripple-ani-duration: 2s; /** @color declaration */ --ot-theme-color: #86BB46; --ot-theme-color2: #FEC51B; --ot-title-color: #002244; --ot-title-color2: #024; --ot-dark-color: #050C01; --ot-body-color: #5D728A; --ot-stroke-color: #696969; --ot-border-color: #D8DDE1; --ot-smoke-color: #E7F9EE; --ot-smoke-color2: #003973; --ot-white-color: #ffffff; --ot-placeholder-color: #555c6a; --ot-black-color: #000000; --ot-gray-color: #F5F6FC; --ot-error-color: #dc3545; --ot-error-color: #dc3545; --ot-ecommerce-bg1: #0c1706; } .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { max-width: 1350px; --bs-gutter-x: 30px; } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { scroll-behavior: auto !important; } /*--------------------------------- typography css start ---------------------------------*/ body { font-size: 16px; line-height: 26px; font-weight: 500; color: var(--ot-body-color); font-family: var(--ot-body-font); overflow-x: hidden; word-break: break-word; -webkit-font-smoothing: antialiased; } img { max-width: 100%; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4, h5, h6 { margin-top: 0px; font-weight: 500; line-height: 1.2; -webkit-transition: color 0.3s ease-out; -moz-transition: color 0.3s ease-out; -ms-transition: color 0.3s ease-out; -o-transition: color 0.3s ease-out; transition: color 0.3s ease-out; color: var(--ot-black-color); font-family: var(--ot-title-font); } h1 { font-size: 68px; } h2 { font-size: 56px; } h3 { font-size: 48px; } h4 { font-size: 24px; } h5 { font-size: 20px; } h6 { font-size: 16px; } ul { margin: 0px; padding: 0px; } p { font-size: 16px; font-weight: 500; margin-bottom: 15px; line-height: 26px; font-family: var(--ot-body-font); color: var(--ot-body-color); } a:not([href]):not([class]), a:not([href]):not([class]):hover { color: inherit; text-decoration: none; } a:focus, .button:focus { text-decoration: none; outline: none; } a:focus, a:hover { text-decoration: none; } a, button { outline: none; border: none; background: transparent; } button:hover { cursor: pointer; } button:focus { outline: 0; } .uppercase { text-transform: uppercase; } .capitalize { text-transform: capitalize; } input[type=text], input[type=email], input[type=tel], input[type=number], input[type=password], input[type=url], textarea { outline: none; height: 54px; width: 100%; font-size: 16px; padding-left: 20px; padding-right: 40px; color: var(--ot-body-color); border: 1px solid var(--ot-border-color); background: none; resize: none; scroll-behavior: unset; } input[type=text]::-webkit-input-placeholder, input[type=email]::-webkit-input-placeholder, input[type=tel]::-webkit-input-placeholder, input[type=number]::-webkit-input-placeholder, input[type=password]::-webkit-input-placeholder, input[type=url]::-webkit-input-placeholder, textarea::-webkit-input-placeholder { font-weight: 500; color: var(--ot-body-color); text-transform: capitalize; } input[type=text]::-moz-placeholder, input[type=email]::-moz-placeholder, input[type=tel]::-moz-placeholder, input[type=number]::-moz-placeholder, input[type=password]::-moz-placeholder, input[type=url]::-moz-placeholder, textarea::-moz-placeholder { font-weight: 500; color: var(--ot-body-color); text-transform: capitalize; } input[type=text]:-moz-placeholder, input[type=email]:-moz-placeholder, input[type=tel]:-moz-placeholder, input[type=number]:-moz-placeholder, input[type=password]:-moz-placeholder, input[type=url]:-moz-placeholder, textarea:-moz-placeholder { font-weight: 500; color: var(--ot-body-color); text-transform: capitalize; } input[type=text]:-ms-input-placeholder, input[type=email]:-ms-input-placeholder, input[type=tel]:-ms-input-placeholder, input[type=number]:-ms-input-placeholder, input[type=password]:-ms-input-placeholder, input[type=url]:-ms-input-placeholder, textarea:-ms-input-placeholder { font-weight: 500; color: var(--ot-body-color); text-transform: capitalize; } input[type=text]::placeholder, input[type=email]::placeholder, input[type=tel]::placeholder, input[type=number]::placeholder, input[type=password]::placeholder, input[type=url]::placeholder, textarea::placeholder { font-weight: 500; color: var(--ot-body-color); text-transform: capitalize; } input[type=text]:focus, input[type=email]:focus, input[type=tel]:focus, input[type=number]:focus, input[type=password]:focus, input[type=url]:focus, textarea:focus { border-color: var(--ot-theme-color); } input[type=text]:focus::placeholder, input[type=email]:focus::placeholder, input[type=tel]:focus::placeholder, input[type=number]:focus::placeholder, input[type=password]:focus::placeholder, input[type=url]:focus::placeholder, textarea:focus::placeholder { opacity: 0; } input[type=email] { text-transform: lowercase; } textarea { line-height: 1.4; padding-top: 17px; padding-bottom: 17px; } input[type=color] { appearance: none; -moz-appearance: none; -webkit-appearance: none; background: none; border: 0; cursor: pointer; height: 100%; width: 100%; padding: 0; border-radius: 50%; } *::-moz-selection { background: var(--ot-black-color); color: var(--ot-white-color); text-shadow: none; } *::-moz-selection { background: var(--ot-black-color); color: var(--ot-white-color); text-shadow: none; } *::selection { background: var(--ot-black-color); color: var(--ot-white-color); text-shadow: none; } *::-moz-placeholder { color: var(--ot-black-color); font-size: 14px; opacity: 1; } *::placeholder { color: var(--ot-black-color); font-size: 14px; opacity: 1; } .ot-lh-1 { line-height: 1; } .ot-light-text { font-weight: 500; } .ot-line-black { display: inline; transition: all 0.3s linear; background-repeat: no-repeat; background-size: 0% 1px, 0 1px; background-position: 100% 100%, 0 100%; background-image: linear-gradient(#141820, #141820), linear-gradient(#141820, #141820); } .ot-line-black:hover { background-size: 0% 1px, 100% 1px; } .ot-line-white { display: inline; transition: all 0.3s linear; background-repeat: no-repeat; background-size: 0% 1px, 0 1px; background-position: 100% 100%, 0 100%; background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff); } .ot-line-white:hover { background-size: 0% 1px, 100% 1px; } .ot-net-img { position: relative; } .ot-net-img > .net-shape { position: absolute; width: 100%; top: 0; left: 0; } .ot-space { padding-top: 120px; padding-bottom: 120px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-space { padding-top: 80px; padding-bottom: 80px; } } .ot-space-extra { padding-top: 120px; padding-bottom: 190px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .ot-space-extra { padding-top: 80px; padding-bottom: 150px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-space-extra { padding-top: 80px; padding-bottom: 210px; } } .ot-space-sm { padding-top: 100px; padding-bottom: 100px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-space-sm { padding-top: 80px; padding-bottom: 80px; } } .ot-space-sm-top { padding-top: 110px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-space-sm-top { padding-top: 80px; } } .ot-space-sm-bottom { padding-bottom: 110px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-space-sm-bottom { padding-bottom: 80px; } } .ot-space-sm2 { padding-top: 80px; padding-bottom: 80px; } .ot-space-sm3 { padding-top: 90px; padding-bottom: 90px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-space-sm3 { padding-top: 80px; padding-bottom: 80px; } } .ot-space-top-sm3 { padding-top: 90px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-space-top-sm3 { padding-top: 80px; } } .ot-space-bottom-sm3 { padding-bottom: 90px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-space-bottom-sm3 { padding-bottom: 80px; } } .ot-space-top { padding-top: 120px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-space-top { padding-top: 80px; } } .ot-space-bottom { padding-bottom: 120px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-space-bottom { padding-bottom: 80px; } } .ot-space-extra-top { padding-top: 140px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-space-extra-top { padding-top: 80px; } } .ot-space-extra-bottom { padding-bottom: 140px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-space-extra-bottom { padding-bottom: 80px; } } .ot-space-extra-bottom.extra-sm-top { padding-top: 110px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-space-extra-bottom.extra-sm-top { padding-top: 80px; } } .ot-space-extra-bottom.extra-sm2-top { padding-top: 100px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-space-extra-bottom.extra-sm2-top { padding-top: 80px; } } .ot-space.extra-sm-top { padding-top: 110px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-space.extra-sm-top { padding-top: 80px; } } .ot-space.extra-sm-top2 { padding-top: 50px; } .ot-space-extra-bottom { padding-bottom: 140px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-space-extra-bottom { padding-bottom: 80px; } } .ot-space-extra-bottom.extra-bottom2 { padding-bottom: 110px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-space-extra-bottom.extra-bottom2 { padding-bottom: 80px; } } .ot-space-sm-extra-top { padding-top: 80px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-space-sm-extra-top { padding-top: 0px; } } .ot-space-sm-extra-bottom { padding-bottom: 80px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-space-sm-extra-bottom { padding-bottom: 0px; } } .ot-space-large { padding-top: 235px; padding-bottom: 100px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-space-large { padding-top: 215px; padding-bottom: 80px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-space-large { padding-top: 150px; } } .ot-space-large2 { padding-top: 280px; padding-bottom: 135px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-space-large2 { padding-top: 215px; padding-bottom: 80px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-space-large2 { padding-top: 150px; } } .theme-text1 { color: var(--ot-theme-color) !important; display: inline-block; } .theme-text2 { color: var(--ot-theme-color2); display: inline-block; } .ot-bg-top-center { background-repeat: no-repeat; background-size: auto; background-position: top center; } /*--------------------------------- 1.1 Common Classes ---------------------------------*/ .w-100 img { width: 100%; } .m-img img { max-width: 100%; } .fix { overflow: hidden; } .clear { clear: both; } .z-index-2 { position: relative; z-index: 2; } .z-index-3 { position: relative; z-index: 3; } .z-index-4 { position: relative; z-index: 4; } .z-index-5 { position: relative; z-index: 5; } .z-index-6 { position: relative; z-index: 6; } .z-index-7 { position: relative; z-index: 7; } .z-index-8 { position: relative; z-index: 8; } .z-index-9 { position: relative; z-index: 9; } .z-index-10 { position: relative; z-index: 10; } .gx-0 { --bs-gutter-x: 0px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .gx-0 { --bs-gutter-x: 24px; } } .gx-8 { --bs-gutter-x: 8px; } .gx-10 { --bs-gutter-x: 10px; } .gx-15 { --bs-gutter-x: 15px; } .gx-18 { --bs-gutter-x: 18px; } .gx-20 { --bs-gutter-x: 20px; } .gx-30 { --bs-gutter-x: 30px; } .gx-35 { --bs-gutter-x: 35px; } .gx-40 { --bs-gutter-x: 40px; } .gx-50 { --bs-gutter-x: 50px; } .gx-60 { --bs-gutter-x: 60px; } .gx-65 { --bs-gutter-x: 65px; } .gy-10 { --bs-gutter-y: 10px; } .gy-15 { --bs-gutter-y: 15px; } .gy-18 { --bs-gutter-y: 18px; } .gy-20 { --bs-gutter-y: 20px; } .gy-25 { --bs-gutter-y: 25px; } .gy-24 { --bs-gutter-y: 24px; } .gy-30 { --bs-gutter-y: 30px; } .gy-35 { --bs-gutter-y: 35px; } .gy-40 { --bs-gutter-y: 40px; } .gy-50 { --bs-gutter-y: 50px; } .gy-60 { --bs-gutter-y: 60px; } .gy-65 { --bs-gutter-y: 65px; } .gy-70 { --bs-gutter-y: 70px; } .gy-75 { --bs-gutter-y: 75px; } .gy-80 { --bs-gutter-y: 80px; } .gy-85 { --bs-gutter-y: 85px; } .overflow-y-visible { overflow-x: hidden; overflow-y: visible; } .p-relative { position: relative; } .p-absolute { position: absolute; } .include-bg { background-position: center; background-size: cover; background-repeat: no-repeat; } /* dropcap */ .ot-dropcap::first-letter { float: left; width: 65px; height: 85px; font-size: 90px; line-height: 0.8; font-weight: 500; margin-right: 5px; text-align: center; line-height: inherit; text-transform: capitalize; color: var(--ot-white-color); font-family: var(--ot-ff-body); } .body-overlay { background-color: var(--ot-black-color); height: 100%; width: 100%; position: fixed; top: 0; z-index: 99; left: 0; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s 0s ease-out; -moz-transition: all 0.3s 0s ease-out; -ms-transition: all 0.3s 0s ease-out; -o-transition: all 0.3s 0s ease-out; transition: all 0.3s 0s ease-out; } .body-overlay:hover { cursor: url(../img/icon/close.png), pointer; } .body-overlay.opend { opacity: 0.7; visibility: visible; } .ot-bold-text { position: relative; font-weight: 600; color: var(--ot-title-color); } .ot-line-hover { position: relative; display: inline-block; display: inline; transition: all 0.3s linear; background-repeat: no-repeat; background-size: 0% 1px, 0 1px; background-position: 100% 100%, 0 100%; background-image: linear-gradient(currentcolor, currentcolor), linear-gradient(currentcolor, currentcolor); } .ot-line-hover.purple { background-position: 100% 100%, 0 75%; background-image: linear-gradient(currentcolor, currentcolor), linear-gradient(currentcolor, currentcolor); } .ot-line-hover.theme { background-position: 100% 100%, 0 75%; background-image: linear-gradient(currentcolor, currentcolor), linear-gradient(currentcolor, currentcolor); } .ot-line-hover.green { background-position: 100% 100%, 0 75%; background-image: linear-gradient(currentcolor, currentcolor), linear-gradient(currentcolor, currentcolor); } .ot-line-hover.orange { background-image: linear-gradient(currentcolor, currentcolor), linear-gradient(currentcolor, currentcolor); } .ot-line-hover:hover { background-size: 0% 1px, 100% 1px; } .ot-line-hover:hover { background-size: 0% 1px, 100% 1px; } .ot-line-white::after { background-color: var(--ot-white-color); } .ot-line-theme::after { background-color: var(--ot-theme-color); } .ot-img-hover { position: relative; overflow: hidden; } .ot-img-hover::before { position: absolute; top: 0; left: -80%; z-index: 2; display: block; content: ""; width: 50%; height: 100%; background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%); background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.3))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%); -webkit-transform: skewX(-25deg); -ms-transform: skewX(-25deg); transform: skewX(-25deg); } .ot-img-hover:hover::before { -webkit-animation: shine 1s; animation: shine 1s; } .ot-italic { font-style: italic; } .ot-italic-light { font-style: italic; font-weight: 400; } .ot-body-shape-left, .ot-body-shape-right { position: absolute; bottom: 0; right: 0; z-index: 1; } .ot-body-shape-left { bottom: auto; top: 0; right: auto; left: 0; } .ot-body-shape-left.blog-shape { top: auto; bottom: 0; } .ot-bg-style { background-position: center; background-size: cover; background-repeat: no-repeat; } .bg-mask { mask-size: 100% 100%; mask-repeat: no-repeat; } svg path.line-1 { stroke-dasharray: 2300; stroke-dashoffset: 3500; animation: dash 4s linear forwards infinite; } .ot-reveal { visibility: hidden; position: relative; width: 100%; height: 100%; max-width: 100%; overflow: hidden; } .ot-reveal img { height: 100%; width: 100%; object-fit: cover; transform-origin: left; } .ajax-response.error { color: rgba(196, 0, 0, 0.9490196078); } .ajax-response.success { color: var(--ot-theme-color2); } /*--------------------------------- 1.3 Default Spacing ---------------------------------*/ .mt-5 { margin-top: 5px !important; } .mt-10 { margin-top: 10px; } .mt-15 { margin-top: 15px; } .mt-20 { margin-top: 20px; } .mt-25 { margin-top: 25px; } .mt-30 { margin-top: 30px; } .mt-35 { margin-top: 35px; } .mt-40 { margin-top: 40px; } .mt-45 { margin-top: 45px; } .mt-50 { margin-top: 50px; } .mt-55 { margin-top: 55px; } .mt-60 { margin-top: 60px; } .mt-65 { margin-top: 65px; } .mt-70 { margin-top: 70px; } .mt-75 { margin-top: 75px; } .mt-80 { margin-top: 80px; } .mt-85 { margin-top: 85px; } .mt-90 { margin-top: 90px; } .mt-95 { margin-top: 95px; } .mt-100 { margin-top: 100px; } .mt-105 { margin-top: 105px; } .mt-110 { margin-top: 110px; } .mt-115 { margin-top: 115px; } .mt-120 { margin-top: 120px; } .mt-125 { margin-top: 125px; } .mt-130 { margin-top: 130px; } .mt-135 { margin-top: 135px; } .mt-140 { margin-top: 140px; } .mt-145 { margin-top: 145px; } .mt-150 { margin-top: 150px; } .mt-155 { margin-top: 155px; } .mt-160 { margin-top: 160px; } .mt-165 { margin-top: 165px; } .mt-170 { margin-top: 170px; } .mt-175 { margin-top: 175px; } .mt-180 { margin-top: 180px; } .mt-185 { margin-top: 185px; } .mt-190 { margin-top: 190px; } .mt-195 { margin-top: 195px; } .mt-200 { margin-top: 200px; } .mb-5 { margin-bottom: 5px !important; } .mb-10 { margin-bottom: 10px; } .mb-15 { margin-bottom: 15px; } .mb-20 { margin-bottom: 20px; } .mb-25 { margin-bottom: 25px; } .mb-30 { margin-bottom: 30px; } .mb-35 { margin-bottom: 35px; } .mb-40 { margin-bottom: 40px; } .mb-45 { margin-bottom: 45px; } .mb-50 { margin-bottom: 50px; } .mb-55 { margin-bottom: 55px; } .mb-60 { margin-bottom: 60px; } .mb-65 { margin-bottom: 65px; } .mb-70 { margin-bottom: 70px; } .mb-75 { margin-bottom: 75px; } .mb-80 { margin-bottom: 80px; } .mb-85 { margin-bottom: 85px; } .mb-90 { margin-bottom: 90px; } .mb-95 { margin-bottom: 95px; } .mb-100 { margin-bottom: 100px; } .mb-105 { margin-bottom: 105px; } .mb-110 { margin-bottom: 110px; } .mb-115 { margin-bottom: 115px; } .mb-120 { margin-bottom: 120px; } .mb-125 { margin-bottom: 125px; } .mb-130 { margin-bottom: 130px; } .mb-135 { margin-bottom: 135px; } .mb-140 { margin-bottom: 140px; } .mb-145 { margin-bottom: 145px; } .mb-150 { margin-bottom: 150px; } .mb-155 { margin-bottom: 155px; } .mb-160 { margin-bottom: 160px; } .mb-165 { margin-bottom: 165px; } .mb-170 { margin-bottom: 170px; } .mb-175 { margin-bottom: 175px; } .mb-180 { margin-bottom: 180px; } .mb-185 { margin-bottom: 185px; } .mb-190 { margin-bottom: 190px; } .mb-195 { margin-bottom: 195px; } .mb-200 { margin-bottom: 200px; } .ml-5 { margin-left: 5px; } .ml-10 { margin-left: 10px; } .ml-15 { margin-left: 15px; } .ml-20 { margin-left: 20px; } .ml-25 { margin-left: 25px; } .ml-30 { margin-left: 30px; } .ml-35 { margin-left: 35px; } .ml-40 { margin-left: 40px; } .ml-45 { margin-left: 45px; } .ml-50 { margin-left: 50px; } .ml-55 { margin-left: 55px; } .ml-60 { margin-left: 60px; } .ml-65 { margin-left: 65px; } .ml-70 { margin-left: 70px; } .ml-75 { margin-left: 75px; } .ml-80 { margin-left: 80px; } .ml-85 { margin-left: 85px; } .ml-90 { margin-left: 90px; } .ml-95 { margin-left: 95px; } .ml-100 { margin-left: 100px; } .ml-105 { margin-left: 105px; } .ml-110 { margin-left: 110px; } .ml-115 { margin-left: 115px; } .ml-120 { margin-left: 120px; } .ml-125 { margin-left: 125px; } .ml-130 { margin-left: 130px; } .ml-135 { margin-left: 135px; } .ml-140 { margin-left: 140px; } .ml-145 { margin-left: 145px; } .ml-150 { margin-left: 150px; } .ml-155 { margin-left: 155px; } .ml-160 { margin-left: 160px; } .ml-165 { margin-left: 165px; } .ml-170 { margin-left: 170px; } .ml-175 { margin-left: 175px; } .ml-180 { margin-left: 180px; } .ml-185 { margin-left: 185px; } .ml-190 { margin-left: 190px; } .ml-195 { margin-left: 195px; } .ml-200 { margin-left: 200px; } .mr-5 { margin-right: 5px; } .mr-10 { margin-right: 10px; } .mr-15 { margin-right: 15px; } .mr-20 { margin-right: 20px; } .mr-25 { margin-right: 25px; } .mr-30 { margin-right: 30px; } .mr-35 { margin-right: 35px; } .mr-40 { margin-right: 40px; } .mr-45 { margin-right: 45px; } .mr-50 { margin-right: 50px; } .mr-55 { margin-right: 55px; } .mr-60 { margin-right: 60px; } .mr-65 { margin-right: 65px; } .mr-70 { margin-right: 70px; } .mr-75 { margin-right: 75px; } .mr-80 { margin-right: 80px; } .mr-85 { margin-right: 85px; } .mr-90 { margin-right: 90px; } .mr-95 { margin-right: 95px; } .mr-100 { margin-right: 100px; } .mr-105 { margin-right: 105px; } .mr-110 { margin-right: 110px; } .mr-115 { margin-right: 115px; } .mr-120 { margin-right: 120px; } .mr-125 { margin-right: 125px; } .mr-130 { margin-right: 130px; } .mr-135 { margin-right: 135px; } .mr-140 { margin-right: 140px; } .mr-145 { margin-right: 145px; } .mr-150 { margin-right: 150px; } .mr-155 { margin-right: 155px; } .mr-160 { margin-right: 160px; } .mr-165 { margin-right: 165px; } .mr-170 { margin-right: 170px; } .mr-175 { margin-right: 175px; } .mr-180 { margin-right: 180px; } .mr-185 { margin-right: 185px; } .mr-190 { margin-right: 190px; } .mr-195 { margin-right: 195px; } .mr-200 { margin-right: 200px; } .pt-5 { padding-top: 5px !important; } .pt-10 { padding-top: 10px; } .pt-15 { padding-top: 15px; } .pt-20 { padding-top: 20px; } .pt-25 { padding-top: 25px; } .pt-30 { padding-top: 30px; } .pt-35 { padding-top: 35px; } .pt-40 { padding-top: 40px; } .pt-45 { padding-top: 45px; } .pt-50 { padding-top: 50px; } .pt-55 { padding-top: 55px; } .pt-60 { padding-top: 60px; } .pt-65 { padding-top: 65px; } .pt-70 { padding-top: 70px; } .pt-75 { padding-top: 75px; } .pt-80 { padding-top: 80px; } .pt-85 { padding-top: 85px; } .pt-90 { padding-top: 90px; } .pt-95 { padding-top: 95px; } .pt-100 { padding-top: 100px; } .pt-105 { padding-top: 105px; } .pt-110 { padding-top: 110px; } .pt-115 { padding-top: 115px; } .pt-120 { padding-top: 120px; } .pt-125 { padding-top: 125px; } .pt-130 { padding-top: 130px; } .pt-135 { padding-top: 135px; } .pt-140 { padding-top: 140px; } .pt-145 { padding-top: 145px; } .pt-150 { padding-top: 150px; } .pt-155 { padding-top: 155px; } .pt-160 { padding-top: 160px; } .pt-165 { padding-top: 165px; } .pt-170 { padding-top: 170px; } .pt-175 { padding-top: 175px; } .pt-180 { padding-top: 180px; } .pt-185 { padding-top: 185px; } .pt-190 { padding-top: 190px; } .pt-195 { padding-top: 195px; } .pt-200 { padding-top: 200px; } .pt-245 { padding-top: 245px; } .pt-250 { padding-top: 250px; } .pt-305 { padding-top: 305px; } .pb-5 { padding-bottom: 5px !important; } .pb-10 { padding-bottom: 10px; } .pb-15 { padding-bottom: 15px; } .pb-20 { padding-bottom: 20px; } .pb-25 { padding-bottom: 25px; } .pb-30 { padding-bottom: 30px; } .pb-35 { padding-bottom: 35px; } .pb-40 { padding-bottom: 40px; } .pb-45 { padding-bottom: 45px; } .pb-50 { padding-bottom: 50px; } .pb-55 { padding-bottom: 55px; } .pb-60 { padding-bottom: 60px; } .pb-65 { padding-bottom: 65px; } .pb-70 { padding-bottom: 70px; } .pb-75 { padding-bottom: 75px; } .pb-80 { padding-bottom: 80px; } .pb-85 { padding-bottom: 85px; } .pb-90 { padding-bottom: 90px; } .pb-95 { padding-bottom: 95px; } .pb-100 { padding-bottom: 100px; } .pb-105 { padding-bottom: 105px; } .pb-110 { padding-bottom: 110px; } .pb-115 { padding-bottom: 115px; } .pb-120 { padding-bottom: 120px; } .pb-125 { padding-bottom: 125px; } .pb-130 { padding-bottom: 130px; } .pb-135 { padding-bottom: 135px; } .pb-140 { padding-bottom: 140px; } .pb-145 { padding-bottom: 145px; } .pb-150 { padding-bottom: 150px; } .pb-155 { padding-bottom: 155px; } .pb-160 { padding-bottom: 160px; } .pb-165 { padding-bottom: 165px; } .pb-170 { padding-bottom: 170px; } .pb-175 { padding-bottom: 175px; } .pb-180 { padding-bottom: 180px; } .pb-185 { padding-bottom: 185px; } .pb-190 { padding-bottom: 190px; } .pb-195 { padding-bottom: 195px; } .pb-200 { padding-bottom: 200px; } .pb-250 { padding-bottom: 250px; } .pl-5 { padding-left: 5px; } .pl-10 { padding-left: 10px; } .pl-15 { padding-left: 15px; } .pl-20 { padding-left: 20px; } .pl-25 { padding-left: 25px; } .pl-30 { padding-left: 30px; } .pl-35 { padding-left: 35px; } .pl-40 { padding-left: 40px; } .pl-45 { padding-left: 45px; } .pl-50 { padding-left: 50px; } .pl-55 { padding-left: 55px; } .pl-60 { padding-left: 60px; } .pl-65 { padding-left: 65px; } .pl-70 { padding-left: 70px; } .pl-75 { padding-left: 75px; } .pl-80 { padding-left: 80px; } .pl-85 { padding-left: 85px; } .pl-90 { padding-left: 90px; } .pl-95 { padding-left: 95px; } .pl-100 { padding-left: 100px; } .pl-105 { padding-left: 105px; } .pl-110 { padding-left: 110px; } .pl-115 { padding-left: 115px; } .pl-120 { padding-left: 120px; } .pl-125 { padding-left: 125px; } .pl-130 { padding-left: 130px; } .pl-135 { padding-left: 135px; } .pl-140 { padding-left: 140px; } .pl-145 { padding-left: 145px; } .pl-150 { padding-left: 150px; } .pl-155 { padding-left: 155px; } .pl-160 { padding-left: 160px; } .pl-165 { padding-left: 165px; } .pl-170 { padding-left: 170px; } .pl-175 { padding-left: 175px; } .pl-180 { padding-left: 180px; } .pl-185 { padding-left: 185px; } .pl-190 { padding-left: 190px; } .pl-195 { padding-left: 195px; } .pl-200 { padding-left: 200px; } .pr-5 { padding-right: 5px; } .pr-10 { padding-right: 10px; } .pr-15 { padding-right: 15px; } .pr-20 { padding-right: 20px; } .pr-25 { padding-right: 25px; } .pr-30 { padding-right: 30px; } .pr-35 { padding-right: 35px; } .pr-40 { padding-right: 40px; } .pr-45 { padding-right: 45px; } .pr-50 { padding-right: 50px; } .pr-55 { padding-right: 55px; } .pr-60 { padding-right: 60px; } .pr-65 { padding-right: 65px; } .pr-70 { padding-right: 70px; } .pr-75 { padding-right: 75px; } .pr-80 { padding-right: 80px; } .pr-85 { padding-right: 85px; } .pr-90 { padding-right: 90px; } .pr-95 { padding-right: 95px; } .pr-100 { padding-right: 100px; } .pr-105 { padding-right: 105px; } .pr-110 { padding-right: 110px; } .pr-115 { padding-right: 115px; } .pr-120 { padding-right: 120px; } .pr-125 { padding-right: 125px; } .pr-130 { padding-right: 130px; } .pr-135 { padding-right: 135px; } .pr-140 { padding-right: 140px; } .pr-145 { padding-right: 145px; } .pr-150 { padding-right: 150px; } .pr-155 { padding-right: 155px; } .pr-160 { padding-right: 160px; } .pr-165 { padding-right: 165px; } .pr-170 { padding-right: 170px; } .pr-175 { padding-right: 175px; } .pr-180 { padding-right: 180px; } .pr-185 { padding-right: 185px; } .pr-190 { padding-right: 190px; } .pr-195 { padding-right: 195px; } .pr-200 { padding-right: 200px; } /*----------------------------------------*/ /* 2.1 Back to top /*----------------------------------------*/ .scroll-top { position: fixed; right: 30px; bottom: 30px; height: 50px; width: 50px; cursor: pointer; display: block; border-radius: 50px; z-index: 10000; opacity: 1; visibility: hidden; transform: translateY(45px); transition: all 300ms linear; } .scroll-top:after { content: ""; font-family: var(--ot-icon-font); position: absolute; text-align: center; line-height: 50px; font-size: 16px; color: var(--ot-theme-color); left: 0; top: 0; height: 50px; width: 50px; cursor: pointer; display: block; z-index: 1; border: 2px solid var(--ot-theme-color); box-shadow: none; border-radius: 50%; background-image: url("../img/icon/up-arrow.svg"); background-position: center; background-size: cover; background-repeat: no-repeat; } .scroll-top svg { color: var(--ot-theme-color); border-radius: 50%; background: var(--ot-white-color); } .scroll-top svg path { fill: none; } .scroll-top .progress-circle path { stroke: var(--ot-theme-color); stroke-width: 20px; box-sizing: border-box; transition: all 400ms linear; } .scroll-top.show { opacity: 1; visibility: visible; transform: translateY(0); } /*----------------------------------------*/ /* 2.2 Buttons /*----------------------------------------*/ .ot-btn-primary { font-size: 16px; font-weight: 700; text-transform: uppercase; color: var(--ot-white-color); display: inline-block; background: var(--ot-theme-color); padding: 15.5px 30px; border-radius: 30px; position: relative; overflow: hidden; z-index: 2; } .ot-btn-primary::before { position: absolute; content: ""; top: 0; left: -100%; width: 100%; height: 100%; background: var(--ot-theme-color2); z-index: -1; transition: all 0.3s ease-in-out; } .ot-btn-primary:hover { color: var(--ot-title-color); } .ot-btn-primary:hover::before { left: 0; } .ot-btn-primary:hover .yellow-btn { color: var(--ot-title-color); } .ot-btn-primary.black-white { color: var(--ot-white-color); background: var(--ot-title-color); } .ot-btn-primary.black-white::before { background: var(--ot-white-color); } .ot-btn-primary.black-white:hover { color: var(--ot-title-color); } .ot-btn-primary.green-black { color: var(--ot-white-color); background: var(--ot-theme-color); } .ot-btn-primary.green-black::before { background: var(--ot-title-color); } .ot-btn-primary.yellow-btn { color: var(--ot-title-color); background: var(--ot-theme-color2); } .ot-btn-primary.yellow-btn::before { background: var(--ot-white-color); } .ot-btn-primary.white-yellow { color: var(--ot-title-color); background: var(--ot-white-color); } .ot-btn-primary.white-yellow::before { background: var(--ot-theme-color2); } .ot-btn-primary.white-green { color: var(--ot-theme-color); background: var(--ot-white-color); } .ot-btn-primary.white-green::before { background: var(--ot-title-color); } .ot-btn-primary.white-green:hover { color: var(--ot-white-color); } .ot-btn-primary.yellow-black { color: var(--ot-title-color); background: var(--ot-theme-color2); } .ot-btn-primary.yellow-black::before { background: var(--ot-title-color); } .ot-btn-primary.yellow-black:hover { color: var(--ot-white-color); } .ot-btn-primary.theme-white { color: var(--ot-white-color); background: var(--ot-theme-color); } .ot-btn-primary.theme-white::before { background: var(--ot-white-color); } .ot-btn-primary.theme-white:hover { color: var(--ot-title-color); } .ot-btn-primary.border-only { background: transparent; border: 1px solid var(--ot-white-color); } .ot-btn-primary.border-only:hover { background: var(--ot-white-color); color: var(--ot-title-color); border: 1px solid var(--ot-theme-color2); } .ot-btn-arrow-primary { font-size: 16px; font-weight: 700; text-transform: uppercase; display: inline-flex; align-items: center; gap: 14px; color: var(--ot-theme-color); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-btn-arrow-primary > .arrow-icon { position: relative; width: 40px; height: 40px; line-height: 45px; text-align: center; font-size: 20px; color: var(--ot-white-color); background: var(--ot-theme-color); border-radius: 1000px; display: inline-block; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-btn-arrow-primary > .arrow-icon:hover { color: var(--ot-title-color); background: var(--ot-theme-color2); } .ot-btn-arrow-primary > .arrow-icon:hover::before { border-color: var(--ot-theme-color2); } .ot-btn-arrow-primary > .arrow-icon::before { position: absolute; width: 46px; height: 46px; top: -3px; left: -3px; content: ""; border: 1.5px dashed var(--ot-theme-color); border-radius: 1000px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-btn-arrow-primary:hover { color: var(--ot-white-color); } .ot-btn-arrow-primary:hover .arrow-icon::before { border-color: var(--ot-white-color); animation: rotate 5s linear infinite; } .ot-btn-group { display: flex; width: fit-content; } .ot-btn-group .ot-btn-primary { padding: 9px 34.5px; text-transform: capitalize; } .ot-btn-group > :nth-child(1) { transform: scale3d(0.5, 0.5, 1); margin-inline-end: -52px; } .ot-btn-group:hover > :nth-child(1) { transform: scale3d(1, 1, 1); margin-inline-end: 0; } .ot-btn-group:hover > :nth-child(1) { background: var(--ot-theme-color2); color: var(--ot-title-color); } .ot-btn-group:hover > :nth-child(2) { background: var(--ot-theme-color2); color: var(--ot-title-color); } .ot-btn-group:hover > :nth-child(3) { background: var(--ot-theme-color2); color: var(--ot-title-color); transform: scale3d(0.5, 0.5, 1); margin-inline-start: -52px; } .ot-btn-circle { width: 44px; height: 44px; line-height: 39px; text-align: center; border-radius: 1000px; display: inline-block; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; background-color: var(--ot-theme-color); color: var(--ot-white-color); } .ot-btn-sec-arrow { position: relative; font-size: 20px; font-weight: 900; width: 60px; height: 60px; line-height: 60px; text-align: center; background: var(--ot-theme-color); border-radius: 1000px; display: inline-block; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; color: var(--ot-white-color); z-index: 2; } .ot-btn-sec-arrow::before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; visibility: hidden; background: var(--ot-theme-color2); z-index: -1; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; transform: scale(0); border-radius: 100%; } .ot-btn-sec-arrow:hover { color: var(--ot-title-color); background: var(--ot-theme-color2); } .ot-btn-sec-arrow:hover::before { opacity: 1; visibility: visible; transform: scale(1); } .ot-btn-sec-arrow.black-btn { background: var(--ot-title-color); color: var(--ot-white-color); } .ot-btn-sec-arrow.black-btn:hover { color: var(--ot-title-color); background: var(--ot-theme-color2); } .ot-btn-basket { position: relative; background: var(--ot-theme-color); width: 60px; height: 60px; border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; } .ot-btn-basket i { -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-btn-basket:hover { background: var(--ot-theme-color2); } .ot-btn-basket:hover i { color: var(--ot-smoke-color2); } .ot-btn-basket i { font-size: 24px; color: var(--ot-white-color); } .ot-btn-basket .badge { position: absolute; top: -5px; right: 0px; padding: 6px; display: flex; font-size: 12px; font-weight: bold; align-items: center; border-radius: 1000%; justify-content: center; color: var(--ot-theme-color2); background: var(--ot-smoke-color2); } .ot-line-style { position: relative; height: 39px; width: 1px; background: rgba(255, 255, 255, 0.2); } .ot-line-style::before { position: absolute; content: ""; top: 50%; right: 4px; width: 1px; height: 20px; transform: translateY(-50%); background: rgba(255, 255, 255, 0.2); transition: all 0.3s ease-in-out; } /*----------------------------------------*/ /* 2.3 Animation /*----------------------------------------*/ @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes rotate2 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes swing { 0% { -webkit-transform: rotate(6deg); -moz-transform: rotate(6deg); -ms-transform: rotate(6deg); -o-transform: rotate(6deg); transform: rotate(6deg); } 100% { -webkit-transform: rotate(-6deg); -moz-transform: rotate(-6deg); -ms-transform: rotate(-6deg); -o-transform: rotate(-6deg); transform: rotate(-6deg); } } @keyframes headerSlideDown { 0% { margin-top: -150px; } 100% { margin-top: 0; } } .spin { animation: spin 10s linear infinite; } @keyframes spin { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } @keyframes textRotation { to { transform: rotate(360deg); } } @keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } /*img-animation**********************/ .ot-anim-right { animation: img-anim-right 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0.4s; opacity: 0; } @keyframes img-anim-right { 0% { transform: translateX(5%); clip-path: inset(0 0 0 100%); opacity: 0; } 100% { transform: translateX(0); clip-path: inset(0 0 0 0); opacity: 1; } } .ot-anim-left { animation: img-anim-left 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0.4s; opacity: 0; } @keyframes img-anim-left { 0% { transform: translateX(-5%); clip-path: inset(0 100% 0 0); opacity: 0; } 100% { transform: translateX(0); clip-path: inset(0 0 0 0); opacity: 1; } } .ot-anim-top { animation: img-anim-top 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1); opacity: 0; } @keyframes img-anim-top { 0% { transform: translateY(-5%); clip-path: inset(0 0 100% 0); opacity: 0; } 100% { transform: translateY(0); clip-path: inset(0 0 0 0); opacity: 1; } } .ot-anim-bottom { animation: img-anim-bottom 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1); opacity: 0; } @keyframes img-anim-bottom { 0% { transform: translateY(5%); /* start from bottom */ clip-path: inset(100% 0 0 0); /* reveal from bottom */ opacity: 0; } 100% { transform: translateY(0); clip-path: inset(0 0 0 0); opacity: 1; } } @keyframes jumpTwo { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40% { -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes animation-star { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes dash { to { stroke-dashoffset: 0px; stroke-dasharray: 3000; } } @keyframes shine { 100% { left: 125%; } } @keyframes borderanimate2 { 0% { transform: translate(-50%, -50%) scale(0.8); } 60% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; } } @keyframes moving { 0% { transform: translatey(0px); } 50% { transform: translatey(-20px); } 100% { transform: translatey(0px); } } @keyframes moving2 { 0% { transform: translatey(0px); } 20% { transform: translateX(-50px); } 50% { transform: translatey(-40px); } 100% { transform: translatey(0px); } } @keyframes ottranslateX { 0% { -webkit-transform: translateX(-30px); -moz-transform: translateX(-30px); -ms-transform: translateX(-30px); -o-transform: translateX(-30px); transform: translateX(-30px); } 100% { -webkit-transform: translatXY(20px); -moz-transform: translateX(20px); -ms-transform: translateX(20px); -o-transform: translateX(20px); transform: translateX(20px); } } @keyframes ot-arrow { 49% { transform: translateX(30%); } 50% { opacity: 0; transform: translateX(-30%); } 51% { opacity: 1; } } @keyframes scroll { 0% { -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); } 100% { -webkit-transform: translateX(8px); -moz-transform: translateX(8px); -ms-transform: translateX(8px); -o-transform: translateX(8px); transform: translateX(8px); } } @keyframes scroll1 { 0% { top: 0px; } 100% { top: 100%; } } @keyframes dashFlow { 0% { background-position: 0 0; } 100% { background-position: 0 20px; } } @keyframes bounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(8px); } } @keyframes move { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } } @keyframes slider-left { 0% { transform: translateX(0%); } 100% { transform: translateX(-100%); } } @keyframes animateEarth { 0% { background-position: 0 0; } 100% { background-position: 1400px 0; } } .fadein, .scalein, .slidetopleft, .slidebottomright, .slideinleft, .slideinright, .slideindown, .slideinup, .rollinleft, .rollinright { opacity: 0; animation-fill-mode: forwards; animation-iteration-count: 1; animation-duration: 1.3s; animation-delay: 0.3s; animation-name: var(--animation-name); } .swiper-slide-active .fadein { --animation-name: fadein; } .swiper-slide-active .scalein { --animation-name: scalein; } .swiper-slide-active .slidetopleft { --animation-name: slidetopleft; } .swiper-slide-active .slidebottomright { --animation-name: slidebottomright; } .swiper-slide-active .slideinleft { --animation-name: slideinleft; } .swiper-slide-active .slideinright { --animation-name: slideinright; } .swiper-slide-active .slideinup { --animation-name: slideinup; } .swiper-slide-active .slideindown { --animation-name: slideindown; } .swiper-slide-active .rollinleft { --animation-name: rollinleft; } .swiper-slide-active .rollinright { --animation-name: rollinright; } @keyframes fadein { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes slideinup { 0% { opacity: 0; transform: translateY(100px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes slideinright { 0% { opacity: 0; transform: translateX(180px); } 100% { opacity: 1; transform: translateX(0); } } @keyframes slideindown { 0% { opacity: 0; transform: translateY(-100px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes slideinleft { 0% { opacity: 0; transform: translateX(-100px); } 100% { opacity: 1; transform: translateX(0); } } @keyframes slidebottomright { 0% { opacity: 0; transform: translateX(120px) translateY(120px); } 100% { opacity: 1; transform: translateX(0) translateY(0); } } @keyframes slidetopleft { 0% { opacity: 0; transform: translateX(-100px) translateY(-100px); } 100% { opacity: 1; transform: translateX(0) translateY(0); } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } .zoomIn { animation-name: zoomIn; } @keyframes zoomIn { 0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } /*----------------------------------------*/ /* 2.4 Preloader /*----------------------------------------*/ .preloader { position: fixed; top: 0; left: 0; width: 0; height: 100%; width: 100%; text-align: center; z-index: 9999999; -webkit-transition: 0.9s; transition: 0.9s; } .preloader .loader { position: absolute; width: 80px; height: 80px; border-radius: 50%; display: inline-block; left: 0; right: 0; margin: 0 auto; top: 45%; -webkit-transform: translateY(-45%); transform: translateY(-45%); -webkit-transition: 0.5s; transition: 0.5s; } .preloader .loader .loader-outter { position: absolute; border: 4px solid var(--ot-theme-color2); border-left-color: transparent; border-bottom: 0; width: 100%; height: 100%; border-radius: 50%; -webkit-animation: loader-outter 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite; animation: loader-outter 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite; } .preloader .loader .loader-inner { position: absolute; border: 4px solid var(--ot-theme-color2); border-radius: 50%; width: 60px; height: 60px; left: calc(40% - 21px); top: calc(40% - 21px); border-right: 0; border-top-color: transparent; -webkit-animation: loader-inner 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite; animation: loader-inner 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite; } .preloader .loader .indicator { position: absolute; right: 0; left: 0; top: 50%; -webkit-transform: translateY(-50%) scale(1.5); transform: translateY(-50%) scale(1.5); } .preloader .loader .indicator svg polyline { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .preloader .loader .indicator svg polyline#back { stroke: var(--ot-theme-color2); } .preloader .loader .indicator svg polyline#front { stroke: var(--ot-title-color); stroke-dasharray: 12, 36; stroke-dashoffset: 48; -webkit-animation: dash 1s linear infinite; animation: dash 1s linear infinite; } .preloader::before, .preloader::after { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 60%; z-index: -1; background: var(--ot-title-color); -webkit-transition: 0.9s; transition: 0.9s; } .preloader::after { left: auto; right: 0; } .preloader.preloader-deactivate { visibility: hidden; } .preloader.preloader-deactivate::after, .preloader.preloader-deactivate::before { width: 0; } .preloader.preloader-deactivate .loader { opacity: 0; visibility: hidden; } @-webkit-keyframes loader-outter { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes loader-outter { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes loader-inner { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } } @keyframes loader-inner { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } } @-webkit-keyframes dash { 62.5% { opacity: 0; } to { stroke-dashoffset: 0; } } @keyframes dash { 62.5% { opacity: 0; } to { stroke-dashoffset: 0; } } /*----------------------------------------*/ /* 2.5 Background /*----------------------------------------*/ .theme-bg { background-color: var(--ot-theme-color); } .grey-bg { background-color: var(--ot-gray-color); } .white-bg { background-color: var(--ot-white-color); } .theme-black { background-color: var(--ot-title-color); } .black-bg { background-color: var(--ot-black-color); } .dark-bg { background-color: var(--ot-dark-color); } .smoke-bg { background-color: var(--ot-smoke-color); } .smoke-bg2 { background-color: var(--ot-smoke-color2); } .gradient-bg { background-size: cover; background-repeat: no-repeat; background: linear-gradient(180deg, #171b23 0%, #141820 100%); } .ecommerce-bg1 { background-color: var(--ot-ecommerce-bg1); } /*----------------------------------------*/ /* 2.6 Nice Select /*----------------------------------------*/ .nice-select { -webkit-tap-highlight-color: transparent; border-radius: 0; background: none; box-sizing: border-box; border: 1px solid var(--ot-border-2); clear: both; cursor: pointer; display: block; float: left; font-family: inherit; font-size: 14px; font-weight: normal; height: 50px; line-height: 50px; outline: none; padding-left: 19px; padding-right: 19px; position: relative; text-align: left !important; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; white-space: nowrap; width: 100%; } .nice-select:hover { border-color: var(--ot-border-2); } .nice-select:active, .nice-select.open, .nice-select:focus { border-color: #999; border: 1px solid var(--ot-theme-color); } .nice-select.open .list { opacity: 1; pointer-events: auto; -webkit-transform: scale(1) translateY(0); -ms-transform: scale(1) translateY(0); transform: scale(1) translateY(0); } .nice-select.disabled { border-color: #ededed; color: #999; pointer-events: none; } .nice-select.disabled::after { border-color: #cccccc; } .nice-select.wide { width: 100%; } .nice-select.wide .list { left: 0 !important; right: 0 !important; } .nice-select.right { float: right; } .nice-select.right .list { left: auto; right: 0; } .nice-select.small { font-size: 12px; height: 36px; line-height: 34px; } .nice-select.small::after { height: 4px; width: 4px; } .nice-select.small .option { line-height: 34px; min-height: 34px; } .nice-select .list { width: 100%; border-radius: 5px; color: var(--ot-text-body); background-color: var(--ot-white-color); box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11); box-sizing: border-box; margin-top: 4px; opacity: 0; overflow: hidden; padding: 10px 0; pointer-events: none; position: absolute; top: 100%; right: 0; -webkit-transform-origin: 50% 0; -ms-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform: scale(0.75) translateY(-21px); -ms-transform: scale(0.75) translateY(-21px); transform: scale(0.75) translateY(-21px); -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out; transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out; z-index: 9; } .nice-select .option { cursor: pointer; font-weight: 400; line-height: 26px; list-style: none; min-height: 26px; outline: none; padding-left: 18px; padding-right: 29px; text-align: left; color: var(--ot-text-body); -webkit-transition: all 0.2s; transition: all 0.2s; } .nice-select .option:hover { color: var(--ot-white-color); background-color: var(--ot-theme-color); } .nice-select .option.selected { font-weight: bold; } .nice-select .option.disabled { background-color: transparent; color: #999; cursor: default; } .nice-select-icon { position: absolute; right: 15px; top: 13px; } .no-csspointerevents .nice-select .list { display: none; } .no-csspointerevents .nice-select.open .list { display: block; } /*----------------------------------------*/ /* 2.178 Range Slider css start /*----------------------------------------*/ .ui-button-icon-only, .ui-controlgroup-vertical .ui-controlgroup-item { box-sizing: border-box; } .ui-checkboxradio-disabled, .ui-state-disabled { pointer-events: none; } .ui-datepicker .ui-icon, .ui-icon { text-indent: -99999px; background-repeat: no-repeat; } .ui-helper-reset, .ui-menu { outline: 0; list-style: none; } .ui-helper-hidden, .ui-resizable-autohide .ui-resizable-handle, .ui-resizable-disabled .ui-resizable-handle { display: none; } .ui-helper-hidden-accessible { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .ui-helper-reset { margin: 0; padding: 0; border: 0; line-height: 1.3; text-decoration: none; font-size: 100%; } .ui-helper-clearfix:after, .ui-helper-clearfix:before { content: ""; display: table; border-collapse: collapse; } .ui-helper-clearfix:after { clear: both; } .ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter: Alpha(Opacity=0); } .ui-front { z-index: 100; } .ui-state-disabled { cursor: default !important; } .ui-icon { display: inline-block; vertical-align: middle; margin-top: -0.25em; position: relative; overflow: hidden; } .ui-widget-icon-block { left: 50%; margin-left: -8px; display: block; } .ui-widget-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; } .ui-accordion .ui-accordion-header { display: block; cursor: pointer; position: relative; margin: 2px 0 0; padding: 0.5em 0.5em 0.5em 0.7em; font-size: 100%; } .ui-autocomplete, .ui-menu .ui-menu { position: absolute; } .ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; overflow: auto; } .ui-autocomplete { top: 0; left: 0; cursor: default; } .ui-menu { padding: 0; margin: 0; display: block; } .ui-button, .ui-controlgroup { display: inline-block; vertical-align: middle; } .ui-button, .ui-menu-icons, .ui-resizable { position: relative; } .ui-menu .ui-menu-item { margin: 0; cursor: pointer; list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"); } .ui-menu .ui-menu-item-wrapper { position: relative; padding: 3px 1em 3px 0.4em; } .ui-menu .ui-menu-divider { margin: 5px 0; height: 0; font-size: 0; line-height: 0; border-width: 1px 0 0; } .ui-menu .ui-state-active, .ui-menu .ui-state-focus { margin: -1px; } .ui-menu-icons .ui-menu-item-wrapper { padding-left: 2em; } .ui-button, .ui-controlgroup .ui-controlgroup-label { padding: 0.4em 1em; } .ui-menu .ui-icon { position: absolute; top: 0; bottom: 0; left: 0.2em; margin: auto 0; } .ui-menu .ui-menu-icon { left: auto; right: 0; } .ui-button { line-height: normal; margin-right: 0.1em; cursor: pointer; text-align: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; overflow: visible; } .ui-button, .ui-button:active, .ui-button:hover, .ui-button:link, .ui-button:visited { text-decoration: none; } .ui-button-icon-only { width: 2em; text-indent: -9999px; white-space: nowrap; } input.ui-button.ui-button-icon-only { text-indent: 0; } .ui-button-icon-only .ui-icon { position: absolute; top: 50%; left: 50%; margin-top: -8px; margin-left: -8px; } .ui-button.ui-icon-notext .ui-icon { padding: 0; width: 2.1em; height: 2.1em; text-indent: -9999px; white-space: nowrap; } input.ui-button.ui-icon-notext .ui-icon { width: auto; height: auto; text-indent: 0; white-space: normal; padding: 0.4em 1em; } button.ui-button::-moz-focus-inner, input.ui-button::-moz-focus-inner { border: 0; padding: 0; } .ui-controlgroup > .ui-controlgroup-item { float: left; margin-left: 0; margin-right: 0; } .ui-controlgroup > .ui-controlgroup-item.ui-visual-focus, .ui-controlgroup > .ui-controlgroup-item:focus { z-index: 9999; } .ui-controlgroup-vertical > .ui-controlgroup-item { display: block; float: none; width: 100%; margin-top: 0; margin-bottom: 0; text-align: left; } .ui-controlgroup .ui-controlgroup-label span { font-size: 80%; } .ui-controlgroup-horizontal .ui-controlgroup-label + .ui-controlgroup-item { border-left: none; } .ui-controlgroup-vertical .ui-controlgroup-label + .ui-controlgroup-item { border-top: none; } .ui-controlgroup-horizontal .ui-controlgroup-label.ui-widget-content { border-right: none; } .ui-controlgroup-vertical .ui-controlgroup-label.ui-widget-content { border-bottom: none; } .ui-controlgroup-vertical .ui-spinner-input { width: 75%; width: calc(100% - 2.4em); } .ui-controlgroup-vertical .ui-spinner .ui-spinner-up { border-top-style: solid; } .ui-checkboxradio-label .ui-icon-background { box-shadow: inset 1px 1px 1px #ccc; border-radius: 0.12em; border: none; } .ui-checkboxradio-radio-label .ui-icon-background { width: 16px; height: 16px; border-radius: 1em; overflow: visible; border: none; } .ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon, .ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon { background-image: none; width: 8px; height: 8px; border-width: 4px; border-style: solid; } .ui-datepicker { width: 17em; padding: 0.2em 0.2em 0; display: none; } .ui-datepicker .ui-datepicker-header { position: relative; padding: 0.2em 0; } .ui-datepicker .ui-datepicker-next, .ui-datepicker .ui-datepicker-prev { position: absolute; top: 2px; width: 1.8em; height: 1.8em; } .ui-datepicker .ui-datepicker-next-hover, .ui-datepicker .ui-datepicker-prev-hover { top: 1px; } .ui-datepicker .ui-datepicker-prev { left: 2px; } .ui-datepicker .ui-datepicker-next { right: 2px; } .ui-datepicker .ui-datepicker-prev-hover { left: 1px; } .ui-datepicker .ui-datepicker-next-hover { right: 1px; } .ui-datepicker .ui-datepicker-next span, .ui-datepicker .ui-datepicker-prev span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px; } .ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; } .ui-datepicker .ui-datepicker-title select { font-size: 1em; margin: 1px 0; } .ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year { width: 45%; } .ui-datepicker table { width: 100%; font-size: 0.9em; border-collapse: collapse; margin: 0 0 0.4em; } .ui-datepicker th { padding: 0.7em 0.3em; text-align: center; font-weight: 700; border: 0; } .ui-datepicker td { border: 0; padding: 1px; } .ui-datepicker td a, .ui-datepicker td span { display: block; padding: 0.2em; text-align: right; text-decoration: none; } .ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: 0.7em 0 0; padding: 0 0.2em; border-left: 0; border-right: 0; border-bottom: 0; } .ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: 0.5em 0.2em 0.4em; cursor: pointer; padding: 0.2em 0.6em 0.3em; width: auto; overflow: visible; } .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current, .ui-datepicker-multi .ui-datepicker-group, .ui-datepicker-rtl .ui-datepicker-buttonpane button { float: left; } .ui-datepicker.ui-datepicker-multi { width: auto; } .ui-datepicker-multi .ui-datepicker-group table { width: 95%; margin: 0 auto 0.4em; } .ui-datepicker-multi-2 .ui-datepicker-group { width: 50%; } .ui-datepicker-multi-3 .ui-datepicker-group { width: 33.3%; } .ui-datepicker-multi-4 .ui-datepicker-group { width: 25%; } .ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header, .ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width: 0; } .ui-datepicker-multi .ui-datepicker-buttonpane { clear: left; } .ui-datepicker-row-break { clear: both; width: 100%; font-size: 0; } .ui-datepicker-rtl { direction: rtl; } .ui-datepicker-rtl .ui-datepicker-prev { right: 2px; left: auto; } .ui-datepicker-rtl .ui-datepicker-next { left: 2px; right: auto; } .ui-datepicker-rtl .ui-datepicker-prev:hover { right: 1px; left: auto; } .ui-datepicker-rtl .ui-datepicker-next:hover { left: 1px; right: auto; } .ui-datepicker-rtl .ui-datepicker-buttonpane { clear: right; } .ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current, .ui-datepicker-rtl .ui-datepicker-group, .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; } .ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header, .ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header { border-right-width: 0; border-left-width: 1px; } .ui-datepicker .ui-icon { display: block; overflow: hidden; left: 0.5em; top: 0.3em; } .ui-dialog { position: absolute; top: 0; left: 0; padding: 0.2em; outline: 0; } .ui-dialog .ui-dialog-titlebar { padding: 0.4em 1em; position: relative; } .ui-dialog .ui-dialog-title { float: left; margin: 0.1em 0; white-space: nowrap; width: 90%; overflow: hidden; text-overflow: ellipsis; } .ui-dialog .ui-dialog-titlebar-close { position: absolute; right: 0.3em; top: 50%; width: 20px; margin: -10px 0 0; padding: 1px; height: 20px; } .ui-dialog .ui-dialog-content { position: relative; border: 0; padding: 0.5em 1em; background: 0 0; overflow: auto; } .ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0; background-image: none; margin-top: 0.5em; padding: 0.3em 1em 0.5em 0.4em; } .ui-dialog .ui-dialog-buttonpane button { margin: 0.5em 0.4em 0.5em 0; cursor: pointer; } .ui-dialog .ui-resizable-n { height: 2px; top: 0; } .ui-dialog .ui-resizable-e { width: 2px; right: 0; } .ui-dialog .ui-resizable-s { height: 2px; bottom: 0; } .ui-dialog .ui-resizable-w { width: 2px; left: 0; } .ui-dialog .ui-resizable-ne, .ui-dialog .ui-resizable-nw, .ui-dialog .ui-resizable-se, .ui-dialog .ui-resizable-sw { width: 7px; height: 7px; } .ui-dialog .ui-resizable-se { right: 0; bottom: 0; } .ui-dialog .ui-resizable-sw { left: 0; bottom: 0; } .ui-dialog .ui-resizable-ne { right: 0; top: 0; } .ui-dialog .ui-resizable-nw { left: 0; top: 0; } .ui-draggable .ui-dialog-titlebar { cursor: move; } .ui-draggable-handle, .ui-selectable, .ui-sortable-handle { -ms-touch-action: none; touch-action: none; } .ui-resizable-handle { position: absolute; font-size: 0.1px; display: block; -ms-touch-action: none; touch-action: none; } .ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; } .ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; } .ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; } .ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; } .ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; } .ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; } .ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; } .ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px; } .ui-progressbar { height: 2em; text-align: left; overflow: hidden; } .ui-progressbar .ui-progressbar-value { margin: -1px; height: 100%; } .ui-progressbar .ui-progressbar-overlay { background: url("data:image/gif;base64,R0lGODlhKAAoAIABAAAAAP///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJAQABACwAAAAAKAAoAAACkYwNqXrdC52DS06a7MFZI+4FHBCKoDeWKXqymPqGqxvJrXZbMx7Ttc+w9XgU2FB3lOyQRWET2IFGiU9m1frDVpxZZc6bfHwv4c1YXP6k1Vdy292Fb6UkuvFtXpvWSzA+HycXJHUXiGYIiMg2R6W459gnWGfHNdjIqDWVqemH2ekpObkpOlppWUqZiqr6edqqWQAAIfkECQEAAQAsAAAAACgAKAAAApSMgZnGfaqcg1E2uuzDmmHUBR8Qil95hiPKqWn3aqtLsS18y7G1SzNeowWBENtQd+T1JktP05nzPTdJZlR6vUxNWWjV+vUWhWNkWFwxl9VpZRedYcflIOLafaa28XdsH/ynlcc1uPVDZxQIR0K25+cICCmoqCe5mGhZOfeYSUh5yJcJyrkZWWpaR8doJ2o4NYq62lAAACH5BAkBAAEALAAAAAAoACgAAAKVDI4Yy22ZnINRNqosw0Bv7i1gyHUkFj7oSaWlu3ovC8GxNso5fluz3qLVhBVeT/Lz7ZTHyxL5dDalQWPVOsQWtRnuwXaFTj9jVVh8pma9JjZ4zYSj5ZOyma7uuolffh+IR5aW97cHuBUXKGKXlKjn+DiHWMcYJah4N0lYCMlJOXipGRr5qdgoSTrqWSq6WFl2ypoaUAAAIfkECQEAAQAsAAAAACgAKAAAApaEb6HLgd/iO7FNWtcFWe+ufODGjRfoiJ2akShbueb0wtI50zm02pbvwfWEMWBQ1zKGlLIhskiEPm9R6vRXxV4ZzWT2yHOGpWMyorblKlNp8HmHEb/lCXjcW7bmtXP8Xt229OVWR1fod2eWqNfHuMjXCPkIGNileOiImVmCOEmoSfn3yXlJWmoHGhqp6ilYuWYpmTqKUgAAIfkECQEAAQAsAAAAACgAKAAAApiEH6kb58biQ3FNWtMFWW3eNVcojuFGfqnZqSebuS06w5V80/X02pKe8zFwP6EFWOT1lDFk8rGERh1TTNOocQ61Hm4Xm2VexUHpzjymViHrFbiELsefVrn6XKfnt2Q9G/+Xdie499XHd2g4h7ioOGhXGJboGAnXSBnoBwKYyfioubZJ2Hn0RuRZaflZOil56Zp6iioKSXpUAAAh+QQJAQABACwAAAAAKAAoAAACkoQRqRvnxuI7kU1a1UU5bd5tnSeOZXhmn5lWK3qNTWvRdQxP8qvaC+/yaYQzXO7BMvaUEmJRd3TsiMAgswmNYrSgZdYrTX6tSHGZO73ezuAw2uxuQ+BbeZfMxsexY35+/Qe4J1inV0g4x3WHuMhIl2jXOKT2Q+VU5fgoSUI52VfZyfkJGkha6jmY+aaYdirq+lQAACH5BAkBAAEALAAAAAAoACgAAAKWBIKpYe0L3YNKToqswUlvznigd4wiR4KhZrKt9Upqip61i9E3vMvxRdHlbEFiEXfk9YARYxOZZD6VQ2pUunBmtRXo1Lf8hMVVcNl8JafV38aM2/Fu5V16Bn63r6xt97j09+MXSFi4BniGFae3hzbH9+hYBzkpuUh5aZmHuanZOZgIuvbGiNeomCnaxxap2upaCZsq+1kAACH5BAkBAAEALAAAAAAoACgAAAKXjI8By5zf4kOxTVrXNVlv1X0d8IGZGKLnNpYtm8Lr9cqVeuOSvfOW79D9aDHizNhDJidFZhNydEahOaDH6nomtJjp1tutKoNWkvA6JqfRVLHU/QUfau9l2x7G54d1fl995xcIGAdXqMfBNadoYrhH+Mg2KBlpVpbluCiXmMnZ2Sh4GBqJ+ckIOqqJ6LmKSllZmsoq6wpQAAAh+QQJAQABACwAAAAAKAAoAAAClYx/oLvoxuJDkU1a1YUZbJ59nSd2ZXhWqbRa2/gF8Gu2DY3iqs7yrq+xBYEkYvFSM8aSSObE+ZgRl1BHFZNr7pRCavZ5BW2142hY3AN/zWtsmf12p9XxxFl2lpLn1rseztfXZjdIWIf2s5dItwjYKBgo9yg5pHgzJXTEeGlZuenpyPmpGQoKOWkYmSpaSnqKileI2FAAACH5BAkBAAEALAAAAAAoACgAAAKVjB+gu+jG4kORTVrVhRlsnn2dJ3ZleFaptFrb+CXmO9OozeL5VfP99HvAWhpiUdcwkpBH3825AwYdU8xTqlLGhtCosArKMpvfa1mMRae9VvWZfeB2XfPkeLmm18lUcBj+p5dnN8jXZ3YIGEhYuOUn45aoCDkp16hl5IjYJvjWKcnoGQpqyPlpOhr3aElaqrq56Bq7VAAAOw=="); height: 100%; opacity: 0.25; } .ui-progressbar-indeterminate .ui-progressbar-value { background-image: none; } .ui-selectable-helper { position: absolute; z-index: 100; border: 1px dotted #000; } .ui-selectmenu-menu { padding: 0; margin: 0; position: absolute; top: 0; left: 0; display: none; } .ui-selectmenu-menu .ui-menu { overflow: auto; overflow-x: hidden; padding-bottom: 1px; } .ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup { font-size: 1em; font-weight: 700; line-height: 1.5; padding: 2px 0.4em; margin: 0.5em 0 0; height: auto; border: 0; } .ui-selectmenu-open { display: block; } .ui-selectmenu-text { display: block; margin-right: 20px; overflow: hidden; text-overflow: ellipsis; } .ui-selectmenu-button.ui-button { text-align: left; white-space: nowrap; width: 14em; } .ui-selectmenu-icon.ui-icon { float: right; margin-top: 0; } .ui-slider { position: relative; text-align: left; } .ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; -ms-touch-action: none; touch-action: none; } .ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: 0.7em; display: block; border: 0; background-position: 0 0; } .ui-slider.ui-state-disabled .ui-slider-handle, .ui-slider.ui-state-disabled .ui-slider-range { filter: inherit; } .ui-slider-horizontal { height: 0.8em; } .ui-slider-horizontal .ui-slider-handle { top: -0.3em; margin-left: -0.6em; } .ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; } .ui-slider-horizontal .ui-slider-range-min { left: 0; } .ui-slider-horizontal .ui-slider-range-max { right: 0; } .ui-slider-vertical { width: 0.8em; height: 100px; } .ui-slider-vertical .ui-slider-handle { left: -0.3em; margin-left: 0; margin-bottom: -0.6em; } .ui-slider-vertical .ui-slider-range { left: 0; width: 100%; } .ui-slider-vertical .ui-slider-range-min, .ui-spinner-down { bottom: 0; } .ui-slider-vertical .ui-slider-range-max, .ui-spinner-up { top: 0; } .ui-spinner { position: relative; display: inline-block; overflow: hidden; padding: 0; vertical-align: middle; } .ui-spinner-input { border: none; background: 0 0; color: inherit; padding: 0.222em 0; margin: 0.2em 2em 0.2em 0.4em; vertical-align: middle; } .ui-spinner-button { width: 1.6em; height: 50%; font-size: 0.5em; padding: 0; margin: 0; text-align: center; position: absolute; cursor: default; display: block; overflow: hidden; right: 0; } .ui-spinner a.ui-spinner-button { border-top-style: none; border-bottom-style: none; border-right-style: none; } .ui-tabs { position: relative; padding: 0.2em; } .ui-tabs .ui-tabs-nav { margin: 0; padding: 0.2em 0.2em 0; } .ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 0; margin: 1px 0.2em 0 0; border-bottom-width: 0; padding: 0; white-space: nowrap; } .ui-tabs .ui-tabs-nav .ui-tabs-anchor { float: left; padding: 0.5em 1em; text-decoration: none; } .ui-tabs .ui-tabs-nav li.ui-tabs-active { margin-bottom: -1px; padding-bottom: 1px; } .ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor, .ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor, .ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor { cursor: text; } .ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor { cursor: pointer; } .ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: 0 0; } .ui-tooltip { padding: 8px; position: absolute; z-index: 9999; max-width: 300px; } body .ui-tooltip { border-width: 2px; } .ui-widget, .ui-widget button, .ui-widget input, .ui-widget select, .ui-widget textarea { font-family: Arial, Helvetica, sans-serif; font-size: 1em; } .ui-widget .ui-widget { font-size: 1em; } .ui-widget.ui-widget-content { border: 1px solid #c5c5c5; } .ui-widget-content { border: 1px solid #ddd; background: #fff; color: #333; } .ui-widget-content a, .ui-widget-header a { color: #333; } .ui-widget-header { border: 1px solid #ddd; background: #e9e9e9; color: #333; font-weight: 700; } .ui-button, .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, html .ui-button.ui-state-disabled:active, html .ui-button.ui-state-disabled:hover { border: 1px solid #c5c5c5; background: #f6f6f6; font-weight: 400; color: #454545; } .ui-button, .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited, a.ui-button, a:link.ui-button, a:visited.ui-button { color: #454545; text-decoration: none; } .ui-button:focus, .ui-button:hover, .ui-state-focus, .ui-state-hover, .ui-widget-content .ui-state-focus, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-focus, .ui-widget-header .ui-state-hover { border: 1px solid #ccc; background: #ededed; font-weight: 400; color: #2b2b2b; } .ui-state-focus a, .ui-state-focus a:hover, .ui-state-focus a:link, .ui-state-focus a:visited, .ui-state-hover a, .ui-state-hover a:hover, .ui-state-hover a:link, .ui-state-hover a:visited, a.ui-button:focus, a.ui-button:hover { color: #2b2b2b; text-decoration: none; } .ui-visual-focus { box-shadow: 0 0 3px 1px #5e9ed6; } .ui-button.ui-state-active:hover, .ui-button:active, .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active { border: 1px solid #003eff; background: #007fff; font-weight: 400; color: #fff; } .ui-icon-background, .ui-state-active .ui-icon-background { border: #003eff; background-color: #fff; } .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #fff; text-decoration: none; } .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight { border: 1px solid #dad55e; background: #fffa90; color: #777620; } .ui-state-checked { border: 1px solid #dad55e; background: #fffa90; } .ui-state-highlight a, .ui-widget-content .ui-state-highlight a, .ui-widget-header .ui-state-highlight a { color: #777620; } .ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error { border: 1px solid #f1a899; background: #fddfdf; color: #5f3f3f; } .ui-state-error a, .ui-state-error-text, .ui-widget-content .ui-state-error a, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error a, .ui-widget-header .ui-state-error-text { color: #5f3f3f; } .ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary { font-weight: 700; } .ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary { opacity: 0.7; filter: Alpha(Opacity=70); font-weight: 400; } .ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity: 0.35; filter: Alpha(Opacity=35); background-image: none; } .ui-state-disabled .ui-icon { filter: Alpha(Opacity=35); } .ui-icon { width: 16px; height: 16px; } .ui-icon, .ui-widget-content .ui-icon, .ui-widget-header .ui-icon { background-image: url("images/ui-icons_444444_256x240.png"); } .ui-button:focus .ui-icon, .ui-button:hover .ui-icon, .ui-state-focus .ui-icon, .ui-state-hover .ui-icon { background-image: url("images/ui-icons_555555_256x240.png"); } .ui-button:active .ui-icon, .ui-state-active .ui-icon { background-image: url("images/ui-icons_ffffff_256x240.png"); } .ui-button .ui-state-highlight.ui-icon, .ui-state-highlight .ui-icon { background-image: url("images/ui-icons_777620_256x240.png"); } .ui-state-error .ui-icon, .ui-state-error-text .ui-icon { background-image: url("images/ui-icons_cc0000_256x240.png"); } .ui-button .ui-icon { background-image: url("images/ui-icons_777777_256x240.png"); } .ui-icon-blank { background-position: 16px 16px; } .ui-icon-caret-1-n { background-position: 0 0; } .ui-icon-caret-1-ne { background-position: -16px 0; } .ui-icon-caret-1-e { background-position: -32px 0; } .ui-icon-caret-1-se { background-position: -48px 0; } .ui-icon-caret-1-s { background-position: -65px 0; } .ui-icon-caret-1-sw { background-position: -80px 0; } .ui-icon-caret-1-w { background-position: -96px 0; } .ui-icon-caret-1-nw { background-position: -112px 0; } .ui-icon-caret-2-n-s { background-position: -128px 0; } .ui-icon-caret-2-e-w { background-position: -144px 0; } .ui-icon-triangle-1-n { background-position: 0 -16px; } .ui-icon-triangle-1-ne { background-position: -16px -16px; } .ui-icon-triangle-1-e { background-position: -32px -16px; } .ui-icon-triangle-1-se { background-position: -48px -16px; } .ui-icon-triangle-1-s { background-position: -65px -16px; } .ui-icon-triangle-1-sw { background-position: -80px -16px; } .ui-icon-triangle-1-w { background-position: -96px -16px; } .ui-icon-triangle-1-nw { background-position: -112px -16px; } .ui-icon-triangle-2-n-s { background-position: -128px -16px; } .ui-icon-triangle-2-e-w { background-position: -144px -16px; } .ui-icon-arrow-1-n { background-position: 0 -32px; } .ui-icon-arrow-1-ne { background-position: -16px -32px; } .ui-icon-arrow-1-e { background-position: -32px -32px; } .ui-icon-arrow-1-se { background-position: -48px -32px; } .ui-icon-arrow-1-s { background-position: -65px -32px; } .ui-icon-arrow-1-sw { background-position: -80px -32px; } .ui-icon-arrow-1-w { background-position: -96px -32px; } .ui-icon-arrow-1-nw { background-position: -112px -32px; } .ui-icon-arrow-2-n-s { background-position: -128px -32px; } .ui-icon-arrow-2-ne-sw { background-position: -144px -32px; } .ui-icon-arrow-2-e-w { background-position: -160px -32px; } .ui-icon-arrow-2-se-nw { background-position: -176px -32px; } .ui-icon-arrowstop-1-n { background-position: -192px -32px; } .ui-icon-arrowstop-1-e { background-position: -208px -32px; } .ui-icon-arrowstop-1-s { background-position: -224px -32px; } .ui-icon-arrowstop-1-w { background-position: -240px -32px; } .ui-icon-arrowthick-1-n { background-position: 1px -48px; } .ui-icon-arrowthick-1-ne { background-position: -16px -48px; } .ui-icon-arrowthick-1-e { background-position: -32px -48px; } .ui-icon-arrowthick-1-se { background-position: -48px -48px; } .ui-icon-arrowthick-1-s { background-position: -64px -48px; } .ui-icon-arrowthick-1-sw { background-position: -80px -48px; } .ui-icon-arrowthick-1-w { background-position: -96px -48px; } .ui-icon-arrowthick-1-nw { background-position: -112px -48px; } .ui-icon-arrowthick-2-n-s { background-position: -128px -48px; } .ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; } .ui-icon-arrowthick-2-e-w { background-position: -160px -48px; } .ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; } .ui-icon-arrowthickstop-1-n { background-position: -192px -48px; } .ui-icon-arrowthickstop-1-e { background-position: -208px -48px; } .ui-icon-arrowthickstop-1-s { background-position: -224px -48px; } .ui-icon-arrowthickstop-1-w { background-position: -240px -48px; } .ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; } .ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; } .ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; } .ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; } .ui-icon-arrowreturn-1-w { background-position: -64px -64px; } .ui-icon-arrowreturn-1-n { background-position: -80px -64px; } .ui-icon-arrowreturn-1-e { background-position: -96px -64px; } .ui-icon-arrowreturn-1-s { background-position: -112px -64px; } .ui-icon-arrowrefresh-1-w { background-position: -128px -64px; } .ui-icon-arrowrefresh-1-n { background-position: -144px -64px; } .ui-icon-arrowrefresh-1-e { background-position: -160px -64px; } .ui-icon-arrowrefresh-1-s { background-position: -176px -64px; } .ui-icon-arrow-4 { background-position: 0 -80px; } .ui-icon-arrow-4-diag { background-position: -16px -80px; } .ui-icon-extlink { background-position: -32px -80px; } .ui-icon-newwin { background-position: -48px -80px; } .ui-icon-refresh { background-position: -64px -80px; } .ui-icon-shuffle { background-position: -80px -80px; } .ui-icon-transfer-e-w { background-position: -96px -80px; } .ui-icon-transferthick-e-w { background-position: -112px -80px; } .ui-icon-folder-collapsed { background-position: 0 -96px; } .ui-icon-folder-open { background-position: -16px -96px; } .ui-icon-document { background-position: -32px -96px; } .ui-icon-document-b { background-position: -48px -96px; } .ui-icon-note { background-position: -64px -96px; } .ui-icon-mail-closed { background-position: -80px -96px; } .ui-icon-mail-open { background-position: -96px -96px; } .ui-icon-suitcase { background-position: -112px -96px; } .ui-icon-comment { background-position: -128px -96px; } .ui-icon-person { background-position: -144px -96px; } .ui-icon-print { background-position: -160px -96px; } .ui-icon-trash { background-position: -176px -96px; } .ui-icon-locked { background-position: -192px -96px; } .ui-icon-unlocked { background-position: -208px -96px; } .ui-icon-bookmark { background-position: -224px -96px; } .ui-icon-tag { background-position: -240px -96px; } .ui-icon-home { background-position: 0 -112px; } .ui-icon-flag { background-position: -16px -112px; } .ui-icon-calendar { background-position: -32px -112px; } .ui-icon-cart { background-position: -48px -112px; } .ui-icon-pencil { background-position: -64px -112px; } .ui-icon-clock { background-position: -80px -112px; } .ui-icon-disk { background-position: -96px -112px; } .ui-icon-calculator { background-position: -112px -112px; } .ui-icon-zoomin { background-position: -128px -112px; } .ui-icon-zoomout { background-position: -144px -112px; } .ui-icon-search { background-position: -160px -112px; } .ui-icon-wrench { background-position: -176px -112px; } .ui-icon-gear { background-position: -192px -112px; } .ui-icon-heart { background-position: -208px -112px; } .ui-icon-star { background-position: -224px -112px; } .ui-icon-link { background-position: -240px -112px; } .ui-icon-cancel { background-position: 0 -128px; } .ui-icon-plus { background-position: -16px -128px; } .ui-icon-plusthick { background-position: -32px -128px; } .ui-icon-minus { background-position: -48px -128px; } .ui-icon-minusthick { background-position: -64px -128px; } .ui-icon-close { background-position: -80px -128px; } .ui-icon-closethick { background-position: -96px -128px; } .ui-icon-key { background-position: -112px -128px; } .ui-icon-lightbulb { background-position: -128px -128px; } .ui-icon-scissors { background-position: -144px -128px; } .ui-icon-clipboard { background-position: -160px -128px; } .ui-icon-copy { background-position: -176px -128px; } .ui-icon-contact { background-position: -192px -128px; } .ui-icon-image { background-position: -208px -128px; } .ui-icon-video { background-position: -224px -128px; } .ui-icon-script { background-position: -240px -128px; } .ui-icon-alert { background-position: 0 -144px; } .ui-icon-info { background-position: -16px -144px; } .ui-icon-notice { background-position: -32px -144px; } .ui-icon-help { background-position: -48px -144px; } .ui-icon-check { background-position: -64px -144px; } .ui-icon-bullet { background-position: -80px -144px; } .ui-icon-radio-on { background-position: -96px -144px; } .ui-icon-radio-off { background-position: -112px -144px; } .ui-icon-pin-w { background-position: -128px -144px; } .ui-icon-pin-s { background-position: -144px -144px; } .ui-icon-play { background-position: 0 -160px; } .ui-icon-pause { background-position: -16px -160px; } .ui-icon-seek-next { background-position: -32px -160px; } .ui-icon-seek-prev { background-position: -48px -160px; } .ui-icon-seek-end { background-position: -64px -160px; } .ui-icon-seek-first, .ui-icon-seek-start { background-position: -80px -160px; } .ui-icon-stop { background-position: -96px -160px; } .ui-icon-eject { background-position: -112px -160px; } .ui-icon-volume-off { background-position: -128px -160px; } .ui-icon-volume-on { background-position: -144px -160px; } .ui-icon-power { background-position: 0 -176px; } .ui-icon-signal-diag { background-position: -16px -176px; } .ui-icon-signal { background-position: -32px -176px; } .ui-icon-battery-0 { background-position: -48px -176px; } .ui-icon-battery-1 { background-position: -64px -176px; } .ui-icon-battery-2 { background-position: -80px -176px; } .ui-icon-battery-3 { background-position: -96px -176px; } .ui-icon-circle-plus { background-position: 0 -192px; } .ui-icon-circle-minus { background-position: -16px -192px; } .ui-icon-circle-close { background-position: -32px -192px; } .ui-icon-circle-triangle-e { background-position: -48px -192px; } .ui-icon-circle-triangle-s { background-position: -64px -192px; } .ui-icon-circle-triangle-w { background-position: -80px -192px; } .ui-icon-circle-triangle-n { background-position: -96px -192px; } .ui-icon-circle-arrow-e { background-position: -112px -192px; } .ui-icon-circle-arrow-s { background-position: -128px -192px; } .ui-icon-circle-arrow-w { background-position: -144px -192px; } .ui-icon-circle-arrow-n { background-position: -160px -192px; } .ui-icon-circle-zoomin { background-position: -176px -192px; } .ui-icon-circle-zoomout { background-position: -192px -192px; } .ui-icon-circle-check { background-position: -208px -192px; } .ui-icon-circlesmall-plus { background-position: 0 -208px; } .ui-icon-circlesmall-minus { background-position: -16px -208px; } .ui-icon-circlesmall-close { background-position: -32px -208px; } .ui-icon-squaresmall-plus { background-position: -48px -208px; } .ui-icon-squaresmall-minus { background-position: -64px -208px; } .ui-icon-squaresmall-close { background-position: -80px -208px; } .ui-icon-grip-dotted-vertical { background-position: 0 -224px; } .ui-icon-grip-dotted-horizontal { background-position: -16px -224px; } .ui-icon-grip-solid-vertical { background-position: -32px -224px; } .ui-icon-grip-solid-horizontal { background-position: -48px -224px; } .ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; } .ui-icon-grip-diagonal-se { background-position: -80px -224px; } .ui-corner-all, .ui-corner-left, .ui-corner-tl, .ui-corner-top { border-top-left-radius: 3px; } .ui-corner-all, .ui-corner-right, .ui-corner-top, .ui-corner-tr { border-top-right-radius: 3px; } .ui-corner-all, .ui-corner-bl, .ui-corner-bottom, .ui-corner-left { border-bottom-left-radius: 3px; } .ui-corner-all, .ui-corner-bottom, .ui-corner-br, .ui-corner-right { border-bottom-right-radius: 3px; } .ui-widget-overlay { background: #aaa; opacity: 0.3; filter: Alpha(Opacity=30); } .ui-widget-shadow { -webkit-box-shadow: 0 0 5px #666; box-shadow: 0 0 5px #666; } /*----------------------------------------*/ /* 2.8 Offcanvas /*----------------------------------------*/ .ot-offcanvas { position: fixed; background: var(--ot-white-color); width: 480px; right: 0; top: 0; height: 100%; opacity: 0; visibility: hidden; -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); -webkit-transition: 0.3s 0.3s ease-out; -moz-transition: 0.3s 0.3s ease-out; -ms-transition: 0.3s 0.3s ease-out; -o-transition: 0.3s 0.3s ease-out; transition: 0.3s 0.3s ease-out; overflow-y: scroll; overscroll-behavior-y: contain; scrollbar-width: none; z-index: 999; } @media only screen and (min-width: 576px) and (max-width: 767px) { .ot-offcanvas { width: 400px; } } @media (max-width: 575px) { .ot-offcanvas { width: 100%; } } .ot-offcanvas-header { padding: 20px 40px; background-color: var(--ot-title-color); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-offcanvas-header { padding: 10px; } } .ot-offcanvas-wrapper { padding: 0 40px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-offcanvas-wrapper { padding: 0 15px; } } .ot-offcanvas.opend { opacity: 1; visibility: visible; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .ot-offcanvas-close-toggle { font-size: 16px; width: 45px; height: 45px; line-height: 45px; text-align: center; color: var(--ot-theme-color); border: 1px solid var(--ot-theme-color); background-color: var(--ot-white-color); border-radius: 50%; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-offcanvas-close-toggle:hover { color: var(--ot-white-color); background: var(--ot-theme-color); border: 1px solid var(--ot-theme-color); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .ot-offcanvas-header { margin-bottom: 40px; } } .ot-offcanvas-title { font-weight: 600; font-size: 18px; display: block; text-transform: capitalize; color: var(--ot-black-color); border-bottom: 1px solid #ebecf5; padding-bottom: 10px; } .ot-offcanvas-info-content a:not(:last-child) { margin-bottom: 10px; display: inline-block; } .ot-offcanvas-info-icon span { font-size: 18px; width: 45px; height: 45px; line-height: 45px; text-align: center; display: inline-block; color: var(--ot-white-color); background: var(--ot-black-color); border-radius: 50%; border-radius: 100%; border: 0; box-shadow: 0 8px 34px 0 rgba(36, 44, 73, 0.15); } .ot-offcanvas-info-text span { display: block; font-weight: 600; font-size: 14px; line-height: 1.8; text-transform: uppercase; color: var(--ot-theme-color); } .ot-offcanvas-info-text span:last-child { font-size: 16px; color: var(--ot-black-color); text-transform: lowercase; } .ot-offcanvas-info-text.of-location span:last-child { text-transform: capitalize; } .ot-offcanvas-gallery { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 10px; } .ot-offcanvas-gallery a img { width: 100%; height: 100%; border-radius: 3px; } .ot-offcanvas-social a { font-size: 16px; text-align: center; display: inline-block; color: var(--ot-title-color); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-offcanvas-social a:not(:last-child) { margin-right: 15px; padding-right: 15px; border-right: 1px solid #d9d9d9; } .ot-offcanvas-social a:hover { color: var(--ot-theme-color); } .ot-offcanvas-social a:hover span { color: var(--ot-theme-color); } /*----------------------------------------*/ /* 2.13 Search /*----------------------------------------*/ .popup-search-box { position: fixed; top: 0; left: 50%; background-color: rgba(0, 0, 0, 0.95); height: 0; width: 0; overflow: hidden; z-index: 99999; opacity: 0; visibility: hidden; border-radius: 50%; transform: translateX(-50%); transition: all ease 0.4s; } .popup-search-box button.searchClose { width: 60px; height: 60px; position: absolute; top: 40px; right: 40px; border-width: 1px; border-style: solid; border-color: var(--ot-theme-color); background-color: transparent; font-size: 22px; border-radius: 50%; transform: rotate(0); transition: all ease 0.4s; color: var(--ot-theme-color); } .popup-search-box button.searchClose:hover { color: var(--ot-body-color); background-color: #fff; border-color: transparent; border-color: transparent; transform: rotate(90deg); } .popup-search-box form { position: absolute; top: 50%; left: 50%; display: inline-block; padding-bottom: 40px; cursor: auto; width: 100%; max-width: 700px; transform: translate(-50%, -50%) scale(0); transition: transform ease 0.4s; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .popup-search-box form { max-width: 600px; } } .popup-search-box form input { font-size: 18px; height: 70px; width: 100%; border: 2px solid var(--ot-theme-color); background-color: transparent; padding-left: 30px; padding-right: 80px; color: #fff; border-radius: 50px; } .popup-search-box form input::placeholder { color: #fff; } .popup-search-box form button { position: absolute; top: 0px; background-color: transparent; border: none; color: #fff; font-size: 24px; right: 12px; color: var(--ot-white-color); cursor: pointer; width: 70px; height: 70px; transition: all ease 0.4s; transform: scale(1.001); } .popup-search-box form button:hover { transform: scale(1.1); } .popup-search-box.show { opacity: 1; visibility: visible; width: 100.1%; height: 100%; transition: all ease 0.4s; border-radius: 0; } .popup-search-box.show form { transition-delay: 0.5s; transform: translate(-50%, -50%) scale(1); } /*----------------------------------------*/ /* 2.11 Tab /*----------------------------------------*/ .ot-tab-box-1 .of-product-item { margin-bottom: 0; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-tab-box-1 .of-product-item { margin-bottom: 35px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .ot-tab-box-1 .of-product-item.r-spac { margin-bottom: 0; } } /*----------------------------------------*/ /* 2.9 Breadcrumb /*----------------------------------------*/ .ot-breadcrumb-style { position: relative; padding-top: 245px; padding-bottom: 143px; background-size: cover; background-position: center; background-repeat: no-repeat; background-blend-mode: luminosity; } @media (max-width: 575px) { .ot-breadcrumb-style { padding-top: 140px; padding-bottom: 60px; } } .ot-breadcrumb-overlay { position: relative; } .ot-breadcrumb-overlay::before { position: absolute; width: 100%; height: 100%; top: 0; left: 0; content: ""; background: linear-gradient(90deg, #003973 0%, #003973 30.53%, #003973 43.19%, rgba(0, 57, 115, 0.9) 98.8%); opacity: 0.7; } .ot-breadcrumb-img { position: absolute; bottom: 0; } @media (min-width: 0) and (max-width: 991px) { .ot-breadcrumb-img { right: 20px; } } .ot-breadcrumb-list span { font-size: 16px; font-weight: 600; line-height: 16px; text-transform: uppercase; } .ot-breadcrumb-list span:not(:last-child) { color: var(--ot-white-color); margin-right: 4px; } .ot-breadcrumb-list .dvdr i { font-size: 14px; } .ot-breadcrumb-subtitle { color: var(--ot-theme-color); } .ot-breadcrumb-title { font-size: 64px; font-weight: 800; color: var(--ot-white-color); text-transform: capitalize; margin-bottom: 5px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ot-breadcrumb-title { font-size: 55px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .ot-breadcrumb-title { font-size: 50px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .ot-breadcrumb-title { font-size: 45px; } } @media (max-width: 575px) { .ot-breadcrumb-title { font-size: 35px; } } .ot-breadcrumb-title > span { display: block; color: var(--ot-theme-color); } /*----------------------------------------*/ /* 2.10 Accordion /*----------------------------------------*/ /* Faq 1 ---------------------------------- */ .accordion-card { transition: 0.4s ease-in-out; border-radius: 4px; overflow: hidden; background-color: transparent; text-align: left; position: relative; z-index: 3; } .accordion-card:not(:last-child) { margin-bottom: 26px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .accordion-card:not(:last-child) { margin-bottom: 20px; } } .accordion-card .accordion-button { position: relative; font-size: 20px; font-weight: 700; margin-bottom: 0; text-align: left; transition: 0.3s; color: var(--ot-title-color); border-radius: 30px; font-family: var(--ot-title-font); padding: 17px 45px 18px 30px; background-color: var(--ot-smoke-color); border: 1px solid var(--ot-border-color); box-shadow: 0 10px 50px 0 rgba(0, 0, 0, 0.08); } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .accordion-card .accordion-button { padding: 17px 45px 18px 20px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .accordion-card .accordion-button { font-size: 18px; } } .accordion-card .accordion-button:after { display: none; } .accordion-card .accordion-button:focus { outline: none; box-shadow: none; } .accordion-card .accordion-button:not(.collapsed) { box-shadow: none; color: var(--ot-white-color); background: var(--ot-theme-color); border-color: var(--ot-theme-color); } .accordion-card .accordion-button:not(.collapsed) .accordion-icon { background: var(--ot-white-color); } .accordion-card .accordion-button:not(.collapsed) .accordion-icon:before { background: var(--ot-theme-color); } .accordion-card .accordion-button:not(.collapsed) .accordion-icon:after { display: none; } .accordion-card .accordion-collapse { border: none; } .accordion-card .accordion-body { border: none; padding: 20px 52px 0px 30px; border-radius: 0; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .accordion-card .accordion-body { padding: 20px 20px 0 20px; } } .accordion-card .faq-text { color: var(--ot-border-color); margin-bottom: -0.48em; margin-top: -0.48em; } .accordion-icon { position: absolute; width: 20px; height: 20px; background-color: var(--ot-theme-color); right: 30px; top: 50%; transform: translateY(-50%); border-radius: 100px; transition: 0.3s; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .accordion-icon { right: 20px; } } .accordion-icon::before, .accordion-icon::after { position: absolute; width: 10px; height: 2px; top: 50%; right: 5px; transform: translateY(-50%); content: ""; background: var(--ot-white-color); } .accordion-icon::after { height: 10px; width: 2px; right: 9px; top: 10px; } /*----------------------------------------*/ /* 2.12 Section Title /*----------------------------------------*/ .ot-sec-subtitle { font-size: 14px; font-weight: 700; padding: 2px 21.2px; display: inline-block; color: #024; border-radius: 30px; text-transform: uppercase; background: rgba(134, 187, 70, 0.3); margin-bottom: 15px; } .ot-sec-subtitle.style-2 { color: var(--ot-white-color); background: rgba(255, 255, 255, 0.3); } .ot-sec-title { font-size: 48px; font-weight: 700; line-height: 1.2; display: block; letter-spacing: -0.02em; text-transform: capitalize; color: #024; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .ot-sec-title { font-size: 36px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .ot-sec-title { font-size: 30px; } } @media (max-width: 575px) { .ot-sec-title { font-size: 24px; } } .ot-sec-subtitle3 { line-height: 1; font-weight: 700; font-size: 14px; color: var(--ot-theme-color); margin-bottom: 15px; text-transform: capitalize; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-title-area { margin-bottom: 30px; } } .ot-box-title { font-size: 24px; font-weight: 700; line-height: 1; display: inline-block; text-transform: capitalize; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media (max-width: 575px) { .ot-box-title { font-size: 20px; } } .ot-text-anime-1, .ot-text-anime-2, .ot-text-anime-3 { text-transform: inherit; overflow: hidden; } .fw-4 { font-weight: 400; } .fw-5 { font-weight: 500; } .fw-6 { font-weight: 600; } .fw-7 { font-weight: 700; } .fz-14 { font-size: 14px; } .fz-15 { font-size: 15px; } .fz-16 { font-size: 16px; } .fz-18 { font-size: 18px; } /*----------------------------------------*/ /* 2.7 Pagination /*----------------------------------------*/ .ot-pagination-testi-style .swiper-pagination-bullet { width: 35px; height: 10px; border-radius: 10px; background: var(--ot-body-color); opacity: 1; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-pagination-testi-style .swiper-pagination-bullet.swiper-pagination-bullet-active { background: var(--ot-theme-color); } .ot-pagination-controll-box { position: relative; } .ot-pagination-controll-box::before { position: absolute; width: 79.3%; height: 1px; top: 50%; transform: translateY(-50%); left: 0; right: 70px; margin: auto; content: ""; border: 1px dashed var(--ot-border-color); } @media only screen and (min-width: 768px) and (max-width: 991px) { .ot-pagination-controll-box::before { width: 69.3%; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-pagination-controll-box::before { display: none; } } .ot-pagination-style2 { position: relative; border: 1px solid var(--ot-border-color); padding: 15px 30px; border-radius: 15px; } @media (max-width: 575px) { .ot-pagination-style2 { padding: 10px; } } .ot-pagination-style2::before { position: absolute; width: 1px; height: 50px; top: 50%; left: 0; right: 0; text-align: center; margin: auto; content: ""; background: var(--ot-border-color); transform: translateY(-50%); } .ot-pagination-style2 .pagination-btn { display: flex; font-weight: 700; gap: 20px; align-items: center; } @media (max-width: 575px) { .ot-pagination-style2 .pagination-btn { gap: 10px; } } .ot-pagination-style2 .pagination-icon { position: relative; width: 49px; height: 49px; font-size: 20px; line-height: 49px; text-align: center; display: inline-block; color: var(--ot-white-color); background-color: var(--ot-theme-color); border-radius: 100%; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-pagination-style2 .pagination-icon i { position: relative; z-index: 2; } .ot-pagination-style2 .pagination-icon.border-style { background: none; border: 1px solid var(--ot-theme-color2); border-radius: 100%; color: var(--ot-theme-color2); } .ot-pagination-style2 .pagination-icon::before { position: absolute; width: 100%; height: 100%; top: 0; left: 0; content: ""; background: var(--ot-theme-color2); border-radius: 100%; transform: scale(0); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-pagination-style2 .pagination-icon:hover { color: var(--ot-title-color); border-color: var(--ot-theme-color2); } .ot-pagination-style2 .pagination-icon:hover::before { transform: scale(1); } .ot-slide-arrow { font-size: 18px; width: 56px; height: 56px; line-height: 50px; text-align: center; color: var(--ot-theme-color); border: 1px solid var(--ot-border-color); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; border-radius: 1000px; } .ot-slide-arrow:hover { background: var(--ot-theme-color); color: var(--ot-white-color); border-color: var(--ot-theme-color); } .number-pagination .swiper-pagination-toteal { font-weight: 700; font-size: 14px; color: var(--ot-body-color); } .number-pagination .swiper-pagination-current { font-weight: 700; font-size: 24px; color: var(--ot-theme-color); } .ot-basic-pagination nav ul li { display: inline-block; } .ot-basic-pagination nav ul li:not(:last-child) { margin-right: 5px; } .ot-basic-pagination nav ul li.current a { color: var(--ot-white-color); background: var(--ot-theme-color); } .ot-basic-pagination nav ul li a { font-size: 20px; width: 56px; height: 56px; line-height: 56px; text-align: center; color: var(--ot-title-color); display: block; background: var(--ot-smoke-color); border-radius: 2px; } .ot-basic-pagination nav ul li a:hover { color: var(--ot-white-color); background: var(--ot-theme-color); } /**----------------------- scrollCue.js - ver.2.0.0 URL : https://prjct-samwest.github.io/scrollCue/ created by SamWest. Copyright (c) 2020 SamWest. This plugin is released under the MIT License. -----------------------**/ /** --------------- fadeIng */ [data-cue=fadeIn], [data-cues=fadeIn] > * { opacity: 0; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /** --------------- slideInLeft */ [data-cue=slideInLeft], [data-cues=slideInLeft] > * { opacity: 0; } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } } /** --------------- slideInRight */ [data-cue=slideInRight], [data-cues=slideInRight] > * { opacity: 0; } @keyframes slideInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } /** --------------- slideInDown */ [data-cue=slideInDown], [data-cues=slideInDown] > * { opacity: 0; } @keyframes slideInDown { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } } /** --------------- slideInUp */ [data-cue=slideInUp], [data-cues=slideInUp] > * { opacity: 0; } @keyframes slideInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /** --------------- zoomIn */ [data-cue=zoomIn], [data-cues=zoomIn] > * { opacity: 0; } @keyframes zoomIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } } /** --------------- zoomOut */ [data-cue=zoomOut], [data-cues=zoomOut] > * { opacity: 0; } @keyframes zoomOut { from { opacity: 0; transform: scale(1.2); } to { opacity: 1; transform: scale(1); } } /** --------------- rotateIn */ [data-cue=rotateIn], [data-cues=rotateIn] > * { opacity: 0; } @keyframes rotateIn { from { opacity: 0; transform: rotateZ(-15deg); } to { opacity: 1; transform: rotateZ(0deg); } } /** --------------- bounceIn */ [data-cue=bounceIn], [data-cues=bounceIn] > * { opacity: 0; } @keyframes bounceIn { 0% { transform: scale3d(0.3, 0.3, 0.3); } 20% { transform: scale3d(1.1, 1.1, 1.1); } 40% { transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); } 80% { transform: scale3d(0.97, 0.97, 0.97); } 100% { opacity: 1; transform: scale3d(1, 1, 1); } } /** --------------- bounceInLeft */ [data-cue=bounceInLeft], [data-cues=bounceInLeft] > * { opacity: 0; } @keyframes bounceInLeft { from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; transform: translate3d(25px, 0, 0); } 75% { transform: translate3d(-10px, 0, 0); } 90% { transform: translate3d(5px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } /** --------------- bounceInRight */ [data-cue=bounceInRight], [data-cues=bounceInRight] > * { opacity: 0; } @keyframes bounceInRight { from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { opacity: 0; transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; transform: translate3d(-25px, 0, 0); } 75% { transform: translate3d(10px, 0, 0); } 90% { transform: translate3d(-5px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } /** --------------- bounceInDown */ [data-cue=bounceInDown], [data-cues=bounceInDown] > * { opacity: 0; } @keyframes bounceInDown { from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; transform: translate3d(0, 25px, 0); } 75% { transform: translate3d(0, -10px, 0); } 90% { transform: translate3d(0, 5px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } /** --------------- bounceInUp */ [data-cue=bounceInUp], [data-cues=bounceInUp] > * { opacity: 0; } @keyframes bounceInUp { from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { opacity: 0; transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; transform: translate3d(0, -20px, 0); } 75% { transform: translate3d(0, 10px, 0); } 90% { transform: translate3d(0, -5px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } /** --------------- flipInX */ [data-cue=flipInX], [data-cues=flipInX] > * { opacity: 0; backface-visibility: visible; } @keyframes flipInX { from { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); animation-timing-function: ease-in; opacity: 0; } 40% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); animation-timing-function: ease-in; } 60% { transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { opacity: 1; transform: perspective(400px); } } /** --------------- flipInY */ [data-cue=flipInY], [data-cues=flipInY] > * { opacity: 0; backface-visibility: visible; } @keyframes flipInY { from { transform: perspective(400px) rotate3d(0, 1, 0, 90deg); animation-timing-function: ease-in; opacity: 0; } 40% { transform: perspective(400px) rotate3d(0, 1, 0, -20deg); animation-timing-function: ease-in; } 60% { transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } to { opacity: 1; transform: perspective(400px); } } /*----------------------------------------*/ /* 2.8 Sidebar Cart /*----------------------------------------*/ .cartmini-area { position: fixed; right: 0; top: 0; width: 360px; height: 100%; -webkit-transform: translateX(calc(100% + 80px)); -moz-transform: translateX(calc(100% + 80px)); -ms-transform: translateX(calc(100% + 80px)); -o-transform: translateX(calc(100% + 80px)); transform: translateX(calc(100% + 80px)); background: var(--ot-white-color) none repeat scroll 0 0; z-index: 99999; scrollbar-width: none; transition: 0.3s; } @media (max-width: 575px) { .cartmini-area { width: 330px; } } .cartmini-area::-webkit-scrollbar { display: none; } .cartmini-area.cartmini-opened { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .cartmini-top { padding-left: 15px; padding-right: 15px; background: var(--ot-theme-color); } .cartmini-wrapper { position: relative; min-height: 100%; padding-left: 15px; padding-right: 15px; } .cartmini-top-title { padding: 20px 0; border-bottom: 1px solid var(--ot-border-color); } .cartmini-top-title h4 { font-size: 24px; font-weight: 600; margin-bottom: 0; text-transform: capitalize; } .cartmini-close { position: absolute; top: 17px; right: 15px; } .cartmini-close-btn { width: 30px; height: 30px; display: inline-block; line-height: 30px; font-size: 16px; color: var(--ot-white-color); background: var(--ot-title-color); border-radius: 4px; } .cartmini-close-btn i { -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .cartmini-close-btn:hover i { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } .cartmini-shipping { padding: 15px 0; border-bottom: 1px solid var(--ot-border-color); } .cartmini-shipping .progress { height: 10px; border-radius: 4px; } .cartmini-shipping .progress-bar { background-color: var(--ot-theme-color); } .cartmini-shipping p { margin-bottom: 5px; font-size: 16px; } .cartmini-shipping p span { color: red; font-weight: 600; } .cartmini-widget { height: calc(100vh - 380px); overflow-y: scroll; overscroll-behavior-y: contain; scrollbar-width: none; } .cartmini-widget::-webkit-scrollbar { display: none; } .cartmini-widget-item { position: relative; display: flex; padding: 20px 0; align-items: center; border-bottom: 1px solid rgba(129, 129, 129, 0.2); } .cartmini-widget-item:last-child { border-bottom: 0; } .cartmini-thumb { margin-right: 15px; border: 1px solid var(--ot-border-color); background: var(--ot-smoke-color); border-radius: 4px; } .cartmini-thumb img { max-width: 85px; height: auto; } .cartmini-title { font-size: 15px; margin-bottom: 4px; font-weight: 500; } .cartmini-title a { display: inline; transition: all 0.3s linear; background-repeat: no-repeat; background-size: 0% 1px, 0 1px; background-position: 100% 100%, 0 100%; background-image: linear-gradient(currentcolor, currentcolor), linear-gradient(currentcolor, currentcolor); } .cartmini-title a:hover { color: #4d3d30; background-size: 0% 1px, 100% 1px; } .cartmini-content { padding-right: 30px; } .cartmini-content .ot-product-quantity { width: 75px; padding: 0; } .cartmini-content .ot-product-quantity .ot-cart-input[type=text] { height: 30px; text-align: center; font-size: 13px; border: 1px solid var(--ot-border-color); background-color: var(--ot-white-color); padding: 0; } .cartmini-content .ot-product-quantity .ot-cart-plus, .cartmini-content .ot-product-quantity .ot-cart-minus { width: 20px; height: 30px; line-height: 30px; display: inline-block; text-align: center; font-size: 13px; left: 3px; } .cartmini-content .ot-product-quantity .ot-cart-plus svg, .cartmini-content .ot-product-quantity .ot-cart-minus svg { -webkit-transform: translateY(-1px); -moz-transform: translateY(-1px); -ms-transform: translateY(-1px); -o-transform: translateY(-1px); transform: translateY(-1px); width: 10px; } .cartmini-content .ot-product-quantity .ot-cart-plus::after, .cartmini-content .ot-product-quantity .ot-cart-minus::after { display: none; } .cartmini-content .ot-product-quantity .ot-cart-plus { left: auto; right: 3px; } .cartmini-del { position: absolute; top: 15px; right: 0; width: 25px; height: 25px; line-height: 25px; text-align: center; color: var(--ot-title-color); font-size: 14px; } .cartmini-del:hover { color: #f11; } .cartmini-checkout { padding-top: 15px; padding-bottom: 85px; width: 100%; border-top: 2px solid var(--ot-border-color); } .cartmini-checkout-title h4 { font-size: 15px; display: inline-block; font-weight: 500; margin-bottom: 0; text-transform: capitalize; } .cartmini-checkout-title span { float: right; font-size: 15px; color: var(--ot-title-color); font-weight: 500; } .cartmini-checkout-btn .ot-btn-primary { text-transform: capitalize; padding: 10px 20px; } .cartmini-price { font-size: 14px; font-weight: 500; color: var(--ot-title-color); } .cartmini-quantity { font-size: 12px; font-weight: 500; } .cartmini-empty { margin-top: 150px; } .cartmini-empty img { margin-bottom: 30px; } .cartmini-empty p { font-size: 16px; color: var(--ot-title-color); margin-bottom: 15px; } /* HEADER CSS */ /*----------------------------------------*/ /* 3.1 Header Style 1 /*----------------------------------------*/ .ot-header-layout1 { padding: 20px; } @media (max-width: 575px) { .ot-header-layout1 { padding: 10px; } } .ot-header-layout1.header-sticky { padding: 0 20px; } @media (min-width: 0px) and (max-width: 1199px) { .ot-header-layout1.header-sticky { padding: 10px 0; } } .ot-header-wrapp { padding: 3.5px 7px; border-radius: 40px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .ot-header-wrapp { padding: 7px; } } @media (max-width: 575px) { .ot-header-wrapp { padding: 7px 0; } } .ot-header-right { gap: 24px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-header-right { gap: 14px; } } .ot-header-right .ot-btn-primary { flex: 0 0 auto; } .ot-header-right-bars { width: 56px; height: 56px; line-height: 56px; border-radius: 1000px; color: var(--ot-white-color); background-color: var(--ot-theme-color); } .header-transparent { position: absolute; top: 0; width: 100%; z-index: 9; } .header-sticky { position: fixed; top: 0; left: 0; right: 0; opacity: 1; width: 100%; z-index: 99; visibility: visible; background: var(--ot-title-color); box-shadow: 0px 1px 3px 0px rgba(18, 20, 32, 0.14); animation: 0.95s ease 0s normal forwards 1 running headerSlideDown; -webkit-animation: 0.95s ease 0s normal forwards 1 running headerSlideDown; } .ot-search-btn { position: relative; width: 56px; height: 56px; line-height: 56px; border-radius: 1000px; color: var(--ot-theme-color2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-search-btn::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 1000px; content: ""; border: 2px dashed var(--ot-theme-color2); } .ot-search-btn:hover::before { animation: rotate2 5s linear infinite; } /*----------------------------------------*/ /* 3.2 Header Style 2 /*----------------------------------------*/ .ot-header-transparent { position: absolute; width: 100%; top: 0; left: 0; z-index: 99; } .ot-header-layout2 { padding: 30px 160px; } @media only screen and (min-width: 1700px) and (max-width: 1800px), only screen and (min-width: 1600px) and (max-width: 1699px) { .ot-header-layout2 { padding: 30px; } } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .ot-header-layout2 { padding: 20px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-header-layout2 { padding: 20px 0; } } .ot-header-layout2 .ot-main-menu { border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50px; } .ot-header-layout2 .ot-main-menu > nav > ul > li:not(:last-child) { padding-right: 24px; margin-right: 24px; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .ot-header-layout2 .ot-main-menu > nav > ul > li:not(:last-child) { padding-right: 15px; margin-right: 15px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-header-layout2 .ot-main-menu > nav > ul > li:not(:last-child) { padding-right: 20px; margin-right: 20px; } } .ot-header-layout2 .ot-main-menu > nav > ul > li.has-dropdown::after { right: 10px; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-header-layout2 .ot-main-menu > nav > ul > li.has-dropdown::after { right: 0; } } .ot-header-layout2 .ot-main-menu > nav > ul > li > a { font-size: 18px; font-weight: 600; padding: 10px 0; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-header-layout2 .ot-main-menu > nav > ul > li > a { font-size: 16px; } } .ot-header-layout2 .header-sticky { border-radius: 0; padding: 20px 160px; transition: transform 500ms ease; } @media only screen and (min-width: 1700px) and (max-width: 1800px), only screen and (min-width: 1600px) and (max-width: 1699px) { .ot-header-layout2 .header-sticky { padding: 20px; } } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .ot-header-layout2 .header-sticky { padding: 20px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-header-layout2 .header-sticky { padding: 20px 0; } } .ot-reveal-line { overflow: hidden; padding-bottom: 9px; } .ot-border-line { position: absolute; top: 0; left: 0; bottom: 0; width: 5.2%; height: 100%; z-index: 1; border-right: 1px solid rgba(255, 255, 255, 0.1); } .ot-border-line::after { position: absolute; top: 300px; right: -1px; width: 1px; opacity: 0.5; height: 100px; content: ""; animation: scroll1 15s ease-out infinite; background: rgba(134, 187, 70, 0.5); } .ot-border-line.line-2 { width: 30%; } .ot-border-line.line-2::after { animation: scroll1 25s ease-out infinite; } .ot-border-line.line-3 { width: 70%; } .ot-border-line.line-3::after { animation: scroll1 15s ease-out infinite; } .ot-border-line.line-4 { width: 95%; } .ot-border-line.line-4::after { animation: scroll1 25s ease-out infinite; } .ot-border-line.line-5 { width: 89.9%; } .ot-border-line.line-5::after { animation: scroll1 25s ease-out infinite; } /*----------------------------------------*/ /* 3.3 Header Style 3 /*----------------------------------------*/ .ot-header-layout3 { padding: 0 145px; } @media only screen and (min-width: 1700px) and (max-width: 1800px) { .ot-header-layout3 { padding: 0 80px; } } @media only screen and (min-width: 1700px) and (max-width: 1800px), only screen and (min-width: 1600px) and (max-width: 1699px), only screen and (min-width: 1400px) and (max-width: 1599px) { .ot-header-layout3 { padding: 0 40px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-header-layout3 { padding: 0 15px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-header-layout3 { padding: 0; } } .ot-header-layout3 .ot-main-menu > nav > ul > li:not(:last-child) { padding-right: 0; margin-right: 0; } .ot-header-layout3 .ot-main-menu > nav > ul > li.has-dropdown::after { right: 10px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1400px) and (max-width: 1599px) { .ot-header-layout3 .ot-main-menu > nav > ul > li.has-dropdown::after { right: 0; } } .ot-header-layout3 .ot-main-menu > nav > ul > li > a { position: relative; font-weight: 600; padding: 40px 23.5px; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-header-layout3 .ot-main-menu > nav > ul > li > a { padding: 40px 14.5px; } } .ot-header-layout3 .ot-main-menu > nav > ul > li > a::before, .ot-header-layout3 .ot-main-menu > nav > ul > li > a::after { position: absolute; width: 100%; height: 0; top: 0; left: 0; content: ""; opacity: 0; visibility: hidden; background: linear-gradient(180deg, rgba(4, 34, 62, 0.12) 0%, #86bb46 100%); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-header-layout3 .ot-main-menu > nav > ul > li > a::before { height: 0; background: var(--ot-theme-color); } .ot-header-layout3 .ot-main-menu > nav > ul > li:hover > a::before, .ot-header-layout3 .ot-main-menu > nav > ul > li:hover > a::after { opacity: 1; visibility: visible; height: 100%; } .ot-header-layout3 .ot-main-menu > nav > ul > li:hover > a::before { height: 3px; } .ot-header-layout3 .header-sticky { padding: 0 145px; border-radius: 0; } @media only screen and (min-width: 1700px) and (max-width: 1800px) { .ot-header-layout3 .header-sticky { padding: 0 80px; } } @media only screen and (min-width: 1700px) and (max-width: 1800px), only screen and (min-width: 1600px) and (max-width: 1699px), only screen and (min-width: 1400px) and (max-width: 1599px) { .ot-header-layout3 .header-sticky { padding: 0 40px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-header-layout3 .header-sticky { padding: 0 15px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-header-layout3 .header-sticky { padding: 10px 0; } } /*----------------------------------------*/ /* 3.4 Header Style 4 /*----------------------------------------*/ .ot-header-layout4 { padding: 0 120px; } @media only screen and (min-width: 1700px) and (max-width: 1800px) { .ot-header-layout4 { padding: 0 80px; } } @media only screen and (min-width: 1700px) and (max-width: 1800px), only screen and (min-width: 1600px) and (max-width: 1699px), only screen and (min-width: 1400px) and (max-width: 1599px) { .ot-header-layout4 { padding: 0 40px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-header-layout4 { padding: 0 15px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-header-layout4 { padding: 10px 0; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-header-layout4 { overflow: hidden; } } .ot-header-layout4 .ot-header-logo { z-index: 3; } .ot-header-layout4 .ot-header-logo::before, .ot-header-layout4 .ot-header-logo::after { position: absolute; min-width: 457px; min-height: 100px; display: inline-block; top: -26px; left: -141px; content: ""; background: url("/assets/img/shape/header-mask-4.png") center/cover; -webkit-mask-image: url("/assets/img/shape/header-mask-4.png"); -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; background: var(--ot-theme-color); z-index: -1; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-header-layout4 .ot-header-logo::before, .ot-header-layout4 .ot-header-logo::after { top: -28px; left: -146%; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-header-layout4 .ot-header-logo::before, .ot-header-layout4 .ot-header-logo::after { top: -22px; min-height: 85px; } } @media (max-width: 575px) { .ot-header-layout4 .ot-header-logo::before, .ot-header-layout4 .ot-header-logo::after { top: -23px; left: -160px; } } .ot-header-layout4 .ot-header-logo::before { left: -132px; background: var(--ot-white-color); } @media only screen and (min-width: 1200px) and (max-width: 1399px), (max-width: 575px) { .ot-header-layout4 .ot-header-logo::before { left: -205px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ot-header-layout4 .ot-header-logo::before { left: -100px; } } @media (max-width: 575px) { .ot-header-layout4 .ot-header-logo::before { left: -150px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-header-layout4 .ot-header-logo::after { left: -220px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ot-header-layout4 .ot-header-logo::after { left: -115px; } } .ot-header-layout4 .ot-main-menu > nav > ul > li > a { padding: 37px 0; } /*----------------------------------------*/ /* 3.5 Header Style 5 /*----------------------------------------*/ .ot-header-layout5 .ot-header-top { padding: 7px 0; } .ot-header-layout5 .ot-header-wrapp { border-radius: 0; } .ot-header-layout5 .ot-main-menu > nav > ul > li:not(:last-child) { padding-right: 18px; margin-right: 18px; } .ot-header-layout5 .ot-main-menu > nav > ul > li > a { font-weight: 600; padding: 37px 0; } .ot-header-layout5 .ot-main-menu > nav > ul > li.has-dropdown::after { right: 5px; } .ot-header-layout5 .ot-header-right-bars { border: dashed 2px var(--ot-white-color); line-height: 50px; } .ot-header-layout5 .ot-header-right-bars:hover { color: var(--ot-title-color); background: var(--ot-white-color); border-color: var(--ot-title-color); } .ot-header-info-box { gap: 40px; } .ot-header-info { position: relative; display: flex; gap: 10px; align-items: center; color: var(--ot-white-color); } .ot-header-info:not(:last-child)::after { width: 2px; height: 14px; background-color: var(--ot-white-color); content: ""; position: absolute; top: 50%; transform: translateY(-50%); right: -20px; opacity: 0.3; } .ot-header-info i { font-size: 13px; } .ot-header-info-social-wrapp { gap: 10px; } .ot-header-info-social-box { gap: 20px; } .ot-header-info-social { font-size: 13px; color: var(--ot-white-color); } .ot-header-info-social-text { color: var(--ot-white-color); } .ot-header-info-call { font-size: 20px; width: 50px; height: 50px; line-height: 50px; text-align: center; border-radius: 100%; background-color: var(--ot-theme-color); color: var(--ot-white-color); border: dashed 2px var(--ot-white-color); } .ot-header-info-text { margin-bottom: 0; } .ot-header-info-number { font-weight: 700; font-size: 20px; } /*----------------------------------------*/ /* 3.5 Header Style 5 /*----------------------------------------*/ .ot-header-wrapp2 { position: absolute; width: 100%; top: 48px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-header-wrapp2 { top: 0; } } .ot-header-layout6 .ot-header-top { padding: 9px 0 37px; } .ot-header-layout6 .ot-main-menu > nav > ul > li:not(:last-child) { padding-right: 18px; margin-right: 18px; } .ot-header-layout6 .ot-main-menu > nav > ul > li > a { padding: 27px 0; font-weight: 700; color: var(--ot-title-color); } .ot-header-layout6 .ot-main-menu > nav > ul > li.has-dropdown::after { right: 5px; color: var(--ot-title-color); } .ot-header-layout6 .ot-header-right-bars { border: dashed 2px var(--ot-white-color); line-height: 50px; } .ot-header-layout6 .ot-header-right-bars:hover { color: var(--ot-title-color); background: var(--ot-white-color); border-color: var(--ot-title-color); } .ot-header-layout6 .header-sticky { position: fixed; top: 0; background: var(--ot-white-color); } .ot-header-layout6 .ot-header-info-2 { color: var(--ot-white-color); font-size: 16px; font-weight: 600; letter-spacing: 0.7px; } .ot-header-layout6 .ot-header-info { font-size: 16px; font-weight: 700; letter-spacing: 0.4px; } .ot-header-layout6 .ot-header-info-social-wrapp { gap: 7px; letter-spacing: 0.5px; font-size: 16px; font-weight: 700; } .ot-header-layout6 .ot-header-info-social-box { line-height: 0; } .ot-header-layout6 .ot-header-info-box { gap: 43px; } .ot-header-layout6 .ot-header-logo { padding: 15px 0; } /*----------------------------------------*/ /* 3.5 Header Style 5 /*----------------------------------------*/ .ot-header-layout9 { padding: 82px; padding-bottom: 0; z-index: 9; } @media (max-width: 1399px) { .ot-header-layout9 { padding: 30px; } } .ot-header-layout9 .ot-header-top { padding: 7px 0; } .ot-header-layout9 .ot-header-wrapp { padding: 0; position: relative; } @media (max-width: 1199px) { .ot-header-layout9 .ot-header-wrapp { padding: 15px 0; } } .ot-header-layout9 .ot-header-wrapp::before { position: absolute; width: 100%; height: 100%; top: 0; left: 0; content: ""; background: var(--ot-white-color); opacity: 0.1; border-radius: 24px; } .ot-header-layout9 .ot-main-menu > nav > ul > li:not(:last-child) { padding-right: 18px; margin-right: 18px; } .ot-header-layout9 .ot-main-menu > nav > ul > li > a { font-weight: 600; padding: 37px 0; } .ot-header-layout9 .ot-main-menu > nav > ul > li.has-dropdown::after { right: 5px; } .ot-header-layout9 .ot-header-right-bars { border: dashed 2px var(--ot-white-color); line-height: 50px; } .ot-header-layout9 .ot-header-right-bars:hover { color: var(--ot-title-color); background: var(--ot-white-color); border-color: var(--ot-title-color); } .ot-header-info-box { gap: 40px; } .ot-header-info { position: relative; display: flex; gap: 10px; align-items: center; color: var(--ot-white-color); } .ot-header-info:not(:last-child)::after { width: 2px; height: 14px; background-color: var(--ot-white-color); content: ""; position: absolute; top: 50%; transform: translateY(-50%); right: -20px; opacity: 0.3; } .ot-header-info i { font-size: 13px; } .ot-header-info-social-wrapp { gap: 10px; } .ot-header-info-social-box { gap: 20px; } .ot-header-info-social { font-size: 13px; color: var(--ot-white-color); } .ot-header-info-social-text { color: var(--ot-white-color); } .ot-header-info-call { font-size: 20px; width: 50px; height: 50px; line-height: 50px; text-align: center; border-radius: 100%; background-color: var(--ot-theme-color); color: var(--ot-white-color); border: dashed 2px var(--ot-white-color); } .ot-header-info-text { margin-bottom: 0; } .ot-header-info-number { font-weight: 700; font-size: 20px; } /*----------------------------------------*/ /* 4.1 Main menu css /*----------------------------------------*/ .ot-main-menu > nav > ul > li { position: relative; display: inline-block; } .ot-main-menu > nav > ul > li:not(:last-child) { padding-right: 28px; margin-right: 28px; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .ot-main-menu > nav > ul > li:not(:last-child) { padding-right: 18px; margin-right: 18px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-main-menu > nav > ul > li:not(:last-child) { padding-right: 8px; margin-right: 8px; } } .ot-main-menu > nav > ul > li.has-dropdown::after { content: "+"; position: absolute; font-size: 10px; top: 50%; right: 15px; color: var(--ot-white-color); transform: translateY(-50%); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; font-family: "Font Awesome 6 Free"; font-weight: 900; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .ot-main-menu > nav > ul > li.has-dropdown::after { right: 3px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-main-menu > nav > ul > li.has-dropdown::after { right: -5px; } } .ot-main-menu > nav > ul > li > a { font-size: 18px; font-weight: 700; padding: 26px 0; display: inline-block; text-transform: uppercase; color: var(--ot-white-color); font-family: var(--ot-style-font); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; position: relative; } .ot-main-menu > nav > ul > li .submenu { position: absolute; width: 280px; z-index: 999; padding: 25px 0px; top: 100%; opacity: 0; visibility: hidden; transition: 0.4s; text-align: left; margin-left: 0; transform-origin: top; transition-duration: 0.1s; backdrop-filter: blur(8px); background: var(--ot-white-color); box-shadow: 0px 10px 30px 0px rgba(25, 25, 26, 0.1); -webkit-transform: perspective(300px) rotateX(-18deg); -moz-transform: perspective(300px) rotateX(-18deg); -ms-transform: perspective(300px) rotateX(-18deg); -o-transform: perspective(300px) rotateX(-18deg); transform: perspective(300px) rotateX(-18deg); } .ot-main-menu > nav > ul > li .submenu li { list-style: none; display: block; padding: 0 30px; position: relative; } .ot-main-menu > nav > ul > li .submenu li:not(:last-child) { margin-bottom: 18px; } .ot-main-menu > nav > ul > li .submenu li .submenu { left: 100%; top: 0; opacity: 0; } .ot-main-menu > nav > ul > li .submenu li.menu-item-has-children:hover a:after { transform: rotate(0deg); color: var(--ot-theme-color); } .ot-main-menu > nav > ul > li .submenu li.menu-item-has-children > a { display: flex; align-items: center; justify-content: space-between; } .ot-main-menu > nav > ul > li .submenu li.menu-item-has-children > a:after { content: "\f107"; font-size: 16px; font-weight: 400; margin-left: 2px; color: var(--ot-theme-color); display: inline-block; transform: rotate(-90deg); transition: all 0.3s 0s ease-out; font-family: var(--ot-icon-font); } .ot-main-menu > nav > ul > li .submenu li a { position: relative; font-size: 18px; font-weight: 700; display: block; line-height: 1; padding: 0 0; text-transform: capitalize; color: var(--ot-title-color); } .ot-main-menu > nav > ul > li .submenu li a::before { position: absolute; top: 50%; left: 0; content: ""; height: 2px; width: 0px; opacity: 0; visibility: hidden; display: inline-block; transition: all 0.3s ease-out 0s; background-color: var(--ot-theme-color); transform: translateY(-50%); } .ot-main-menu > nav > ul > li .submenu li:hover > .submenu { opacity: 1; visibility: visible; } .ot-main-menu > nav > ul > li .submenu li:hover > a { padding-left: 25px; color: var(--ot-theme-color); } .ot-main-menu > nav > ul > li .submenu li:hover > a::before { width: 20px; visibility: visible; opacity: 1; } .ot-main-menu > nav > ul > li:hover > a { color: var(--ot-theme-color); } .ot-main-menu > nav > ul > li:hover.has-dropdown::after { color: var(--ot-theme-color); } .ot-main-menu > nav > ul > li:hover .submenu { opacity: 1; visibility: visible; transition-duration: 0.2s; -webkit-transform: perspective(300px) rotateX(0deg); -moz-transform: perspective(300px) rotateX(0deg); -ms-transform: perspective(300px) rotateX(0deg); -o-transform: perspective(300px) rotateX(0deg); transform: perspective(300px) rotateX(0deg); } .ot-main-menu > nav > ul > li:hover .homemenu .ot-menu-btn { padding: 0 0; } .ot-main-menu > nav > ul > li.ot-menu-static { position: static; } .ot-main-menu > nav > ul > li.ot-menu-static:hover .ot-mega-menu { opacity: 1; visibility: visible; transform: scaleY(1); transition-duration: 0.2s; transform: perspective(300px) rotateX(0deg); } .ot-main-menu > nav > ul > li .ot-mega-menu { position: absolute; width: 1320px; max-height: 700px; top: 85%; left: 0; right: 0; opacity: 0; visibility: hidden; transform: scaleY(0); transform-origin: top center; padding: 20px 20px; padding-bottom: 7px; z-index: 9; background: var(--ot-white-color); box-shadow: 0px 10px 30px 0px rgba(25, 25, 26, 0.1); overflow: overlay; margin: auto; transform: perspective(300px) rotateX(-18deg); border-bottom: 20px solid var(--ot-white-color); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-main-menu > nav > ul > li .ot-mega-menu { width: 1160px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-main-menu > nav > ul > li .ot-mega-menu { width: 100%; } } .ot-menu-icon { font-size: 16px; margin-right: 5px; } .homemenu { position: relative; } .homemenu:not(:last-child) { margin-bottom: 25px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .homemenu { margin-bottom: 30px; } } .homemenu.upcomming .homemenu-thumb img { filter: blur(2px); } .homemenu.upcomming .homemenu-thumb .homemenu-thumb-img { position: absolute; top: 30px; left: 0; height: 100%; width: 100%; filter: blur(0px); z-index: 10; } .homemenu.upcomming .homemenu-thumb .homemenu-thumb-img img { filter: none; } .homemenu.upcomming .homemenu-title > a { cursor: not-allowed; } .homemenu.upcomming .homemenu-btn { display: none; } .homemenu .ot-menu-btn { -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .homemenu-title > a { padding: 0; font-weight: 500; color: var(--ot-title-color); } .homemenu-thumb { position: relative; margin-bottom: 25px; border: 8px solid var(--ot-theme-color); border-radius: 5px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .homemenu-thumb { margin-bottom: 15px; } } .homemenu-thumb img { width: 100%; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .homemenu-thumb::before { position: absolute; content: ""; top: 0; left: 0; height: 100%; width: 100%; background: rgba(38, 34, 33, 0.1); transition: all 0.3s 0s ease-out; } .homemenu-thumb:hover { opacity: 1; } .homemenu-thumb:hover img { filter: blur(2px); } .homemenu-thumb:hover .homemenu-btn { transform: translateY(-50%); opacity: 1; visibility: visible; } .homemenu-btn { position: absolute; top: 50%; left: 50px; right: 50px; text-align: center; transform: translateY(-40%); transition: all 0.3s 0s ease-out; opacity: 0; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .homemenu-btn { right: 33px; } } .homemenu-btn .ot-menu-btn-2 { font-size: 16px; font-weight: 700; text-transform: uppercase; color: var(--ot-white-color); display: inline-block; background: var(--ot-title-color); padding: 15.5px 30px; border-radius: 30px; position: relative; overflow: hidden; z-index: 2; } .homemenu-btn .ot-menu-btn-2::before { position: absolute; content: ""; top: 0; left: -100%; width: 100%; height: 100%; background: var(--ot-theme-color2); z-index: -1; transition: all 0.3s ease-in-out; } .homemenu-btn .ot-menu-btn-2:hover { color: var(--ot-title-color); } .homemenu-btn .ot-menu-btn-2:hover::before { left: 0; } .homemenu-btn .ot-menu-btn-2:hover .yellow-btn { color: var(--ot-title-color); } /*----------------------------------------*/ /* 4.2 Mobilemenu css /*----------------------------------------*/ .ot-offcanvas-menu { margin-bottom: 40px; } .ot-offcanvas-menu ul { list-style: none; } .ot-offcanvas-menu ul li { position: relative; } .ot-offcanvas-menu ul li > a { padding: 8px 0; display: block; font-size: 15px; font-weight: 500; color: var(--ot-black-color); } .ot-offcanvas-menu ul li > a i { display: none; } .ot-offcanvas-menu ul li:not(:last-child) > a { border-bottom: 1px solid rgba(1, 15, 28, 0.1); } .ot-offcanvas-menu ul li.active > a { color: var(--ot-theme-color); } .ot-offcanvas-menu ul li.active > .ot-menu-close { color: var(--ot-white-color); background: var(--ot-black-color); border-color: var(--ot-black-color); } .ot-offcanvas-menu ul li.active > .ot-menu-close i { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } .ot-offcanvas-menu ul li .ot-submenu { display: none; padding-left: 20px; } @media (max-width: 1199px) { .ot-offcanvas-menu ul li .ot-submenu { padding-left: 0; padding-top: 15px; } } .ot-offcanvas-menu ul li .ot-mega-menu { display: none; } .ot-menu-close { position: absolute; right: 0; top: 6px; height: 30px; width: 30px; font-size: 12px; line-height: 29px; text-align: center; border: 1px solid rgba(1, 15, 28, 0.12); } .ot-menu-close i { transition: all 0.3s; } /*----------------------------------------*/ /* 5.1 Postbox css /*----------------------------------------*/ .ot-postbox-thumb img { border-radius: 20px; } .ot-postbox-title { font-size: 30px; font-weight: 700; color: var(--ot-title-color2); text-transform: capitalize; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .ot-postbox-title { font-size: 24px; } } @media (max-width: 575px) { .ot-postbox-title { font-size: 20px; } } .ot-postbox-title:hover a { color: var(--ot-theme-color); } .ot-postbox-thumb-sm .ot-video-icon { font-size: 24px; width: 70px; height: 70px; line-height: 70px; color: var(--ot-theme-color); } .ot-postbox-thumb-sm .ot-video-icon:hover { color: var(--ot-white-color); background: var(--ot-theme-color); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-postbox-thumb-sm { margin-bottom: 24px; } .ot-postbox-thumb-sm img { width: 100%; } } .postbox-details-item { border-radius: 20px; background: var(--ot-white-color); box-shadow: 0 6px 30px 0 rgba(0, 0, 0, 0.05); margin-bottom: 32px; } .postbox-details-item:last-child { margin-bottom: 50px; } .postbox-details-item.shadow-0 { box-shadow: none; } .postbox-details-thumb img { width: 100%; border-radius: 20px 20px 0 0; } .postbox-details-content { padding: 40px; } @media (min-width: 0) and (max-width: 1199px) { .postbox-details-content { padding: 20px; } } .postbox-details-meta-box { display: flex; align-items: center; gap: 30px; } .postbox-details-meta { position: relative; margin-bottom: 0; line-height: 1; display: flex; align-items: center; gap: 10px; } .postbox-details-meta i { font-size: 18px; color: var(--ot-theme-color); } .postbox-details-quote-box { position: relative; padding: 40px; border: 1px solid var(--ot-border-color); border-radius: 0 0 0 20px; } .postbox-details-quote-box::after, .postbox-details-quote-box::before { position: absolute; width: 44px; height: 1px; top: -1px; left: -1px; content: ""; background: var(--ot-white-color); } .postbox-details-quote-box::before { width: 2px; height: 66px; top: 0; } .postbox-details-quote p { font-style: italic; font-weight: 500; font-size: 17px; line-height: 1.5; color: var(--ot-title-color); margin-bottom: 10px; } .postbox-details-quote span { position: absolute; font-size: 20px; font-weight: 700; background-color: var(--ot-theme-color); color: var(--ot-white-color); padding: 7px 14px; border-radius: 10px; margin-top: 20px; } .postbox-details-quote-icon { position: absolute; top: -25px; left: -5px; font-size: 45px; font-weight: 600; color: var(--ot-theme-color); z-index: 2; } .postbox-details-tag .tagcloud a { border: 1px solid #e1e2e9; background: none; } @media (max-width: 575px) { .postbox-details-tag { margin-bottom: 30px; } } .postbox-details-tag-name { font-weight: 500; font-size: 14px; line-height: 1.1; display: block; margin-bottom: 25px; text-transform: capitalize; color: var(--ot-body-color); } .postbox-details-social a { width: 40px; height: 40px; font-size: 14px; line-height: 40px; color: var(--ot-theme-color); text-align: center; border-radius: 6px; background: #f5f5f5; display: inline-block; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .postbox-details-social a:hover { color: var(--ot-white-color); background: var(--ot-theme-color); } .postbox-details-form { padding: 40px 46px; background: #F5F5F5; border-radius: 8px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .postbox-details-form { padding: 20px; } } .postbox-details-form-title { font-weight: 600; font-size: 30px; line-height: 1; color: var(--ot-title-color); } .postbox-details-input input, .postbox-details-input textarea { height: 50px; background: var(--ot-white-color); resize: none; border-radius: 8px; } .postbox-details-input textarea { height: 130px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .postbox-details-input { margin-bottom: 15px; } } .postbox-details-remeber input { display: none; } .postbox-details-remeber input:checked ~ label::before { visibility: visible; opacity: 1; } .postbox-details-remeber label { position: relative; padding-left: 30px; font-weight: 500; font-size: 15px; line-height: 1; color: var(--ot-title-color); } .postbox-details-remeber label::after { position: absolute; content: ""; top: -3px; left: 0; width: 20px; height: 20px; transition: 0.3s; line-height: 16px; border-radius: 4px; text-align: center; border: 1px solid #C6C6C6; background: var(--ot-white-color); } .postbox-details-remeber label::before { position: absolute; content: url("../img/icon/check.svg"); top: -2px; left: 2px; width: 16px; height: 16px; line-height: 16px; text-align: center; visibility: hidden; opacity: 0; z-index: 33; transition: 0.3s; color: var(--ot-title-color); filter: invert(1); } .postbox-details-remeber label:hover { cursor: pointer; } .postbox-authore { gap: 30px; padding: 24px; border-radius: 12px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .postbox-authore { gap: 20px; padding: 20px; } } .postbox-authore-text { color: var(--ot-title-color2); } .postbox-authore-thumb { flex: 0 0 auto; } @media (max-width: 575px) { .postbox-authore-thumb { margin-bottom: 15px; } } .postbox-authore-thumb img { width: 144px; height: 138px; object-fit: cover; border-radius: 20px; } @media (max-width: 575px) { .postbox-authore-thumb img { width: 100%; } } .postbox-authore-title, .postbox-comments-name { font-weight: 700; font-size: 20px; text-transform: capitalize; color: var(--ot-title-color); margin-bottom: 0; line-height: 1; } @media (max-width: 575px) { .postbox-authore-title, .postbox-comments-name { font-size: 16px; } } .postbox-authore-date, .postbox-comments-date { font-size: 14px; font-weight: 400; line-height: 1; margin-bottom: 0; } .postbox-authore-social { display: flex; gap: 14px; } .postbox-authore-social a { font-size: 15px; color: var(--ot-white-color); } .postbox-navigation-icon { color: var(--ot-theme-color); } .postbox-navigation-content { gap: 13px; } @media (max-width: 575px) { .postbox-navigation-content { gap: 10px; } } .postbox-navigation-text { font-weight: 600; font-size: 18px; line-height: 1; text-transform: uppercase; color: var(--ot-title-color2); margin-bottom: 0; } @media (max-width: 575px) { .postbox-navigation-text { font-size: 14px; } } .postbox-video-btn a:hover { color: var(--ot-white-color); background: var(--ot-theme-color); } .postbox-arrow-box { position: absolute; width: 100%; top: 50%; z-index: 2; padding: 0 30px; transform: translateY(-50%); } .postbox-arrow { font-size: 24px; width: 60px; height: 60px; line-height: 60px; color: var(--ot-white-color); background: var(--ot-theme-color); border-radius: 5px; } .postbox-arrow:hover { color: var(--ot-title-color); background-color: var(--ot-white-color); } .postbox-sm-img img { width: 100%; border-radius: 10px; } .postbox-feature-list ul { display: grid; grid-template-columns: auto auto; padding-left: 0; } @media (min-width: 0) and (max-width: 767px) { .postbox-feature-list ul { grid-template-columns: auto; } } .postbox-feature-list ul li { font-weight: 500; font-size: 16px; line-height: 1.3; text-transform: capitalize; color: var(--ot-body-color); display: flex; } .postbox-feature-list ul li:not(:last-child) { margin-bottom: 0; } @media (max-width: 575px) { .postbox-feature-list ul li:not(:last-child) { margin-bottom: 10px; } } .postbox-feature-list ul li i { font-size: 16px; line-height: 26px; color: var(--ot-theme-color); margin-right: 5px; } .postbox-commentbox { padding: 40px; background: var(--ot-white-color); box-shadow: 0 6px 30px 0 rgba(0, 0, 0, 0.05); } @media (min-width: 0) and (max-width: 1199px) { .postbox-commentbox { padding: 20px; } } .postbox-commentbox .ot-postbox-title i { color: var(--ot-theme-color); } .postbox-commentbox ul { list-style: none; } .postbox-commentbox ul li.children { margin-left: 80px; } @media (max-width: 575px) { .postbox-commentbox ul li.children { margin-left: 20px; } } .postbox-commentbox ul li:last-child .postbox-comments { margin-bottom: 0; } .postbox-comments { gap: 20px; padding: 30px; border-radius: 10px; } @media (max-width: 575px) { .postbox-comments { padding: 20px; } } .postbox-comments-authore { flex: 0 0 auto; } @media (max-width: 575px) { .postbox-comments-authore { margin-bottom: 20px; } } .postbox-comments-authore img { width: 80px; height: 80px; object-fit: cover; border-radius: 5px; } .postbox-comments-date { color: var(--ot-title-color2); } .postbox-comments-replay { font-size: 16px; font-weight: 700; text-transform: uppercase; color: var(--ot-title-color2); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media (max-width: 575px) { .postbox-comments-replay { font-size: 14px; } } .postbox-comments-replay:hover { color: var(--ot-theme-color); } .postbox-bg { background: var(--ot-smoke-color); } /*----------------------------------------*/ /* 5.2 Sidebar css /*----------------------------------------*/ .ot-sidebar-widget-wrapp { width: 100%; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-sidebar-widget-wrapp { margin-top: 30px; } } .sidebar-widget { padding: 40px; margin-bottom: 40px; border-radius: 10px; background: var(--ot-smoke-color); } @media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 575px) { .sidebar-widget { padding: 15px; } } .sidebar-widget-content ul { list-style: none; } .sidebar-widget-content ul li:not(:last-child) { margin-bottom: 9px; } .sidebar-widget-content ul li a { width: 100%; font-size: 18px; font-weight: 600; padding: 16px 18px; color: var(--ot-title-color); display: inline-block; text-transform: capitalize; border: 1px solid var(--ot-border-color); border-radius: 8px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .sidebar-widget-content ul li a { padding: 16px; } } @media (max-width: 575px) { .sidebar-widget-content ul li a { font-size: 16px; } } .sidebar-widget-content ul li a:hover { color: var(--ot-white-color); border-color: var(--ot-theme-color); background: var(--ot-theme-color); } .sidebar-widget-content ul li a:hover .sidebar-widget-icon { filter: brightness(0) invert(1); } .sidebar-widget-title { position: relative; color: var(--ot-title-color); font-size: 30px; font-weight: 700; padding-bottom: 15px; text-transform: capitalize; border-bottom: 3px solid var(--ot-border-color); } .sidebar-widget-title::after { position: absolute; width: 30px; height: 3px; bottom: -3px; left: 0; content: ""; background: var(--ot-theme-color); border-radius: 100px; } .sidebar-widget-icon { margin-right: 12px; } .sidebar-widget-btn .ot-btn-primary { padding: 11.5px 33px; border-radius: 6px; } .sidebar-widget-download-box { display: flex; padding: 8px 20px 8px 8px; border-radius: 8px; align-items: center; justify-content: space-between; border: 1px solid #E8EBF5; background: #F8F9FD; } .sidebar-widget-download-box:not(:last-child) { margin-bottom: 8px; } .sidebar-widget-download-icon { width: 45px; height: 45px; line-height: 42px; text-align: center; display: inline-block; background: var(--ot-theme-color); border-radius: 6px; margin-right: 10px; } .sidebar-widget-download-text { color: var(--ot-title-color); font-size: 16px; font-weight: 500; text-transform: capitalize; } .sidebar-widget-download-link i { font-size: 20px; color: var(--ot-title-color); } .sidebar-widget-table { padding: 35px 30px 0 30px; border: 1px solid #E5E5E5; background-color: #F5F5F5; border-radius: 15px; } .sidebar-widget-contact-box { width: 100%; display: inline-block; padding: 19px; background: var(--ot-theme-color); border-radius: 8px; } .sidebar-widget-contact-box:not(:last-child) { margin-bottom: 8px; } .sidebar-widget-contact-icon { margin-right: 10px; } .sidebar-widget-contact-text { font-size: 18px; font-weight: 500; color: var(--ot-white-color); text-transform: capitalize; margin-bottom: 0; } .sidebar-widget-categorie ul { list-style: none; } .sidebar-widget-categorie ul li a { color: var(--ot-title-color); font-size: 17px; font-weight: 500; text-transform: capitalize; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .sidebar-widget-categorie ul li a:hover { color: var(--ot-theme-color); } .sidebar-widget-categorie ul li a:hover span { color: var(--ot-theme-color); } .sidebar-widget-categorie ul li a span { color: #4B4B4B; font-size: 16px; font-weight: 400; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .sidebar-widget-categorie ul li:not(:last-child) { padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid #DEE0EC; } .sidebar-info-title { font-size: 24px; font-weight: 700; text-transform: capitalize; color: var(--ot-title-color2); } .sidebar-info-text { color: var(--ot-title-color); text-transform: capitalize; } .sidebar-info-item { display: flex; gap: 15px; align-items: start; } .sidebar-info-item .sidebar-info-text { font-weight: 600; font-size: 16px; color: var(--ot-title-color); line-height: 1; margin-bottom: 5px; } .sidebar-info-item:not(:last-child) { margin-bottom: 10px; } .sidebar-info-item:hover .sidebar-info-icon { color: var(--ot-white-color); background-color: var(--ot-theme-color); } .sidebar-info-icon { font-size: 16px; width: 35px; height: 35px; line-height: 35px; text-align: center; color: var(--ot-theme-color); border: 1px solid var(--ot-theme-color); border-radius: 6px; flex: 0 0 auto; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .sidebar-info-link { font-weight: 600; font-size: 16px; color: var(--ot-body-color); } .sidebar-table-style tr:last-child { border: transparent; } .sidebar-table-style tr td { padding: 12px 0; background-color: transparent; } .sidebar-tag-title { color: var(--ot-title-color); font-size: 16px; font-weight: 600; text-transform: capitalize; } .sidebar-tag-name { color: #4B4B4B; } .sidebar-social-icon { font-size: 15px; color: var(--ot-body-color); } .sidebar-social-icon:hover { color: var(--ot-theme-color); } .sidebar-social-icon:not(:last-child) { margin-right: 10px; } .sidebar-search-box { padding: 40px; border-radius: 10px; background: var(--ot-smoke-color); } @media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 575px) { .sidebar-search-box { padding: 15px; } } .sidebar-search-input { position: relative; } .sidebar-search-input input { height: 56px; padding-right: 70px; border: 1px solid #E0E1E9; border-radius: 30px; text-transform: capitalize; background-color: var(--ot-white-color); border: 0; } .sidebar-search-input input:focus { border: 0; } .sidebar-search-btn { position: absolute; width: 56px; height: 56px; right: 0; top: 50%; transform: translateY(-50%); line-height: 56px; text-align: center; color: var(--ot-white-color); background: var(--ot-theme-color); border-radius: 0 30px 30px 0; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .sidebar-search-btn img { filter: brightness(0) invert(1); } .sidebar-search-btn:hover { background: var(--ot-title-color); } .tagcloud a { color: var(--ot-white-color); font-size: 14px; font-weight: 500; padding: 5px 14px; border-radius: 4px; display: inline-block; text-transform: capitalize; background-color: var(--ot-theme-color); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tagcloud a:hover { color: var(--ot-white-color); background-color: var(--ot-title-color); } .tagcloud a:not(:last-child) { margin-bottom: 5px; margin-right: 2px; } /*----------------------------------------*/ /* 5.4 Blog css /*----------------------------------------*/ .ot-blog-card { position: relative; padding: 0 0 30px 30px; background: var(--ot-white-color); box-shadow: 0 10px 50px 0 rgba(0, 0, 0, 0.08); border-radius: 20px; overflow: hidden; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media (max-width: 575px) { .ot-blog-card { padding: 0 0 20px 20px; } } .ot-blog-card:hover { background-color: var(--ot-theme-color); } .ot-blog-card:hover .ot-img-hover::before { animation: shine 1s; } .ot-blog-card:hover .ot-blog-content .ot-box-title a { color: var(--ot-white-color); } .ot-blog-card:hover .ot-blog-meta-text { color: var(--ot-white-color); } .ot-blog-card:hover .ot-blog-meta-text i { color: var(--ot-white-color); } .ot-blog-card:hover .ot-btn-arrow-primary { color: var(--ot-white-color); } .ot-blog-card:hover .ot-btn-arrow-primary .arrow-icon { color: var(--ot-title-color); background-color: var(--ot-white-color); } .ot-blog-card:hover .ot-btn-arrow-primary .arrow-icon::before { border-color: var(--ot-white-color); } .ot-blog-card-shape { position: absolute; bottom: 0; right: 0; } .ot-blog-img1 { height: 100%; margin-bottom: 15px; border: 15px solid var(--ot-smoke-color); border-right: 0; border-top: 0; border-radius: 0 20px 0 30px; } .ot-blog-img1 img { width: 100%; height: 100%; object-fit: cover; border-radius: 0 20px; } .ot-blog-categorie { position: absolute; left: 0; bottom: 0; font-size: 16px; font-weight: 600; color: var(--ot-white-color); background: var(--ot-theme-color); text-transform: uppercase; padding: 7px 23px 7px 24px; border-radius: 0 20px 20px 19px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; z-index: 2; } .ot-blog-content { padding-right: 30px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .ot-blog-content .ot-box-title { font-size: 20px; } } .ot-blog-content .ot-box-title a { line-height: 1.4; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-blog-meta-text { font-weight: 700; font-size: 16px; color: var(--ot-body-color); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-blog-meta-text:not(:last-child) { margin-right: 5px; } .ot-blog-meta-text i { margin-right: 5px; color: var(--ot-theme-color); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-blog-btn .ot-btn-arrow-primary { color: var(--ot-title-color); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-blog-active { padding-bottom: 50px; } @media (max-width: 575px) { .ot-blog-active { padding-bottom: 0; } } .ot-blog-card-wrapp { padding: 0 0 0 40px; border-radius: 10px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .ot-blog-card-wrapp { padding: 0 0 0 15px; } } @media (max-width: 575px) { .ot-blog-card-wrapp { padding: 15px; } } .ot-blog-card-2:not(:last-child) { position: relative; margin-bottom: 40px; padding-bottom: 20px; } .ot-blog-card-2:not(:last-child)::after { position: absolute; bottom: 0; left: 0; width: 89%; height: 1px; content: ""; border-bottom: 1px dashed var(--ot-border-color); } .ot-blog-card-2 .ot-box-title { display: block; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-blog-card-2 .ot-box-title { font-size: 20px; } } .ot-blog-card-2 .ot-blog-content { max-width: 350px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-blog-card-2 .ot-blog-content { max-width: 100%; } } .ot-blog-card-2.blog-right { position: relative; border-radius: 10px; } .ot-blog-card-2.blog-right .ot-blog-post-date { position: absolute; top: 40px; left: 40px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-blog-card-2.blog-right .ot-blog-post-date { top: 15px; left: 15px; } } .ot-blog-card-2.blog-right .ot-blog-content { padding: 37px 30px 30px 40px; max-width: 100%; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .ot-blog-card-2.blog-right .ot-blog-content { padding: 37px 15px 30px 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-blog-card-2.blog-right .ot-blog-content { padding: 15px; } } .ot-blog-card-2.blog-right .ot-blog-img2 { border-radius: 10px 10px 0 0; } .ot-blog-card-2.blog-right .ot-blog-img2 img { border-radius: 10px 10px 0 0; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-blog-card-box { padding-top: 10px; } } .ot-blog-post-date { padding: 9.5px 18px; font-size: 30px; font-weight: 700; line-height: 1.1; text-align: center; display: inline-block; border-radius: 10px; background-color: var(--ot-theme-color); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-blog-post-date { margin-bottom: 10px; } } .ot-blog-post-date .month { display: block; font-size: 14px; font-weight: 600; text-transform: uppercase; } .ot-blog-meta-icon { line-height: 1; } .ot-blog-meta-text { position: relative; line-height: 1; } .ot-blog-meta-text:not(:first-child) { padding-left: 20px; } @media (max-width: 575px) { .ot-blog-meta-text:not(:first-child) { padding-left: 5px; } } .ot-blog-meta-text:not(:first-child)::after { position: absolute; top: 50%; left: 0; width: 1px; height: 12px; content: ""; transform: translateY(-50%); background: var(--ot-border-color); } .ot-blog-img2 img { width: 100%; height: 100%; object-fit: cover; border-radius: 0 10px 10px 0; } @media (max-width: 575px) { .ot-blog-img2 img { height: 240px; border-radius: 10px; } } .ot-blog-overlay { position: relative; } .ot-blog-overlay::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; background: var(--ot-smoke-color2); opacity: 0.8; } .ot-blog-card-3 { display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; background: var(--ot-title-color); border-radius: 10px; height: 100%; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-blog-card-3 .ot-blog-img3 { padding: 15px; border-radius: 10px; } .ot-blog-card-3 .ot-blog-img3 a img { width: 100%; border-radius: 10px; } .ot-blog-card-3 .ot-blog-content { padding: 30px; padding-top: 40px; } @media (max-width: 575px) { .ot-blog-card-3 .ot-blog-content { padding: 15px; } } .ot-blog-card-3 .ot-blog-content .ot-box-title { padding-bottom: 15px; margin-bottom: 25px; border-bottom: 1px dashed var(--ot-white-color); } .ot-blog-card-3::before { position: absolute; width: 100%; height: 190px; top: -100%; left: 0; content: ""; opacity: 0; visibility: hidden; background: var(--ot-theme-color2); border-radius: 10px 10px 50px 50px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-blog-user-avater { flex: 0 0 auto; } .ot-blog-user-avater img { width: 45px; height: 45px; object-fit: cover; border-radius: 100%; border: 1.5px solid var(--ot-theme-color); } .ot-blog-userbox { position: absolute; bottom: -10px; left: 60px; right: 60px; padding: 10px; background-color: var(--ot-theme-color); border-radius: 60px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media (max-width: 575px) { .ot-blog-userbox { left: 20px; right: 20px; bottom: 0; } } .ot-blog-user-title { font-weight: 700; font-size: 16px; text-align: center; margin-bottom: 0; color: var(--ot-white-color); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-blog-user-text { font-size: 16px; font-weight: 500; margin-bottom: 0; color: var(--ot-white-color); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-blog-btn3 .ot-btn-arrow-primary > .arrow-icon { color: var(--ot-theme-color); background-color: var(--ot-white-color); } .ot-blog-active3 .swiper-slide-active .ot-blog-card-3 { background: var(--ot-theme-color); } .ot-blog-active3 .swiper-slide-active .ot-blog-card-3::before { opacity: 1; top: 0; visibility: visible; } @media (max-width: 575px) { .ot-blog-active3 .swiper-slide-active .ot-blog-card-3::before { top: -50px; } } .ot-blog-active3 .swiper-slide-active .ot-blog-card-3 .ot-blog-userbox { background: var(--ot-smoke-color); } .ot-blog-active3 .swiper-slide-active .ot-blog-card-3 .ot-blog-user-title { color: var(--ot-title-color); } .ot-blog-active3 .swiper-slide-active .ot-blog-card-3 .ot-blog-user-text { color: var(--ot-body-color); } .ot-blog-active3 .swiper-slide-active .ot-blog-card-3 .ot-blog-btn3 .ot-btn-arrow-primary > .arrow-icon::before { border-color: var(--ot-white-color); } .ot-blog-active3 .swiper-slide-active .ot-blog-card-3 .ot-blog-meta-icon i { color: var(--ot-white-color); } .ot-blog-active3.e-commerce-blog .ot-blog-card-3 { background: var(--ot-ecommerce-bg1); } .ot-blog-active3.e-commerce-blog .ot-blog-post-date { position: absolute; bottom: 15px; left: 35px; } .ot-blog-active3.e-commerce-blog .swiper-slide-active .ot-blog-card-3 { background: var(--ot-theme-color); } .ot-blog-active3.e-commerce-blog .swiper-slide-active .ot-blog-card-3::before { display: none; } @media only screen and (min-width: 768px) and (max-width: 991px) { .ot-blog-titlebox4 { margin-bottom: 40px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .ot-blog-titlebox4 { margin-bottom: 30px; } } @media (max-width: 575px) { .ot-blog-titlebox4 { margin-bottom: 20px; } } .ot-blog-card-4 { padding: 30px; z-index: 2; overflow: hidden; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 991px) { .ot-blog-card-4 { padding: 24px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-blog-card-4 { padding: 15px; } } .ot-blog-card-4 .ot-blog-content { padding: 0; } .ot-blog-card-4 .ot-blog-share { color: var(--ot-title-color); } .ot-blog-card-4 .ot-box-title { padding-bottom: 15px; margin-bottom: 25px; border-bottom: 2px dashed var(--ot-border-color); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-blog-card-4 .ot-box-title { font-size: 20px; } } .ot-blog-card-4:hover .ot-img-hover::before { animation: shine 1s; } .ot-blog-card-4:hover .ot-img-hover img { transform: scale(1.1); } .ot-blog-card-4:hover::after { border-color: var(--ot-theme-color); } .ot-blog-card-4::after { position: absolute; width: 90%; height: 90%; top: 16px; right: 16px; content: ""; border-left: 0; border-bottom: 0; border-radius: 20px; border: 10px solid var(--ot-title-color); z-index: -1; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-blog-bg-mask { width: 100%; height: 100%; background: var(--ot-white-color); position: absolute; top: 0; left: 0; } .ot-blog-border-mask { position: absolute; inset: 0; } .ot-blog-border-mask img { width: 100%; height: 100%; } .ot-blog-border { position: absolute; width: 356px; height: 247px; top: 16px; right: 16px; border-radius: 20px; border: 10px solid var(--ot-title-color); } .ot-blog-img4 { overflow: hidden; border-radius: 20px; } .ot-blog-img4 img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; transition: 1.3s; } .ot-blog-btn4 .ot-btn-arrow-primary { color: var(--ot-title-color); } .ot-blog-btn4 .ot-btn-arrow-primary:hover .arrow-icon { background: var(--ot-theme-color); } .ot-blog-btn4 .ot-btn-arrow-primary:hover .arrow-icon::before { border-color: var(--ot-theme-color); } .ot-blog-btn4 .arrow-icon { background: var(--ot-title-color); } .ot-blog-btn4 .arrow-icon::before { border-color: var(--ot-title-color); } .ot-blog-details-wrapp .postbox-details-content { padding-bottom: 0; } .ot-blog-details-wrapp .postbox-content-wrapp { background: var(--ot-white-color); box-shadow: 0 6px 30px 0 rgba(0, 0, 0, 0.05); } .ot-blog-details-wrapp .postbox-content { padding: 40px; padding-top: 0; } @media (min-width: 0) and (max-width: 1199px) { .ot-blog-details-wrapp .postbox-content { padding: 20px; } } .ot-blog-social .ot-social-style-1 a { font-size: 14px; width: 40px; height: 40px; line-height: 40px; border-radius: 4px; color: var(--ot-title-color2); background-color: var(--ot-smoke-color); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media (max-width: 575px) { .ot-blog-social .ot-social-style-1 a { width: 35px; height: 35px; line-height: 35px; } } .ot-blog-social .ot-social-style-1 a:hover { color: var(--ot-white-color); background-color: var(--ot-theme-color); } .ot-blog-tag-title, .ot-blog-social-title { font-weight: 700; font-size: 20px; line-height: 1; color: var(--ot-title-color2); margin-bottom: 0; } @media (max-width: 575px) { .ot-blog-tag-title, .ot-blog-social-title { font-size: 16px; } } .ot-blog-tag { font-size: 14px; padding: 10px 24.4px; border-radius: 5px; color: var(--ot-body-color); background: transparent; border: 1px solid var(--ot-border-color); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media (max-width: 575px) { .ot-blog-tag { padding: 10px 15px; } } .ot-blog-tag:not(:last-child) { margin-right: 5px; } .ot-blog-tag:hover { color: var(--ot-white-color); background: var(--ot-theme-color); border: 1px solid var(--ot-theme-color); } .ot-blog-tag.active { color: var(--ot-white-color); background: var(--ot-theme-color); border: 1px solid var(--ot-theme-color); } .ot-blog-wrapp2 .ot-blog-card { padding: 0; border-radius: 0; background: none; box-shadow: none; } .ot-blog-wrapp2 .ot-blog-card:hover .ot-blog-content { background-color: var(--ot-theme-color); } .ot-blog-wrapp2 .ot-blog-card:hover .ot-blog-content .ot-blog-share { color: var(--ot-white-color); } .ot-blog-wrapp2 .ot-blog-card:hover .ot-blog-content .theme-text1 { color: var(--ot-white-color) !important; } .ot-blog-wrapp2 .ot-blog-img1 { border: 0; border-radius: 0; margin-bottom: 0; } .ot-blog-wrapp2 .ot-blog-img1 img { border-radius: 10px; } @media (max-width: 575px) { .ot-blog-wrapp2 .ot-blog-img1 img { border-radius: 10px 10px 0 0; } } .ot-blog-wrapp2 .ot-blog-content { border-radius: 10px; background-color: var(--ot-smoke-color); padding: 30px; margin: 0 20px; top: -60px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media (max-width: 575px) { .ot-blog-wrapp2 .ot-blog-content { margin: 0; top: 0; padding: 20px; border-radius: 0 0 10px 10px; } } .ot-blog-wrapp2 .ot-blog-categorie { left: 20px; top: 20px; font-weight: 700; padding: 14px 24px; border-radius: 30px; display: inline-table; } .ot-blog-wrapp2 .ot-blog-share { color: var(--ot-theme-color); } .ot-blog-style-3 { padding-top: 440px; } .ot-blog-overlay-2 { position: relative; } .ot-blog-overlay-2::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; background: var(--ot-smoke-color); opacity: 0.8; } .ot-blog-card-5 { border-radius: 10px; background: var(--ot-white-color); gap: 30px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-blog-card-5 .ot-blog-img { position: relative; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-blog-card-5 .ot-blog-img { width: 100%; margin-bottom: 20px; } } .ot-blog-card-5 .ot-blog-img img { border-radius: 10px; max-width: none; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-blog-card-5 .ot-blog-img img { width: 100%; } } .ot-blog-card-5 .ot-blog-img .ot-blog-post-date { position: absolute; top: 0; left: 0; color: var(--ot-title-color); background: var(--ot-white-color); border-radius: 0 0 10px 0; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-blog-card-5 .ot-sec-subtitle { color: var(--ot-white-color); background-color: var(--ot-theme-color); margin-bottom: 20px; } .ot-blog-card-5 .ot-blog-share { color: var(--ot-theme-color); } .ot-blog-card-5:hover { background-color: var(--ot-theme-color); color: var(--ot-white-color); } .ot-blog-card-5:hover .ot-sec-subtitle { color: var(--ot-title-color); background-color: var(--ot-white-color); } .ot-blog-card-5:hover .ot-box-title, .ot-blog-card-5:hover .ot-sec-text, .ot-blog-card-5:hover .ot-blog-share, .ot-blog-card-5:hover .theme-text1 { color: var(--ot-white-color); } .ot-blog-card-5:hover .arrow-icon { color: var(--ot-theme-color); background-color: var(--ot-white-color); } .ot-blog-card-5:hover .arrow-icon::before { border: 1.5px dashed var(--ot-white-color); } .ot-blog-card-5:hover .ot-blog-img .ot-blog-post-date { color: var(--ot-white-color); background: var(--ot-theme-color); } .ot-blog-card-5:hover .ot-img-hover::before { animation: shine 1s; } .ot-blog-card-5 .ot-box-title { line-height: 1.4; } .ot-blog-card-5 .img-2 img { width: 100%; } .ot-blog-card-5 .ot-box-title { display: block; } .ot-blog-style-2 .ot-blog-card-5 { background: var(--ot-smoke-color); border-radius: 300px 300px 0 0; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-blog-style-2 .ot-blog-card-5:hover { background-color: var(--ot-theme-color); } .ot-blog-style-2 .ot-blog-card-5:hover .ot-blog-meta-text, .ot-blog-style-2 .ot-blog-card-5:hover .ot-blog-meta-text i { color: var(--ot-white-color); } .ot-blog-style-2 .ot-blog-card-5 .ot-blog-post-date { position: absolute; left: 0; bottom: -20px; border-radius: 0; top: auto; } .ot-blog-style-2 .ot-blog-card-5 .style-4 .ot-blog-post-date { top: 0; bottom: auto; } .ot-blog-style-2 .ot-blog-img { position: relative; } .ot-blog-style-2 .ot-blog-img img { width: 100%; border-radius: 300px 300px 0 0; } .ot-blog-style-2 .ot-blog-content { padding: 30px; } .ot-blog-active5 .swiper-slide-active .ot-blog-card-5 { background-color: var(--ot-theme-color); color: var(--ot-white-color); } .ot-blog-active5 .swiper-slide-active .ot-blog-card-5 .ot-box-title, .ot-blog-active5 .swiper-slide-active .ot-blog-card-5 .ot-sec-text, .ot-blog-active5 .swiper-slide-active .ot-blog-card-5 .ot-blog-share, .ot-blog-active5 .swiper-slide-active .ot-blog-card-5 .theme-text1, .ot-blog-active5 .swiper-slide-active .ot-blog-card-5 .ot-blog-meta-text, .ot-blog-active5 .swiper-slide-active .ot-blog-card-5 .ot-blog-meta-text i { color: var(--ot-white-color); } .ot-blog-active5 .swiper-slide-active .ot-blog-card-5 .ot-sec-subtitle { color: var(--ot-title-color); background-color: var(--ot-white-color); } .ot-blog-active5 .swiper-slide-active .ot-blog-card-5 .arrow-icon { color: var(--ot-theme-color); background-color: var(--ot-white-color); } .ot-blog-active5 .swiper-slide-active .ot-blog-card-5 .arrow-icon::before { border: 1.5px dashed var(--ot-white-color); } .ot-blog-active5 .swiper-slide-active .ot-blog-card-5 .ot-blog-post-date { color: var(--ot-white-color); background: var(--ot-theme-color); } .ot-blog-card-style-2 .ot-blog-card-5 { border-radius: 0 0 300px 300px; } .ot-blog-card-style-2 .ot-blog-img img { border-radius: 0 0 300px 300px; } .p-10 { padding: 10px; } .p-30 { padding: 30px; } /*----------------------------------------*/ /* 5.3 Recent Post css /*----------------------------------------*/ .rc-post { gap: 15px; } .rc-post:not(:last-child) { margin-bottom: 30px; } .rc-post:hover .ot-img-hover::before { animation: shine 1s; } .rc-post-title { color: var(--ot-title-color); font-size: 18px; font-weight: 700; text-transform: capitalize; margin-bottom: 0; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 575px) { .rc-post-title { font-size: 15px; } } .rc-post-title:hover { color: var(--ot-theme-color); } .rc-post-thumb { flex: 0 0 auto; } .rc-post-thumb a img { width: 90px; height: 90px; border-radius: 8px; } .rc-post-meta { margin-bottom: 10px; } .rc-post-meta span { color: #4B4B4B; font-size: 14px; font-weight: 500; margin-bottom: 0; margin-left: 5px; } /*----------------------------------------*/ /* 6.1 Footer Style 1 /*----------------------------------------*/ .ot-footer-widget-link ul { list-style: none; } .ot-footer-widget-link ul li:not(:last-child) { margin-bottom: 5px; } .ot-footer-widget-link ul li a { position: relative; color: var(--ot-white-color); padding-left: 18px; display: inline-block; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-footer-widget-link ul li a:hover { color: var(--ot-theme-color2); } .ot-footer-widget-link ul li a:hover > i { color: var(--ot-theme-color2); } .ot-footer-widget-link ul li a i { position: absolute; left: 0; top: 6px; font-size: 14px; color: var(--ot-theme-color); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-footer-widget-title { position: relative; font-size: 24px; font-weight: 700; color: var(--ot-white-color); padding-bottom: 15px; } .ot-footer-widget-title:after { position: absolute; content: ""; width: 140px; height: 2px; bottom: 0; left: 0; background: linear-gradient(270deg, rgb(0, 57, 115) 0%, rgb(134, 187, 70) 50%); } .ot-footer-gallery-box { display: flex; flex-wrap: wrap; gap: 14px; } @media (max-width: 575px) { .ot-footer-gallery-box { gap: 8px; } } .ot-footer-gallery-thumb { position: relative; overflow: hidden; } .ot-footer-gallery-thumb a img { width: 91px; height: 88px; object-fit: cover; border-radius: 10px; border: 3px solid var(--ot-theme-color); } .ot-footer-gallery-thumb:hover .ot-footer-gallery-icon { opacity: 0.9; visibility: visible; color: var(--ot-white-color); } .ot-footer-gallery-thumb:hover a img { border: 3px solid rgba(134, 187, 70, 0.79); } .ot-footer-gallery-icon { position: absolute; width: 100%; height: 100%; top: 0; left: 0; right: 0; font-size: 24px; line-height: 85px; color: var(--ot-white-color); display: inline-block; text-align: center; background-color: rgba(134, 187, 70, 0.79); border-radius: 10px; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-footer-shape-left { position: absolute; top: 0; left: 0; } .ot-footer-shape-right { position: absolute; bottom: 0; right: 0; } .ot-footer-shape { content: ""; position: absolute; top: 110px; left: -60px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-footer-widget { margin-bottom: 40px; } } .ot-footer-textslider { overflow: hidden; } .footer-col-1-1 .ot-sec-text { max-width: 275px; } .footer-col-1-2 { margin-left: 50px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .footer-col-1-2 { margin-left: 15px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer-col-1-2 { margin-left: 0; } } .footer-col-1-3 { margin-left: 60px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .footer-col-1-3 { margin-left: 15px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer-col-1-3 { margin-left: 0; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .footer-col-1-4 { margin-left: -60px; } } .ot-copyright-list-box ul { list-style: none; } .ot-copyright-list-box ul li { position: relative; display: inline-block; } .ot-copyright-list-box ul li:not(:last-child) { padding-right: 60px; } .ot-copyright-list-box ul li:not(:last-child)::after { position: absolute; width: 5px; height: 5px; top: 50%; right: 35px; content: ""; background: var(--ot-white-color); transform: translateY(-50%); border-radius: 100px; } .ot-copyright-list-box ul li a { color: var(--ot-white-color); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-copyright-list-box ul li a:hover { color: var(--ot-theme-color); } .ot-copyright-text a { color: var(--ot-theme-color2); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-copyright-text a:hover { color: var(--ot-theme-color); } /*----------------------------------------*/ /* 6.2 Footer Style 2 /*----------------------------------------*/ .ot-footer-overlay-2 { position: relative; } .ot-footer-overlay-2::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 34, 68, 0.2); } .ot-footer-title { font-size: 36px; font-weight: 700; line-height: 1.2; text-transform: capitalize; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .ot-footer-title { font-size: 24px; } } @media (max-width: 575px) { .ot-footer-title { font-size: 20px; } } .ot-footer-2-wrapp { border: 1px dashed rgba(255, 255, 255, 0.2); } .ot-footer-2-content { padding: 60px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .ot-footer-2-content { padding: 30px; } } @media (max-width: 575px) { .ot-footer-2-content { padding: 20px; } } .ot-footer-info-list:not(:last-child) { margin-bottom: 10px; } .ot-footer-info-list:hover .ot-footer-info-icon { color: var(--ot-title-color); background-color: var(--ot-white-color); } .ot-footer-info-icon { width: 44px; height: 44px; line-height: 44px; text-align: center; color: var(--ot-white-color); background-color: var(--ot-theme-color); border-radius: 5px; flex: 0 0 auto; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-footer-info-text { font-size: 16px; font-weight: 500; line-height: 1.6; color: var(--ot-white-color); display: inline-block; margin-bottom: 0; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-footer-info-text:hover { color: var(--ot-theme-color); } .ot-footer-user-box .ot-user-text { font-size: 20px; font-weight: 700; line-height: 1.5; margin-bottom: 0; max-width: 200px; } .ot-footer-cta-wrapp { padding: 40px; border-top: 1px dashed rgba(255, 255, 255, 0.2); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .ot-footer-cta-wrapp { padding: 30px; } } @media (max-width: 575px) { .ot-footer-cta-wrapp { padding: 20px; } } .ot-footer-logo-2 { top: 65px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .ot-footer-logo-2 { top: 20px; } } @media (max-width: 575px) { .ot-footer-logo-2 { top: 10px; } } .footer-border-style { position: relative; } .footer-border-style::before, .footer-border-style::after { position: absolute; content: ""; top: -130px; left: 0; height: 200%; border-right: 1px dashed rgba(255, 255, 255, 0.2); border-left: 1px dashed rgba(255, 255, 255, 0.2); } .footer-border-style::after { left: auto; right: 0; } .footer-col-2-1 .ot-footer-title { max-width: 450px; } .footer-col-2-1 .ot-newsletter-form { max-width: 412px; } .ot-copyright-2-wrapp { padding: 30px; border-bottom: 1px dashed rgba(255, 255, 255, 0.2); } .ot-copyright-list-box2 ul li { display: inline-block; } .ot-copyright-list-box2 ul li:not(:last-child) { margin-right: 10px; } .ot-copyright-list-box2 ul li a { color: var(--ot-white-color); } .ot-copyright-list-box2 ul li a:hover { color: var(--ot-theme-color2); } .ot-copyright-list-box2 ul li a .dvr { margin-left: 10px; } .ot-copyright-list-box2.dot-style ul li { position: relative; } .ot-copyright-list-box2.dot-style ul li:not(:last-child) { padding-right: 25px; margin-right: 15px; } @media (max-width: 575px) { .ot-copyright-list-box2.dot-style ul li:not(:last-child) { padding-right: 15px; margin-right: 5px; } } .ot-copyright-list-box2.dot-style ul li:not(:last-child)::after { position: absolute; right: 0; top: 10px; width: 5px; height: 5px; content: ""; background: var(--ot-white-color); border-radius: 100px; } .ot-copyright-2 .ot-social-style-2 a { padding: 10px 20px; } /*----------------------------------------*/ /* 6.3 Footer Style 3 /*----------------------------------------*/ @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-footer-layout3 .ot-footer-title { font-size: 26px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-footer-layout3 .ot-footer-widget { margin-bottom: 40px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-footer-layout3 .ot-footer-info-link { font-size: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-footer-layout3 .ot-footer-logo { margin-bottom: 20px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-footer-layout3 .ot-copyright-content { margin-bottom: 0; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-footer-layout3 .ot-social-style-2 { margin-bottom: 20px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-footer-layout3 .ot-social-style-2 { flex-wrap: wrap; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-footer-layout3 .ot-social-style-2 a { padding: 12px 18px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ot-footer-layout3 .ot-social-style-2 a { padding: 16px 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .ot-footer-layout3 .ot-social-style-2 a { padding: 16px 20px; } } .ot-footer-overlay-3 { position: relative; } .ot-footer-overlay-3:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.9; background-color: var(--ot-title-color); } .ot-footer-info-text { display: block; } .ot-footer-info-link { font-weight: 700; font-size: 24px; color: var(--ot-white-color); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-footer-info-link:hover { color: var(--ot-theme-color); } .footer-col-3-1 .ot-newsletter-input input { border: 1px solid rgba(255, 255, 255, 0.17); background: var(--ot-title-color); padding-right: 65px; color: var(--ot-white-color); } .footer-col-3-1 .ot-newsletter-input input::placeholder { color: var(--ot-white-color); } .footer-col-3-3 { margin-left: -22px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .footer-col-3-3 { margin-left: -60px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer-col-3-3 { margin-left: 0; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .footer-col-3-4 { margin-left: -60px; } } .ot-copyright-overlay { position: relative; } .ot-copyright-overlay::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.94; background-color: var(--ot-smoke-color2); } .copyright-space-3 { padding: 12px 110px; padding-bottom: 0; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .copyright-space-3 { padding: 12px 28px; padding-bottom: 0; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .copyright-space-3 { padding: 12px 0; padding-bottom: 0; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .copyright-space-3 { padding: 30px 0; } } /*----------------------------------------*/ /* 6.4 Footer Style 4 /*----------------------------------------*/ .ot-footer-layout4 .ot-footer-info-text { display: block; margin-bottom: 0; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ot-footer-layout4 .ot-footer-logo { margin-bottom: 40px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .ot-footer-layout4 .ot-footer-logo { margin-bottom: 40px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .ot-footer-layout4 .ot-footer-logo { margin-bottom: 40px; } } @media (max-width: 575px) { .ot-footer-layout4 .ot-footer-logo { margin-bottom: 40px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .ot-footer-layout4 .ot-footer-wrapp { margin-bottom: 50px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .ot-footer-layout4 .ot-footer-wrapp { margin-bottom: 40px; } } @media (max-width: 575px) { .ot-footer-layout4 .ot-footer-wrapp { margin-bottom: 40px; } } .ot-footer-layout4 .ot-social-style-1 a { background: rgba(93, 114, 138, 0.1); } .ot-footer-layout4 .ot-footer-newsletter-box { max-width: 466px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-footer-layout4 .ot-footer-newsletter-box { max-width: 435px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ot-footer-layout4 .ot-footer-newsletter-box { max-width: 100%; margin-bottom: 60px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .ot-footer-layout4 .ot-footer-newsletter-box { max-width: 100%; margin-bottom: 60px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .ot-footer-layout4 .ot-footer-newsletter-box { max-width: 100%; margin-bottom: 60px; } } @media (max-width: 575px) { .ot-footer-layout4 .ot-footer-newsletter-box { max-width: 100%; margin-bottom: 60px; } } .ot-footer-layout4 .ot-footer-newsletter-title { line-height: 1; } .ot-footer-layout4 .ot-footer-social-box { margin-left: -30px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-footer-layout4 .ot-footer-social-box { margin-left: 0; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ot-footer-layout4 .ot-footer-social-box { margin-left: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .ot-footer-layout4 .ot-footer-social-box { margin-left: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .ot-footer-layout4 .ot-footer-social-box { margin-left: 0; } } @media (max-width: 575px) { .ot-footer-layout4 .ot-footer-social-box { margin-left: 0; } } .ot-footer-layout4 .ot-footer-widget { margin-bottom: 0; } .ot-footer-overlay-4 { position: relative; } .ot-footer-overlay-4:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.9; background-color: var(--ot-title-color); } .ot-footer-newsletter-title { font-size: 24px; font-weight: 700; } @media (max-width: 575px) { .ot-footer-newsletter-title { font-size: 20px; margin-bottom: 20px; } } .ot-footer-newsletter-box { padding: 60px 40px; background: rgba(255, 255, 255, 0.1); } @media (max-width: 575px) { .ot-footer-newsletter-box { padding: 40px 20px; } } .ot-footer-newsletter-box .ot-newsletter-input input { height: 56px; border-radius: 5px; padding-right: 75px; } .ot-footer-newsletter-box .ot-newsletter-arrow-btn { position: absolute; font-size: 20px; top: 50%; right: 0; transform: translateY(-50%); width: 56px; height: 56px; line-height: 60px; text-align: center; border-radius: 0 5px 5px 0; } .ot-footer-newsletter-box .ot-newsletter-arrow-btn:hover { color: var(--ot-white-color); background-color: var(--ot-title-color); } .ot-footer-social-box { margin-top: 50px; padding-top: 40px; border-top: 1px solid rgba(216, 221, 225, 0.3); } .footer-col-4-2 { margin-left: -30px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .footer-col-4-2 { margin-left: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .footer-col-4-2 { margin-left: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .footer-col-4-2 { margin-left: 0; } } @media (max-width: 575px) { .footer-col-4-2 { margin-left: 0; } } .footer-col-4-3 { margin-left: -50px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .footer-col-4-3 { margin-left: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .footer-col-4-3 { margin-left: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .footer-col-4-3 { margin-left: 0; } } @media (max-width: 575px) { .footer-col-4-3 { margin-left: 0; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .footer-col-4-4 { margin-left: -30px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .footer-col-4-4 { margin-left: -30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .footer-col-4-4 { margin-left: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .footer-col-4-4 { margin-left: 0; } } @media (max-width: 575px) { .footer-col-4-4 { margin-left: 0; } } .ot-copyright-wrapp4 { padding: 35px; padding-bottom: 30px; } @media (max-width: 575px) { .ot-copyright-wrapp4 { padding: 15px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .ot-copyright-wrapp4 .ot-copyright-list-box ul li:not(:last-child) { padding-right: 40px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .ot-copyright-wrapp4 .ot-copyright-list-box ul li:not(:last-child) { padding-right: 40px; } } @media (max-width: 575px) { .ot-copyright-wrapp4 .ot-copyright-list-box ul li:not(:last-child) { padding-right: 40px; } } .ot-copyright-wrapp4 .ot-copyright-list-box ul li:not(:last-child)::after { position: absolute; width: 5px; height: 5px; top: 50%; right: 15px; content: ""; background: var(--ot-white-color); transform: translateY(-50%); border-radius: 100px; } .ot-info-icon { width: 50px; height: 50px; font-size: 25px; line-height: 57px; text-align: center; color: var(--ot-theme-color); background: var(--ot-white-color); border-radius: 50%; } .ot-info-text { font-size: 16px; font-weight: 500; color: var(--ot-white-color); margin-bottom: 3px; } .ot-info-number { font-size: 24px; font-weight: 700; color: var(--ot-white-color); margin-bottom: 0; } /*----------------------------------------*/ /* 6.5 Footer Style 5 /*----------------------------------------*/ .ot-footer-overlay5 { position: relative; z-index: 2; } .ot-footer-overlay5::before { position: absolute; width: 100%; height: 100%; top: 0; left: 0; content: ""; background: linear-gradient(180deg, #003973 0%, #022548 100%); opacity: 0.95; z-index: -1; } @media (min-width: 0) and (max-width: 767px) { .ot-footer-layout5 .ot-footer-top { margin-bottom: 0; } } @media (min-width: 0) and (max-width: 991px) { .ot-footer-layout5 .ot-footer-logo { margin-bottom: 0; } } .ot-footer-layout5 .ot-footer-info-list:not(:last-child) { margin-bottom: 16px; } .ot-footer-layout5 .ot-footer-info-icon { width: 50px; height: 50px; font-size: 20px; line-height: 50px; } .ot-footer-layout5 .ot-footer-widget-title { font-size: 30px; } .ot-footer-layout5 .ot-footer-widget-title::after { display: none; } .footer-newsletter-box3 .ot-newsletter-icon { font-size: 40px; color: var(--ot-title-color); } .footer-newsletter-box3 .ot-newsletter-title { font-weight: 700; font-size: 36px; line-height: 1; color: var(--ot-title-color2); } @media (min-width: 0) and (max-width: 991px) { .footer-newsletter-box3 .ot-newsletter-title { font-size: 26px; } } .footer-newsletter-box3 .ot-sec-text { line-height: 1; font-weight: 700; margin-bottom: 0; } .footer-newsletter-box3.ot-newsletter-box1 { padding: 60px; padding-top: 53px; background: var(--ot-theme-color); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .footer-newsletter-box3.ot-newsletter-box1 { padding: 30px; } } @media (min-width: 0) and (max-width: 991px) { .footer-newsletter-box3.ot-newsletter-box1 { padding: 15px; padding-top: 30px; } } @media (max-width: 575px) { .footer-newsletter-box3 .ot-newsletter { gap: 15px; flex-direction: column; } } @media (max-width: 575px) { .footer-newsletter-box3 .ot-newsletter-input { margin-bottom: 0; } } @media (max-width: 575px) { .footer-newsletter-box3 .ot-newsletter-content { text-align: center; flex-direction: column; } } .footer-newsletter-box3 .ot-newsletter-input input { border-radius: 5px; } .footer-newsletter-box3 .ot-btn-primary { position: relative; flex: 0 0 auto; padding: 14.5px 42px; } .footer-newsletter-box3 .ot-newsletter-input input { height: 56px; padding-right: 20px; } /*----------------------------------------*/ /* 6.5 Footer Style 6 /*----------------------------------------*/ .ot-footer-datebox .ot-sec-text { font-weight: 700; } .ot-footer-datebox .ot-sec-data { font-weight: 500; font-size: 14px; display: flex; align-items: center; gap: 5px; } .ot-footer-gallery-2 .ot-footer-img img { width: 90px; height: 77px; object-fit: cover; border-radius: 10px; } .ot-newsletter-box2 { padding: 40px 50px; background: var(--ot-title-color); border-radius: 10px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ot-newsletter-box2 { padding: 30px; } } @media (min-width: 0) and (max-width: 991px) { .ot-newsletter-box2 { padding: 15px; padding-top: 30px; } } .ot-newsletter-box2 .ot-newsletter-info-icon { border: 0; } /*----------------------------------------*/ /* 6.5 Footer Style 7 /*----------------------------------------*/ .ot-footer-overlay-7 { position: relative; text-align: center; } .ot-footer-overlay-7::before { position: absolute; width: 100%; height: 100%; top: 0; left: 0; content: ""; background: var(--ot-smoke-color2); opacity: 0.65; } .ot-footer-newsletter-info { border: 1px solid var(--ot-border-color); border-radius: 5px; padding: 20px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-footer-newsletter-info { padding: 16px; } } .ot-footer-newsletter-info .ot-sec-text { color: var(--ot-white-color); } .ot-footer-newsletter-info .info-style { font-size: 20px; font-weight: 700; } .ot-footer-logo-text { font-weight: 700; font-size: 170px; line-height: 70%; text-transform: uppercase; background: linear-gradient(180deg, #fff 0%, rgba(153, 153, 153, 0) 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } @media only screen and (min-width: 1700px) and (max-width: 1800px) { .ot-footer-logo-text { font-size: 160px; } } @media only screen and (min-width: 1600px) and (max-width: 1699px) { .ot-footer-logo-text { font-size: 155px; } } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .ot-footer-logo-text { font-size: 135px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-footer-logo-text { font-size: 116px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ot-footer-logo-text { font-size: 95px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .ot-footer-logo-text { font-size: 74px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .ot-footer-logo-text { font-size: 54px; } } @media (max-width: 575px) { .ot-footer-logo-text { font-size: 30px; } } .ot-footer-wrapp-2 .ot-social-style-1 a { font-size: 16px; width: 45px; height: 45px; line-height: 45px; color: var(--ot-title-color); background-color: var(--ot-white-color); } .ot-footer-wrapp-2 .ot-box-title { line-height: 1.4; } .ot-footer-shape-left-2 { position: absolute; left: 0; bottom: 0; } .ot-footer-shape-right-2 { position: absolute; right: 0; bottom: 0; } .ot-copyright-text-2 { display: inline-block; color: var(--ot-title-color); border-radius: 10px 10px 0 0; padding: 25px 195px; text-align: center; margin: 0 auto; } @media only screen and (min-width: 576px) and (max-width: 767px) { .ot-copyright-text-2 { padding: 25px; display: block; } } @media (max-width: 575px) { .ot-copyright-text-2 { padding: 20px; display: block; } } .ot-social-style-1 a { font-size: 16px; width: 45px; height: 45px; line-height: 45px; color: var(--ot-title-color); background-color: var(--ot-white-color); } .ot-social-style-1 a:hover { color: var(--ot-white-color); background-color: var(--ot-theme-color); } /*----------------------------------------*/ /* 7.6 Hero css /*----------------------------------------*/ .ot-hero-inner-1 { padding-top: 290px; padding-bottom: 190px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-hero-inner-1 { padding-top: 210px; padding-bottom: 130px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ot-hero-inner-1 { padding-top: 180px; padding-bottom: 120px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .ot-hero-inner-1 { padding-top: 150px; padding-bottom: 120px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .ot-hero-inner-1 { padding-top: 140px; padding-bottom: 170px; } } @media (max-width: 575px) { .ot-hero-inner-1 { padding-top: 120px; padding-bottom: 150px; } } .ot-hero-title { font-size: 64px; font-weight: 800; line-height: 1.1; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-hero-title { font-size: 55px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .ot-hero-title { font-size: 46px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .ot-hero-title { font-size: 40px; } } @media (max-width: 575px) { .ot-hero-title { font-size: 24px; } } .ot-hero-overlay { position: relative; } .ot-hero-overlay::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; background: linear-gradient(180deg, #003973 0%, #00458a 16.5%, rgba(0, 101, 203, 0.5) 61.9%, rgba(0, 108, 217, 0.5) 100%); } @media only screen and (min-width: 768px) and (max-width: 991px) { .ot-hero-content { margin-bottom: 20px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-hero-video-box { margin-bottom: 15px; } } .ot-hero-video-img { display: inline-block; flex: 0 0 auto; } @media (max-width: 575px) { .ot-hero-video-img { width: 100%; margin-bottom: 20px; } } .ot-hero-video-img img { width: 100%; object-fit: cover; border-radius: 20px; } .ot-hero-video-content .ot-sec-text { max-width: 223px; } .ot-hero-video-title { font-size: 24px; font-weight: 700; line-height: 1.4; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ot-hero-video-title { font-size: 18px; } } @media (max-width: 575px) { .ot-hero-video-title { font-size: 20px; } } .ot-hero-review-wrapp .ot-circle-box { position: absolute; top: -40px; left: 15px; right: 0; text-align: center; margin: auto; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-hero-review-wrapp .ot-circle-box { left: 10px; transform: scale(0.9); } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ot-hero-review-wrapp .ot-circle-box { top: -100px; z-index: 2; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .ot-hero-review-wrapp .ot-circle-box { top: -115px; z-index: 2; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .ot-hero-review-wrapp .ot-circle-box { top: -180px; z-index: 2; } } @media (max-width: 575px) { .ot-hero-review-wrapp .ot-circle-box { top: -160px; left: 0; z-index: 2; } } .ot-hero-review-wrapp .ot-circle-text-wrapp { text-align: center; margin: auto; } .ot-hero-review-box { padding: 25px 30px; margin: 0 180px; border-radius: 30px; fill: rgba(226, 226, 226, 0.2); backdrop-filter: blur(70px); } @media only screen and (min-width: 1700px) and (max-width: 1800px), only screen and (min-width: 1600px) and (max-width: 1699px), only screen and (min-width: 1400px) and (max-width: 1599px) { .ot-hero-review-box { margin: 0 30px; } } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-hero-review-box { padding: 20px 15px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-hero-review-box { padding: 15px 0; margin: 0 15px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-hero-review-box { margin-top: 40px; } } .ot-hero-review-box .ot-video-play-btn { right: 0; left: 0; } .ot-hero-review-box .ot-video-icon { width: 44px; height: 44px; font-size: 14px; line-height: 44px; color: var(--ot-white-color); background-color: var(--ot-theme-color); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-hero-review-box.bg-mask { mask-image: none !important; } } .ot-hero-inner-2 { padding-top: 206px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-hero-inner-2 { padding-top: 150px; } } .ot-hero-img2-1 img { object-fit: cover; border-radius: 10px 10px 0 0; } @media (max-width: 575px) { .ot-hero-img2-1 img { border-radius: 10px; } } @media (max-width: 575px) { .ot-hero-img2-2 { margin-top: 20px; } } .ot-hero-img2-2 img { border-radius: 10px 10px 0 0; object-fit: cover; clip-path: polygon(90.5% 0, 100% 15%, 100% 100%, 0 100%, 0 0); } @media (max-width: 575px) { .ot-hero-img2-2 img { clip-path: none; } } .ot-hero-turbo { position: absolute; min-width: 220px; right: 55px; bottom: 0; text-align: center; opacity: 0.2; } @media only screen and (min-width: 1700px) and (max-width: 1800px), only screen and (min-width: 1600px) and (max-width: 1699px), only screen and (min-width: 1400px) and (max-width: 1599px) { .ot-hero-turbo { right: 0; } } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-hero-turbo { display: none; } } .ot-hero-turbo .fan-turbo { position: absolute; top: -100px; left: 0; animation: rotate2 5s linear infinite; } .ot-hero-sun-shape { position: absolute; top: 37%; left: 20px; animation: rotate2 5s linear infinite; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-hero-sun-shape { display: none; } } .ot-hero-thumb-box2 { gap: 30px; } .ot-hero-thumb-box2 .ot-circle-box { position: absolute; top: 55%; left: 41.3%; transform: translate(-50%, -50%); } @media (max-width: 575px) { .ot-hero-thumb-box2 .ot-circle-box { left: 50%; } } .ot-hero-inner-5 { padding-top: 270px; padding-bottom: 120px; padding-left: 158px; padding-right: 158px; } @media only screen and (min-width: 1700px) and (max-width: 1800px) { .ot-hero-inner-5 { padding-left: 54px; padding-right: 54px; } } @media only screen and (min-width: 1600px) and (max-width: 1699px) { .ot-hero-inner-5 { padding-left: 54px; padding-right: 54px; } } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .ot-hero-inner-5 { padding-left: 30px; padding-right: 30px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-hero-inner-5 { padding-left: 15px; padding-right: 15px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ot-hero-inner-5 { padding-top: 180px; padding-bottom: 80px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .ot-hero-inner-5 { padding-top: 190px; padding-bottom: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-hero-inner-5 { padding-top: 150px; padding-bottom: 80px; } } @media (min-width: 200px) and (max-width: 1199px) { .ot-hero-inner-5 { padding-left: 15px; padding-right: 15px; } } .ot-hero-imgbox3 .ot-hero-img { width: 100%; position: relative; } .ot-hero-imgbox3 .ot-hero-img::before { max-width: 300px; content: ""; position: absolute; bottom: 10px; left: -10px; width: 100%; height: 100%; background-color: var(--ot-theme-color); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-hero-imgbox3 .ot-hero-img::before { display: none; } } .ot-hero-imgbox3 .ot-hero-img img { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-hero-imgbox3 .ot-hero-img img { width: 100%; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-hero-imgbox4 { display: flex; flex-direction: column-reverse; margin-top: -60px; } } .ot-hero-imgbox4 .ot-hero-img { width: 260px; margin-top: -60px; position: relative; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ot-hero-imgbox4 .ot-hero-img { width: 215px; margin-top: -50px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .ot-hero-imgbox4 .ot-hero-img { width: 460px; margin-top: -65px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-hero-imgbox4 .ot-hero-img { width: 100%; margin-top: 60px; } } .ot-hero-imgbox4 .ot-hero-img::before { max-width: 260px; content: ""; position: absolute; top: 10px; left: 10px; width: 100%; height: 100%; background-color: var(--ot-theme-color2); clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 100%); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-hero-imgbox4 .ot-hero-img::before { display: none; } } .ot-hero-imgbox4 .ot-hero-img img { clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 100%); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ot-hero-imgbox4 .ot-hero-img img { clip-path: polygon(0 0, 100% 20.5%, 100% 100%, 0 100%); } } @media only screen and (min-width: 768px) and (max-width: 991px) { .ot-hero-imgbox4 .ot-hero-img img { clip-path: polygon(0 3%, 100% 13%, 100% 89%, 0 89%); } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-hero-imgbox4 .ot-hero-img img { clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%); } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-hero-imgbox4 .ot-hero-img img { width: 100%; } } .ot-hero-imgbox4 .ot-hero-chat { min-width: 260px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 67%); padding: 25px 25px 85px 25px; text-align: center; background-color: var(--ot-title-color); margin-right: 10px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ot-hero-imgbox4 .ot-hero-chat { min-width: 216px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-hero-imgbox4 .ot-hero-chat { margin-right: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-hero-imgbox4 .ot-hero-chat { min-width: 100%; margin-top: 20px; } } .ot-hero-imgbox4 .ot-feature-funfact { font-size: 70px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .ot-hero-imgbox4 .ot-feature-funfact { font-size: 50px; } } .ot-hero-imgbox4 .ot-feature-text { font-size: 24px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ot-hero-imgbox4 .ot-feature-text { font-size: 18px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .ot-hero-imgbox4 .ot-feature-text { font-size: 18px; margin-left: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-hero-imgbox4 .ot-feature-text { max-width: 100%; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-hero-content-2 { margin-bottom: 40px; } } .ot-hero-content-2 .ot-sec-text { margin-bottom: 25px; } .ot-hero-content-2 .ot-hero-title { font-size: 59px; font-weight: 700; border-radius: 10px; padding: 10px 40px; margin-bottom: 30px; display: inline-block; } @media only screen and (min-width: 1600px) and (max-width: 1699px) { .ot-hero-content-2 .ot-hero-title { font-size: 55px; } } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 768px) and (max-width: 991px) { .ot-hero-content-2 .ot-hero-title { font-size: 54px; padding: 10px 30px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-hero-content-2 .ot-hero-title { font-size: 47px; padding: 10px 20px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px) { .ot-hero-content-2 .ot-hero-title { font-size: 38px; padding: 10px 20px; } } @media (max-width: 575px) { .ot-hero-content-2 .ot-hero-title { font-size: 30px; padding: 10px 20px; } } .ot-hero-inner-3 { padding-top: 244px; padding-bottom: 130px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-hero-inner-3 { padding-top: 210px; padding-bottom: 130px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ot-hero-inner-3 { padding-top: 180px; padding-bottom: 120px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .ot-hero-inner-3 { padding-top: 150px; padding-bottom: 120px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .ot-hero-inner-3 { padding-top: 140px; padding-bottom: 170px; } } @media (max-width: 575px) { .ot-hero-inner-3 { padding-top: 120px; padding-bottom: 150px; } } .ot-hero-inner-3 .ot-btn-group .ot-btn-primary { font-size: 18px; font-weight: 600; padding: 14px 30px 18px 28px; } .ot-hero-inner-3 .ot-btn-group .ot-btn-group .ot-btn-primary { padding: 15px 30px; } .ot-hero-inner-3 .ot-hero-title { line-height: 1.15; } .ot-hero-inner-3 .ot-btn-circle { width: 56px; height: 56px; line-height: 53px; } .ot-hero-overlay2 { position: relative; } .ot-hero-overlay2::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; background: linear-gradient(270deg, rgba(134, 187, 70, 0) 31.25%, rgba(42, 76, 1, 0.5490196078) 100%), linear-gradient(92deg, rgba(0, 57, 115, 0.568627451) 0%, rgba(0, 108, 217, 0) 100%); } .ot-hero-overlay2 .ot-user-content { display: inline-block; border-radius: 16px; padding: 24px 16px; text-align: center; flex: 0 0 auto; min-width: 277px; padding-bottom: 0; } .ot-hero-overlay2 .ot-box-title { font-size: 30px; color: var(--ot-white-color); } .ot-hero-overlay2 .ot-sec-text2 { font-size: 18px; color: var(--ot-white-color); display: flex; gap: 10px; } .ot-hero-overlay2 .ot-sec-text2 .sec-text { text-decoration: underline; } @media (max-width: 575px) { .ot-hero-overlay2 .ot-sec-text2 { font-size: 16px; } } .ot-hero-overlay2 .ot-hero-img3 img { min-width: 133px; height: 133px; border-radius: 16px; } @media (max-width: 575px) { .ot-hero-overlay2 .ot-hero-img3 img { width: 100%; height: 100%; } } .ot-hero-card { border-radius: 16px; padding: 20px; display: flex; gap: 30px; padding-bottom: 7px; } @media (max-width: 575px) { .ot-hero-card { flex-direction: column; } } .ot-hero-content2 { display: flex; gap: 20px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-hero-content2 { flex-direction: column; } } .ot-hero-content2 .ot-user-imgbox { display: flex; justify-content: center; margin-left: -33px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-hero-content2 .ot-user-imgbox { display: block; } } .ot-hero-content2 .ot-user-imgbox .ot-user-text { font-size: 18px; } .hero-title-style2 { margin-bottom: 98px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero-title-style2 { margin-bottom: 60px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero-title-style2 { margin-bottom: 50px; } } .hero-title-style2 .ot-hero-title { position: relative; font-size: 74px; font-weight: 700; line-height: 1.14; letter-spacing: -0.04em; text-transform: uppercase; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero-title-style2 .ot-hero-title { font-size: 67px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero-title-style2 .ot-hero-title { font-size: 55px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero-title-style2 .ot-hero-title { font-size: 45px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hero-title-style2 .ot-hero-title { font-size: 35px; } } @media (max-width: 575px) { .hero-title-style2 .ot-hero-title { font-size: 30px; } } .hero-title-style2 .ot-hero-title .leaf-shape { position: absolute; left: -25px; top: -37px; animation: swing 1s forwards infinite alternate; transform-origin: bottom center; } @media (max-width: 575px) { .ot-user-imgbox { margin-bottom: 15px; } } .ot-user-imgbox.style-2 .ot-user-img { margin-right: -12px; } .ot-user-imgbox.style-2 .ot-user-img:nth-child(even) { position: relative; z-index: 2; } .ot-user-imgbox.style-2 .ot-user-counter { position: relative; z-index: 2; } .ot-user-img { margin-right: -33px; overflow: hidden; } .ot-user-img img { width: 60px; height: 60px; object-fit: cover; border-radius: 1000px; border: 2px solid var(--ot-white-color); } .ot-user-text { margin-bottom: 0; } .ot-user-plus { position: absolute; width: 60px; height: 60px; left: 0; font-size: 14px; text-align: center; line-height: 60px; color: var(--ot-white-color); border-radius: 1000px; z-index: 2; } .ot-user-plus::before { position: absolute; width: 100%; height: 100%; top: 50%; left: 0; transform: translateY(-50%); content: ""; border: 2px solid var(--ot-white-color); background-color: rgba(0, 0, 0, 0.7); border-radius: 1000px; z-index: -1; } .ot-user-icon { color: var(--ot-theme-color2); } .ot-user-counter { position: relative; width: 60px; height: 60px; line-height: 60px; text-align: center; display: inline-flex; align-items: center; justify-content: center; border-radius: 1000px; border: 2px solid var(--ot-theme-color); overflow: hidden; color: var(--ot-title-color); background: var(--ot-title-color); } .ot-user-counter::before { position: absolute; width: 100%; height: 100%; top: 0; left: 0; content: ""; z-index: -1; background: var(--ot-title-color); } .ot-user-box3 { height: 86px; padding: 15px 15px; border-radius: 50px; border: 2px dashed var(--ot-theme-color); } .ot-user-box3 .ot-sec-text { font-size: 16px; font-weight: 500; color: var(--ot-white-color); } .ot-user-box3 .ot-user-imgbox { margin-bottom: 0; } .ot-user-box3 .ot-user-img { margin-right: -42px; } .ot-user-counter-number { font-weight: 700; font-size: 20px; color: var(--ot-white-color); margin-bottom: 0; } .ot-user-style4 .ot-user-texta { font-size: 18px; font-weight: 600; } .ot-user-style4 .ot-user-texta > span { font-weight: 700; font-size: 24px; color: var(--ot-theme-color); } .ot-energy-chart1 { padding: 30px; width: 231px; height: 100%; border-radius: 30px; animation: moving2 5s linear infinite; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-energy-chart1 { width: 100%; } } .ot-energy-title { font-size: 12px; font-weight: 600; line-height: 1; color: var(--ot-theme-color); } .ot-energy-percent { font-size: 40px; font-weight: 600; } .ot-energy-text { font-size: 14px; font-weight: 400; line-height: 1; } .ot-energy-icon { font-size: 20px; width: 35px; height: 35px; line-height: 40px; display: inline-block; text-align: center; border: 1px solid var(--ot-title-color); border-radius: 1000px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-energy-icon:hover { color: var(--ot-white-color); border-color: var(--ot-theme-color); background-color: var(--ot-theme-color); } .ot-circle-text-wrapp { height: 153px; width: 153px; line-height: 153px; border-radius: 50%; background: var(--ot-theme-color); } @media (max-width: 575px) { .ot-circle-text-wrapp { text-align: center; margin: auto; } } .ot-circle-icon { position: absolute; font-size: 18px; width: 80px; height: 80px; line-height: 80px; left: 0; right: 0; top: 50%; text-align: center; margin: auto; color: var(--ot-theme-color2); transform: translateY(-50%); background: var(--ot-white-color); border-radius: 100px; z-index: 3; } .ot-circle-text { position: relative; display: inline-block; min-height: 153px; min-width: 153px; bottom: 0; right: 0; border-radius: 50%; z-index: 1; font-size: 12px; font-weight: 600; color: var(--ot-white-color); text-align: center; transform: rotate(30deg); text-transform: uppercase; animation: spin 10s infinite alternate-reverse; } .ot-circle-text span { position: absolute; --rotate-letter: 11deg; min-height: 64px; min-width: 64px; top: 6px; left: 0; right: -2px; text-align: center; text-transform: uppercase; margin: auto; transform-origin: bottom center; transform: rotate(var(--rotate-letter)); } .ot-circle-text span.char2 { transform: rotate(calc(var(--rotate-letter) * 2)); } .ot-circle-text span.char3 { transform: rotate(calc(var(--rotate-letter) * 3)); } .ot-circle-text span.char4 { transform: rotate(calc(var(--rotate-letter) * 4)); } .ot-circle-text span.char5 { transform: rotate(calc(var(--rotate-letter) * 5)); } .ot-circle-text span.char6 { transform: rotate(calc(var(--rotate-letter) * 6)); } .ot-circle-text span.char7 { transform: rotate(calc(var(--rotate-letter) * 7)); } .ot-circle-text span.char8 { transform: rotate(calc(var(--rotate-letter) * 8)); } .ot-circle-text span.char9 { transform: rotate(calc(var(--rotate-letter) * 9)); } .ot-circle-text span.char10 { transform: rotate(calc(var(--rotate-letter) * 10)); } .ot-circle-text span.char11 { transform: rotate(calc(var(--rotate-letter) * 11)); } .ot-circle-text span.char12 { transform: rotate(calc(var(--rotate-letter) * 12)); } .ot-circle-text span.char13 { transform: rotate(calc(var(--rotate-letter) * 13)); } .ot-circle-text span.char14 { transform: rotate(calc(var(--rotate-letter) * 14)); } .ot-circle-text span.char15 { transform: rotate(calc(var(--rotate-letter) * 15)); } .ot-circle-text span.char16 { transform: rotate(calc(var(--rotate-letter) * 16)); } .ot-circle-text span.char17 { transform: rotate(calc(var(--rotate-letter) * 17)); } .ot-circle-text span.char18 { transform: rotate(calc(var(--rotate-letter) * 18)); } .ot-circle-text span.char19 { transform: rotate(calc(var(--rotate-letter) * 19)); } .ot-circle-text span.char20 { transform: rotate(calc(var(--rotate-letter) * 20)); } .ot-circle-text span.char21 { transform: rotate(calc(var(--rotate-letter) * 21)); } .ot-circle-text span.char22 { transform: rotate(calc(var(--rotate-letter) * 22)); } .ot-circle-text span.char23 { transform: rotate(calc(var(--rotate-letter) * 23)); } .ot-circle-text span.char24 { transform: rotate(calc(var(--rotate-letter) * 24)); } .ot-circle-text span.char25 { transform: rotate(calc(var(--rotate-letter) * 25)); } .ot-circle-text span.char26 { transform: rotate(calc(var(--rotate-letter) * 26)); } .ot-circle-text span.char27 { transform: rotate(calc(var(--rotate-letter) * 27)); } .ot-circle-text span.char28 { transform: rotate(calc(var(--rotate-letter) * 28)); } .ot-circle-text span.char29 { transform: rotate(calc(var(--rotate-letter) * 29)); } .ot-circle-text span.char30 { transform: rotate(calc(var(--rotate-letter) * 30)); } .ot-circle-text span.char31 { transform: rotate(calc(var(--rotate-letter) * 31)); } .ot-circle-text span.char32 { transform: rotate(calc(var(--rotate-letter) * 32)); } .ot-circle-text span.char33 { transform: rotate(calc(var(--rotate-letter) * 33)); } .ot-circle-text span.char34 { transform: rotate(calc(var(--rotate-letter) * 34)); } .ot-circle-text span.char35 { transform: rotate(calc(var(--rotate-letter) * 35)); } .ot-circle-text span.char36 { transform: rotate(calc(var(--rotate-letter) * 36)); } .ot-circle-text span.char37 { transform: rotate(calc(var(--rotate-letter) * 37)); } .ot-circle-text span.char38 { transform: rotate(calc(var(--rotate-letter) * 38)); } .ot-circle-text span.char39 { transform: rotate(calc(var(--rotate-letter) * 39)); } .ot-circle-text span.char40 { transform: rotate(calc(var(--rotate-letter) * 40)); } .ot-circle-text span.char41 { transform: rotate(calc(var(--rotate-letter) * 41)); } .ot-circle-text span.char42 { transform: rotate(calc(var(--rotate-letter) * 42)); } .ot-circle-text span.char43 { transform: rotate(calc(var(--rotate-letter) * 43)); } .ot-circle-text span.char44 { transform: rotate(calc(var(--rotate-letter) * 44)); } .ot-circle-text.circle-text2 { bottom: 0; right: 0; } /*----------------------------------------*/ /* 7.1 About css /*----------------------------------------*/ .ot-about-titlebox .ot-sec-text { max-width: 589px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-about-titlebox .ot-sec-text { max-width: 100%; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-about-imgbox { margin-bottom: 40px; } } .ot-about-img1 { border-radius: 10px; } @media (max-width: 575px) { .ot-about-img1 { margin-bottom: 20px; } } @media (max-width: 575px) { .ot-about-img1.bg-mask { mask-image: none !important; } } .ot-about-img1 img { border-radius: 10px; } .ot-about-skill { position: absolute; min-width: 365px; bottom: 0; left: 0; padding: 30px; border-radius: 10px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-about-skill { min-width: 355px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ot-about-skill { min-width: 385px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .ot-about-skill { min-width: 375px; } } @media (max-width: 575px) { .ot-about-skill { padding: 20px; min-width: 100%; position: static; } } .ot-about-skill .ot-skill-title { font-size: 30px; font-weight: 700; color: #024; line-height: 1; margin-bottom: 0; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-about-skill .ot-skill-title { font-size: 24px; } } .ot-about-skill .ot-skill-name { font-weight: 500; font-size: 16px; line-height: 1; color: var(--ot-body-color); } .ot-about-skill .ot-skill-per { background: var(--ot-theme-color); } .ot-about-skill .ot-skill-per::before { font-weight: 500; font-size: 16px; color: var(--ot-body-color); } .ot-about-skill .ot-skill-bar { background: rgba(93, 114, 138, 0.3); } .ot-about-feature-card { padding: 30px; border-radius: 10px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), (max-width: 575px) { .ot-about-feature-card { padding: 20px; } } .ot-about-feature-title { font-size: 30px; font-weight: 700; line-height: 1; color: #024; } @media (max-width: 575px) { .ot-about-feature-title { font-size: 24px; } } .ot-about-feature-list { list-style: none; } .ot-about-feature-list li { position: relative; padding-left: 20px; line-height: 1; } .ot-about-feature-list li:not(:last-child) { margin-bottom: 15px; } .ot-about-feature-list li .list-icon { position: absolute; left: 0; top: 0; } .ot-about-user .user-img img { width: 57px; height: 57px; line-height: 57px; object-fit: cover; border-radius: 1000px; border: 2px solid var(--ot-theme-color); } .ot-about-user .user-title { font-size: 18px; font-weight: 700; color: #024; line-height: 1; } .ot-about-user .user-designation { font-size: 14px; font-weight: 500; color: var(--ot-body-color); line-height: 1; margin-bottom: 0; } .ot-about-titlebox2 { border-bottom: 1px dashed var(--ot-border-color); padding-bottom: 40px; margin-bottom: 80px; } @media (max-width: 575px) { .ot-about-titlebox2 { padding-bottom: 20px; margin-bottom: 40px; } } .ot-about-img2, .ot-about-img3 { z-index: 2; } .ot-about-img2::before, .ot-about-img3::before { width: 100%; height: 100%; content: ""; position: absolute; bottom: 34px; right: 23px; border: 1px solid var(--ot-theme-color); border-radius: 10px; z-index: -1; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-about-img2::before, .ot-about-img3::before { bottom: 10px; right: 10px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-about-img2::before, .ot-about-img3::before { border: 0; } } .ot-about-img2 img, .ot-about-img3 img { width: 100%; object-fit: cover; border-radius: 10px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-about-img2 img, .ot-about-img3 img { height: 369px; } } .ot-about-img3::before { display: none; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-about-content-wrapp .row.gx-60 { --bs-gutter-x: 30px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-about-content-wrapp .row.gx-60 { --bs-gutter-x: 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-about-content-wrapp .row.gy-40 { --bs-gutter-y: 15px; } } .ot-about-feature-item { position: relative; z-index: 2; } .ot-about-feature-item:not(:last-child) { margin-bottom: 15px; } .ot-about-feature-item:not(:last-child)::before { position: absolute; height: 103px; content: ""; left: 25px; top: 25px; border: 1.5px dashed var(--ot-border-color); z-index: -1; } .ot-about-feature-icon { width: 50px; height: 50px; line-height: 50px; color: var(--ot-white-color); text-align: center; border-radius: 1000px; background: var(--ot-theme-color); flex: 0 0 auto; } .ot-about-feature-title { font-size: 24px; font-weight: 700; line-height: 1; } @media (max-width: 575px) { .ot-about-feature-title { font-size: 17px; } } .ot-about-experience-box { position: absolute; top: 0; left: 0; padding: 17px 13px; border-bottom: 8px solid #fff; border-right: 8px solid #fff; background: var(--ot-theme-color); border-radius: 10px 0; display: inline-block; } @media (max-width: 575px) { .ot-about-experience-box { padding: 10px; } } .ot-about-experience-number { font-size: 48px; font-weight: 700; line-height: 1; margin-bottom: 0; } @media (max-width: 575px) { .ot-about-experience-number { font-size: 38px; } } .ot-about-experience-text { font-size: 20px; font-weight: 700; line-height: 1.5; max-width: 131px; margin-bottom: 0; } @media (max-width: 575px) { .ot-about-experience-text { font-size: 16px; } } .ot-about-space-3 { padding-top: 240px; padding-bottom: 115px; margin-top: -30px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-about-space-3 { padding-top: 200px; padding-bottom: 80px; } } @media (max-width: 575px) { .ot-about-titlebox3 .ot-sec-title { font-size: 21px; } } .ot-about-img3.style-3::before { display: none; } .ot-about-img-box3 { z-index: 1; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-about-img-box3 { margin-bottom: 60px; } } .ot-about-img-box3 .ot-about-img { max-width: 488px; margin-left: 20px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .ot-about-img-box3 .ot-about-img { max-width: 400px; } } @media (max-width: 575px) { .ot-about-img-box3 .ot-about-img { max-width: 100%; margin-left: 0; } } .ot-about-img-box3 .ot-about-img img { border-radius: 10px; } .ot-about-img-box3 .ot-pattern { position: absolute; top: 0; right: -20px; z-index: -1; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-about-img-box3 .ot-pattern { right: 0; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ot-about-img-box3 .ot-pattern { right: 145px; } } .ot-about-img4 { position: absolute; bottom: -55px; right: -26px; z-index: 2; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-about-img4 { right: 0; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ot-about-img4 { right: 145px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-about-img4 { right: 0; } } .ot-about-img4 img { border-radius: 10px; } .ot-about-dot-line { position: absolute; width: 10px; height: 257px; top: 0; left: 0; background: var(--ot-theme-color); } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .ot-about-dot-line { height: 213px; } } .ot-about-dot-line::before { position: absolute; width: 13px; height: 12.56px; content: ""; left: -1px; top: 102.5%; background: var(--ot-theme-color); border-radius: 100px; } .ot-about-dot-line::after { position: absolute; width: 10px; height: 257px; top: 110%; left: 0; content: ""; background: var(--ot-theme-color); } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .ot-about-dot-line::after { height: 213px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .ot-about-dot-line::after { height: 265px; } } .ot-about-img-line { position: absolute; bottom: 0; right: -6px; } @media (max-width: 575px) { .ot-about-tab { flex-direction: column; } } .ot-about-tab-content { gap: 60px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .ot-about-tab-content { gap: 35px; } } .ot-about-tab-list { list-style: none; } @media (max-width: 575px) { .ot-about-tab-list { margin-bottom: 30px; } } .ot-about-tab-list-item { display: flex; line-height: 1; font-weight: 500; font-size: 16px; color: var(--ot-white-color); gap: 15px; } .ot-about-tab-list-item:not(:last-child) { margin-bottom: 20px; } .ot-about-tab-list-icon { font-size: 16px; color: var(--ot-theme-color); line-height: 0; margin-bottom: 0; } .ot-about-tab-video .ot-video-play-btn { position: absolute; top: 50%; transform: translateY(-50%); } .ot-about-tab-video .ot-video-icon { width: 30px; height: 30px; font-size: 10px; line-height: 30px; text-align: center; color: var(--ot-white-color); border-radius: 1000px; background: var(--ot-theme-color); } .ot-about-tab-video img { border-radius: 5px; } @media (max-width: 575px) { .ot-about-tab-video img { width: 100%; } } .ot-about-tab-btn { position: relative; font-size: 18px; font-weight: 600; padding: 14.5px 40px; padding-bottom: 15px; text-transform: uppercase; color: var(--ot-white-color); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; z-index: 2; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-about-tab-btn { padding: 13px 25px; } } .ot-about-tab-btn::before { position: absolute; width: 100%; height: 0; bottom: 4px; left: 0; content: ""; background: var(--ot-theme-color); border-radius: 50px 50px 3px 3px; z-index: -1; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-about-tab-btn::after { position: absolute; width: 100%; height: 6px; bottom: -5px; left: 0; content: ""; background: rgba(255, 255, 255, 0.2); border-radius: 50px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-about-tab-btn.active { color: var(--ot-white-color); } .ot-about-tab-btn.active::before { height: 93%; } .ot-about-tab-btn.active::after { background: var(--ot-theme-color); } .ot-about-tab-btn:hover { color: var(--ot-white-color); } @media only screen and (min-width: 576px) and (max-width: 767px) { .ot-about-img-box4 { margin-bottom: 20px; } } .ot-about-experience-box2 { padding: 65.5px 30px; max-width: 300px; transform: translate(-12%, 0) rotate(-90deg); background: var(--ot-theme-color); } @media only screen and (min-width: 768px) and (max-width: 991px) { .ot-about-experience-box2 { padding: 35px 30px; max-width: 300px; transform: translate(-22%, -56%) rotate(-90deg); } } .ot-about-experience-box2 .experience-text { font-weight: 700; font-size: 36px; line-height: 1.2; margin-bottom: 0; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ot-about-experience-box2 .experience-text { font-size: 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-about-experience-box2 .experience-text { font-size: 30px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ot-about-experience-box2 { max-width: 274px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-about-experience-box2 { padding: 40px; max-width: 100%; margin-bottom: 20px; transform: translate(0, 0) rotate(0deg); } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-about-titlebox4 .ot-sec-title { font-size: 40px; } } .ot-about-progress-wrapp { margin-top: -21.2rem; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-about-progress-wrapp { margin-top: -22.5rem; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ot-about-progress-wrapp { margin-top: -20rem; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .ot-about-progress-wrapp { margin-top: -8.7rem; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-about-progress-wrapp { margin-top: 0; } } .ot-about-progress { padding: 35px; transform: translate(-33%, 0); background-color: var(--ot-smoke-color2); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-about-progress { transform: translate(-26%, 0); } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ot-about-progress { padding: 25px; transform: translate(-20%, 0); } } @media only screen and (min-width: 768px) and (max-width: 991px) { .ot-about-progress { padding: 25px; transform: translate(0, 0); } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-about-progress { padding: 20px; transform: translate(0, 0); } } .ot-about-feature-list2 .feature-list { position: relative; list-style: none; color: var(--ot-white-color); padding-left: 26px; } .ot-about-feature-list2 .feature-list:not(:last-child) { margin-bottom: 10px; } .ot-about-feature-list2 .feature-icon { position: absolute; color: var(--ot-white-color); left: 0; top: 2.3px; } .ot-about-skill4 .ot-skill-per { background-color: var(--ot-theme-color); } .ot-about-skill4 .ot-skill-per::before { font-size: 18px; } .ot-about-feature-box5 { padding: 40px 0; padding-bottom: 30px; border-radius: 10px; } .ot-about-feature-box5 .ot-about-feature-icon { width: 60px; height: 60px; line-height: 70px; } @media (max-width: 575px) { .ot-about-feature-box5 .ot-about-feature-icon { margin: auto; } } .ot-about-feature-box5 .ot-about-feature-title { font-size: 20px; } @media (max-width: 575px) { .ot-about-feature-box5 .ot-about-feature-title { font-size: 18px; } } .ot-about-feature-box5 .ot-about-feature-text { margin-bottom: 0; } .ot-about-feature-box5 .ot-about-feature-item { padding: 0 40px; display: flex; gap: 20px; justify-content: center; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .ot-about-feature-box5 .ot-about-feature-item { padding: 0 20px; } } @media (max-width: 575px) { .ot-about-feature-box5 .ot-about-feature-item { padding: 0 15px; text-align: center; flex-direction: column; justify-content: center; } } .ot-about-feature-box5 .ot-about-feature-item::before { display: none; } .ot-about-feature-box5 .ot-about-feature-item:not(:last-child) { margin-bottom: 30px; padding-bottom: 23px; border-bottom: 1px solid var(--ot-border-color); } .ot-about-feature-box5 .ot-about-userbox { display: flex; flex-direction: column; justify-content: end; } .ot-about-feature-box2 { border-bottom: 2px solid var(--ot-border-color); padding-left: 40px; padding-bottom: 30px; margin-bottom: 30px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-about-feature-box2 { border-bottom: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-about-feature-box2 { padding-left: 0; } } .ot-about-feature-box2 .ot-about-feature-icon { font-weight: 700; font-size: 36px; width: 110px; height: 110px; display: flex; justify-content: center; align-items: center; } .ot-about-categorie { position: absolute; content: ""; left: -46px; top: 41%; padding: 0 15px; color: var(--ot-white-color); background: var(--ot-theme-color); transform: translate(0%, 0) rotate(-90deg); font-weight: 700; font-size: 14px; line-height: 186%; clip-path: polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%, 5% 50%); } .ot-about-feature-2 { padding-left: 10px; position: relative; } .ot-about-feature-2::before { position: absolute; height: 100%; content: ""; left: 10px; top: 0; border: 1px solid var(--ot-border-color); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-about-feature-2::before { display: none; } } .ot-about-feature-2 .ot-about-feature-item::before { display: none; } .ot-about-feature-2 .ot-about-author { padding-left: 40px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-about-feature-2 .ot-about-author { padding-left: 0; } } .ot-about-feature-2 .ot-about-author .ot-btn-primary { padding: 15px 24px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-about-img-6 { width: 100%; } } .ot-about-img-6 img { border-radius: 10px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-about-img-6 img { width: 100%; } } .ot-about-titlebox-2 .ot-sec-title { max-width: 93%; } .ot-about-titlebox-2 .ot-sec-text { max-width: 80%; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .ot-about-titlebox-2 .ot-sec-text { max-width: 95%; } } @media (max-width: 575px) { .ot-about-titlebox-2 .ot-sec-text { max-width: 100%; } } .ot-about-feature-box-2 .ot-about-feature-item:not(:last-child)::before { display: none; } .ot-about-feature-box-2 .ot-about-feature-title { font-size: 20px; } .ot-about-feature-box-2 .ot-about-feature-text { max-width: 90%; } .ot-about-icon { background-color: var(--ot-white-color); display: inline-block; padding: 20px; border-radius: 10px; } .ot-about-post { position: absolute; left: 0; bottom: 0; background: var(--ot-theme-color); border-radius: 0 10px 0 10px; padding: 20px 0 20px 20px; display: inline-flex; align-items: center; gap: 20px; } .ot-about-post .ot-about-post-date { max-width: 60%; } .ot-about-post .ot-box-title { font-size: 30px; } .ot-about-post .ot-sec-text { font-weight: 700; } .about-inner-space { padding-bottom: 220px; } /*----------------------------------------*/ /* 7.21 Brand css /*----------------------------------------*/ @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-brand-slider { margin-bottom: 80px; } } .ot-brand-slider-2 .ot-brand-item { margin-right: 100px; } .ot-brand-slider-2 .ot-brand-item img { filter: brightness(1) contrast(1); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-brand-item { margin-right: 100px; } .ot-brand-item img { filter: brightness(0) contrast(0); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-brand-item:hover img { filter: brightness(1) contrast(1); } .ot-brand-note { position: relative; text-align: center; } .ot-brand-note::before, .ot-brand-note::after { position: absolute; content: ""; top: 50%; left: 0; width: 35%; height: 1px; transform: translateY(-50%); border: 1px dashed var(--ot-border-color); } .ot-brand-note::before { left: 0; } .ot-brand-note::after { left: auto; right: 0; } .ot-brand-text { position: relative; font-size: 16px; font-weight: 700; color: var(--ot-body-color); text-align: center; margin: auto; margin-bottom: 0; padding: 6.5px 44.5px; display: inline-block; border-radius: 100px; border: 1px dashed var(--ot-border-color); background-color: var(--ot-white-color); z-index: 2; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-brand-text { padding: 6.5px 15px; } } /*----------------------------------------*/ /* 7.7 Newsletter css /*----------------------------------------*/ .ot-newsletter-box1 { padding: 34px 40px; background: rgba(55, 212, 217, 0.1); border: 1px solid rgba(216, 221, 225, 0.15); border-radius: 10px; } @media (max-width: 575px) { .ot-newsletter-box1 { padding: 15px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-newsletter-info-wrapp { margin-bottom: 20px; } } @media (max-width: 575px) { .ot-newsletter-info-item:not(:last-child) { margin-bottom: 15px; } } .ot-newsletter-info { font-weight: 700; font-size: 20px; display: inline-block; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-newsletter-info { font-size: 16px; } } .ot-newsletter-info-icon { font-size: 25px; width: 50px; height: 50px; font-weight: 700; line-height: 52px; text-align: center; color: var(--ot-white-color); border-radius: 1000px; border: 1px dashed #d8dde1; } .ot-newsletter-info-text { font-size: 16px; font-weight: 700; display: block; } .ot-newsletter-form { position: relative; } .ot-newsletter-form .ot-btn-primary { position: absolute; top: 0; right: 0; padding: 17px 30px; } @media (max-width: 575px) { .ot-newsletter-form .ot-btn-primary { position: static; } .ot-newsletter-form .ot-btn-primary::before { display: none; } } .ot-newsletter-form.border-style .ot-newsletter-input input { height: 54px; border-radius: 30px; background: none; border: 1px solid rgba(255, 255, 255, 0.17); } .ot-newsletter-form.border-style .ot-newsletter-input input { padding-right: 60px; color: var(--ot-white-color); } .ot-newsletter-arrow-btn { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 45px; height: 45px; line-height: 45px; text-align: center; border-radius: 1000px; background: var(--ot-theme-color); color: var(--ot-white-color); } .ot-newsletter-arrow-btn:hover { color: var(--ot-title-color); background-color: var(--ot-white-color); } @media (max-width: 575px) { .ot-newsletter-input { margin-bottom: 8px; } } .ot-newsletter-input input { height: 60px; border-radius: 30px; background: var(--ot-white-color); padding-right: 165px; } @media (max-width: 575px) { .ot-newsletter-input input { padding-right: 30px; } } /*----------------------------------------*/ /* 7.11 Service css /*----------------------------------------*/ .ot-service { /* service 3 start ---------------------------------- */ /* service 3 end ---------------------------------- */ /* service 4 start ---------------------------------- */ /* service 4 end ---------------------------------- */ /* service 5 start ---------------------------------- */ /* service 5 end ---------------------------------- */ /* service-details start ---------------------------------- */ /* service-details end ---------------------------------- */ } .ot-service-titlebox .ot-sec-text { margin-top: 25px; padding-top: 30px; border-top: 1px solid rgba(255, 255, 255, 0.2); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-service-titlebox { margin-bottom: 40px; } } .ot-service-exper-box { position: absolute; top: 50%; left: 0; right: 0; text-align: center; transform: translateY(-50%); } .ot-service-exper-number { font-size: 74px; font-weight: 800; line-height: 1; } @media (max-width: 575px) { .ot-service-exper-number { font-size: 50px; } } .ot-service-exper-text { font-size: 20px; font-weight: 700; line-height: 1; color: var(--ot-white-color); } .ot-service-card { position: relative; gap: 30px; padding: 30px; background: rgb(0, 57, 115); border-radius: 10px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-service-card { gap: 20px; padding: 20px; } } .ot-service-card .ot-box-title { margin-bottom: 20px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-service-card .ot-box-title { font-size: 20px; margin-bottom: 10px; } } .ot-service-card:hover .ot-img-hover img { transform: scale(1.1); } .ot-service-card:hover .ot-img-hover::before { animation: shine 1s; } .ot-service-card:hover .ot-service-icon { color: var(--ot-white-color); background: var(--ot-theme-color); } .ot-service-icon { position: absolute; font-size: 60px; bottom: 0; right: 0; width: 104px; height: 90px; line-height: 105px; text-align: center; color: var(--ot-theme-color); border-bottom: 1px solid rgba(134, 187, 70, 0.28); border-right: 1px solid rgba(134, 187, 70, 0.28); background: rgba(0, 34, 68, 0.6); z-index: 2; border-radius: 50px 0 10px 0; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-service-img1 { flex: 0 0 auto; border-radius: 10px; } @media (max-width: 575px) { .ot-service-img1 { margin-bottom: 20px; } } .ot-service-img1 img { width: 100%; border-radius: 10px; transition: all 1.4s ease-in-out; } .ot-service-img3 { flex: 0 0 auto; border-radius: 10px; } @media (max-width: 575px) { .ot-service-img3 { margin-bottom: 20px; } } .ot-service-img3 img { width: 213px; border-radius: 10px; transition: all 1.4s ease-in-out; } @media (max-width: 575px) { .ot-service-img3 img { width: 100%; } } .ot-service-overlay { position: relative; } .ot-service-overlay::before { position: absolute; width: 100%; height: 100%; top: 0; left: 0; content: ""; background: rgba(231, 249, 238, 0.9); } .ot-service-content.style-2 .ot-btn-arrow-primary:hover { color: var(--ot-title-color); } .ot-service-content.style-2 .ot-btn-arrow-primary:hover .arrow-icon::before { border-color: var(--ot-theme-color); } .ot-service-divider .ot-brand-note::before, .ot-service-divider .ot-brand-note::after { width: 42%; } .ot-service-divider .ot-brand-text { background-color: var(--ot-smoke-color); cursor: pointer; text-transform: uppercase; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-service-overlay-3 { position: relative; } .ot-service-overlay-3::before { position: absolute; width: 100%; height: 100%; top: 0; left: 0; content: ""; background: var(--ot-smoke-color2); opacity: 0.86; } .ot-service-titlebox3 .ot-sec-subtitle { color: var(--ot-white-color); background: var(--ot-theme-color); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ot-service-titlebox3 { margin-bottom: 30px; } } .ot-service-card-3 { padding: 40px; background-color: var(--ot-title-color); border-radius: 10px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-service-card-3 { padding: 20px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ot-service-card-3 { padding: 30px; gap: 20px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .ot-service-card-3 { padding: 10px; gap: 10px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .ot-service-card-3 { padding: 30px; } } @media (max-width: 575px) { .ot-service-card-3 { padding: 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-service-card-3 .ot-service-img1 { margin-bottom: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-service-card-3 .ot-service-top { margin-bottom: 20px; } } .ot-service-card-3 .ot-service-icon { position: static; font-size: 39px; width: 71px; height: 71px; line-height: 76px; text-align: center; border: 0; color: var(--ot-white-color); background: var(--ot-theme-color); border-radius: 100%; } .ot-service-card-3 .ot-service-number { position: static; font-size: 48px; font-weight: 900; color: transparent; -webkit-text-stroke: 1px var(--ot-stroke-color); } .ot-service-card-3 .ot-service-feature-list { display: flex; flex-wrap: wrap; gap: 15px; padding: 0; margin: 0; list-style: none; } .ot-service-card-3 .feature-list-item { flex: 0 0 48%; display: flex; align-items: center; line-height: 1; gap: 8px; color: var(--ot-white-color); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-service-card-3 .feature-list-item { flex: 0 0 100%; } } .ot-service-overlay-4 { position: relative; } .ot-service-overlay-4::before { position: absolute; width: 100%; height: 100%; top: 0; left: 0; content: ""; background: var(--ot-title-color2); opacity: 0.85; } .ot-service-titlebox4 .ot-sec-title { margin-bottom: 0; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-service-titlebox4 .ot-sec-title { margin-bottom: 20px; } } .ot-service-card-4 { position: relative; display: flex; gap: 20px; border-radius: 10px; height: 100%; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-service-card-4 { flex-direction: column; gap: 10px; } } .ot-service-card-4 .ot-service-number { position: static; font-weight: 700; font-size: 36px; line-height: 1; -webkit-text-stroke: 1px var(--ot-title-color); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-service-card-4 .ot-service-content { padding: 25px 30px; background: var(--ot-white-color); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-service-card-4 .ot-service-content:hover { background-color: var(--ot-theme-color); } .ot-service-card-4 .ot-service-content:hover .ot-box-title a { color: var(--ot-white-color); } .ot-service-card-4 .ot-service-content:hover .ot-sec-text { color: var(--ot-white-color); } .ot-service-card-4 .ot-service-content:hover .ot-service-trubown img { filter: brightness(0.5); } .ot-service-card-4 .ot-service-content:hover .ot-btn-arrow-primary { color: var(--ot-white-color); } .ot-service-card-4 .ot-service-content:hover .ot-btn-arrow-primary .arrow-icon { color: var(--ot-title-color); background: var(--ot-white-color); } .ot-service-card-4 .ot-service-content:hover .ot-btn-arrow-primary .arrow-icon::before { border-color: var(--ot-white-color); } .ot-service-card-4 .ot-box-title { line-height: 1.4; } .ot-service-card-4:hover .ot-img-hover::before { animation: shine 1s; } .ot-service-card-4:hover .ot-img-hover img { transform: scale(1.1); } .ot-service-trubown { position: absolute; top: 0; right: 0; } .ot-service-trubown img { width: 100%; height: 100%; object-fit: cover; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-service-img4 { flex: 0 0 auto; border-radius: 10px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-service-img4 { flex: 0 0 33%; } } .ot-service-img4 img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; transition: 2s; } @media (min-width: 0) and (max-width: 991px) { .ot-service-titlebox5 { margin-bottom: 30px; } } .ot-service-box5 .ot-service-img { border-radius: 20px; } .ot-service-box5 .ot-service-img img { width: 100%; object-fit: cover; border-radius: 20px; transition: 1.4s; } .ot-service-box5 .ot-service-number { opacity: 1; font-weight: 700; font-size: 36px; bottom: auto; top: 50px; left: auto; right: 40px; -webkit-text-stroke: 1px var(--ot-title-color); font-family: var(--ot-style-font); } .ot-service-box5 .ot-service-icon { width: 90px; height: 90px; background-color: var(--ot-theme-color); border-radius: 50%; position: absolute; top: 10px; left: 73px; z-index: 5; font-size: 50px; color: var(--ot-white-color); display: flex; align-items: center; justify-content: center; line-height: 25px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .ot-service-box5 .ot-service-icon { left: 30px; } } @media (max-width: 575px) { .ot-service-box5 .ot-service-icon { left: 30px; } } .ot-service-box5 .ot-service-icon i { -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-service-box5 .ot-service-icon:hover { background-color: var(--ot-theme-color2); color: var(--ot-title-color); } .ot-service-box5 .ot-service-icon::before { content: ""; position: absolute; width: 106px; height: 106px; border-radius: 50%; border: 2px solid var(--ot-theme-color); top: -8px; left: -8px; } .ot-service-box5 .ot-service-icon:hover::before { border: 3px solid var(--ot-theme-color2); } .ot-service-box5 .ot-btn-arrow-primary:hover { color: var(--ot-theme-color2); } .ot-service-box5:hover .ot-service-icon i { transform: scaleX(-1); } .ot-service-box5:hover .ot-img-hover::before { -webkit-animation: shine 1s; animation: shine 1s; } .ot-service-box5:hover .ot-img-hover img { transform: scale(1.2); } .ot-service-card-5 { margin: 0 35px; position: relative; margin-top: -180px; background-color: var(--ot-white-color); overflow: visible; padding: 30px; padding-top: 73px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-service-card-5 { margin: 0 20px; margin-top: -180px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .ot-service-card-5 { margin: 0 10px; margin-top: -180px; } } @media (max-width: 575px) { .ot-service-card-5 { padding: 20px; padding-top: 53px; margin: 0 10px; margin-top: -180px; } } .ot-service-card-5 .ot-btn-arrow-primary:hover .arrow-icon { color: var(--ot-title-color); background: var(--ot-theme-color2); } .ot-service-card-5 .ot-btn-arrow-primary:hover .arrow-icon::before { border: 1.5px dashed var(--ot-theme-color2); } .ot-service-card-5 .ot-box-title .clamp-3 { padding-bottom: 5px; } @media (max-width: 575px) { .ot-service-card-5 .ot-box-title { margin-bottom: 0; } } .ot-service-card-5 .ot-box-title:hover { color: var(--ot-theme-color2); } .ot-service-details-wrapp .sidebar-wrapp { margin-bottom: 70px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-service-details-wrapp .sidebar-wrapp { margin-bottom: 0; } } .ot-service-download-box { border: 1px solid var(--ot-border-color); padding: 39px; border-radius: 20px; text-align: center; display: flex; flex-direction: column; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .ot-service-download-box { padding: 24px; } } @media (max-width: 575px) { .ot-service-download-box { padding: 20px; } } .ot-service-download-box .ot-btn-custom { font-size: 18px; padding: 15px 83px 15px 67px; border-radius: 50px; color: var(--ot-white-color); text-align: center; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-service-download-box .ot-btn-custom { padding: 15px 50px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ot-service-download-box .ot-btn-custom { padding: 15px 30px; } } @media (max-width: 575px) { .ot-service-download-box .ot-btn-custom { padding: 15px 20px; } } .ot-service-download-box .ot-btn-doc { background-color: var(--ot-title-color); } .ot-service-download-box .ot-btn-custom i { margin-right: 10px; font-size: 22px; } .ot-service-pagination-box { position: relative; display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--ot-border-color); border-radius: 20px; padding: 14px 30px; } @media (max-width: 575px) { .ot-service-pagination-box { padding: 14px; } } .ot-service-pagination-box::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translateY(-50%); width: 1px; height: 28px; background-color: var(--ot-border-color); } .ot-service-pagination-box .ot-pagination-btn { display: flex; align-items: center; gap: 20px; } .ot-service-pagination-box .ot-white-btn { background-color: var(--ot-white-color); color: var(--ot-theme-color2); border: 1px solid var(--ot-theme-color2); } .ot-service-pagination-box .ot-white-btn:hover { color: var(--ot-title-color2); } .ot-service-pagination-box .ot-btn-sec-arrow { width: 100%; color: var(--ot-body-color); background: none; } .ot-service-pagination-box .ot-btn-sec-arrow i { width: 49px; height: 49px; line-height: 49px; } .ot-service-pagination-box span { font-size: 16px; font-weight: 700; } .ot-service-details-img { margin-bottom: 30px; } .ot-service-details-img img { border-radius: 20px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-service-content .postbox-feature-list ul { grid-template-columns: auto; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service-slider-style-3 { margin-bottom: 40px; } } .ot-static-wrapp { display: flex; flex-wrap: wrap; gap: 24px; } @media (min-width: 0px) and (max-width: 991px) { .ot-static-wrapp { margin-bottom: 40px; } } .ot-static-wrapp .ot-service-card { position: sticky; top: 155px; margin: auto; } .ot-static-title-box { position: sticky; height: 100%; display: block; } .ot-static-title-box .ot-service-titlebox { position: sticky; top: 150px; margin: auto; } /* service 2 start ---------------------------------- */ .ot-service-list { position: relative; height: 441px; padding: 30px; z-index: 2; transition: 0.7s ease-in-out; cursor: pointer; overflow: hidden; border-radius: 20px; background: no-repeat; } @media (min-width: 0px) and (max-width: 767px) { .ot-service-list { height: 100%; } } @media (max-width: 575px) { .ot-service-list { padding: 15px; } } .ot-service-list:before { content: ""; position: absolute; inset: 0; background: var(--ot-white-color); border-radius: 20px; z-index: -1; opacity: 0; visibility: hidden; -webkit-transition: 0 0.3s ease-out; -moz-transition: 0 0.3s ease-out; -ms-transition: 0 0.3s ease-out; -o-transition: 0 0.3s ease-out; transition: 0 0.3s ease-out; } @media (min-width: 0px) and (max-width: 1199px) { .ot-service-list:before { opacity: 1; visibility: visible; } } .ot-service-list::after { position: absolute; width: 100%; height: 100%; top: 0; left: 0; content: ""; background: rgba(0, 34, 68, 0.7); z-index: -1; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; border-radius: 20px; } @media (min-width: 0px) and (max-width: 1199px) { .ot-service-list::after { opacity: 0; visibility: hidden; } } .ot-service-list-area { display: flex; gap: 30px; } @media (min-width: 0px) and (max-width: 1199px) { .ot-service-list-area { flex-direction: column; } } .ot-service-list-wrap { flex: 0%; width: 158px; box-sizing: border-box; transition: all 0.3s linear; } @media (min-width: 0px) and (max-width: 1199px) { .ot-service-list-wrap { flex: 324%; width: 100%; border-radius: 20px; } } .ot-service-list-wrap.active { flex: 324%; width: 100%; border-radius: 20px; } .ot-service-list-wrap.active .ot-service-list:before { opacity: 1; visibility: visible; } .ot-service-list-wrap.active .ot-service-list::after { opacity: 0; visibility: hidden; } .ot-service-list-wrap.active .ot-service-img2 { opacity: 1; visibility: visible; } .ot-service-list-wrap.active .service-content { left: 40px; bottom: 40px; transform: none; } .ot-service-list-wrap.active .ot-service-title { opacity: 0; visibility: hidden; } .ot-service-list-wrap.active .ot-service-number { left: auto; right: 40px; color: #024; opacity: 0.05; } @media (max-width: 575px) { .ot-service-list-wrap.active .ot-service-number { right: 0; bottom: 0; } } .ot-service-list .ot-service-content { min-width: 340px; height: 100%; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-service-list .ot-service-content { min-width: 230px; } } @media (max-width: 575px) { .ot-service-list .ot-service-content { min-width: 100%; } } .ot-service-list .ot-service-content > .ot-box-title a { max-width: 100%; text-wrap-style: balance; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-service-list .ot-service-content .ot-sec-text { min-width: 340px; text-wrap-style: balance; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-service-list .ot-service-content .ot-sec-text { min-width: 100%; } } @media (max-width: 575px) { .ot-service-list .ot-service-content .ot-sec-text { min-width: 100%; } } .ot-service-list .ot-box-title { font-weight: 700; font-size: 24px; line-height: 40px; letter-spacing: 0.02em; margin-bottom: 0; } @media (max-width: 575px) { .ot-service-list .ot-box-title { font-size: 20px; } } .ot-service-list .ot-service-subtitle { color: var(--ot-white-color); } .ot-service-img2 { opacity: 0; visibility: hidden; flex: 0 0 auto; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media (min-width: 0px) and (max-width: 1199px) { .ot-service-img2 { opacity: 1; visibility: visible; } } @media (min-width: 0px) and (max-width: 767px) { .ot-service-img2 { margin-bottom: 20px; } } .ot-service-img2 img { border-radius: 20px; width: 298px; height: 381px; object-fit: cover; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-service-img2 img { width: 230px; } } @media (min-width: 0px) and (max-width: 767px) { .ot-service-img2 img { width: 100%; height: 100%; } } .ot-service-title { position: absolute; top: 38%; left: 50%; transform: translate(-50%, -50%) rotate(-90deg); width: 300px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media (min-width: 0px) and (max-width: 1199px) { .ot-service-title { display: none; } } .ot-service-number { position: absolute; bottom: 30px; left: 40px; font-weight: 700; font-size: 74px; line-height: 1.1; color: var(--ot-white-color); opacity: 0.2; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media (min-width: 0) and (max-width: 1199px) { .ot-service-number { left: auto; right: 40px; color: var(--ot-title-color2); opacity: 0.05; } } /* service 2 end ---------------------------------- */ /* service 3 start ---------------------------------- */ .ot-service-3-tab-wrapp { position: relative; z-index: 2; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-service-3-tab-wrapp { padding: 30px; background: var(--ot-theme-color); border-radius: 10px; } } .ot-service-3-tab-wrapp::before { position: absolute; width: 563px; height: 583px; top: -50px; right: -15px; content: ""; background: var(--ot-theme-color); z-index: -1; clip-path: polygon(14% 0, 100% 0, 100% 100%, 0% 100%); border-radius: 10px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-service-3-tab-wrapp::before { display: none; } } .service-tab-slider3 { width: 390px; height: 345px; padding: 20px 0; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service-tab-slider3 { width: 100%; } } .service-tab-slider3 .swiper-slide { height: 70px !important; } .service-tab-slider3 .swiper-slide-thumb-active .sv-tab-btn { background: var(--ot-theme-color2); } .sv-tab-btn { padding: 10px; background: var(--ot-white-color); border-radius: 5px; cursor: pointer; } .sv-tab-slider-title { font-weight: 700; font-size: 20px; color: #024; margin-bottom: 0; } .sv-tab-slider-img img { width: 77px; height: 50px; object-fit: cover; border-radius: 5px; } .sv-slider-arrow { padding: 14px; width: 390px; height: 50px; text-align: center; color: var(--ot-white-color); background-color: var(--ot-title-color); border-radius: 5px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .sv-slider-arrow { width: 100%; } } .sv-slider-arrow:hover { color: var(--ot-title-color); background-color: var(--ot-theme-color2); } /* service 3 end ---------------------------------- */ .service-inner-style .postbox-feature-list ul li:not(:last-child) { margin-bottom: 10px; } /*----------------------------------------*/ /* 7.24 Choose css /*----------------------------------------*/ .ot-choose-space { padding-top: 60px; padding-bottom: 60px; } .ot-choose-titlebox .ot-sec-text { max-width: 675px; } .ot-choose-wrapp { margin-top: -35px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-choose-wrapp { margin-top: 35px; } } .ot-choose-wrapp .row [class*=col-]:not(:last-child) .ot-choose-item { margin-bottom: 45px; } .ot-choose-location-line { position: absolute; bottom: 62px; left: 0; right: 0; text-align: center; margin: auto; } @media only screen and (min-width: 576px) and (max-width: 767px) { .ot-choose-location-line { bottom: 30px; } } @media (max-width: 575px) { .ot-choose-location-line { bottom: 18px; } } .ot-choose-earth-box { margin-top: -11rem; } @media (max-width: 575px) { .ot-choose-earth-box { margin-top: 0; } } .ot-choose-earth-img { position: relative; top: 24rem; } @media only screen and (min-width: 768px) and (max-width: 991px) { .ot-choose-earth-img { top: 18rem; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .ot-choose-earth-img { top: 14rem; } } @media (max-width: 575px) { .ot-choose-earth-img { top: 100px; } } .ot-choose-earth-img img { animation: animation-star 50s cubic-bezier(1, 0.99, 0.03, 0.01) infinite; } .ot-choose-shape-left { position: absolute; top: 17%; left: 0; animation: moving2 5s linear infinite; } .ot-choose-shape-right { position: absolute; bottom: 41%; right: 0; animation: moving2 5s linear infinite; } .ot-choose-overlay { position: relative; } .ot-choose-overlay::before { position: absolute; width: 100%; height: 100%; top: 0; left: 0; content: ""; background: var(--ot-smoke-color2); opacity: 0.9; } .ot-choose-triangle-shape { position: absolute; top: 0; left: 0; right: 0; text-align: center; margin: auto; border: 14px solid #86bb46; border-radius: 100px; width: 735px; height: 735px; background: rgba(0, 34, 68, 0.95); transform: rotate(43deg); } @media only screen and (min-width: 576px) and (max-width: 767px) { .ot-choose-triangle-shape { left: auto; right: -12%; } } @media (max-width: 575px) { .ot-choose-triangle-shape { left: auto; right: -65%; } } .ot-choose-triangle-shape.top { top: 70%; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .ot-choose-triangle-shape.top { top: 100%; } } @media (max-width: 575px) { .ot-choose-triangle-shape.top { top: 102%; } } .ot-choose-triangle-shape.bottom { top: auto; bottom: 60%; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .ot-choose-triangle-shape.bottom { bottom: 80%; } } @media (max-width: 575px) { .ot-choose-triangle-shape.bottom { bottom: 85%; } } @media (max-width: 575px) { .ot-choose-content .ot-box-title { font-size: 20px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .ot-choose-thumb { margin-top: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-choose-thumb { margin-top: -35px; } } @media (max-width: 575px) { .ot-choose-thumb { margin-bottom: 30px; } } .ot-choose-icon { flex: 0 0 auto; } .ot-choose-item { margin-bottom: 45px; } .ot-choose-titlebox2 .ot-sec-title { max-width: 650px; } @media (min-width: 0) and (max-width: 991px) { .ot-choose-titlebox2 .ot-sec-title { max-width: 100%; } } .ot-choose-thumb-2 { flex: 0 0 72%; border-radius: 20px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ot-choose-thumb-2 { flex: 0 0 auto; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .ot-choose-thumb-2 { flex: 0 0 60%; } } .ot-choose-left { gap: 30px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-choose-left { gap: 20px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ot-choose-left { gap: 20px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .ot-choose-left { gap: 20px; } } @media (min-width: 0) and (max-width: 1199px) { .ot-choose-left { margin-bottom: 40px; } } @media (min-width: 0) and (max-width: 767px) { .ot-choose-left { gap: 20px; flex-direction: column-reverse; } } .ot-choose-left .ot-user-img { margin-left: -33px; margin-right: 0; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-choose-left .ot-user-img { margin-left: -40px; } } .ot-choose-feature-box { margin-left: -54px; } @media (min-width: 0) and (max-width: 1199px) { .ot-choose-feature-box { margin-left: 0; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-choose-feature-box .ot-box-title { margin-bottom: 5px; } } .ot-choose-feature-item { padding-left: 30px; position: relative; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-choose-feature-item { padding-left: 50px; } } @media (max-width: 575px) { .ot-choose-feature-item { padding-left: 20px; } } .ot-choose-feature-item::before { position: absolute; content: ""; border: 2.5px solid #d8dde1; width: 2.5px; height: 100%; top: 0; left: 0; background: #d8dde1; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-choose-feature-item::before { left: 25px; } } .ot-choose-feature-item:not(:last-child) { margin-bottom: 30px; } .ot-choose-content2 { display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; } .ot-choose-content2 .ot-badge-item { position: relative; margin-bottom: 80px; } .ot-choose-content2 .ot-badge-number { width: 110px; height: 110px; border-radius: 5px; background-color: var(--ot-theme-color); color: var(--ot-white-color); font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 74px; clip-path: polygon(0 0, 100% 0, 100% 25%, 25% 100%, 0 100%); } .ot-choose-content2 .ot-badge-icon { position: absolute; content: ""; top: 62px; left: 58px; width: 100px; height: 100px; background-color: var(--ot-smoke-color); border-radius: 100%; display: flex; align-items: center; justify-content: center; } .ot-choose-content2 .ot-badge-title { font-weight: 700; font-size: 24px; text-align: center; color: var(--ot-title-color); } .ot-choose-content2 .ot-badge-text { font-weight: 500; font-size: 16px; text-align: center; color: var(--ot-body-color); } .ot-choose-space2 { padding-bottom: 400px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-choose-space2 { padding-bottom: 150px; } } .ot-choose-content-2 { padding: 60px 0; } @media only screen and (min-width: 576px) and (max-width: 767px) { .ot-choose-content-2 { padding: 30px 0; } } @media (max-width: 575px) { .ot-choose-content-2 { padding: 10px 0 20px 0; } } .ot-choose-content-2 .ot-box-title { font-size: 30px; color: var(--ot-title-color); } .ot-choose-wrapp-2 .ot-choose-content-2 { transition: all 0.3s ease-out; } .ot-choose-wrapp-2 .ot-choose-content-2:hover .ot-box-title { color: var(--ot-theme-color); border-bottom: 1px solid var(--ot-theme-color); } .ot-video-icon2 { position: absolute; left: 37%; top: 39%; } .ot-review-box { padding: 45px 30px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-review-box { padding: 49px 20px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ot-review-box { padding: 62px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .ot-review-box { padding: 36px 30px; } } @media (min-width: 0) and (max-width: 767px) { .ot-review-box { width: 100%; } } .review-text { font-weight: 600; font-size: 18px; line-height: 1.5; text-align: center; } .review-count { font-size: 48px; font-weight: 700; line-height: 1.1; } @media (min-width: 0) and (max-width: 1199px) { .ot-battery-image { margin-bottom: 0; } } .ot-card-1 { top: 0; } .ot-card-2 { top: 100px; } .ot-card-3 { top: 200px; } .ot-card-4 { top: 300px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-card-2 { top: 30px; } .ot-card-3 { top: 60px; } .ot-card-4 { top: 90px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-award-list-wrap { margin-bottom: 60px; } } .choose-border { border-bottom: 1px solid var(--ot-border-color); } .ot-award-list-thumb-wrap { height: 80%; width: 90%; transform: scale(0.76); } @media only screen and (min-width: 768px) and (max-width: 991px) { .ot-award-list-thumb-wrap { margin-bottom: 900px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .ot-award-list-thumb-wrap { margin-bottom: 670px; } } @media (max-width: 575px) { .ot-award-list-thumb-wrap { margin-bottom: 470px; } } .ot-award-list-thumb-1, .ot-award-list-thumb-2, .ot-award-list-thumb-3, .ot-award-list-thumb-4, .ot-award-list-thumb-5, .ot-award-list-thumb-6 { top: 0; left: 0; width: 100%; visibility: hidden; position: absolute; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-award-list-item { padding-bottom: 60px; padding-top: 60px; border-bottom: 1px solid var(--ot-border-color); position: relative; cursor: pointer; } @media (max-width: 575px) { .ot-award-list-item { padding-top: 40px; padding-bottom: 40px; } } #ot-award-thumb.ot-award-list-thumb-1 .ot-award-list-thumb-1, #ot-award-thumb.ot-award-list-thumb-2 .ot-award-list-thumb-2, #ot-award-thumb.ot-award-list-thumb-3 .ot-award-list-thumb-3, #ot-award-thumb.ot-award-list-thumb-4 .ot-award-list-thumb-4, #ot-award-thumb.ot-award-list-thumb-5 .ot-award-list-thumb-5, #ot-award-thumb.ot-award-list-thumb-6 .ot-award-list-thumb-6 { opacity: 1; visibility: visible; transform: scale(1.25); } /*----------------------------------------*/ /* 7.25 Slider css /*----------------------------------------*/ .ot-slider-overlay1::before { position: absolute; width: 100%; height: 100%; left: 0; top: 0; content: ""; background-image: url(/assets/img/bg/slider-overlay-12.png); background-position: center; background-size: cover; background-repeat: no-repeat; z-index: 2; border-radius: 22px; opacity: 0.85; } .ot-slider-styles { margin-top: 125px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .ot-slider-styles { margin-top: 111px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .ot-slider-styles { margin-top: 110px; } } @media (max-width: 575px) { .ot-slider-styles { margin-top: 90px; } } .ot-slider-wrapp { margin: 0 20px; border-radius: 22px; padding-bottom: 20px; } @media (max-width: 575px) { .ot-slider-wrapp { margin: 15px; } } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-slider-wrapp.bg-mask { mask-image: none !important; } } .ot-slider-bg { position: absolute; inset: 0; overflow: hidden; border-radius: 22px; } .ot-slider-inner-1 { overflow: hidden; padding-top: 217px; padding-bottom: 208px; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-slider-inner-1 { padding-top: 140px; padding-bottom: 154px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .ot-slider-inner-1 { padding-top: 100px; padding-bottom: 114px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-slider-inner-1 { padding-top: 100px; padding-bottom: 0; } } @media (max-width: 575px) { .ot-slider-inner-1 { padding-top: 70px; } } .ot-slider-title { font-size: 64px; font-weight: 800; line-height: 1.16; color: var(--ot-white-color); } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-slider-title { font-size: 54px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .ot-slider-title { font-size: 45px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .ot-slider-title { font-size: 37px; } } @media (max-width: 575px) { .ot-slider-title { font-size: 30px; } } .ot-slider-client-box { padding: 6px 14px; border-radius: 30px; border: 1px solid rgba(255, 255, 255, 0.6); } @media (max-width: 575px) { .ot-slider-client-box { padding: 6px 12px; } } .ot-slider-client { margin-right: -5px; } .ot-slider-client img { width: 26px; height: 26px; line-height: 26px; border: 1px solid var(--ot-white-color); border-radius: 1000px; } .ot-slider-client-text { font-size: 16px; font-weight: 700; color: var(--ot-white-color); text-transform: uppercase; margin-bottom: 0; margin-left: 16px; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-slider-content { margin-left: 60px; } } .ot-slider-content .ot-sec-text { font-size: 18px; max-width: 620px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-slider-content .ot-sec-text { max-width: 100%; } } @media (max-width: 575px) { .ot-slider-content .ot-sec-text { font-size: 16px; } } .ot-slider-shape-1 { position: absolute; right: 15.5%; bottom: 0; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-slider-shape-1 { right: 13%; bottom: -100px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ot-slider-shape-1 { right: 0; bottom: -100px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-slider-shape-1 { position: relative; text-align: center; right: 0; height: 400px; } } .ot-slider-arrow { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 45px; height: 45px; line-height: 50px; border-radius: 50%; color: var(--ot-white-color); background: var(--ot-theme-color); display: inline-block; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-slider-arrow { z-index: 2; } } .ot-slider-arrow:hover { color: var(--ot-title-color); background: var(--ot-theme-color2); } .ot-slider-arrow.ot-prev { right: auto; left: 13px; } @media only screen and (min-width: 1700px) and (max-width: 1800px) { .ot-slider-arrow.ot-prev { left: 12px; } } @media only screen and (min-width: 1600px) and (max-width: 1699px) { .ot-slider-arrow.ot-prev { left: 10px; } } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .ot-slider-arrow.ot-prev { left: 40px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-slider-arrow.ot-prev { left: 30px; } } .ot-slider-arrow.ot-next { left: auto; right: 16px; } @media only screen and (min-width: 1700px) and (max-width: 1800px) { .ot-slider-arrow.ot-next { right: 12px; } } @media only screen and (min-width: 1600px) and (max-width: 1699px) { .ot-slider-arrow.ot-next { right: 10px; } } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .ot-slider-arrow.ot-next { right: 40px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-slider-arrow.ot-next { right: 30px; } } .ot-slider-overlay-2 { position: relative; } .ot-slider-overlay-2::before { position: absolute; width: 100%; height: 100%; left: 0; top: 0; content: ""; background: rgba(0, 34, 68, 0.9); z-index: 2; } .ot-slider-userbox .ot-user-img { margin-right: -18px; } .ot-slider-userbox .ot-user-img:nth-child(even) { position: relative; z-index: 5; } .ot-slider-userbox .ot-user-img img { width: 55px; height: 55px; object-fit: cover; border-radius: 1000px; border: 2px solid var(--ot-white-color); } .ot-slider-userbox .ot-user-counter { font-size: 20px; font-weight: 700; width: 55px; height: 55px; line-height: 55px; } .ot-slider-user-rating .ot-user-text span { font-size: 20px; } .ot-text-slider-space { padding-top: 25px; padding-bottom: 20px; margin-top: -2px; } .ot-text-slider-title { font-weight: 700; font-size: 36px; line-height: 1; display: flex; align-items: center; text-transform: uppercase; color: var(--ot-white-color); margin-bottom: 0; } .ot-text-slider .slider-icon { font-size: 56px; line-height: 0; margin: 0 40px; } .ot-text-slider-style-2 { padding: 39px 0; margin: 0 -2px; border: 1px dashed rgba(216, 221, 225, 0.07); } .ot-text-slider-style-2 .ot-text-slider-title { font-weight: 700; font-size: 84px; color: transparent; letter-spacing: -0.02em; -webkit-text-stroke: 1px rgba(216, 221, 225, 0.2); text-transform: capitalize; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-text-slider-style-2 .ot-text-slider-title:hover { -webkit-text-stroke: 1px var(--ot-theme-color); } .ot-text-slider-style-2 .swiper-slide-active .ot-text-slider-title { -webkit-text-stroke: 1px var(--ot-theme-color); } .ot-text-slider-img { margin: 0 31px; } .ot-text-slider-img img { width: 220px; height: 89px; object-fit: cover; border-radius: 5px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-text-slider-curve { margin-top: -60px; } } .ot-text-slider.style-3::before { position: absolute; width: 100%; height: 100%; right: 0; top: 0; content: ""; z-index: 1; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .ot-text-slider.style-3 .rolling-active { margin-right: 50px; } .ot-text-slider.style-4 { position: relative; margin-top: -30px; margin-left: -50px; z-index: 2; } .ot-text-slider.style-4::before { position: absolute; width: 50px; height: 30px; left: 0; top: 0; content: ""; background-color: #7db23c; z-index: 3; clip-path: polygon(100% 100%, 0 0, 0 100%); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-text-slider.style-4::before { width: 28px; height: 28px; } } .ot-text-slider-brand { margin: 0 48px; } .slide-transtion { -webkit-transition-timing-function: linear; transition-timing-function: linear; } .slide-transtion .swiper-slide { width: auto; } .slider-2-thumb-sm { border-radius: 20px; cursor: pointer; overflow: hidden; } .slider-2-thumb-sm img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; } .slider-2-thumb-sm > video { width: 100%; min-height: 290px; border-radius: 20px; object-fit: cover; } @media (max-width: 575px) { .slider-2-thumb-sm > video { min-height: 210px; } } .ot-slider-inner-2 { padding-top: 275px; padding-bottom: 235px; } @media only screen and (min-width: 1700px) and (max-width: 1800px), only screen and (min-width: 1600px) and (max-width: 1699px) { .ot-slider-inner-2 { padding-top: 200px; } } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-slider-inner-2 { padding-top: 180px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ot-slider-inner-2 { padding-top: 140px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-slider-inner-2 { padding-top: 140px; padding-bottom: 440px; } } .ot-slider-inner-2 video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; } .thumb-slider2.slider-tab { border-radius: 20px 0 0 20px; } .ot-slider-2-thumb-wrapp { position: absolute; width: 1208px; right: -75px; bottom: 95px; z-index: 55; max-height: 293px; } @media only screen and (min-width: 1700px) and (max-width: 1800px), only screen and (min-width: 1600px) and (max-width: 1699px) { .ot-slider-2-thumb-wrapp { bottom: 80px; right: -11%; } } @media only screen and (min-width: 1600px) and (max-width: 1699px) { .ot-slider-2-thumb-wrapp { bottom: 80px; right: -16%; } } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .ot-slider-2-thumb-wrapp { width: 1000px; bottom: 60px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-slider-2-thumb-wrapp { width: 1015px; right: -20%; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ot-slider-2-thumb-wrapp { width: 1015px; right: -30%; bottom: 50px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .ot-slider-2-thumb-wrapp { bottom: 77px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-slider-2-thumb-wrapp { width: 100%; bottom: 15%; right: auto; left: 0; } } .ot-slider-2-thumb-wrapp::before { position: absolute; width: 31.5%; height: 100%; top: 0; left: 0; content: ""; background: linear-gradient(270deg, rgba(0, 34, 68, 0.2) 0%, rgba(0, 34, 68, 0.6) 31%, rgba(0, 34, 68, 0.9) 68%, #024 100%); z-index: 2; border-radius: 20px 0 0 20px; } @media (max-width: 575px) { .ot-slider-2-thumb-wrapp::before { display: none; } } .ot-slider-2-thumb-wrapp .ot-slider .swiper-slide { border: 3px solid transparent; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-slider-2-thumb-wrapp .ot-slider .swiper-slide-active .slider-2-thumb-sm img, .ot-slider-2-thumb-wrapp .ot-slider .swiper-slide-active .slider-2-thumb-sm video { border: 3px solid var(--ot-theme-color); border-radius: 22px; } @media (max-width: 575px) { .slider-tab { width: 280px; height: 216px; } } .slider-transparent { position: absolute; width: 100%; } .slider-transparent.ot-text-slider-curve { padding: 30px 0; margin-top: -30px; } .ot-slider-inner-3 { padding-top: 270px; padding-bottom: 190px; } @media only screen and (min-width: 1700px) and (max-width: 1800px), only screen and (min-width: 1600px) and (max-width: 1699px) { .ot-slider-inner-3 { padding-top: 200px; } } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .ot-slider-inner-3 { padding-top: 200px; padding-bottom: 85px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-slider-inner-3 { padding-top: 180px; padding-bottom: 15px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ot-slider-inner-3 { padding-top: 140px; padding-bottom: 100px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-slider-inner-3 { padding-top: 140px; padding-bottom: 80px; } } @media (max-width: 1599px) { .ot-slider-inner-3 .ot-slider-content { max-width: 660px; } } @media (max-width: 1199px) { .ot-slider-inner-3 .ot-slider-content { max-width: 100%; margin-bottom: 60px; } } .ot-slider-inner-3 .ot-slider-content .ot-sec-text { font-size: 24px; font-weight: 700; } @media only screen and (min-width: 576px) and (max-width: 767px) { .ot-slider-inner-3 .ot-slider-content .ot-sec-text { font-size: 18px; } } @media (max-width: 575px) { .ot-slider-inner-3 .ot-slider-content .ot-sec-text { font-size: 16px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .ot-slider-inner-3 .ot-slider-title { font-size: 35px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .ot-slider-inner-3 .ot-slider-title { font-size: 30px; } } @media (max-width: 575px) { .ot-slider-inner-3 .ot-slider-title { font-size: 24px; } } .ot-slider-subtitle { color: var(--ot-theme-color); margin-bottom: 12px; display: inline-block; } .slider-3-thumb-sm { width: 56px; height: 56px; line-height: 56px; text-align: center; border: 1px solid var(--ot-theme-color); background: var(--ot-white-color); border-radius: 1000px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; cursor: pointer; } .ot-slider-3-thumb-wrapp { position: absolute; max-width: 300px; padding: 0 50px; bottom: 5px; right: 18%; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .ot-slider-3-thumb-wrapp { bottom: -2px; right: 14.4%; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-slider-3-thumb-wrapp { bottom: 0; right: 13%; } } @media (max-width: 1199px) { .ot-slider-3-thumb-wrapp { left: 0; right: 0; text-align: center; margin: auto; } } @media (max-width: 575px) { .ot-slider-3-thumb-wrapp { padding: 0; bottom: 30px; } } .ot-slider-overlay-3 { margin: 40px; border-radius: 34px; z-index: 2; } @media (max-width: 1399px) { .ot-slider-overlay-3 { margin: 15px; } } .ot-slider-overlay-3::before { position: absolute; width: 100%; height: 100%; left: 0; top: 0; content: ""; background: linear-gradient(142deg, rgba(50, 67, 29, 0.94) 0%, #000 100%); z-index: -1; border-radius: 34px; } .ot-slider-green-sun { position: absolute; width: 738px; height: 738px; top: 50%; right: 0; border-radius: 100%; background: var(--ot-theme-color); transform: translateY(-50%); filter: blur(500px); z-index: -1; } .ot-slider-thumb { margin-left: -180px; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .ot-slider-thumb { margin-right: 100px; } } @media (max-width: 1199px) { .ot-slider-thumb { margin-left: 0; text-align: center; margin: auto; } } .ot-slider-thumb img { max-width: inherit; } @media (max-width: 1699px) { .ot-slider-thumb img { max-width: 100%; } } .swiper-slide-thumb-active .tab-btn { border: 4px solid var(--ot-theme-color); } .ot-slider-border { position: absolute; top: 40px; left: 40px; right: 40px; text-align: center; margin: auto; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-slider-border { top: 16px; left: 16px; right: 16px; } } @media (max-width: 1199px) { .ot-slider-border { height: 95%; } } .ot-slider-border > img { width: 100%; } @media (max-width: 575px) { .ot-slider-border .slider-tab { width: 100%; height: auto; } } /*----------------------------------------*/ /* 7.5 Funfact css /*----------------------------------------*/ .ot-funfact-space1 { margin-top: -100px; margin-bottom: -65px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-funfact-space1 { margin-top: -120px; margin-bottom: -85px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .ot-funfact-space1 { margin-bottom: -19rem; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-funfact-space1 { margin-bottom: -31rem; margin-top: -165px; } } .ot-funfact-bdr { position: absolute; inset: 0; border-radius: 5px; } .ot-funfact-icon { font-size: 45px; width: 80px; height: 80px; line-height: 85px; text-align: center; color: var(--ot-white-color); border-radius: 1000px; background-color: var(--ot-theme-color); flex: 0 0 auto; margin-right: -28px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-funfact-icon { width: 70px; height: 70px; line-height: 80px; } } .ot-funfact-content { padding: 18px 30px 18px 64px; min-width: 246px; min-height: 135px; border-radius: 5px; background: var(--ot-white-color); } @media only screen and (min-width: 1200px) and (max-width: 1399px), (max-width: 575px) { .ot-funfact-content { padding: 18px 30px 18px 50px; } } .ot-funfact-number { font-weight: 800; font-size: 64px; line-height: 1; color: var(--ot-title-color2); margin-bottom: 0; } @media (max-width: 575px) { .ot-funfact-number { font-size: 45px; } } .ot-funfact-box2 { flex: 0 0 auto; } @media (max-width: 575px) { .ot-funfact-box2 { margin: 20px 0; } } .ot-funfact-card2 { padding: 40px; padding-bottom: 35px; text-align: center; min-width: 306px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-funfact-card2 { min-width: auto; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ot-funfact-card2 { padding: 20px; padding-bottom: 10px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .ot-funfact-card2 { padding: 28px; padding-bottom: 14px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .ot-funfact-card2 { padding-bottom: 24.5px; } } .ot-funfact-card2 .funfact-number { font-size: 48px; font-weight: 700; line-height: 1; text-transform: capitalize; margin-bottom: 0; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px) { .ot-funfact-card2 .funfact-number { font-size: 35px; } } .ot-funfact-card2 .ot-sec-text { font-size: 18px; } .ot-funfact-wrapp3 { padding: 60px 55px; border-radius: 20px; } .ot-funfact-card3 .ot-funfact-number { font-size: 48px; font-weight: 700; margin-bottom: 5px; } .ot-funfact-card3 .ot-funfact-content { min-width: 223px; min-height: 119px; } .ot-funfact-card3 .ot-funfact-icon { font-size: 40px; line-height: 88px; background-color: var(--ot-title-color); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-funfact-card3:hover .ot-funfact-icon { color: var(--ot-title-color); background-color: var(--ot-theme-color2); transform: scaleX(-1); } /*----------------------------------------*/ /* 7.10 Project css /*----------------------------------------*/ .ot-project-card { border-radius: 20px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-project-card:hover { background: rgba(254, 197, 27, 0.1); } .ot-project-card:hover .ot-project-img1 img { border-color: var(--ot-theme-color2); } .ot-project-card:hover .ot-project-feature-box { background: var(--ot-theme-color2); } .ot-project-card:hover .ot-project-feature { color: var(--ot-title-color); } .ot-project-card:hover .ot-project-feature i { color: var(--ot-title-color); } .ot-project-img1 img { width: 100%; object-fit: cover; border: 10px solid #86bb46; border-radius: 20px 20px 0 0; transition: 0.3s; } .ot-project-feature-box { position: absolute; bottom: 0; left: 10px; padding: 10px 55px 10px 10px; background: var(--ot-theme-color); border-radius: 0 91px 0 0; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media (max-width: 575px) { .ot-project-feature-box { padding: 10px 55px 10px 10px; } } .ot-project-feature { font-size: 16px; font-weight: 600; line-height: 1; color: var(--ot-white-color); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-project-feature:not(:last-child) { margin-right: 15px; } .ot-project-feature i { font-size: 14px; color: var(--ot-white-color); line-height: 1; margin-right: 5px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-project-info { position: relative; font-weight: 500; font-size: 16px; color: var(--ot-body-color); padding-left: 15px; } .ot-project-info::before { position: absolute; width: 1.5px; height: 16px; top: 50%; left: 0; transform: translateY(-50%); content: ""; background: var(--ot-body-color); } .ot-project-content { padding: 25.7px 30px; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .ot-project-content { padding: 15px; } } @media (max-width: 575px) { .ot-project-content .ot-box-title { font-size: 20px; } } .ot-project-active { margin: 0 -270px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-project-active { padding: 0 15px; margin: auto; } } .ot-project-card2 { overflow: hidden; border-radius: 10px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-project-card2 .ot-project-content { position: absolute; padding: 30px; height: 94%; margin: 10px; left: 0; right: 0; top: 59.5%; border: 1px solid var(--ot-white-color) transparent; border-radius: 10px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .ot-project-card2 .ot-project-content { top: 52.5%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .ot-project-card2 .ot-project-content { top: 68.5%; } } @media (max-width: 575px) { .ot-project-card2 .ot-project-content { padding: 15px; top: 48.5%; } } .ot-project-card2 .ot-project-thumb { position: relative; overflow: hidden; border-radius: 10px; } .ot-project-card2 .ot-project-thumb img { width: 100%; object-fit: cover; border-radius: 10px; } .ot-project-card2 .ot-project-thumb::before { position: absolute; width: 100%; height: 100%; content: ""; top: 0; left: 0; background: linear-gradient(1deg, rgba(0, 34, 68, 0.88) 0%, rgba(0, 85, 170, 0) 100%); } .ot-project-card2 .ot-project-title { font-weight: 700; font-size: 24px; line-height: 1.4; margin-bottom: 0; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .ot-project-card2 .ot-project-title { font-size: 20px; } } @media (max-width: 575px) { .ot-project-card2 .ot-project-title { font-size: 18px; } } .ot-project-card2 .ot-project-number { font-size: 48px; font-weight: 700; line-height: 1; display: inline-block; } .ot-project-card2 .ot-project-categorie { margin-bottom: 0; } .ot-project-card2 .ot-project-btn { position: absolute; bottom: -50px; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-project-card2 .ot-project-arrow { width: 75px; height: 75px; line-height: 72px; text-align: center; display: inline-block; color: var(--ot-theme-color); font-size: 20px; font-weight: 700; cursor: pointer; border: 1px solid var(--ot-white-color); border-radius: 100%; } .ot-project-card2 .ot-project-arrow i, .ot-project-card2 .ot-project-arrow span, .ot-project-card2 .ot-project-arrow svg { width: 60px; height: 60px; line-height: 60px; text-align: center; color: var(--ot-theme-color); background: var(--ot-white-color); border-radius: 100%; } .ot-project-card2:hover .ot-project-content { bottom: auto; top: 0; border: 1px solid var(--ot-white-color); background: rgba(134, 187, 70, 0.88); } .ot-project-card2:hover .ot-project-btn { opacity: 1; visibility: visible; bottom: 50px; } .ot-project-active2 { margin-right: -34%; } @media only screen and (min-width: 1700px) and (max-width: 1800px) { .ot-project-active2 { margin-right: -29%; } } @media only screen and (min-width: 1600px) and (max-width: 1699px) { .ot-project-active2 { margin-right: -21.5%; } } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .ot-project-active2 { margin-right: -12%; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-project-active2 { margin-right: -53%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .ot-project-active2 { margin-right: -18%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .ot-project-active2 { margin-right: 0; } } @media (max-width: 575px) { .ot-project-active2 { margin-right: 0; } } .ot-project-details-imgbox { margin-bottom: 23px; } .ot-project-details-wrapp .ot-project-details-img img { border-radius: 30px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-project-details-wrapp .ot-project-details-img img { border-radius: 10px; } } .ot-project-details-wrapp .ot-project-details-user-img img { border-radius: 10px; } .ot-project-details-info-wrapp { margin-bottom: 43px; } .ot-project-details-img { margin-bottom: 50px; } @media (max-width: 575px) { .ot-project-details-img { margin-bottom: 20px; } } .ot-project-details-info-item { position: relative; } .ot-project-details-info-item ::after { position: absolute; width: 266px; height: 1px; top: 50%; content: ""; left: 16rem; background: var(--ot-border-color); transform: translateY(-50%); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-project-details-info-item ::after { width: 200px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-project-details-info-item ::after { display: none; } } .ot-project-details-info-text { font-size: 16px; font-weight: 700; } .ot-project-details-info-title { font-size: 24px; font-weight: 700; text-transform: capitalize; color: var(--ot-title-color2); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-project-details-info-title { font-size: 18px; } } /*----------------------------------------*/ /* 7.15 Skill css /*----------------------------------------*/ .ot-skill-space1 { padding-top: 184px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .ot-skill-space1 { padding-top: 24rem; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-skill-space1 { padding-top: 40rem; } } .ot-skill-overlay { position: relative; } .ot-skill-overlay::before { position: absolute; width: 100%; height: 100%; top: 0; left: 0; content: ""; background: #024; opacity: 0.8; } .ot-skill-main { width: 100%; max-width: 100%; display: flex; flex-direction: column; gap: 20px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-skill-main { max-width: 100%; } } .ot-skill-box1 { padding: 85px 150px; border-radius: 10px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ot-skill-box1 { padding: 85px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .ot-skill-box1 { padding: 45px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .ot-skill-box1 { padding: 30px; } } @media (max-width: 575px) { .ot-skill-box1 { padding: 15px; } } .ot-skill-item { display: flex; flex-direction: column; gap: 10px; padding-bottom: 0; } .ot-skill-name { font-size: 16px; font-weight: 500; line-height: 1.6; color: var(--ot-white-color); } .ot-skill-bar { height: 8px; border-radius: 100px; background: #E9EBEE; } .ot-skill-per { position: relative; width: 0; height: 8px; border-radius: 100px; transition: 1s linear; background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-size: 10px 10px; background-color: var(--ot-smoke-color2); } .ot-skill-per:before { content: attr(data-per); position: absolute; padding: 0px 5px; color: var(--ot-white-color); font-size: 11px; font-weight: 700; line-height: 20px; border-radius: 4px; top: -35px; right: 0; transform: translateX(50%); } .ot-skill-per:after { content: ""; position: absolute; width: 8px; height: 14px; top: -20px; right: 0; clip-path: polygon(100% 0, 0 0, 100% 100%); } /*----------------------------------------*/ /* 7.17 Team css /*----------------------------------------*/ .ot-team-space1 { padding-top: 220px; padding-bottom: 120px; } @media (min-width: 0px) and (max-width: 1199px) { .ot-team-space1 { padding-top: 140px; padding-bottom: 80px; } } .ot-team-overlay { position: relative; } .ot-team-overlay::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; background: var(--ot-smoke-color); opacity: 0.7; } .ot-team-shape { position: absolute; bottom: 0; right: 0; z-index: 1; } .ot-team-card { padding: 30px; border-radius: 10px; background-color: var(--ot-white-color); } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-team-card { padding: 15px; } } @media (max-width: 575px) { .ot-team-card .ot-box-title { font-size: 20px; } } .ot-team-card:hover .ot-img-hover img { transform: scale(1.1); } .ot-team-card:hover .ot-img-hover::before { animation: shine 1s; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-team-card .ot-team-img1 { margin-bottom: 40px; } } .ot-team-sm-card { overflow: hidden; border-radius: 10px; } .ot-team-sm-card:hover .ot-team-hover1 { opacity: 1; right: 0; visibility: visible; } .ot-team-img1 { flex: 0 0 auto; border-radius: 10px; } .ot-team-img1 img { width: 100%; border-radius: 10px; transition: 1.2s; } .ot-team-content .ot-sec-text { max-width: 306px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-team-content .ot-sec-text { max-width: 100%; } } .ot-team-designation { display: block; font-weight: 700; font-size: 16px; line-height: 1.6; } .ot-team-info { position: relative; font-weight: 500; line-height: 1; color: var(--ot-title-color); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media (max-width: 575px) { .ot-team-info { display: block; } } .ot-team-info:not(:last-child)::after { position: absolute; top: 0; right: -7px; width: 1px; height: 14px; content: ""; background: #B3C4D5; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media (max-width: 575px) { .ot-team-info:not(:last-child) { margin-bottom: 10px; } } .ot-team-info:hover { color: var(--ot-theme-color); } .ot-team-info-icon { margin-right: 5px; } .ot-team-hover1 { position: absolute; top: 0; right: -100%; width: 100%; height: 100%; opacity: 0; background: rgba(134, 187, 70, 0.8); border-radius: 10px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; z-index: 2; } .ot-team-hover-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--ot-white-color); font-size: 30px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-team-imgbox2 { margin-bottom: 50px; } } .ot-team-imgbox2 .ot-social-style-3 { margin-left: 58px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-team-imgbox2 .ot-social-style-3 { margin-left: 33px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-team-imgbox2 .ot-social-style-3 { margin-left: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-team-img2 img { width: 100%; } } .ot-team-img-shape { position: absolute; left: 20px; bottom: -40px; min-width: 388px; min-height: 336px; display: inline-block; background: var(--ot-theme-color); clip-path: polygon(0 35%, 0 0, 100% 66%, 100% 100%); z-index: -1; } .ot-team-indecator-up { position: absolute; left: 11px; bottom: 11px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-team-indecator-up { left: 0; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-team-indecator-up { display: none; } } .ot-team-indecator-down { position: absolute; right: 11px; top: 50px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-team-indecator-down { right: 0; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-team-indecator-down { display: none; } } .ot-team-content.style-2 { min-height: 60px; } .ot-team-content.style-2 .ot-team-title { font-weight: 700; font-size: 22px; line-height: 1.5; text-align: right; color: var(--ot-title-color2); margin-bottom: 0; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-team-content.style-2 .ot-team-title { font-size: 20px; text-align: left; } } .ot-team-card2 { position: relative; border: 1px solid transparent; border-radius: 5px; overflow: hidden; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-team-card2 .ot-team-img img { width: 100%; border-radius: 5px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-team-card2 .ot-team-content { position: absolute; content: ""; right: -70px; bottom: 110px; background-color: var(--ot-white-color); transform: translate(-12%, 0) rotate(-90deg); padding: 20px 47px 10px 25px; border-radius: 3px; height: 97px; width: 241px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media only screen and (min-width: 768px) and (max-width: 991px) { .ot-team-card2 .ot-team-content { padding: 15px 5px 5px 15px; height: 90px; width: 200px; right: -57px; bottom: 80px; } } @media (max-width: 575px) { .ot-team-card2 .ot-team-content { padding: 15px 5px 5px 15px; height: 70px; width: 86%; right: 20px; bottom: 25px; transform: none; } } .ot-team-card2 .ot-sec-title { font-size: 20px; } @media (max-width: 575px) { .ot-team-card2 .ot-sec-title { line-height: 0.4; } } .ot-team-card2 .ot-social-style-1 { position: absolute; display: flex; flex-direction: column; gap: 12px; left: -50px; top: 45px; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-team-card2 .ot-social-style-1 a { color: var(--ot-theme-color); background: var(--ot-white-color); } .ot-team-card2 .ot-social-style-1 a:hover { color: var(--ot-white-color); } .ot-team-card2:hover { border-color: var(--ot-theme-color); padding: 20px 15px 10px 15px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .ot-team-card2:hover { padding: 15px 10px 5px 10px; } } .ot-team-card2:hover .ot-team-content { right: -80px; bottom: 100px; background-color: var(--ot-theme-color); } @media only screen and (min-width: 768px) and (max-width: 991px) { .ot-team-card2:hover .ot-team-content { right: -63px; bottom: 75px; } } @media (max-width: 575px) { .ot-team-card2:hover .ot-team-content { right: 20px; bottom: 25px; } } .ot-team-card2:hover .ot-team-content .ot-sec-title { color: var(--ot-white-color); } .ot-team-card2:hover .ot-team-content .ot-sec-text { color: var(--ot-white-color); } .ot-team-card2:hover .ot-social-style-1 { opacity: 1; visibility: visible; left: 43px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .ot-team-card2:hover .ot-social-style-1 { left: 30px; top: 35px; } } @media (max-width: 575px) { .ot-team-card2:hover .ot-social-style-1 { gap: 8px; left: 30px; top: 35px; } } .ot-team-details-wrapp { margin-bottom: 120px; } .ot-team-details-wrapp .ot-skill-name { color: var(--ot-title-color2); font-weight: 700; } .ot-team-details-wrapp .ot-skill-per::before { color: var(--ot-title-color2); } .ot-team-details-wrapp .ot-sec-title { font-size: 30px; } .ot-team-details-wrapp .ot-team-details-title { color: var(--ot-title-color2); font-weight: 700; font-size: 48px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .ot-team-details-wrapp .ot-team-details-title { font-size: 36px; } } @media (max-width: 575px) { .ot-team-details-wrapp .ot-team-details-title { font-size: 30px; } } .ot-team-details-thumb { border: 20px solid var(--ot-smoke-color); border-radius: 20px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1600px) and (max-width: 1699px), only screen and (min-width: 1700px) and (max-width: 1800px) { .ot-team-details-thumb { margin-right: 30px; } } .ot-team-details-thumb img { width: 100%; } .ot-team-details-info { display: flex; flex-wrap: wrap; max-width: 565px; gap: 25px 60px; margin: 20px 0 35px 0; } .ot-team-details-info-item { display: flex; gap: 10px; align-items: center; } .ot-team-details-info-icon { width: 40px; height: 40px; font-size: 17px; line-height: 40px; text-align: center; color: var(--ot-theme-color); border: 1px solid var(--ot-theme-color); border-radius: 100%; background: var(--ot-white-color); flex: 0 0 auto; } .ot-team-details-info-categorie { color: var(--ot-stroke-color); font-weight: 400; font-size: 14px; } .ot-team-details-info-title { font-size: 18px; font-weight: 600; display: block; color: var(--ot-title-color2); } .ot-team-details-content { margin-top: 18px; } .ot-team-details-content .ot-social-style-3 a { width: 30px; height: 30px; font-size: 12px; font-weight: 700; line-height: 30px; } .ot-team-details-content .ot-team-designation { font-size: 18px; font-weight: 600; } .ot-team-details-content .ot-postbox-feature-list ul li:not(:last-child) { margin-bottom: 13px; } @media (max-width: 575px) { .ot-team-details-content .ot-postbox-feature-list ul { display: grid; grid-template-columns: auto; } } .ot-team-titlebox3 .ot-sec-text { max-width: 43%; margin: auto; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-team-titlebox3 .ot-sec-text { max-width: 48%; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ot-team-titlebox3 .ot-sec-text { max-width: 54%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .ot-team-titlebox3 .ot-sec-text { max-width: 75%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .ot-team-titlebox3 .ot-sec-text { max-width: 79%; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-team-titlebox3 .ot-sec-text { max-width: 95%; } } .ot-team-feature-list2 ul { display: grid; grid-template-columns: auto auto; padding-left: 0; } .ot-team-feature-list2 ul li { position: relative; padding-left: 22px; color: var(--ot-title-color2); font-weight: 600; font-size: 18px; list-style: none; } .ot-team-feature-list2 ul li::before { position: absolute; width: 10px; height: 10px; top: 6px; left: 0; content: ""; background: var(--ot-theme-color); border-radius: 100px; } .ot-social-style-1 a { position: relative; font-size: 16px; width: 45px; height: 45px; line-height: 45px; border-radius: 1000px; display: inline-block; text-align: center; color: var(--ot-white-color); background: var(--ot-body-color); overflow: hidden; z-index: 1; } .ot-social-style-1 a::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; opacity: 0; visibility: hidden; transform: scale(0.3); background: var(--ot-theme-color); z-index: -1; border-radius: 1000px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-social-style-1 a:not(:last-child) { margin-right: 6px; } .ot-social-style-1 a:hover::before { opacity: 1; visibility: visible; transform: scale(1); } .ot-social-style-2 { display: flex; gap: 20px; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-social-style-2 { gap: 10px; } } .ot-social-style-2 a { font-size: 18px; font-weight: 700; padding: 16px 34px; color: var(--ot-white-color); display: inline-block; background: var(--ot-smoke-color2); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; border-radius: 30px; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-social-style-2 a { font-size: 16px; padding: 12px 24px; } } .ot-social-style-2 a:hover { color: var(--ot-white-color); background: var(--ot-theme-color); } .ot-social-style-3 { display: flex; gap: 10px; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-social-style-3 { gap: 10px; } } .ot-social-style-3 a { width: 45px; height: 45px; font-size: 18px; font-weight: 700; line-height: 45px; color: var(--ot-title-color); text-align: center; border: 1px solid var(--ot-border-color); display: inline-block; background: none; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; border-radius: 100%; } .ot-social-style-3 a:hover { color: var(--ot-white-color); background: var(--ot-theme-color); border-color: var(--ot-theme-color); } .team-tab-slider3 { height: 360px; margin-top: -30px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .team-tab-slider3 { height: 50px; } } .team-tab-slider3 .swiper-slide { height: 70px !important; } .team-tab-slider3 .swiper-slide-active .ot-team-title { font-size: 36px; color: var(--ot-theme-color); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .team-tab-slider3 .swiper-slide-active .ot-team-title { font-size: 30px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .team-tab-slider3 .swiper-slide-active .ot-team-title { font-size: 27px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .team-tab-slider3 .swiper-slide-active .ot-team-title { font-size: 20px; } } /*----------------------------------------*/ /* 7.2 Cta css /*----------------------------------------*/ .ot-cta-style-1 .cta-icon { font-size: 24px; width: 56px; height: 56px; line-height: 60px; display: inline-block; text-align: center; color: var(--ot-white-color); border-radius: 1000px; background-color: var(--ot-theme-color); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-cta-style-1 .cta-icon:hover { color: var(--ot-white-color); background-color: var(--ot-theme-color2); } .ot-cta-style-1 .cta-info-title { font-size: 16px; font-weight: 700; line-height: 1.5; margin-bottom: 0; } .ot-cta-style-1 .cta-info-text { font-weight: 700; font-size: 20px; margin-bottom: 0; } @media (max-width: 575px) { .ot-cta-box-1 > .ot-btn-primary { margin-bottom: 10px; } } .ot-cta-overlay { position: relative; } .ot-cta-overlay::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--ot-theme-color); opacity: 0.8; } .ot-cta-title { font-size: 20px; font-weight: 700; text-transform: uppercase; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-cta-title { margin-bottom: 30px; } } .ot-cta-titlebox2 .ot-sec-title { font-size: 123px; font-weight: 700; padding-bottom: 35px; margin-bottom: 35px; line-height: 1; border-bottom: 1px dashed var(--ot-white-color); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-cta-titlebox2 .ot-sec-title { font-size: 110px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ot-cta-titlebox2 .ot-sec-title { font-size: 90px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .ot-cta-titlebox2 .ot-sec-title { font-size: 70px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .ot-cta-titlebox2 .ot-sec-title { font-size: 50px; } } @media (max-width: 575px) { .ot-cta-titlebox2 .ot-sec-title { font-size: 28px; } } .ot-cta-dscbox { max-width: 523px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .ot-cta-dscbox { max-width: 100%; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-cta-dscbox { max-width: 100%; margin-bottom: 30px; } } .ot-cta-dscbox .ot-sec-text { margin-bottom: 0; } .ot-cta-icon2 { flex: 0 0 auto; } @media (max-width: 575px) { .ot-cta-icon2 { display: block; margin-bottom: 10px; } } .ot-cta-img-1 img, .ot-cta-img-2 img { max-width: fit-content; height: -webkit-fill-available; } .ot-cta-img-1 { clip-path: polygon(0 0, 100% 0, 60% 100%, 0 100%); } .ot-cta-img-2 { clip-path: polygon(0 0, 100% 0, 100% 100%, 40% 100%); } .ot-cta-wrapper { clip-path: polygon(6% 0%, 94% 0%, 100% 100%, 0 100%); margin: 0 -75px; } .ot-cta-wrapper .ot-sec-title { max-width: 90%; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-cta-wrapper .ot-sec-title { max-width: 100%; } } @media only screen and (min-width: 1700px) and (max-width: 1800px) { .ot-cta-wrapper { clip-path: polygon(7% 0%, 93% 0%, 100% 100%, 0 100%); padding: 0 65px; } } @media only screen and (min-width: 1600px) and (max-width: 1699px) { .ot-cta-wrapper { clip-path: polygon(7.4% 0%, 92.6% 0%, 100% 100%, 0 100%); padding: 0 65px; } } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .ot-cta-wrapper { clip-path: polygon(8.9% 0%, 91.1% 0%, 100% 100%, 0 100%); padding: 0 80px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-cta-wrapper { clip-path: polygon(11% 0%, 89% 0%, 100% 100%, 0 100%); padding: 0 90px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-cta-wrapper { clip-path: polygon(14% 0%, 86% 0%, 100% 100%, 0 100%); padding: 0 90px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-cta-wrapper { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0 100%); padding: 0; margin: 0; padding: 30px 0; } } .ot-cta-wrapper .ot-sec-title { font-size: 36px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-cta-wrapper .ot-sec-title { font-size: 28px; } } .ot-cta-wrapp-2 .ot-btn-primary { border: 1px solid var(--ot-white-color); } @media only screen and (min-width: 768px) and (max-width: 991px) { .ot-cta-wrapp-2 .ot-btn-primary { padding: 15px 30px; } } .ot-cta-wrapp-2 .ot-btn-primary:hover { border: 0; } .ot-cta-wrapp-2 .ot-testimonial-btn-2 .ot-btn-primary { padding: 15px 30px; } /*----------------------------------------*/ /* 7.22 Case study css /*----------------------------------------*/ .ot-casestudy-space { padding-top: 344px; margin-top: -230px; } .ot-casestudy-card { height: 100%; overflow: hidden; border-radius: 10px; } .ot-casestudy-card::before { position: absolute; width: 100%; height: 100%; left: 0; top: 0; content: ""; background: var(--ot-smoke-color2); opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-casestudy-img1 { height: 100%; border-radius: 10px; } .ot-casestudy-img1 a img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; } .ot-casestudy-content { position: absolute; left: 20px; right: 20px; bottom: 20px; padding: 30px; border: 3px solid var(--ot-white-color); border-radius: 10px; z-index: 3; height: 90%; display: flex; flex-direction: column; justify-content: end; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media (max-width: 575px) { .ot-casestudy-content { left: 10px; right: 10px; padding: 10px; } } @media (max-width: 575px) { .ot-casestudy-content .ot-box-title { font-size: 20px; } } .ot-casestudy-categorie { position: relative; font-size: 18px; font-weight: 600; color: var(--ot-white-color); padding-left: 70px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-casestudy-categorie::before { position: absolute; width: 58px; height: 1.5px; top: 50%; transform: translateY(-50%); left: 0; content: ""; background: var(--ot-white-color); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-casestudy-active { padding: 0 15px; } } .ot-casestudy-active .swiper-slide { width: 341px !important; height: 460px !important; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media only screen and (min-width: 576px) and (max-width: 767px) { .ot-casestudy-active .swiper-slide { width: 100% !important; height: 100% !important; } } @media (max-width: 575px) { .ot-casestudy-active .swiper-slide { width: 100% !important; } } .ot-casestudy-active .swiper-slide-active { width: 641px !important; height: 460px !important; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-casestudy-active .swiper-slide-active { width: 100% !important; height: 100% !important; } } @media (max-width: 575px) { .ot-casestudy-active .swiper-slide-active { width: 100% !important; height: auto !important; } } .ot-casestudy-active .swiper-slide-active .ot-casestudy-card::before { opacity: 0.6; visibility: visible; } .ot-casestudy-active .swiper-slide-active .ot-casestudy-content { opacity: 1; visibility: visible; } .ot-casestudy-controll-wrapp .ot-pagination-controll-box::before { border: 1px dashed var(--ot-border-color); opacity: 0.5; } .ot-casestudy-pagination .swiper-pagination-total { color: var(--ot-white-color); } .ot-card-tag { font-size: 16px; font-weight: 500; color: var(--ot-white-color); padding: 7.5px 15px; background: var(--ot-theme-color); border-radius: 5px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media (max-width: 575px) { .ot-card-tag { display: block; } .ot-card-tag:not(:last-child) { margin-bottom: 10px; } } .ot-card-tag:hover { color: var(--ot-title-color); background: var(--ot-theme-color2); } /*----------------------------------------*/ /* 7.18 Testimonial css /*----------------------------------------*/ .ot-testimonial-bg { position: absolute; width: 67.6%; height: 100%; top: 0; right: 0; } .ot-testimonial-bg img { height: 100%; object-fit: cover; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-testimonial-bg { width: 100%; } } .ot-testimonial-patern-shape { position: absolute; top: 0; left: 0; height: 100%; } .ot-testimonial-wrapp { position: relative; top: 102px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-testimonial-wrapp { top: 60px; } } .ot-testimonial-formbox { padding: 80px 60px; border-radius: 10px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .ot-testimonial-formbox { padding: 40px; } } @media (max-width: 575px) { .ot-testimonial-formbox { padding: 15px; } } .ot-testimonial-formbox .ot-btn-primary { border-radius: 6px; } @media (max-width: 575px) { .ot-testimonial-formbox .ot-btn-primary { margin-top: 15px; } } .ot-testimonial-form-title { font-size: 40px; font-weight: 700; line-height: 1.15; color: var(--ot-white-color); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .ot-testimonial-form-title { font-size: 30px; margin-bottom: 30px; } } @media (max-width: 575px) { .ot-testimonial-form-title { font-size: 20px; margin-bottom: 15px; } } .ot-testimonial-form-input { position: relative; height: 55px; } .ot-testimonial-form-input input, .ot-testimonial-form-input .select-input, .ot-testimonial-form-input textarea { font-size: 14px; height: 55px; font-weight: 600; line-height: 55px; background: var(--ot-white-color); border-radius: 5px; border: 0; color: var(--ot-body-color); } .ot-testimonial-form-input input::placeholder, .ot-testimonial-form-input .select-input::placeholder, .ot-testimonial-form-input textarea::placeholder { color: var(--ot-body-color); } .ot-testimonial-form-input.form-msg { height: auto; } .ot-testimonial-form-input textarea { height: 130px; line-height: 1; } .ot-testimonial-form-input .form-input-icon { position: absolute; font-size: 20px; top: 50%; right: 15px; transform: translateY(-50%); } .ot-testimonial-slider { padding: 40px 0; position: relative; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-testimonial-slider { padding: 40px 20px; } } .ot-testimonial-slider::before { position: absolute; min-width: 625px; height: 100%; top: 0; left: -82px; content: ""; border: 2px dashed rgba(216, 221, 225, 0.31); border-radius: 0 10px 10px 0; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ot-testimonial-slider::before { left: -150px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-testimonial-slider::before { min-width: 100%; left: 0; top: 10px; border-radius: 10px 10px 0 0; } } .ot-testimonial-info { padding: 0 75px 0 0; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-testimonial-info { padding: 0 40px 0 0; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-testimonial-info { padding: 0; } } @media (max-width: 575px) { .ot-testimonial-avatar { margin-bottom: 20px; } } .ot-testimonial-avatar img { width: 82px; height: 82px; object-fit: cover; border-radius: 1000px; } .ot-testimonial-avatar-title { font-size: 24px; font-weight: 700; line-height: 1; } .ot-testimonial-avatar-designation { font-size: 14px; font-weight: 600; } .ot-testimonial-qoute-icon { font-size: 40px; font-weight: 900; text-align: center; color: var(--ot-theme-color); } .ot-testimonial-text { font-weight: 500; font-size: 16px; line-height: 1.6; color: #f6f1e4; } .ot-testimonial-card .ot-testimonial-qoute-icon { font-size: 55px; display: inline-block; } .ot-testimonial-card .testi-rating-icon { color: var(--ot-theme-color2); } .ot-testimonial-card .ot-testimonial-text { max-width: 576px; } .ot-testimonial-img2 { flex: 0 0 auto; } @media only screen and (min-width: 768px) and (max-width: 991px) { .ot-testimonial-img2 { margin-bottom: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .ot-testimonial-img2 { margin-bottom: 20px; } } @media (max-width: 575px) { .ot-testimonial-img2 { margin-bottom: 20px; } } .ot-testimonial-img2 img { width: 100%; object-fit: cover; border-radius: 20px; border: 3px solid var(--ot-theme-color); } .ot-testimonial-content { width: 100%; padding: 40px; background: #003973; border-radius: 20px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-testimonial-content { padding: 30px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ot-testimonial-content { padding: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .ot-testimonial-content { padding: 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .ot-testimonial-content { padding: 30px; } } @media (max-width: 575px) { .ot-testimonial-content { padding: 15px; } } .ot-testimonial-shape { position: absolute; bottom: 0; right: 0; } .ot-testimonial-card2 { position: relative; padding: 40px; border-radius: 10px; background-color: var(--ot-smoke-color); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media (max-width: 575px) { .ot-testimonial-card2 { padding: 15px; } } @media (max-width: 575px) { .ot-testimonial-card2 .ot-testimonial-avatarbox { flex-direction: column; } } .ot-testimonial-card2 .ot-testimonial-avatar { flex: 0 0 auto; } @media (max-width: 575px) { .ot-testimonial-card2 .ot-testimonial-avatar { margin-bottom: 0; } } .ot-testimonial-card2 .ot-testimonial-avatar img { width: 94px; height: 94px; padding: 7px; object-fit: cover; border-radius: 1000px; border: 1.5px solid var(--ot-theme-color2); transition: 0.3s; } .ot-testimonial-card2 .ot-testimonial-avatar-title { font-size: 24px; font-weight: 700; color: var(--ot-title-color); } .ot-testimonial-card2 .ot-testimonial-avatar-designation { font-size: 16px; font-weight: 500; color: var(--ot-body-color); margin-bottom: 0; } .ot-testimonial-card2 .ot-testimonial-content { padding: 0; background: none; } .ot-testimonial-card2 .ot-testimonial-review { padding: 4.5px 15px; border-radius: 5px; background-color: var(--ot-white-color); box-shadow: 30px 15px 30px 0 rgba(0, 0, 0, 0.05); } .ot-testimonial-card2 .ot-testimonial-review-icon { color: var(--ot-theme-color2); } .ot-testimonial-card2 .ot-testimonial-qoute img { transition: 0.3s; } .ot-testimonial-hand { position: absolute; top: 0; right: 0; } .ot-testimonial-extra-space { margin-top: -8.7rem; padding-top: 260px; padding-bottom: 120px; } @media (min-width: 0) and (max-width: 1199px) { .ot-testimonial-extra-space { padding-bottom: 80px; } } @media (min-width: 0) and (max-width: 767px) { .ot-testimonial-extra-space { padding-top: 40rem; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ot-testimonial-titlebox3 { margin-top: 120px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .ot-testimonial-titlebox3 { margin-top: 120px; } } .ot-testimonial-card3 .testi-rating-icon { color: var(--ot-theme-color2); } .ot-testimonial-arrow-wrapp { margin-top: -19rem; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ot-testimonial-arrow-wrapp { margin-top: -24rem; } } .ot-testimonial-arrow-wrapp .ot-btn-primary { border-radius: 100px; width: 60px; height: 60px; padding: 0; } .ot-testimonial-arrow-wrapp .ot-arrow-shape { background-repeat: no-repeat; } .ot-testimonial-avatarbox2 .ot-testimonial-avatar img { width: 80px; height: 80px; padding: 7px; object-fit: cover; border-radius: 1000px; border: 1.5px solid var(--ot-border-color); transition: 0.3s; } .ot-testimonial-avatarbox2 .ot-testimonial-avatar-title { color: var(--ot-theme-color); } .ot-testimonial-arrow .ot-testimonial-left-btn { margin-left: -150px; } .ot-testimonial-arrow .ot-testimonial-right-btn { margin-right: -150px; } .ot-testimonial-img3 { width: 100%; height: 100%; } .ot-testimonial-img3 img { width: 100%; height: 100%; } .ot-testimonial-shape2 { position: absolute; top: 30%; right: 0; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ot-testimonial-shape2 { top: 55%; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-testimonial-shape2 { display: none; } } .ot-testimonial-overlay-2 { position: relative; } .ot-testimonial-overlay-2::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; background: var(--ot-theme-color); opacity: 0.8; } .ot-testimonial-btn-2 .ot-btn-primary { color: var(--ot-theme-color); background: var(--ot-white-color); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ot-testimonial-btn-2 .ot-btn-primary { padding: 15px 23px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .ot-testimonial-btn-2 .ot-btn-primary { padding: 10.5px 5px; } } .ot-testimonial-btn-2:hover .ot-btn-primary { color: var(--ot-white-color); } .ot-testimonial-online .ot-sec-title { max-width: 90%; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-testimonial-online .ot-sec-title { max-width: 95%; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-testimonial-online .ot-sec-title { max-width: 100%; } } .ot-testimonial-shape-3 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .ot-testimonial-style-2 .ot-testimonial-img-2 { width: 43%; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-testimonial-style-2 .ot-testimonial-img-2 { width: 100%; } } .ot-testimonial-style-2 .ot-testimonial-content { max-width: 100%; padding: 0 0 0 60px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ot-testimonial-style-2 .ot-testimonial-content { padding: 0 0 0 40px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-testimonial-style-2 .ot-testimonial-content { max-width: 94%; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-testimonial-style-2 .ot-testimonial-content { padding: 0px; } } .ot-testimonial-style-2 .ot-sec-text { max-width: 85%; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-testimonial-style-2 .ot-sec-text { max-width: 72%; } } @media (max-width: 575px) { .ot-testimonial-style-2 .ot-sec-text { max-width: 100%; } } .ot-testimonial-style-2 .ot-slide-arrow-left { font-size: 18px; width: 50px; height: 50px; line-height: 45px; text-align: center; border: 1.5px dashed var(--ot-title-color); border-radius: 1000px; background: var(--ot-white-color); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-testimonial-style-2 .ot-slide-arrow-left .fa-solid { color: var(--ot-theme-color); } .ot-testimonial-style-2 .ot-slide-arrow-left:hover { background-color: var(--ot-theme-color2); } .ot-testimonial-style-2 .ot-slide-arrow-left:hover .fa-solid { color: var(--ot-title-color); } .ot-testimonial-style-2 .ot-slide-arrow-right { font-size: 18px; width: 50px; height: 50px; line-height: 45px; text-align: center; border: 1.5px dashed var(--ot-title-color); border-radius: 1000px; background: var(--ot-theme-color); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-testimonial-style-2 .ot-slide-arrow-right .fa-solid { color: var(--ot-white-color); } .ot-testimonial-style-2 .ot-slide-arrow-right:hover { background-color: var(--ot-theme-color2); } .ot-testimonial-style-2 .ot-slide-arrow-right:hover .fa-solid { color: var(--ot-title-color); } .ot-testimonial-style-2 .ot-testimonial-userbox { padding-left: 60px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ot-testimonial-style-2 .ot-testimonial-userbox { padding-left: 40px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-testimonial-style-2 .ot-testimonial-userbox { padding-left: 0px; margin-bottom: 30px; } } .ot-testimonial-style-2 .ot-testimonial-userbox .service-tab-slider3 { width: 182px; height: 90px; padding: 0; } @media (max-width: 575px) { .ot-testimonial-style-2 .ot-testimonial-userbox .service-tab-slider3 { width: 165px; height: 80px; } } .ot-testimonial-style-2 .ot-testimonial-userbox .ot-testimonial-user { gap: 400px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-testimonial-style-2 .ot-testimonial-userbox .ot-testimonial-user { gap: 310px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ot-testimonial-style-2 .ot-testimonial-userbox .ot-testimonial-user { gap: 210px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .ot-testimonial-style-2 .ot-testimonial-userbox .ot-testimonial-user { gap: 245px; } } @media (max-width: 575px) { .ot-testimonial-style-2 .ot-testimonial-userbox .ot-testimonial-user { gap: 10px; } } .ot-testimonial-overlay { position: relative; } .ot-testimonial-overlay::before { position: absolute; width: 100%; height: 100%; top: 0; left: 0; content: ""; background: var(--ot-smoke-color); opacity: 0.85; } .ot-testimonial-style { margin-top: -555px; padding-top: 670px; } .ot-testimonial-style .ot-testimonial-card2 { background-color: var(--ot-white-color); } .ot-testimonial-style-3 .ot-pagination-testi-style .swiper-pagination-bullet { width: 162px; height: 5px; border-radius: 0; margin: 0; background: var(--ot-white-color); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-testimonial-style-3 .ot-pagination-testi-style .swiper-pagination-bullet { width: 143px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ot-testimonial-style-3 .ot-pagination-testi-style .swiper-pagination-bullet { width: 117px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .ot-testimonial-style-3 .ot-pagination-testi-style .swiper-pagination-bullet { width: 180px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .ot-testimonial-style-3 .ot-pagination-testi-style .swiper-pagination-bullet { width: 136px; } } @media (max-width: 575px) { .ot-testimonial-style-3 .ot-pagination-testi-style .swiper-pagination-bullet { width: 72px; } } .ot-testimonial-style-3 .ot-pagination-testi-style .swiper-pagination-bullet.swiper-pagination-bullet-active { background: var(--ot-theme-color); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-testimonial-style-3 .ot-pagination-testi-style { margin-bottom: 40px; } } .ot-testimonial-style-3 .ot-testimonial-active { margin-bottom: 50px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-testimonial-style-3 .ot-testimonial-active { margin-bottom: 0px; } } .ot-testimonial-wrapp-2 { position: relative; } .ot-testimonial-wrapp-2 .testimonial-tab-slider-2 { height: 330px; padding-top: 50px; padding-bottom: 20px; } .ot-testimonial-wrapp-2 .testimonial-tab-slider-2 .swiper-slide { width: 110px; height: 110px; border-radius: 100%; border: 5px solid var(--ot-white-color); overflow: hidden; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-testimonial-wrapp-2 .testimonial-tab-slider-2 .swiper-slide-thumb-active { border: 5px solid var(--ot-theme-color); } .ot-testimonial-wrapp-2 .testimonial-tab-slider-2 .swiper-slide .testi-img-sm { width: 100%; height: 100%; } .ot-testimonial-wrapp-2 .testimonial-tab-slider-2 .swiper-slide .testi-img-sm img { width: 100%; height: 100%; object-fit: cover; } @media only screen and (min-width: 768px) and (max-width: 991px) { .ot-testimonial-wrapp-2 .testimonial-tab-slider-2 { height: auto; width: 400px; padding-left: 22px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .ot-testimonial-wrapp-2 .testimonial-tab-slider-2 { height: auto; width: 400px; padding-left: 22px; } } @media (max-width: 575px) { .ot-testimonial-wrapp-2 .testimonial-tab-slider-2 { width: 100%; height: 100px; padding-left: 22px; } } .ot-testimonial-wrapp-2 .ot-testimonial-designation { position: relative; margin-left: 45px; } .ot-testimonial-wrapp-2 .ot-testimonial-designation::before { position: absolute; content: ""; width: 27px; top: 12px; left: -40px; border: 1px solid var(--ot-border-color); } .ot-testimonial-img-2 { position: absolute; top: 0; left: 0; width: 44%; height: 100%; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-testimonial-img-2 { position: static; width: 100%; } } .ot-testimonial-img-2 img { width: 100%; height: 100%; } .ot-testimonial-content-2 .ot-testimonial-text { font-weight: 700; font-size: 20px; color: var(--ot-body-color); } .testi-thumb-active { height: 381px; } .testi-thumb-active .swiper-slide img { width: 85px; height: 85px; object-fit: cover; border-radius: 1000px; cursor: pointer; transition: 0.3s; position: relative; } .testi-thumb-active .swiper-slide-thumb-active img { border: 3px solid var(--ot-theme-color); } .testi-thumb-active .swiper-slide-thumb-active img::after { position: absolute; top: 0; left: 0; width: 24px; height: 27px; content: ""; background: var(--ot-theme-color); z-index: 2; clip-path: polygon(100% 0, 0 48%, 100% 100%); } .ot-testi-overlay { position: relative; } .ot-testi-overlay::before { position: absolute; top: 0; left: 0; height: 100%; width: 100%; content: ""; background: linear-gradient(180deg, rgba(0, 57, 115, 0.4) 0%, #003973 56.05%); opacity: 0.85; z-index: 2; } .testi-rating-icon { color: var(--ot-theme-color); } .ot-testi-overlay2 { position: relative; } .ot-testi-overlay2::before { position: absolute; top: 0; left: 0; height: 100%; width: 100%; content: ""; background: rgba(0, 34, 68, 0.8); z-index: 2; } .testimonial-tab-slider { height: 381px; padding-top: 12px; } .testimonial-tab-slider .swiper-slide { width: 85px !important; height: 85px !important; border-radius: 100% !important; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .testimonial-tab-slider .swiper-slide-thumb-active { border: 5px solid var(--ot-theme-color); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .testimonial-tab-slider { height: auto; width: 400px; padding-left: 22px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .testimonial-tab-slider { height: auto; width: 400px; padding-left: 22px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .testimonial-tab-slider { height: auto; width: 400px; padding-left: 22px; } } @media (max-width: 575px) { .testimonial-tab-slider { width: 100%; height: 100px; padding-left: 22px; } } .ot-testi-active3 { margin: 0 -156px; } @media (max-width: 575px) { .ot-testi-active3 { margin: 0 15px; } } .ot-testi-active3 .swiper-slide-active .ot-testimonial-card2 { background-color: var(--ot-theme-color2); } .ot-testi-active3 .swiper-slide-active .ot-testimonial-qoute img { filter: brightness(0); } .ot-testi-active3 .swiper-slide-active .ot-testimonial-avatar img { border-color: var(--ot-title-color); } .ot-pagination-arrow2::before { position: absolute; width: 340px; height: 1px; right: 145px; top: 50%; margin: auto; content: ""; border: 1px solid var(--ot-body-color); transform: translateY(-50%); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-pagination-arrow2::before { width: 250px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ot-pagination-arrow2::before { width: 175px; right: 140px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .ot-pagination-arrow2::before { width: 280px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .ot-pagination-arrow2::before { width: 190px; } } @media (max-width: 575px) { .ot-pagination-arrow2::before { display: none; } } .slider-scrollbar { margin-top: 60px; width: 100%; height: 5px; background: var(--ot-white-color); } .slider-scrollbar .swiper-scrollbar-drag { position: relative; height: 100%; width: 100%; background: var(--ot-theme-color); left: 0; top: 0; height: 5px; } /*----------------------------------------*/ /* 7.3 Faq css /*----------------------------------------*/ .ot-faq-imgbox { padding: 45px 40px; min-height: 426px; border-radius: 10px; overflow: hidden; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ot-faq-imgbox { padding: 25px 20px; } } @media (max-width: 575px) { .ot-faq-imgbox { padding: 20px 15px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-faq-imgbox { margin-bottom: 40px; } } .ot-faq-overlay { position: relative; } .ot-faq-overlay::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; background: linear-gradient(180deg, rgba(0, 34, 68, 0.5) 0%, #024 100%); } .ot-faq-title { font-weight: 700; font-size: 30px; line-height: 1.3; } @media (max-width: 575px) { .ot-faq-title { font-size: 22px; } } .ot-faq-infobox { padding: 10px 35px 10px 10px; border-radius: 20px; background: var(--ot-theme-color); } .ot-faq-info-icon { font-size: 21px; width: 46.9px; height: 49.5px; line-height: 49.5px; text-align: center; color: var(--ot-theme-color); background: var(--ot-white-color); border-radius: 15px; display: inline-block; } .ot-faq-info-title { font-weight: 700; font-size: 16px; line-height: 1; margin-bottom: 0; } .ot-faq-info-number { font-weight: 700; font-size: 20px; line-height: 1.5; } @media (max-width: 575px) { .ot-faq-btn { margin-bottom: 0; } } .ot-faq-overlay2 { position: relative; } .ot-faq-overlay2::before { position: absolute; width: 100%; height: 100%; top: 0; left: 0; content: ""; background: var(--ot-smoke-color); } .ot-faq-building { position: absolute; right: 0; bottom: 0; opacity: 0.07; } .ot-faq-wrapp .ot-contact-formbox1 { max-width: 453px; margin-right: 53px; background: var(--ot-theme-color); box-shadow: none; } @media (min-width: 0) and (max-width: 1399px) { .ot-faq-wrapp .ot-contact-formbox1 { margin-right: 0; } } @media (min-width: 0) and (max-width: 991px) { .ot-faq-wrapp .ot-contact-formbox1 { max-width: 100%; border-radius: 10px; } } .ot-faq-wrapp .contact-input input, .ot-faq-wrapp .contact-input textarea { background: var(--ot-white-color); } .ot-faq-wrapp .contact-input .select-input { background: var(--ot-white-color); } .ot-faq-style-2 .ot-btn-primary { background-color: #024; } .ot-faq-style-2 .ot-testimonial-form-title { font-size: 36px; } .ot-faq-style-2 .ot-testimonial-formbox { padding: 40px; } .ot-faq-style-2 .accordion-button { color: var(--ot-black-color); background-color: var(--ot-white-color); box-shadow: none; border-radius: 10px; border: 2px solid var(--ot-border-color); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-faq-style-2 .accordion-button { font-size: 18px; } } .ot-faq-style-2 .accordion-button:not(.collapsed) { border-color: var(--ot-border-color); border-radius: 10px 10px 0 0; border-bottom: 2px solid var(--ot-white-color); color: var(--ot-black-color); background-color: var(--ot-white-color); } .ot-faq-style-2 .accordion-button:not(.collapsed) .accordion-icon { background: var(--ot-theme-color); } .ot-faq-style-2 .accordion-button:not(.collapsed) .accordion-icon::before { background-color: var(--ot-white-color); } .ot-faq-style-2 .accordion-body { padding: 20px; color: var(--ot-body-color); border: 2px solid var(--ot-border-color); border-radius: 0 0 10px 10px; background-color: var(--ot-white-color); } .ot-faq-style-2 .accordion-icon { background-color: var(--ot-title-color); } @media (min-width: 0) and (max-width: 991px) { .ot-faq-style-2 { margin-bottom: 40px; } } .ot-faq-img { position: absolute; left: 0; top: 0; height: 100%; width: 41.7%; } @media only screen and (min-width: 1700px) and (max-width: 1800px) { .ot-faq-img { width: 40.7%; } } @media only screen and (min-width: 1600px) and (max-width: 1699px) { .ot-faq-img { width: 40%; } } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .ot-faq-img { width: 38.7%; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-faq-img { width: 41.1%; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ot-faq-img { width: 39.1%; } } .ot-faq-img img { height: 100%; object-fit: cover; } .ot-faq-img::after { position: absolute; width: 94px; height: 84px; top: 36px; right: -94px; content: ""; background: var(--ot-theme-color); clip-path: polygon(0 100%, 0 0, 100% 100%); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-faq-img::after { top: 40px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ot-faq-img::after { height: 85px; top: 0; } } .ot-faq-inner-style .accordion-card { box-shadow: 0 6px 30px 0 rgba(0, 0, 0, 0.08); } /*----------------------------------------*/ /* 7.19 Video css /*----------------------------------------*/ @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-video-thumb { height: 250px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-video-thumb img { height: 100%; object-fit: cover; } } .ot-video-play-btn { position: absolute; top: 50%; left: 0; right: 0; text-align: center; margin: auto; transform: translateY(-50%); } .ot-video-icon { position: relative; width: 109px; height: 109px; font-size: 42px; line-height: 109px; display: inline-block; border-radius: 100px; color: var(--ot-title-color); background: var(--ot-white-color); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media (max-width: 575px) { .ot-video-icon { font-size: 32px; width: 80px; height: 80px; line-height: 80px; } } .ot-video-icon:hover { color: var(--ot-white-color); background-color: var(--ot-theme-color2); } .ot-video-icon::before, .ot-video-icon::after { content: ""; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 80%; width: 80%; position: absolute; border-radius: 50%; border: 1px solid rgba(255, 255, 253, 0.45); animation: borderanimate2 2s linear infinite; z-index: -1; } .ot-video-icon::after { height: 75%; width: 75%; background-color: rgba(211, 211, 211, 0.4); animation: borderanimate2 3s linear infinite; } /*----------------------------------------*/ /* 7.4 Feature css /*----------------------------------------*/ .ot-feature-wrapp { padding: 0 10px; padding-bottom: 20px; } .ot-feature-funfact { font-size: 48px; font-weight: 700; } .ot-feature-card { position: relative; padding: 30px; padding-bottom: 20px; border-radius: 10px; overflow: hidden; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), (max-width: 575px) { .ot-feature-card { padding: 16px; padding-bottom: 16px; } } .ot-feature-card.feature-overlay { position: relative; } .ot-feature-card.feature-overlay::before { position: absolute; width: 100%; height: 100%; left: 0; top: 0; content: ""; background: linear-gradient(270deg, #024 0%, rgba(0, 85, 170, 0.08) 56.99%); transform: rotate(-180deg); border-radius: 10px; } .ot-feature-content { height: 300px; } .ot-feature-tag { font-size: 14px; font-weight: 600; color: var(--ot-white-color); border-radius: 40px; padding: 6px 15px; background: rgba(255, 255, 255, 0.35); } .ot-feature-text { font-weight: 700; font-size: 24px; max-width: 367px; line-height: 1.4; margin-bottom: 0; } @media (max-width: 575px) { .ot-feature-text { font-size: 18px; } } .ot-feature-text.style-2 { color: #024; max-width: 327px; } .ot-feature-text.style-3 { width: 100%; font-size: 16px; border-top: 1px solid rgba(255, 255, 255, 0.3); padding-top: 13px; } .ot-feature-thumb { position: absolute; right: 0; bottom: 0; } .ot-feature-funfact { line-height: 1; } .ot-feature-map { position: absolute; right: 0; left: 0; top: 50%; text-align: center; transform: translateY(-50%); } .ot-feature-style-2 { padding: 0 40px; } @media (max-width: 1199px) { .ot-feature-style-2 { padding: 0 15px; } } .ot-feature-wrapp2 { padding: 0 20px; background: #0c1706; border-radius: 30px; } @media (max-width: 767px) { .ot-feature-wrapp2 { padding: 0; } } .ot-feature-wrapp2 .row [class*=col-]:not(:last-child) .ot-feature-card-2 { border-right: 1px solid rgba(255, 255, 255, 0.1); } @media (max-width: 767px) { .ot-feature-wrapp2 .row [class*=col-]:not(:last-child) .ot-feature-card-2 { border: 0; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .ot-feature-wrapp2 .row [class*=col-]:nth-child(2) .ot-feature-card-2 { border-right: 0; } } .ot-feature-card-2 { padding: 20px 0; } @media (max-width: 767px) { .ot-feature-card-2 { padding: 10px 0; } } .ot-feature-card-2 .feature-icon { width: 70px; height: 70px; line-height: 70px; text-align: center; background: rgba(134, 187, 70, 0.1); border-radius: 1000px; flex: 0 0 auto; } .ot-feature-card-2 .feature-title { font-size: 20px; font-weight: 700; line-height: 1.5; margin-bottom: 0; } .ot-feature-card-2 .feature-text { font-size: 14px; font-weight: 400; line-height: 1.7; } /*----------------------------------------*/ /* 7.23 Price css /*----------------------------------------*/ @media (max-width: 1199px) { .ot-price-table-wrapp { overflow-x: scroll; } } .ot-price-table { border-collapse: separate; border-spacing: 10px; } @media (max-width: 1199px) { .ot-price-table { min-width: 1200px; } } .ot-price-header { padding: 28px; border-radius: 20px; border: 1px solid var(--ot-border-color); background: var(--ot-smoke-color); } @media (max-width: 1399px) { .ot-price-header { padding: 16px; } } .ot-price-feature, .ot-price-feature-icon { font-size: 16px; font-weight: 700; padding: 21px 49px; color: var(--ot-title-color); border: 1px solid var(--ot-border-color); background: var(--ot-smoke-color); border-radius: 10px; } @media (max-width: 1399px) { .ot-price-feature, .ot-price-feature-icon { padding: 21px 16px; } } .ot-price-title { font-weight: 600; font-size: 18px; color: #024; margin-bottom: 10px; } .ot-price-value { font-size: 48px; font-weight: 700; line-height: 1; display: inline-block; text-transform: capitalize; color: #024; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-price-value { font-size: 45px; } } .ot-price-duration { font-weight: 700; font-size: 16px; color: #5d728a; } .ot-price-feature-icon { font-size: 25px; color: var(--ot-theme-color); text-align: center; } .ot-price-card { height: 100%; display: flex; flex-direction: column; justify-content: space-between; z-index: 2; } .ot-price-card .ot-price-header { background: none; border: 0; padding: 0; padding-bottom: 25px; margin-bottom: 26px; border-radius: 0; border-bottom: 1px dashed rgba(255, 255, 255, 0.4); } .ot-price-card .ot-price-value { font-size: 64px; font-weight: 800; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-price-card .ot-price-value { font-size: 55px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .ot-price-card .ot-price-value { font-size: 45px; } } @media (max-width: 575px) { .ot-price-card .ot-price-value { font-size: 60px; } } .ot-price-card.active .ot-price-title-body::before { background: var(--ot-theme-color2); } .ot-price-content { padding: 30px; height: 100%; display: flex; flex-direction: column; justify-content: space-between; border-radius: 30px; border: 1px dashed rgba(255, 255, 255, 0.4); background-color: var(--ot-smoke-color2); margin-top: -13.5rem; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 991px) { .ot-price-content { padding: 40px 20px; } } @media (max-width: 575px) { .ot-price-content { padding: 15px; margin: 0 15px; margin-top: -13.5rem; } } .ot-price-title-body { position: relative; padding: 30px; padding-left: 63px; padding-bottom: 14.5rem; margin-right: 47px; min-width: 378px; border-radius: 30px; background: var(--ot-smoke-color2); z-index: 2; overflow: hidden; } @media (max-width: 575px) { .ot-price-title-body { min-width: 100%; padding-left: 15px; padding-bottom: 14.5rem; margin-right: 0; } } .ot-price-title-body::before { position: absolute; width: 81%; height: 90%; bottom: 4px; left: 4px; content: ""; background: var(--ot-theme-color); clip-path: polygon(0 0, 0% 100%, 100% 100%); border-radius: 0 0 0 30px; z-index: -1; } @media (max-width: 575px) { .ot-price-title-body .ot-box-title { font-size: 20px; } } .ot-price-list-box { list-style: none; } .ot-price-list { position: relative; font-size: 16px; padding-left: 26px; font-weight: 500; color: var(--ot-white-color); } .ot-price-list:not(:last-child) { margin-bottom: 8px; } .ot-price-list i { position: absolute; left: 0; top: 2.5px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-price-titlebox3 .ot-sec-title { font-size: 45px; } } .ot-price-switch-box { position: relative; background: var(--ot-white-color); border: 1px solid var(--ot-theme-color); border-radius: 50px; } .ot-price-switch-box button { position: relative; font-size: 16px; font-weight: 700; line-height: 16px; z-index: 2; padding: 14px 23px; color: var(--ot-title-color2); transition: 0.3s; text-transform: uppercase; } .ot-price-switch-box button.active { color: var(--ot-white-color); } .ot-price-switch-box button.monthly.active ~ .ot-price-switch-bg { transform: translateX(0px); } .ot-price-switch-box button.yearly.active ~ .ot-price-switch-bg { left: 12px; } .ot-price-switch-bg { position: absolute; transition: transform 0.2s ease-in-out; will-change: transform; width: 121px; height: 100%; left: 0; right: 0; top: 0; display: block; content: ""; background: var(--ot-theme-color); box-shadow: 0px 2px 2px -1px rgba(89, 86, 233, 0.15), 0px 0px 1px rgba(89, 86, 233, 0.1); border-radius: 30px; transform: translateX(104px); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-price-card2 { position: relative; padding: 30px 40px; background: var(--ot-white-color); border-radius: 10px; box-shadow: 0 10px 50px 0 rgba(0, 0, 0, 0.08); } @media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 575px) { .ot-price-card2 { padding: 20px; } } .ot-price-card2::before { position: absolute; width: 145px; height: 145px; top: 0; left: 0; content: ""; background: var(--ot-theme-color); border-radius: 10px 0 0 0; clip-path: polygon(0 0, 100% 0, 48% 47%, 0 100%); } .ot-price-card2::after { position: absolute; width: 100%; height: 7px; bottom: 0; left: 0; content: ""; background-color: var(--ot-theme-color); border-radius: 0 0 10px 10px; } .ot-price-card2 .ot-price-header { padding: 0; border: 0; background: 0; } .ot-price-card2 .ot-price-title { font-size: 30px; font-weight: 700; line-height: 1; color: var(--ot-title-color2); margin-bottom: 5px; } .ot-price-card2 .ot-price-value { color: var(--ot-theme-color); } .ot-price-card2 .ot-price-thumb img { width: 100%; object-fit: cover; border-radius: 5px; } .ot-price-card2 .ot-price-feature { padding: 0; background: none; border: 0; } .ot-price-card2 .ot-price-list { list-style: none; color: var(--ot-body-color); padding-left: 0; display: flex; justify-content: space-between; text-transform: capitalize; } .ot-price-card2 .ot-price-list i { position: static; line-height: 1.5; } .ot-price-card2.active::before, .ot-price-card2.active::after { background-color: var(--ot-theme-color2); } .ot-price-card2.active .ot-price-value { color: var(--ot-theme-color2); } .ot-price-card2.active .ot-price-btn .ot-btn-primary { color: var(--ot-title-color2); background: var(--ot-theme-color2); } .ot-price-card2.active .ot-price-btn .ot-btn-primary::before { background-color: var(--ot-title-color); } .ot-price-card2.active .ot-price-btn .ot-btn-primary:hover { color: var(--ot-white-color); } .ot-price-shape { position: absolute; bottom: 0; left: 0; } .wrapper-full.hide { display: none; } .feature-icon2 { color: var(--ot-body-color); } /*----------------------------------------*/ /* 7.9 Process css /*----------------------------------------*/ .ot-process-overlay { position: relative; } .ot-process-overlay::before { position: absolute; width: 100%; height: 100%; top: 0; left: 0; content: ""; background: rgba(231, 249, 238, 0.9); } .ot-process-titlebox2 .ot-sec-title { max-width: 752px; } .ot-process-card { padding: 40px; background: var(--ot-white-color); border-radius: 10px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-process-card { padding: 30px; } } .ot-process-card:not(:last-child) { margin-bottom: 30px; } @media (min-width: 0) and (max-width: 1199px) { .ot-process-card:not(:last-child) { margin-bottom: 0; } } @media (min-width: 0) and (max-width: 1199px) { .ot-process-card.extra-style { margin-top: 0; } } .ot-process-card .ot-box-title { width: 100%; padding-bottom: 25px; margin-bottom: 25px; border-bottom: 1px dashed var(--ot-border-color); } @media (max-width: 575px) { .ot-process-card .ot-box-title { font-size: 20px; } } .ot-process-card .ot-box-title a { -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-process-card:hover { background: var(--ot-theme-color); } .ot-process-card:hover .ot-box-title a { color: var(--ot-white-color); } .ot-process-card:hover .ot-process-icon { color: var(--ot-theme-color); } .ot-process-card:hover .ot-sec-text { color: var(--ot-white-color); } .ot-process-card:hover .ot-process-number { -webkit-text-stroke: 1px rgba(255, 255, 255, 0.25); } .ot-process-icon { position: static; font-size: 50px; width: 100px; height: 100px; line-height: 105px; text-align: center; color: var(--ot-title-color); border-radius: 1000px; background: var(--ot-smoke-color); border: 1px dashed var(--ot-border-color); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-process-number { font-size: 64px; font-weight: 800; line-height: 1.1; color: transparent; -webkit-text-stroke: 1px rgba(0, 34, 68, 0.25); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-process-shape-left { position: absolute; bottom: 0; left: 0; animation: ottranslateX 5s infinite alternate; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .ot-process-shape-left { bottom: auto; top: 16%; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ot-process-shape-left { top: 11%; } } .ot-process-shape-right { position: absolute; bottom: 0; right: 0; animation: moving 5s linear infinite; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-process-titlebox3 { margin-bottom: 60px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-process-titlebox3 .ot-sec-title { margin-bottom: 30px; } } .ot-process-card.card-style-2 { padding-bottom: 30px; background: var(--ot-smoke-color2); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-process-card.card-style-2 { padding: 30px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ot-process-card.card-style-2 { padding: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-process-card.card-style-2 { margin-bottom: 0; } } .ot-process-card.card-style-2 .ot-box-title { border: 0; padding: 0; margin-bottom: 20px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ot-process-card.card-style-2 .ot-box-title { font-size: 20px; margin-bottom: 10px; } } .ot-process-card.card-style-2 .ot-process-icon { font-size: 60px; width: 100px; height: 100px; line-height: 105px; border-radius: 5px; color: var(--ot-white-color); background: var(--ot-theme-color); border: 0; margin-right: -56px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ot-process-card.card-style-2 .ot-process-icon { margin-right: -30px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-process-card.card-style-2 .ot-process-icon { margin-right: 0; } } .ot-process-card.card-style-2 .ot-process-number { -webkit-text-stroke: 1px var(--ot-white-color); } .ot-process-dashed-right { position: absolute; top: -40px; right: 0; } .ot-process-dashed-bottom { position: absolute; bottom: 0; right: -40px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ot-process-dashed-bottom { right: -30px; } } .ot-process-box-wrapp2 .row [class*=col-]:nth-child(even) .ot-process-card { margin-top: -60px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-process-box-wrapp2 .row [class*=col-]:nth-child(even) .ot-process-card { margin-top: 0; } } .ot-process-overlay3 { position: relative; } .ot-process-overlay3::before { position: absolute; width: 100%; height: 100%; top: 0; left: 0; content: ""; background: var(--ot-title-color2); opacity: 0.85; } .ot-process-wrapp2 { padding: 20px; border-radius: 10px; } .ot-process-wrapp2::before { position: absolute; width: 564px; height: 502px; left: 20px; top: 20px; z-index: 2; content: ""; background-color: var(--ot-theme-color2); border-radius: 10px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-process-wrapp2::before { width: 46%; height: 478px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ot-process-wrapp2::before { width: 45.1%; height: 88%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .ot-process-wrapp2::before { width: 94.6%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .ot-process-wrapp2::before { width: 92.6%; height: 47.6%; } } @media (max-width: 575px) { .ot-process-wrapp2::before { display: none; } } .ot-process-thumb-box { position: relative; padding-top: 70px; padding-left: 70px; border-radius: 10px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-process-thumb-box { margin-bottom: 40px; } } @media (max-width: 575px) { .ot-process-thumb-box { padding: 0; } } .ot-process-thumb { margin-right: 15px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-process-thumb { margin-right: 0; } } .ot-process-thumb img { clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%, 0 12%); } @media (max-width: 575px) { .ot-process-thumb img { width: 100%; } } .ot-process-dots { position: absolute; top: 60px; left: 50px; z-index: 4; } .ot-process-title { font-size: 36px; font-weight: 700; line-height: 1.2; color: var(--ot-title-color2); } @media (max-width: 575px) { .ot-process-title { font-size: 21px; margin-bottom: 15px; } } .ot-process-list { position: relative; font-size: 18px; font-weight: 600; color: var(--ot-title-color2); list-style: none; padding-left: 40px; } @media (max-width: 575px) { .ot-process-list { padding-left: 30px; } } .ot-process-list i { position: absolute; top: 5px; left: 0; color: var(--ot-theme-color2); } .ot-process-list:not(:last-child) { margin-bottom: 10px; } .ot-process-pagination { position: absolute; top: 5px; left: 50%; width: 10px; max-height: 463px; transform: translateX(-50%); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ot-process-pagination { top: -35px; } } .ot-process-pagination .ot-line-pagination { display: flex; flex-direction: column; justify-content: space-between; } .ot-process-pagination .ot-line-pagination .ot-current { font-size: 18px; font-weight: 600; color: var(--ot-title-color2); position: absolute; top: 60px; left: -10px; min-width: 50px; } .ot-process-pagination .ot-line-pagination .ot-total { font-size: 18px; font-weight: 600; color: var(--ot-title-color2); position: absolute; bottom: 0; left: -10px; min-width: 50px; } .ot-process-pagination .ot-dot-pagination { position: absolute; top: 90px; height: 344px; display: flex; flex-direction: column; } .ot-process-pagination .ot-dot-pagination .swiper-pagination-bullet { width: 1.5px; height: 100%; background: var(--ot-body-color); } .ot-process-pagination .ot-dot-pagination .swiper-pagination-bullet-active { background: var(--ot-theme-color2); } .ot-process-shape1 { position: absolute; top: 85px; left: 23px; } .ot-process-shape1 img { opacity: 0.2; } .ot-process-box-wrapp3 { position: relative; padding-top: 60px; } @media (min-width: 0) and (max-width: 1199px) { .ot-process-box-wrapp3 { padding-top: 0; } } .ot-process-box-wrapp3::after { border: 10px solid #ecf1f5; border-radius: 20px; background-color: rgba(134, 187, 70, 0.4); padding: 8px; position: absolute; width: 100%; top: 0; left: 0; z-index: 1; content: ""; } @media (min-width: 0) and (max-width: 1199px) { .ot-process-box-wrapp3::after { display: none; } } .ot-process-box2 { position: relative; z-index: 2; } .ot-process-box2::after { position: absolute; content: ""; left: 0; right: 0; top: -83px; text-align: center; margin: auto; width: 36px; height: 33px; border-radius: 7px; background-color: var(--ot-theme-color); border: 6px solid var(--ot-white-color); z-index: -2; } @media (min-width: 0) and (max-width: 1199px) { .ot-process-box2::after { display: none; } } .ot-process-box2::before { position: absolute; border: 2px dashed #86bb46; width: auto; height: 100px; top: -75px; left: 50%; content: ""; transform: translateX(-50%); z-index: -1; } @media (min-width: 0) and (max-width: 1199px) { .ot-process-box2::before { display: none; } } .ot-process-box2 .ot-process-card { position: relative; padding: 30px; padding-bottom: 0; text-align: center; box-shadow: 0 10px 50px 0 rgba(0, 0, 0, 0.08); z-index: 5; overflow: hidden; margin-top: 25px; background: var(--ot-white-color); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; padding-bottom: 0; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-process-box2 .ot-process-card { padding: 20px; padding-bottom: 0; } } @media (min-width: 0) and (max-width: 1199px) { .ot-process-box2 .ot-process-card { margin-top: 0; } } .ot-process-box2 .ot-process-card::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; background: linear-gradient(180deg, #003973 0%, #86bb46 50.5%, #003973 100%); z-index: -1; opacity: 0; visibility: hidden; transform: scale(0.8); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; border-radius: 10px; z-index: -1; } .ot-process-box2 .ot-process-card:hover::before { opacity: 0.9; visibility: visible; transform: scale(1); } .ot-process-box2 .ot-process-card:hover .ot-proces-img { opacity: 1; visibility: visible; transform: scale(1); } .ot-process-box2 .ot-process-card:hover .ot-process-icon { background-color: var(--ot-theme-color); color: var(--ot-white-color); } .ot-process-box2 .ot-process-card .ot-proces-img { position: absolute; width: 100%; height: 100%; top: 0; left: 0; transform: scale(0.5); transition: 0.3s ease-in-out; opacity: 0; visibility: hidden; z-index: -2; border-radius: 10px; transform: scale(0.8); } .ot-process-box2 .ot-process-card .ot-proces-img img { width: 100%; height: 100%; border-radius: 10px; object-fit: cover; } .ot-process-box2 .ot-process-icon { margin: auto; width: 90px; height: 90px; line-height: 95px; margin-bottom: 25px; border-radius: 10px; border: none; } .ot-process-box2 .ot-box-title { font-size: 20px; border: 0; margin-bottom: 20px; padding-bottom: 0; } .ot-process-box2 .ot-btn-primary { font-size: 18px; font-weight: 600; padding: 9.5px 63px; display: inline-block; border-radius: 40px 40px 0 0; text-transform: capitalize; } .ot-process-titlebox4 { max-width: 630px; text-align: center; margin: auto; } .ot-process-point { padding: 10px; background-color: var(--ot-theme-color); display: inline-block; border: 6px solid var(--ot-white-color); border-radius: 7px; } .ot-process-card-5 { position: relative; padding: 50px 30px; border-radius: 10px; height: 100%; background-color: var(--ot-ecommerce-bg1); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media (max-width: 991px) { .ot-process-card-5 { padding: 50px 20px; } } .ot-process-card-5 .process-iconbox { width: 110px; height: 110px; line-height: 110px; text-align: center; margin: auto; margin-top: -100px; border-radius: 100%; border: 1px dashed var(--ot-theme-color); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-process-card-5 .process-icon { width: 90px; height: 90px; line-height: 90px; display: inline-block; background: var(--ot-ecommerce-bg1); border-radius: 100%; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-process-card-5 .ot-box-title { line-height: 1.5; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-process-card-5 .ot-box-title { font-size: 20px; } } .ot-process-card-5 .process-text { margin: auto; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-process-card-5 .process-number { position: absolute; width: 45px; height: 45px; line-height: 45px; bottom: -20px; left: 0; right: 0; text-align: center; color: var(--ot-white-color); border-radius: 100%; display: inline-block; background: var(--ot-ecommerce-bg1); margin: auto; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-process-card-5 .process-dashed { position: absolute; top: -48px; right: -129px; z-index: -1; transform-origin: bottom center; rotate: 8deg; } .ot-process-card-5:hover { background: var(--ot-theme-color); } .ot-process-card-5:hover .process-icon { transform: scalex(-1); color: var(--ot-white-color); background: var(--ot-theme-color); } .ot-process-card-5:hover .process-icon img { filter: brightness(0) invert(1); } .ot-process-card-5:hover .process-number { color: var(--ot-white-color); background: var(--ot-theme-color); } .ot-process-box-wrapp4 .ot-process-icon { width: 80px; height: 80px; line-height: 70px; border-color: var(--ot-white-color); background-color: var(--ot-theme-color); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-process-box-wrapp4 .ot-process-card { padding: 50px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .ot-process-box-wrapp4 .ot-process-card { padding: 20px; } } @media (max-width: 575px) { .ot-process-box-wrapp4 .ot-process-card { padding: 15px; } } .ot-process-box-wrapp4 .ot-process-icon img { filter: brightness(0) invert(1); } .ot-process-box-wrapp4 .ot-process-card:hover .ot-process-icon { background-color: var(--ot-white-color); border-color: var(--ot-theme-color); } .ot-process-box-wrapp4 .ot-process-card:hover .ot-process-icon img { filter: none; } .ot-process-bg { background: var(--ot-smoke-color); } .ot-process .b-none .ot-box-title { border-bottom: none; } @media (max-width: 767px) { .proecess-titlebox2 .ot-sec-title { margin-bottom: 80px; } } .dashed-bottom-right { position: absolute; bottom: -40px; } /*----------------------------------------*/ /* 7.20 Contact css /*----------------------------------------*/ .ot-contact-formbox1 { position: relative; padding: 40px; border-radius: 10px 0 10px 10px; box-shadow: 0 10px 50px 0 rgba(0, 0, 0, 0.08); background-color: var(--ot-white-color); } @media (max-width: 575px) { .ot-contact-formbox1 { padding: 15px; } } .ot-contact-title { font-weight: 700; font-size: 36px; line-height: 1.2; color: var(--ot-title-color2); } @media (max-width: 575px) { .ot-contact-title { font-size: 26px; margin-bottom: 15px; } } .contact-input { position: relative; height: 100%; } .contact-input input, .contact-input textarea { border: 0; height: 56px; color: var(--ot-title-color2); background: var(--ot-smoke-color); border-radius: 5px; } .contact-input input::placeholder, .contact-input textarea::placeholder { color: var(--ot-title-color2); } .contact-input input:focus, .contact-input textarea:focus { outline: 0; border: 0; } .contact-input .select-input { height: 56px; color: var(--ot-title-color2); background: var(--ot-smoke-color); border-radius: 5px; border: 0; } .contact-input .nice-select.open .list { color: var(--ot-title-color2); background-color: var(--ot-smoke-color); } .contact-input textarea { height: 120px; resize: none; } .contact-text { color: var(--ot-title-color2); } .form-input-icon { position: absolute; right: 22px; top: 16.5px; color: var(--ot-title-color2); } .ot-contact-formbox2 { padding: 40px; padding-top: 30px; margin-left: 25px; box-shadow: 0 10px 50px 0 rgba(0, 0, 0, 0.08); background: var(--ot-white-color); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-contact-formbox2 .gy-30 { --bs-gutter-y: 20px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-contact-formbox2 { margin-left: 0; } } @media (max-width: 575px) { .ot-contact-formbox2 { padding: 30px 20px; } } .ot-contact-formbox2 .contact-input input, .ot-contact-formbox2 .contact-input textarea { color: var(--ot-body-color); border-radius: 10px; } .ot-contact-formbox2 .contact-input input::placeholder, .ot-contact-formbox2 .contact-input textarea::placeholder { color: var(--ot-body-color); } .ot-contact-formbox2 .contact-input textarea { height: 164px; } .ot-contact-formbox2 .form-input-icon { color: var(--ot-body-color); } .ot-contact-formbox2 input[type=text], .ot-contact-formbox2 input[type=email], .ot-contact-formbox2 input[type=tel], .ot-contact-formbox2 input[type=number], .ot-contact-formbox2 input[type=password], .ot-contact-formbox2 input[type=url], .ot-contact-formbox2 textarea { padding-left: 20px; padding-right: 50px; } .ot-contact-formbox2 .select-input { color: var(--ot-body-color); } .ot-contact-content { margin-top: 60px; margin-right: 42px; padding-right: 42px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-contact-content { margin-right: 0; padding-right: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-contact-content { margin-top: 0; margin-bottom: 40px; } } .ot-contact-info-box { padding: 40px; background-color: var(--ot-smoke-color); border-radius: 30px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ot-contact-info-box { padding: 20px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .ot-contact-info-box { border-radius: 20px; } } .ot-contact-info-icon { width: 100px; height: 100px; font-size: 30px; line-height: 106px; color: var(--ot-theme-color); border-radius: 1000px; display: inline-block; background-color: var(--ot-white-color); } .ot-contact-info-title { font-weight: 700; font-size: 20px; color: var(--ot-title-color2); } .ot-contact-info { font-size: 14px; font-weight: 600; text-transform: capitalize; display: block; text-align: center; color: var(--ot-body-color); } .ot-contact-maps iframe { width: 100%; border: 0; height: 598px; } /*----------------------------------------*/ /* 7.12 Shop css /*----------------------------------------*/ .ot-shop-sidebar { padding: 30px 25px; border-radius: 5px; } .ot-shop-widget:not(:last-child) { margin-bottom: 35px; } .shop-widget-filter { position: relative; } .shop-widget-filter .ui-widget.ui-widget-content { height: 4px; background-color: var(--ot-border-color); border: 0; } .shop-widget-filter .ui-slider-horizontal .ui-slider-range { position: absolute; background-color: var(--ot-theme-color); } .shop-widget-filter .ui-slider .ui-slider-handle { top: -4px; width: 11px; height: 11px; border: 0; padding: 0; margin: 0; border-radius: 1000px; background-color: var(--ot-theme-color); position: absolute; } .shop-widget-filter .ui-slider .ui-state-focus:focus { border: 0; outline: 0; } .shop-widget-title { font-weight: 700; font-size: 24px; color: var(--ot-smoke-color2); padding-bottom: 15px; margin-bottom: 25px; border-bottom: 1px solid var(--ot-border-color); } .shop-widget-categories { height: 103px; overflow-y: scroll; overflow-y: scroll; overscroll-behavior-y: contain; scrollbar-width: thin; padding-right: 10px; } .shop-widget-categories ul { list-style: none; } .shop-widget-categories ul li { position: relative; padding-left: 40px; } .shop-widget-categories ul li::before { position: absolute; width: 21px; height: 21px; top: 3px; left: 0; content: ""; border-radius: 2px; background: var(--ot-body-color); } .shop-widget-categories ul li:not(:last-child) { margin-bottom: 15px; } .shop-widget-categories ul li a { display: flex; justify-content: space-between; font-size: 16px; font-weight: 600; color: var(--ot-body-color); } .shop-widget-product-item:not(:last-child) { margin-bottom: 30px; } .shop-widget-product-img { width: 86px; height: 95px; padding: 10px; object-fit: cover; border-radius: 5px; border: 1px solid var(--ot-theme-color); } .shop-widget-product-img a { width: 100%; height: 100%; display: inline-block; background: var(--ot-theme-color); border-radius: 3px; } .shop-widget-product-title { font-weight: 600; font-size: 16px; line-height: 162%; color: var(--ot-smoke-color2); padding-bottom: 5px; border-bottom: 2px solid var(--ot-border-color); } .shop-widget-product-price { font-size: 16px; font-weight: 600; } .shop-widget-instagram-box { display: grid; width: 100%; margin: 0 auto; grid-template-columns: repeat(2, 1fr); gap: 20px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .shop-widget-instagram-box { grid-template-columns: repeat(4, 1fr); } } .shop-widget-instagram-box img { width: 119px; height: 96px; object-fit: cover; border-radius: 5px; object-fit: cover; border-radius: 10px; } .shop-filter-title { font-size: 16px; font-weight: 600; color: var(--ot-smoke-color2); } .shop-filter-info .input-range input { padding: 0; border: 0; font-size: 16px; font-weight: 600; color: var(--ot-body-color); background-color: transparent; text-align: end; } .shop-filter-btn { font-size: 16px; font-weight: 700; padding: 11px 22px; border-radius: 5px; color: var(--ot-white-color); text-transform: uppercase; background-color: var(--ot-theme-color); flex: 0 0 auto; } .shop-filter-btn:hover { color: var(--ot-white-color); background-color: var(--ot-black-color); } .shop-filter-clear-btn { font-size: 16px; font-weight: 600; text-transform: uppercase; color: var(--ot-body-color); } .shop-filter-clear-btn img { margin-right: 4px; } /*----------------------------------------*/ /* 7.13 Product css /*----------------------------------------*/ .ot-product-card { padding: 22px; padding-bottom: 40px; border-radius: 10px; border: 1px solid var(--ot-border-color); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-product-card:hover { background: #fff; box-shadow: 0 10px 50px 0 rgba(0, 0, 0, 0.08); } .ot-product-card:hover .ot-img-hover::before { animation: shine 1s; } .ot-product-card:hover .product-img img { transform: scale(1.2); } .ot-product-card:hover .ot-product-action { right: 30px; opacity: 1; visibility: visible; } .ot-product-action { position: absolute; right: 0; top: 50%; left: auto; bottom: auto; z-index: 1; visibility: hidden; opacity: 0; transition: 0.4s; transform: translateY(-50%); } .ot-product-filter .nice-select { font-size: 16px; width: 100%; height: 50px; line-height: 50px; padding: 0 20px; font-weight: 600; float: none; border-radius: 5px; color: var(--ot-white-color); background-color: var(--ot-smoke-color2); border: 1px solid var(--ot-smoke-color2); } .ot-product-filter .nice-select::after { position: absolute; height: 100%; width: 50px; top: 50%; content: "\f107"; transform: translateY(-50%); right: 0; font-family: var(--ot-icon-font); transform-origin: center; color: var(--ot-theme-color); font-size: 16px; font-weight: 400; border-radius: 0 3.5px 3.5px 0; text-align: center; background-color: var(--ot-white-color); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-product-filter .nice-select .option { color: var(--ot-title-color); } .ot-product-filter .nice-select .option:hover { color: var(--ot-white-color); } .ot-product-details-img { border-radius: 10px; background-color: var(--ot-smoke-color); } .ot-product-details-img img { min-width: 648px; min-height: 629px; object-fit: cover; border-radius: 10px; } @media (min-width: 0px) and (max-width: 767px) { .ot-product-details-img img { min-width: 100%; min-height: 100%; } } .ot-product-details-tab-btn-box .nav-tab { gap: 15px; } .ot-product-details-tab-btn-box .nav-links img { width: 80px; height: 90px; border-radius: 5px; object-fit: cover; border: 2px solid var(--ot-white-color); background-color: var(--ot-smoke-color); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-product-details-tab-btn-box .nav-links.active img { border-color: var(--ot-theme-color); } .ot-product-details-info ul li { font-size: 16px; font-weight: 700; text-transform: capitalize; color: var(--ot-body-color); display: block; margin-bottom: 8px; } .ot-product-details-info ul li span { color: var(--ot-title-color); margin-right: 10px; } .ot-product-details-social > span { font-size: 16px; font-weight: 700; text-transform: capitalize; color: var(--ot-title-color); display: inline-block; margin-right: 10px; } .ot-product-details-social a { color: var(--ot-body-color); } .ot-product-details-social a:not(:last-child) { margin-right: 10px; } .ot-product-review-additional-info { padding: 40px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-product-review-additional-info { padding: 40px 15px; } } @media (max-width: 575px) { .ot-product-review-additional-info { overflow-x: scroll; } } .ot-product-review-additional-info-title { font-size: 24px; font-weight: 400; margin-bottom: 16px; display: none; } .ot-product-review-additional-info.at-table-style-2 { padding-top: 50px; } .ot-product-review-additional-info.at-table-style-2 .ot-product-review-additional-info-title { display: block; } .ot-product-review-additional-info.at-table-style-2 table { border: 0; border-collapse: separate; border-spacing: 0 7px; } .ot-product-review-additional-info.at-table-style-2 table tr { border: 0; } .ot-product-review-additional-info.at-table-style-2 table tr:not(:last-child) { border: 0; margin-bottom: 6px; } .ot-product-review-additional-info.at-table-style-2 table tr td { padding: 7px 24px; border: 1px solid #E6E7E8; } .ot-product-review-additional-info.at-table-style-2 table tr td:first-child { padding-left: 24px; border-right: 0; } .ot-product-review-additional-info.at-table-style-2 table tr td:last-child { padding-left: 34px; } .ot-product-review-additional-info table { border: 1px solid var(--ot-border-color); width: 100%; } .ot-product-review-additional-info table tr:not(:last-child) { border-bottom: 1px solid var(--ot-border-color); } .ot-product-review-additional-info table tr td { padding: 12px 34px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .ot-product-review-additional-info table tr td { padding: 12px 15px; } } @media (max-width: 575px) { .ot-product-review-additional-info table tr td { padding: 12px 15px; display: block; } } .ot-product-review-additional-info table tr td:first-child { font-size: 16px; font-weight: 600; color: var(--ot-white-color); background-color: var(--ot-theme-color); width: 306px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .ot-product-review-additional-info table tr td:first-child { width: 250px; } } @media (max-width: 575px) { .ot-product-review-additional-info table tr td:first-child { width: 100%; } } .ot-product-review-additional-info table tr td:last-child { font-size: 16px; font-weight: 600; color: var(--ot-body-color); } .ot-product-review-number { border-radius: 10px; padding: 35px 43px 33px 40px; background-color: var(--ot-white-color); box-shadow: 0 10px 50px 0 rgba(0, 0, 0, 0.08); } @media (max-width: 575px) { .ot-product-review-number { padding: 25px 10px 25px 10px; } } .ot-product-review-number-title { font-size: 20px; font-weight: 700; margin-bottom: 14px; color: var(--ot-title-color); } .ot-product-review-summery { margin-bottom: 12px; } .ot-product-review-summery-value span { font-size: 40px; font-weight: 700; color: var(--ot-title-color); margin-right: 8px; } @media (max-width: 575px) { .ot-product-review-summery-value span { font-size: 30px; } } .ot-product-review-summery-rating { margin-right: 3px; } .ot-product-review-summery-rating span { color: var(--ot-theme-color); } .ot-product-review-summery-rating p { font-size: 14px; font-weight: 500; margin-left: 4px; margin-bottom: 0; color: var(--ot-body-color); } .ot-product-review-rating-item > span { font-size: 16px; font-weight: 600; color: var(--ot-body-color); margin-right: 10px; } .ot-product-review-rating-bar { width: 260px; background-color: var(--ot-title-color); height: 10px; position: relative; margin-right: 12px; border-radius: 30px; } @media (max-width: 575px) { .ot-product-review-rating-bar { width: 130px; } } .ot-product-review-rating-bar-inner { position: absolute; height: 100%; top: 0; left: 0; display: inline-block; background-color: var(--ot-theme-color); border-radius: 30px; } .ot-product-review-rating-percent span { font-size: 16px; font-weight: 600; } .ot-product-review-title { font-size: 24px; font-weight: 700; margin-bottom: 22px; color: var(--ot-title-color); } @media (max-width: 575px) { .ot-product-review-list { padding-right: 0; } } .ot-product-review-avater:not(:last-child) { margin-bottom: 32px; } .ot-product-review-avater-thumb { flex: 0 0 auto; } .ot-product-review-avater-thumb img { width: 60px; height: 60px; border-radius: 50%; margin-right: 20px; } .ot-product-review-avater-rating { line-height: 1; margin-bottom: 3px; } .ot-product-review-avater-rating span { font-size: 10px; margin-right: 2px; color: var(--ot-theme-color); } .ot-product-review-avater-title { font-size: 16px; font-weight: 600; margin-bottom: 9px; display: inline-block; color: var(--ot-title-color); } .ot-product-review-avater-meta { font-size: 14px; position: relative; padding-left: 11px; margin-left: 3px; } .ot-product-review-avater-meta::after { position: absolute; content: ""; left: 0; top: 8px; width: 4px; height: 4px; border-radius: 50%; background-color: #A8ACB0; } .ot-product-review-avater-comment p { font-size: 14px; font-weight: 600; margin-bottom: 0; line-height: 1.4; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-product-review-form { margin-top: 50px; } } .ot-product-review-form > p { font-size: 16px; font-weight: 600; margin-bottom: 8px; } .ot-product-review-form-title { font-size: 24px; font-weight: 700; margin-bottom: 4px; color: var(--ot-title-color); } .ot-product-review-form-rating { margin-bottom: 28px; } .ot-product-review-form-rating p { font-size: 14px; font-weight: 600; margin-right: 8px; margin-bottom: 0; } .ot-product-review-form-rating-icon span { font-size: 12px; color: var(--ot-theme-color); } .ot-product-review-input-wrapper { margin-bottom: 11px; } .ot-product-review-input-box { position: relative; } .ot-product-review-input-box:not(:last-child) { margin-bottom: 20px; } .ot-product-review-input input { font-size: 16px; height: 56px; background: var(--ot-smoke-color); border-radius: 10px; } .ot-product-review-input input::placeholder { font-size: 16px; text-transform: lowercase; } .ot-product-review-input input:focus { border: 1px solid var(--ot-theme-color); } .ot-product-review-input textarea { height: 165px; resize: none; border-radius: 10px; background: var(--ot-smoke-color); } .ot-product-review-input textarea:focus { border: 1px solid var(--ot-theme-color); } .ot-product-review-input textarea::placeholder { font-size: 16px; } .ot-product-review-input-title label { font-size: 14px; color: var(--ot-white-color); position: absolute; top: -7px; left: 20px; padding: 0 5px; background-color: var(--ot-white-color); line-height: 1; } .ot-product-review-input-eye { position: absolute; right: 26px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .ot-product-review-input-eye .open-eye { display: none; } .ot-product-review-input-eye:hover { cursor: pointer; } .ot-product-review-input-eye:hover span { color: var(--ot-white-color); } .ot-product-review-remeber input { display: none; } .ot-product-review-remeber input:checked ~ label::after { background-color: var(--ot-theme-color); border-color: var(--ot-theme-color); } .ot-product-review-remeber input:checked ~ label::before { visibility: visible; opacity: 1; } .ot-product-review-remeber label { position: relative; font-size: 14px; font-weight: 600; padding-left: 26px; z-index: 1; } .ot-product-review-remeber label::after { position: absolute; content: ""; top: 4px; left: 0; width: 18px; height: 18px; line-height: 16px; text-align: center; border: 1px solid var(--ot-theme-color); z-index: -1; border-radius: 3px; } .ot-product-review-remeber label::before { position: absolute; content: url("../img/icon/check.svg"); top: 4px; left: 0; width: 18px; height: 18px; line-height: 16px; text-align: center; visibility: hidden; opacity: 0; color: var(--ot-white-color); } .ot-product-review-remeber label a:hover { color: var(--ot-theme-color); } .ot-product-review-remeber label:hover { cursor: pointer; } .ot-product-review-btn { font-size: 16px; font-weight: 500; color: var(--ot-white-color); padding: 9px 45px; background-color: var(--ot-theme-color); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; border-radius: 15px; } .ot-product-review-btn:hover { color: var(--ot-theme-color); background-color: var(--ot-white-color); } .ot-product-review-tab .nav-tabs { padding: 12px; border: 2.5px solid var(--ot-border-color); border-bottom: 0; } @media (max-width: 575px) { .ot-product-review-tab .nav-tabs { padding-bottom: 0; } } .ot-product-review-tab .nav-tabs .nav-link { font-size: 20px; font-weight: 600; color: var(--ot-body-color); padding-left: 9px; padding-right: 7px; position: relative; border: none; } .ot-product-review-tab .nav-tabs .nav-link:not(:first-child) { margin-left: 40px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .ot-product-review-tab .nav-tabs .nav-link:not(:first-child) { margin-left: 8px; } } @media (max-width: 575px) { .ot-product-review-tab .nav-tabs .nav-link:not(:first-child) { margin-left: 3px; } } .ot-product-review-tab .nav-tabs .nav-link.active, .ot-product-review-tab .nav-tabs .nav-link:hover { color: var(--ot-theme-color); } .ot-product-review-tab .nav-tabs .nav-link.active::after, .ot-product-review-tab .nav-tabs .nav-link:hover::after { width: 100%; left: 0; right: auto; } @media (max-width: 575px) { .ot-product-review-tab .nav-tabs .nav-link::after { position: absolute; content: ""; left: auto; right: 0; bottom: -1px; width: 0%; height: 2px; background-color: var(--ot-white-color); } } @media (max-width: 575px) { .ot-product-review-tab .nav-tabs span#productTabMarker { display: none !important; } } .ot-product-review-tab .tab-content { background: var(--ot-smoke-color); } .ot-product-review-dsc { padding: 40px; background: var(--ot-smoke-color); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-product-review-dsc { padding: 40px 15px; } } .ot-product-review-dsc p { font-size: 16px; font-weight: 600; } .ot-product-review-tab-line { position: absolute; bottom: 0; height: 1px; background-color: var(--ot-white-color); display: block; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-product-review-views { margin-bottom: 10px; } .ot-product-review-views > span { color: var(--ot-white-color); font-size: 16px; margin-right: 8px; } .ot-product-review-views p { font-size: 16px; margin-bottom: 0; } .ot-product-review-views p span { color: var(--ot-white-color); font-weight: 500; } .ot-product-review-input-wrapper { padding: 40px; border-radius: 10px; background-color: var(--ot-white-color); box-shadow: 0 10px 50px 0 rgba(0, 0, 0, 0.08); } @media only screen and (min-width: 576px) and (max-width: 767px) { .ot-product-review-input-wrapper { padding: 20px; } } @media (max-width: 575px) { .ot-product-review-input-wrapper { padding: 20px 15px; } } .ot-product-review-wrapp { padding: 40px; background: var(--ot-smoke-color); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-product-review-wrapp { padding: 40px 15px; } } @media (max-width: 575px) { .ot-product-quantity-wrap { flex-wrap: wrap; } } .ot-product-titlebox .at-sec-title { font-size: 36px; } .ot-product-related-title { font-size: 36px; font-weight: 700; color: var(--ot-title-color2); } .product-details-ratings span { font-size: 12px; color: var(--ot-theme-color); } .product-details-rating-title { font-size: 14px; margin-left: 8px; font-weight: 500; margin-bottom: 0; } .product-details-title { font-size: 48px; font-weight: 700; line-height: 1.5; text-transform: capitalize; color: var(--ot-title-color); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .product-details-title { font-size: 36px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .product-details-title { font-size: 30px; } } @media (max-width: 575px) { .product-details-title { font-size: 24px; } } .product-details-price { font-size: 24px; font-weight: 700; display: flex; align-items: center; text-transform: capitalize; color: var(--ot-title-color); gap: 5px; } .product-details-price .current-product { position: relative; font-size: 16px; font-weight: 700; text-transform: capitalize; color: var(--ot-theme-color); padding-left: 12px; } .product-details-price .current-product::before { position: absolute; width: 5px; height: 5px; top: 50%; left: 0; transform: translateY(-50%); content: ""; background: var(--ot-theme-color); border-radius: 100px; } .quantity-save-btn { flex: 0 0 auto; font-size: 18px; width: 74px; height: 61px; line-height: 61px; border-radius: 30px; background: var(--ot-title-color); color: var(--ot-white-color); text-align: center; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .quantity-save-btn:hover { color: var(--ot-white-color); background-color: var(--ot-theme-color2); } .product-action-btn { position: relative; width: 42px; height: 42px; display: inline-block; line-height: 42px; border-radius: 50%; text-align: center; color: var(--ot-theme-color); background-color: var(--ot-white-color); } .product-action-btn:hover { color: var(--ot-white-color); background-color: var(--ot-title-color); } .product-action-btn:hover .product-tooltip { visibility: visible; opacity: 1; -webkit-transform: translateX(-8px) translateY(-50%); -moz-transform: translateX(-8px) translateY(-50%); -ms-transform: translateX(-8px) translateY(-50%); -o-transform: translateX(-8px) translateY(-50%); transform: translateX(-8px) translateY(-50%); } .product-tooltip { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); font-weight: 500; font-size: 12px; right: 100%; color: var(--ot-white-color); background-color: var(--ot-title-color); display: inline-block; width: max-content; line-height: 1; padding: 4px 6px; border-radius: 4px; visibility: hidden; opacity: 0; z-index: 1; -webkit-transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24), -webkit-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24); -moz-transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24), -webkit-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24); -ms-transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24), -webkit-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24); -o-transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24), -webkit-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24); transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24), -webkit-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24); } .product-tooltip::before { position: absolute; content: ""; right: -4px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 0; height: 0; left: auto; border-right: 0; border-top: 8px solid transparent; border-left: 8px solid var(--ot-black-color); border-bottom: 8px solid transparent; } .product-img img { width: 100%; object-fit: cover; border-radius: 5px; background: var(--ot-smoke-color); transition: 1.3s; } .product-title { font-size: 20px; font-weight: 600; color: var(--ot-smoke-color2); } .product-price { font-size: 20px; font-weight: 600; display: inline-block; color: var(--ot-smoke-color2); } .product-price.old-price { opacity: 0.3; font-weight: 600; text-decoration: line-through; margin-right: 1px; } .product-rating-icon { color: var(--ot-theme-color2); } .product-categorie-card:hover .product-categorie-img img { transform: scale(1.1); } .product-categorie-card:hover .product-categorie-img::after { animation: rotate2 5.5s linear infinite; } .product-categorie-card:hover .ot-img-hover::before { -webkit-animation: shine 1s; animation: shine 1s; } .product-categorie-img { position: relative; width: 165px; height: 165px; line-height: 165px; text-align: center; margin: auto; margin-bottom: 15px; border-radius: 1000%; background: #050c01; z-index: 1; overflow: hidden; } .product-categorie-img img { transition: 1.3s; } .product-categorie-img::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; border-radius: 1000%; border: 1px dashed var(--ot-theme-color); z-index: -1; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .product-categorie-title { font-size: 20px; font-weight: 700; line-height: 1.5; margin-bottom: 0; } .categories-extra-space { padding-top: 247px; margin-top: -125px; } @media (max-width: 1199px) { .categories-extra-space { margin-top: -165px; } } .flash-sale-wrapp { border-radius: 15px; border: 1px solid var(--ot-theme-color); padding: 30px; } .flash-sale-title { position: relative; top: -50px; padding: 0 42px; font-weight: 700; font-size: 36px; line-height: 1.2; display: inline-block; background: var(--ot-dark-color); } @media (max-width: 767px) { .flash-sale-title { font-size: 30px; padding: 0 20px; } } @media (max-width: 575px) { .flash-sale-title { font-size: 24px; } } .flash-sale-card { padding: 0; border-radius: 0; border: 0; } .flash-sale-card:hover { background: none; } .flash-sale-card:hover .product-img::before { right: 0; opacity: 0.6; visibility: visible; } .flash-sale-card:hover .ot-product-action { right: 15px; } .flash-sale-card .product-ratings-text { font-size: 14px; } .flash-sale-card .product-rating-icon { font-size: 12px; } .flash-sale-card .product-price { font-size: 16px; color: var(--ot-theme-color); } .flash-sale-card .product-title { font-weight: 700; } .flash-sale-card .product-img { border-radius: 10px; overflow: hidden; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .flash-sale-card .product-img img { background: var(--ot-ecommerce-bg1); } .flash-sale-card .product-img::before { position: absolute; width: 100%; height: 100%; top: 0; right: -200px; content: ""; background: var(--ot-theme-color); border-radius: 10px; opacity: 0; visibility: hidden; z-index: 1; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .flash-sale-card:hover .product-img img { transform: scale(1); } .flash-sale-card .product-action-btn { position: relative; width: 36px; height: 36px; display: inline-block; line-height: 36px; border-radius: 50%; text-align: center; color: var(--ot-title-color); background-color: var(--ot-white-color); } .flash-sale-card .product-action-btn:hover { color: var(--ot-white-color); background-color: var(--ot-theme-color2); } .product-progress .ot-skill-per { background-image: none; background-color: var(--ot-theme-color); } .product-progress .ot-skill-per:before { width: 100%; content: attr(data-sale); position: absolute; padding: 0px 5px; color: var(--ot-white-color); font-size: 16px; font-weight: 600; line-height: 20px; border-radius: 4px; top: 20px; left: 37px; transform: translateX(0); display: none; } .product-progress .ot-skill-per::after { position: static; display: none; } .product-available { font-size: 16px; font-weight: 500; line-height: 1.6; color: var(--ot-white-color); } .product-btn-box .ot-btn-primary { font-weight: 600; font-size: 16px; line-height: 1; color: var(--ot-theme-color); border-radius: 5px; text-transform: uppercase; padding: 18px 53px 18px 52px; background: var(--ot-ecommerce-bg1); } @media (max-width: 767px) { .product-btn-box .ot-btn-primary { padding: 18px; } } .product-btn-box .ot-btn-primary::before { background: var(--ot-theme-color); } .product-btn-box .ot-btn-primary:hover { color: var(--ot-white-color); } .ot-weekend-product-box { padding: 0 100px; } @media (max-width: 1799px) { .ot-weekend-product-box { padding: 0 15px; } } .weekend-card { display: flex; align-items: center; padding: 15px; max-width: 566px; } @media (max-width: 1599px) { .weekend-card { width: 100%; max-width: 100%; } } @media (max-width: 575px) { .weekend-card { display: block; } } .weekend-card:hover { background: var(--ot-dark-color); } .weekend-card .product-img { overflow: hidden; flex: 0 0 auto; border-radius: 10px; } @media (max-width: 575px) { .weekend-card .product-img { margin-bottom: 20px; } } .weekend-card .product-img img { background: var(--ot-ecommerce-bg1); border-radius: 10px; } .weekend-card .ot-btn-primary { font-weight: 600; display: inline-block; background: var(--ot-ecommerce-bg1); padding: 8.5px 30px; border-radius: 5px; position: relative; overflow: hidden; z-index: 2; } .weekend-card .ot-btn-primary::before { background: var(--ot-theme-color); } .weekend-card .ot-btn-primary:hover { color: var(--ot-white-color); } .weekend-card .ot-product-action { top: 50%; transform: translatey(-50%); } .weekend-card .product-tooltip { background-color: var(--ot-dark-color); } .weekend-card { border: 0; } .weekend-card .product-price { color: var(--ot-theme-color); } .weekend-card:not(:last-child) { margin-bottom: 20px; } .weekend-card .product-action-btn { color: var(--ot-dark-color); } .weekend-card .product-action-btn:hover { color: var(--ot-white-color); background: var(--ot-theme-color); } .product-price-box { display: flex; align-items: center; gap: 6px; } .product-price-tag { font-weight: 500; font-size: 12px; background: var(--ot-theme-color); line-height: 1; padding: 5px 10px; border-radius: 100px; } .ot-product-counter-box { padding: 30px 40px; border: 1px solid var(--ot-theme-color); border-radius: 20px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-product-counter-box { padding: 30px; } } @media (max-width: 575px) { .ot-product-counter-box { padding: 15px; } } .ot-product-counter-box .product-img img { max-width: 254px; height: 254px; object-fit: cover; background: none; } @media (max-width: 575px) { .ot-product-counter-box .product-img { margin-bottom: 30px; } } .ot-product-counter-box .ot-btn-primary { padding: 18.5px 30px; line-height: 1; } .ot-product-counter-box .ot-btn-primary:hover { color: var(--ot-white-color); } .ot-product-counter-wrapp { margin-bottom: 50px; } @media (max-width: 1199px) { .ot-product-counter-wrapp { margin-bottom: 0; } } .ot-countdown-list-box ul { list-style: none; } .ot-countdown-list-box ul li { width: 70px; font-size: 14px; font-weight: 500; line-height: 1.4; padding: 12px 13px; display: inline-block; color: var(--ot-white-color); border: 1px solid var(--ot-theme-color); background: var(--ot-ecommerce-bg1); border-radius: 5px; text-transform: capitalize; } @media (max-width: 575px) { .ot-countdown-list-box ul li { width: 56px; font-size: 12px; padding: 7px 5px; } } .ot-countdown-list-box ul li:not(:last-child) { margin-right: 5px; } .ot-countdown-number { display: block; font-size: 24px; font-weight: 700; line-height: 1; color: var(--ot-theme-color); } .ot-shop-popup-wrap { height: 500px; width: 800px; margin: 0 auto; background-color: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: all 0.3s; display: flex; align-items: center; } @media (max-width: 991px) { .ot-shop-popup-wrap { width: 93%; } } .ot-shop-popup-content { padding: 40px; } @media (max-width: 991px) { .ot-shop-popup-content { margin: auto; } } @media (max-width: 767px) { .ot-shop-popup-content { padding: 40px 20px; } } .ot-shop-popup-img { position: relative; height: 100%; flex: 0 0 auto; } @media (max-width: 991px) { .ot-shop-popup-img { width: 50%; } } .ot-shop-popup-img img { height: 100%; object-fit: cover; border-radius: 4px 0 0 4px; } .ot-shop-popup-logo { margin-bottom: 60px; } @media (max-width: 767px) { .ot-shop-popup-logo { margin-bottom: 40px; } } .ot-shop-popup-text h4 { font-weight: 700; font-size: 46px; line-height: 1; margin-bottom: 13px; text-transform: uppercase; } .ot-shop-popup-text p { font-weight: 500; font-size: 28px; color: #19191a; text-transform: uppercase; margin-bottom: 40px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .ot-shop-popup-text p { font-size: 20px; } } @media (max-width: 767px) { .ot-shop-popup-text p { margin-bottom: 15px; } } .ot-shop-popup-text span { font-weight: 400; font-size: 16px; line-height: 1.5; color: #19191a; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 55px; display: inline-block; } .ot-shop-popup-inputbox input { height: 60px; font-weight: 400; font-size: 16px; letter-spacing: 0.04em; color: var(--ot-title-color); border: 1px solid var(--ot-border-color); margin-bottom: 10px; border-radius: 5px; } .ot-shop-popup-inputbox input::placeholder { font-weight: 400; font-size: 17px; letter-spacing: 0.04em; color: var(--ot-placeholder-color); } .subscribe-popup { position: fixed; left: 0; top: 0; right: 0; width: 100%; height: 100%; z-index: 1099; background-color: rgba(0, 0, 0, 0.5); visibility: hidden; opacity: 0; transition: all 0.3s; margin: 0 auto; text-align: center; } .subscribe-popup.show { visibility: visible; opacity: 1; } .subscribe-popup .close i { position: absolute; right: 20px; top: 20px; font-size: 20px; cursor: pointer; font-weight: 400; color: var(--ot-title-color); transition: 0.3s; } .subscribe-popup .close:hover i { transform: rotate(180deg); } @keyframes zoomInOut { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } .tp-shop-popup-logo img { width: 85px; height: 100%; } /*----------------------------------------*/ /* 7.13 Cart css /*----------------------------------------*/ .ot-cart-plus { top: 14px; } .ot-cart-minus { bottom: 14px; } .ot-cart-btn .ot-btn-box-primary { width: 100%; display: inline-block; text-align: center; } .ot-cart-btn .ot-btn-text-box { text-transform: capitalize; } .ot-cart-btn .ot-btn-primary-text { padding: 21px 32.5px; } .ot-quantity-control, .ot-quantity-control-2 { position: relative; flex: 0 0 auto; border-radius: 30px; } .ot-quantity-control .qty-input::-webkit-inner-spin-button, .ot-quantity-control .qty-input::-webkit-outer-spin-button, .ot-quantity-control-2 .qty-input::-webkit-inner-spin-button, .ot-quantity-control-2 .qty-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .ot-quantity-control .qty-input, .ot-quantity-control-2 .qty-input { font-size: 18px; font-weight: 900; height: 62px; line-height: 62px; color: var(--ot-white-color); border-radius: 30px; -moz-appearance: textfield; background-color: var(--ot-title-color); } .ot-quantity-control .qty-btn, .ot-quantity-control-2 .qty-btn { position: absolute; font-size: 18px; font-weight: 900; right: 21px; height: auto; width: auto; border: none; line-height: 16px; color: var(--ot-white-color); } @media (max-width: 575px) { .ot-quantity-control, .ot-quantity-control-2 { width: 100%; } } @media (max-width: 575px) { .ot-quantity-control { width: 100%; } } .ot-card-wrapp { border: 1px solid var(--ot-border-color); border-radius: 8px; } .cart-table { margin-bottom: 0; } .cart-table thead .cart-row { padding: 0 20px; border-bottom: 2px solid var(--ot-border-color); } .cart-table thead .cart-row .cart-header-title { font-size: 16px; font-weight: 600; text-transform: capitalize; color: var(--ot-title-color2); padding: 15px 0px; } .cart-table tbody tr { border-bottom: 1px solid var(--ot-border-color); } .cart-table tbody tr:last-child { border-bottom: none; } .cart-table tbody tr td { min-width: 114px; padding: 1.5rem 0.5rem; vertical-align: middle; border: none; } .ot-cart-product-imagbox { display: flex; align-items: center; gap: 1rem; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-cart-product-imagbox { flex-direction: column; align-items: start; } } .cart-remove-btn { background: none; border: none; font-size: 24px; color: var(--ot-title-color); cursor: pointer; padding: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media (min-width: 0) and (max-width: 767px) { .cart-remove-btn { text-align: center; margin: auto; } } .cart-remove-btn:hover { color: var(--ot-theme-color2); } .ot-cart-product-img { border-radius: 4px; } @media (min-width: 0) and (max-width: 767px) { .ot-cart-product-img { width: 100%; } } .product-image { width: 150px; height: 130px; object-fit: cover; border-radius: 4px; background-color: var(--ot-smoke-color); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .product-image { width: 120px; height: 110px; } } @media (min-width: 0) and (max-width: 767px) { .product-image { width: 100%; height: 100%; } } .ot-cart-product-name { font-size: 18px; font-weight: 600; text-transform: capitalize; color: var(--ot-title-color); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .ot-cart-product-name { font-size: 18px; } } @media (max-width: 575px) { .ot-cart-product-name { font-size: 16px; } } .ot-cart-product-price, .product-total { font-size: 20px; font-weight: 700; text-transform: capitalize; text-align: center; color: var(--ot-title-color); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .ot-cart-product-price, .product-total { font-size: 16px; } } @media (max-width: 575px) { .ot-cart-product-price, .product-total { font-size: 14px; } } .ot-quantity-control-2 { display: flex; align-items: center; border: 1px solid var(--ot-body-color); border-radius: 50px; width: 100px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-quantity-control-2 { margin-top: 10px; } } .ot-quantity-control-2 .qty-input { height: 50px; line-height: 50px; font-weight: 600; color: var(--ot-title-color); background: none; } .ot-quantity-control-2 .qty-input:focus { outline: none; } .ot-quantity-control-2 .ot-cart-plus, .ot-quantity-control-2 .ot-cart-minus { background: none; border: none; color: var(--ot-title-color); font-size: 24px; cursor: pointer; padding: 0 0.25rem; line-height: 1; transition: color 0.2s; } .ot-quantity-control-2 .ot-cart-plus:hover, .ot-quantity-control-2 .ot-cart-minus:hover { color: var(--ot-theme-color); } .ot-control-icon { margin-left: -40px; } .promo-section { padding-top: 1.5rem; border-top: 1px solid var(--ot-border-color); } .promo-input { font-size: 16px; max-width: 212px; font-weight: 700; background: none; color: var(--ot-title-color); text-transform: uppercase; border: 1px solid var(--ot-border-color); border-radius: 100px; } .promo-input input[type=text] { background: none; } .promo-input::placeholder { color: var(--ot-smoke-color); font-weight: 500; } .promo-input:focus { outline: none; border-color: var(--ot-theme-color); box-shadow: none; } .btn-primary { background-color: var(--ot-theme-color); border: none; padding: 0.75rem 2rem; font-weight: 600; font-size: 0.875rem; letter-spacing: 0.5px; border-radius: 50px; transition: all 0.3s; } .btn-primary:hover { background-color: rgba(55, 71, 255, 0.8); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(65, 105, 255, 0.3); } .btn-primary:active { transform: translateY(0); } .btn-secondary { background-color: var(--ot-theme-color2); border: none; padding: 0.75rem 2rem; font-weight: 600; font-size: 0.875rem; letter-spacing: 0.5px; border-radius: 50px; color: #fff; transition: all 0.3s; } .btn-secondary:hover { background-color: rgba(55, 71, 255, 0.8); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(184, 197, 255, 0.3); } .btn-secondary:active { transform: translateY(0); } @media (max-width: 575px) { .ot-subtotal-card .ot-btn-primary-text { font-size: 16px; padding: 17.5px 20px; } } @media (max-width: 575px) { .ot-subtotal-card .ot-btn-primary { padding: 15.5px 20px; } } .ot-cart-totals-title { font-size: 24px; font-weight: 700; text-transform: capitalize; color: var(--ot-title-color); } .totals-row { padding: 0.5rem 0; } .ot-cart-subtotal-title { font-size: 16px; font-weight: 700; text-transform: capitalize; color: var(--ot-title-color); } .totals-value { font-size: 16px; font-weight: 600; text-transform: capitalize; color: var(--ot-title-color); } .shipping-section { padding: 1rem 0; border-top: 1px solid var(--ot-border-color); } .shipping-section .totals-label { font-weight: 600; } .shipping-section .form-check { padding-left: 1.5rem; } .shipping-section .form-check .form-check-input { border: 2px solid var(--ot-border-color); } .shipping-section .form-check .form-check-input:checked { background-color: var(--ot-theme-color); border-color: var(--ot-theme-color); } .shipping-section .form-check .form-check-input:focus { box-shadow: 0 0 0 0.2rem rgba(65, 105, 255, 0.15); } .shipping-section .form-check .form-check-label { font-size: 14px; font-weight: 600; color: var(--ot-title-color); display: flex; justify-content: space-between; width: 100%; } .shipping-price { color: var(--ot-title-color); font-size: 0.875rem; } .total-amount { color: var(--ot-theme-color); font-size: 1.125rem; font-weight: 700; } .checkout-btn { padding: 1rem; font-size: 0.875rem; font-weight: 700; letter-spacing: 1px; } @media (max-width: 767px) { .cart-table thead { display: none; } .cart-table tbody tr { display: block; margin-bottom: 1.5rem; padding-bottom: 1.5rem; } } @media only screen and (max-width: 767px) and (min-width: 768px) and (max-width: 991px), only screen and (max-width: 767px) and (min-width: 576px) and (max-width: 767px), (max-width: 767px) and (max-width: 575px) { .cart-table tbody tr { padding: 20px; } } @media (max-width: 767px) and (max-width: 575px) { .cart-table tbody tr { margin-bottom: 0; } } @media (max-width: 767px) { .cart-table tbody tr td { display: block; text-align: left; padding: 0.5rem 0; } .cart-table tbody tr td:before { content: attr(data-label); font-weight: 600; display: inline-block; margin-right: 0.5rem; } .cart-table tbody tr td:first-child:before { display: none; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .promo-section { flex-direction: column; align-items: stretch !important; } .promo-section .promo-input { max-width: 100%; } .promo-section .btn { width: 100%; } } @media (max-width: 575px) { .promo-section .promo-input { margin-bottom: 20px; } } /*----------------------------------------*/ /* 7.14 Checkout css /*----------------------------------------*/ .ot-checkout-bill-title { font-size: 36px; font-weight: 700; color: var(--ot-title-color2); } .ot-checkout-input { position: relative; } .ot-checkout-input input { height: 60px; border-radius: 5px; } .ot-checkout-input .select-input { border: 1px solid var(--ot-border-color); height: 60px; line-height: 60px; border-radius: 5px; } .ot-checkout-input .select-input:focus { border: 1px solid var(--ot-theme-color); } .ot-checkout-input .select-input .form-input-icon { top: 20px; } .ot-checkout-option { margin-bottom: 4px; } .ot-checkout-option-wrapper { margin-top: 10px; margin-bottom: 17px; } .ot-checkout-option input { display: none; } .ot-checkout-option input:checked ~ label::after { border-color: var(--ot-theme-color); background-color: var(--ot-theme-color); } .ot-checkout-option input:checked ~ label::before { visibility: visible; opacity: 1; } .ot-checkout-option label { position: relative; font-size: 15px; font-weight: 600; padding-left: 26px; z-index: 1; } .ot-checkout-option label::after { position: absolute; content: ""; top: 4px; left: 0; width: 18px; height: 18px; line-height: 16px; text-align: center; border: 1px solid var(--ot-border-color); z-index: -1; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-checkout-option label::before { position: absolute; content: url("../img/icon/check.svg"); top: 4px; left: 0; width: 18px; height: 18px; line-height: 16px; text-align: center; visibility: hidden; opacity: 0; color: var(--ot-white-color); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-checkout-option label a:hover { color: var(--ot-theme-color); } .ot-checkout-option label:hover { cursor: pointer; } .ot-checkout-place { padding: 34px 30px 30px; border-radius: 5px; border: 1px solid var(--ot-border-color); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ot-checkout-place { padding: 35px 20px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-checkout-place { margin-top: 50px; } } .ot-checkout-place-title { font-size: 26px; font-weight: 600; margin-right: 37px; margin-bottom: 35px; color: var(--ot-title-color); } .ot-checkout-payment { padding-bottom: 26px; margin-bottom: 24px; border-bottom: 1px solid var(--ot-border-color); } .ot-checkout-payment-item:not(:last-child) { margin-bottom: 10px; } .ot-checkout-payment-item.paypal-payment label { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; } .ot-checkout-payment-item input { display: none; } .ot-checkout-payment-item input:checked ~ label::after { border-color: var(--ot-theme-color); } .ot-checkout-payment-item input:checked ~ label::before { opacity: 1; visibility: visible; } .ot-checkout-payment-item label { font-size: 14px; position: relative; padding-left: 27px; font-weight: 600; } .ot-checkout-payment-item label:hover { cursor: pointer; } .ot-checkout-payment-item label::after { position: absolute; content: ""; left: 0; top: 5px; width: 16px; height: 16px; border-radius: 50%; border: 1px solid #BCBCBC; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-checkout-payment-item label::before { position: absolute; content: ""; left: 3px; top: 8px; width: 10px; height: 10px; border-radius: 50%; background-color: var(--ot-theme-color); visibility: hidden; opacity: 0; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-checkout-payment-item label img { margin-left: 14px; -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } @media only screen and (min-width: 768px) and (max-width: 991px) { .ot-checkout-payment-item label img { margin-left: 10px; } } @media (max-width: 575px) { .ot-checkout-payment-item label img { margin-top: 20px; margin-left: 0px; } } .ot-checkout-payment-item label a { margin-top: 10px; position: relative; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ot-checkout-payment-item label a { margin-top: 0; margin-left: 24px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .ot-checkout-payment-item label a { margin-top: 0; margin-left: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .ot-checkout-payment-item label a { margin-top: 0; margin-left: 14px; } } .ot-checkout-payment-item label a::after { position: absolute; content: ""; left: 0; bottom: 3px; width: 100%; height: 1px; background-color: var(--ot-black-color); } .ot-checkout-payment-desc { position: relative; padding-top: 10px; display: none; } .ot-checkout-payment-desc::after { position: absolute; content: ""; left: 57px; top: 0; width: 16px; height: 16px; background-color: var(--ot-body-color); -webkit-transform: translateY(3px) rotate(45deg); -moz-transform: translateY(3px) rotate(45deg); -ms-transform: translateY(3px) rotate(45deg); -o-transform: translateY(3px) rotate(45deg); transform: translateY(3px) rotate(45deg); } .ot-checkout-payment-desc p { padding: 19px 30px; margin-left: 27px; font-size: 14px; font-weight: 600; line-height: 1.57; color: var(--ot-white-color); margin-bottom: 0; background-color: var(--ot-body-color); } .ot-checkout-agree { margin-bottom: 24px; } /*----------------------------------------*/ /* 7.8 Order css /*----------------------------------------*/ .ot-order-details { padding: 70px 100px 55px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-order-details { padding: 70px 70px 55px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ot-order-details { padding: 70px 30px 55px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .ot-order-details { padding: 70px 50px 55px; } } @media (max-width: 575px) { .ot-order-details { padding: 40px 30px 45px; } } .ot-order-details-icon { margin-bottom: 22px; } .ot-order-details-icon span { display: inline-block; width: 120px; height: 120px; line-height: 118px; text-align: center; font-size: 55px; color: var(--ot-white-color); border: 1px solid var(--ot-border-color); border-radius: 50%; } .ot-order-details-title { font-size: 30px; font-weight: 600; color: var(--ot-white-color); margin-bottom: 7px; } .ot-order-details-content p { font-size: 16px; color: var(--ot-white-color); line-height: 1.38; } .ot-order-details-item { margin-bottom: 38px; } .ot-order-details-item-wrapper .row [class*=col-]:nth-child(2n) .ot-order-details-item { padding-left: 40px; } @media (max-width: 575px) { .ot-order-details-item-wrapper .row [class*=col-]:nth-child(2n) .ot-order-details-item { padding-left: 0; } } .ot-order-details-item h4 { font-size: 18px; color: var(--ot-white-color); margin-bottom: 0; font-weight: 400; } .ot-order-details-item p { font-weight: 700; font-size: 18px; color: var(--ot-white-color); margin-bottom: 0; } .ot-order-info-wrapper { padding: 42px 50px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ot-order-info-wrapper { padding: 42px 40px; } } @media (max-width: 575px) { .ot-order-info-wrapper { padding: 42px 30px; } } .ot-order-info-title { font-size: 26px; font-weight: 600; margin-bottom: 40px; } .ot-order-info-list ul li { list-style: none; padding: 15px 0; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: space-between; } .ot-order-info-list ul li:not(:last-child) { border-bottom: 1px solid var(--ot-border-color); } .ot-order-info-list ul li span { font-size: 15px; font-weight: 600; color: var(--ot-theme-color); } .ot-order-info-list ul li.ot-order-info-list-header { padding-top: 0; padding-bottom: 12px; } .ot-order-info-list ul li.ot-order-info-list-header h4 { font-size: 16px; font-weight: 600; margin-bottom: 0; color: var(--ot-title-color); } .ot-order-info-list ul li.ot-order-info-list-desc p { font-size: 15px; font-weight: 600; margin-bottom: 0; } .ot-order-info-list ul li.ot-order-info-list-desc p span { font-size: 15px; font-weight: 600; } .ot-order-info-list ul li.ot-order-info-list-subtotal span:last-child { color: var(--ot-theme-color); } .ot-order-info-list ul li.ot-order-info-list-shipping span input { display: none; } .ot-order-info-list ul li.ot-order-info-list-shipping span input:checked ~ label::after { border-color: var(--ot-theme-color); } .ot-order-info-list ul li.ot-order-info-list-shipping span input:checked ~ label::before { opacity: 1; visibility: visible; } .ot-order-info-list ul li.ot-order-info-list-shipping span label { font-size: 14px; position: relative; padding-right: 27px; } .ot-order-info-list ul li.ot-order-info-list-shipping span label span { color: var(--ot-theme-color); } .ot-order-info-list ul li.ot-order-info-list-shipping span label:hover { cursor: pointer; } .ot-order-info-list ul li.ot-order-info-list-shipping span label::after { position: absolute; content: ""; right: 0; top: 5px; width: 16px; height: 16px; border-radius: 50%; border: 1px solid #BCBCBC; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-order-info-list ul li.ot-order-info-list-shipping span label::before { position: absolute; content: ""; right: 4px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background-color: var(--ot-theme-color); visibility: hidden; opacity: 0; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .ot-order-info-list ul li.ot-order-info-list-total { padding: 14px 0; } .ot-order-info-list ul li.ot-order-info-list-total span { font-size: 16px; font-weight: 600; } .ot-order-inner { background-color: var(--ot-white-color); box-shadow: 0px 30px 70px rgba(1, 15, 28, 0.1); } /*----------------------------------------*/ /* 7.15 Offer css /*----------------------------------------*/ .ot-offer-card { position: relative; width: 100%; height: 100%; padding: 30px 40px; border-radius: 10px; } @media (max-width: 1199px) { .ot-offer-card { padding: 20px 20px; } } @media (max-width: 575px) { .ot-offer-card .offer-content .ot-btn-primary { padding: 8px 20px; } } .offer-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .offer-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; } .offer-discount { font-weight: 500; font-size: 14px; line-height: 1.7; padding: 3px 15px; border-radius: 100px; background-color: var(--ot-theme-color); } .offer-title { font-size: 24px; font-weight: 700; line-height: 1.4; } @media (max-width: 575px) { .offer-title { font-size: 18px; } } /*----------------------------------------*/ /* 7.9 category css /*----------------------------------------*/ .ot-category-card { display: flex; flex-direction: column; align-items: center; padding: 40px 38px; position: relative; z-index: 2; } .ot-category-card:hover .ot-category-btn { background: var(--ot-title-color); } .ot-category-card:hover .ot-category-btn .ot-btn-arrow-primary > .arrow-icon { background-color: var(--ot-white-color); color: var(--ot-title-color); } .ot-category-card:hover .ot-category-btn .ot-btn-arrow-primary > .arrow-icon::before { border: 0; } .ot-category-card:hover .ot-category-btn .ot-btn-text { color: var(--ot-white-color); } .ot-category-card::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--ot-border-color); border-radius: 10px; top: 10px; bottom: 10px; left: 10px; right: 10px; z-index: -1; } .ot-category-card .ot-process-icon { margin-bottom: 25px; line-height: 75px; width: 90px; height: 90px; } .ot-category-card .ot-box-title { margin-bottom: 10px; padding-bottom: 0; border: 0; } .ot-category-card .ot-process-card { padding: 40px 38px; } .ot-category-btn { background: var(--ot-smoke-color); border-radius: 30px; padding: 3px 3px 3px 15px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; z-index: 2; } .ot-category-btn .ot-btn-arrow-primary > .arrow-icon::before { border: 0; } .ot-category-btn .ot-btn-arrow-primary { color: var(--ot-title-color); text-transform: none; } .ot-category-btn .arrow-icon::before { position: static; } .ot-category-btn .ot-btn-arrow-primary > .arrow-icon { line-height: 33px; } .ot-category-footer { display: flex; justify-content: center; align-items: center; gap: 10px; } .ot-category-footer .ot-box-title { color: var(--ot-title-color); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-category-footer { flex-direction: column; text-align: center; } } .ot-category-img { height: 100%; position: relative; } .ot-category-img::after { content: ""; position: absolute; inset: 0; border: 5px solid var(--ot-white-color); border-radius: 10px; top: 6px; bottom: 6px; left: 10px; right: 10px; } .ot-category-img img { width: 100%; height: 100%; } .ot-category-shape { position: absolute; width: 100%; left: 0; right: 0; bottom: 0; } /*----------------------------------------*/ /* 7.24 circles css /*----------------------------------------*/ .ot-circles-wrapper { position: relative; height: 446px; transform: scale(1); transform-origin: top left; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ot-circles-wrapper { transform: scale(0.89); height: 390px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ot-circles-wrapper { transform: scale(0.73); height: 330px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .ot-circles-wrapper { transform: scale(0.56); height: 250px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .ot-circles-wrapper { transform: scale(0.42); height: 170px; } } @media (max-width: 575px) { .ot-circles-wrapper { transform: scale(1); height: 100%; margin-top: -190px; margin-bottom: -220px; } } .ot-circles-card { position: absolute; border-radius: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; } @media (max-width: 575px) { .ot-circles-card { position: relative; } } .ot-circles-title { font-weight: 700; font-size: 48px; color: var(--ot-white-color); margin-bottom: 20px; } .ot-circles-text { font-weight: 700; font-size: 20px; color: var(--ot-white-color); } .ot-circles-1 { width: 220px; height: 220px; background: var(--ot-smoke-color2); top: 220px; left: 75px; z-index: 1; } .ot-circles-2 { width: 390px; height: 390px; background: var(--ot-smoke-color); top: 19px; left: 133px; padding: 0 85px; } @media (max-width: 575px) { .ot-circles-2 { width: 300px; height: 300px; top: 160px; left: 0; padding: 0 50px; } } .ot-circles-2 .ot-circles-title { color: var(--ot-title-color); } .ot-circles-2 .ot-circles-text { color: var(--ot-body-color); font-size: 24px; } .ot-circles-3 { width: 180px; height: 180px; background: var(--ot-theme-color); top: 0; left: 424px; } @media (max-width: 575px) { .ot-circles-3 { top: 100px; left: 115px; z-index: 2; } } .ot-circles-4 { width: 300px; height: 300px; background: var(--ot-title-color); top: 64px; left: 528px; padding: 0 10px; } @media (max-width: 575px) { .ot-circles-4 { left: 0; top: 35px; } } .ot-circles-4 .ot-circles-text { font-size: 24px; } .ot-circles-5 { width: 208px; height: 208px; background: var(--ot-theme-color); top: 35px; left: 775px; z-index: 2; padding: 0 5px; } @media (max-width: 575px) { .ot-circles-5 { left: 90px; top: -20px; } } .ot-circles-6 { width: 196px; height: 196px; background: var(--ot-smoke-color); top: 183px; left: 800px; z-index: 1; } @media (max-width: 575px) { .ot-circles-6 { left: 0px; top: -80px; } } .ot-circles-6 .ot-circles-text { font-size: 18px; color: var(--ot-title-color); } .ot-circles-7 { width: 362px; height: 362px; background: var(--ot-smoke-color2); top: 33px; left: 958px; padding: 57px 20px; justify-content: start; } @media (max-width: 575px) { .ot-circles-7 { width: 300px; height: 300px; top: -130px; left: 0px; padding: 80px 20px; } } .ot-circles-7 .ot-circles-text { font-size: 24px; } .ot-circles-8 { width: 220px; height: 220px; background: var(--ot-theme-color2); top: 226px; left: 1100px; } @media (max-width: 575px) { .ot-circles-8 { top: -210px; left: 75px; } } /*----------------------------------------*/ /* 7.10 courses css /*----------------------------------------*/ @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-courses-wrapp { padding: 0 10px; } } .ot-courses-wrapp .ot-courses-img { position: relative; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-courses-wrapp .ot-courses-img { width: 100%; } } .ot-courses-wrapp .ot-courses-img img { border-radius: 10px 0 0 10px; max-width: none; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-courses-wrapp .ot-courses-img img { width: 100%; } } .ot-courses-wrapp .ot-blog-card { background-color: var(--ot-smoke-color); padding: 0; display: flex; justify-content: center; align-items: center; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ot-courses-wrapp .ot-blog-card { flex-direction: column; } } .ot-courses-wrapp .ot-blog-card:hover { background-color: var(--ot-theme-color); } .ot-courses-wrapp .ot-blog-card:hover .ot-courses-meta ul li:not(:last-child)::after { background-color: var(--ot-white-color); } .ot-courses-wrapp .ot-blog-card:hover .ot-courses-meta ul li { background-color: var(--ot-white-color); color: var(--ot-theme-color); } .ot-courses-wrapp .ot-blog-card:hover .theme-text1 { color: var(--ot-white-color); } .ot-courses-wrapp .ot-blog-card:hover .ot-user-review { color: var(--ot-white-color); } .ot-courses-wrapp .ot-blog-card:hover .ot-user-price { color: var(--ot-white-color); } .ot-courses-wrapp .ot-blog-card:hover .ot-heart-icon i { color: var(--ot-white-color); border: 1px solid var(--ot-white-color); } .ot-courses-wrapp .ot-blog-card:hover .ot-courses-categorie { color: var(--ot-title-color); background: var(--ot-theme-color2); } .ot-courses-wrapp .ot-blog-content { padding: 0 30px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .ot-courses-wrapp .ot-blog-content { padding: 30px; } } @media (max-width: 575px) { .ot-courses-wrapp .ot-blog-content { padding: 15px; } } .ot-courses-meta ul li:not(:last-child) { margin-right: 10px; } @media (max-width: 575px) { .ot-courses-meta ul li:not(:last-child) { margin-right: 0; } } .ot-courses-meta ul li:not(:last-child)::after { position: absolute; right: -15px; top: 45%; width: 15px; height: 8px; content: ""; background-color: var(--ot-theme-color); } @media (max-width: 575px) { .ot-courses-meta ul li:not(:last-child)::after { right: -5px; } } .ot-courses-meta ul li:not(:last-child)::after:hover { background-color: var(--ot-white-color); } .ot-courses-meta ul li { position: relative; display: inline-block; color: var(--ot-white-color); background-color: var(--ot-theme-color); border-radius: 30px; padding: 8px 15px; } .ot-courses-meta ul li i { margin-right: 5px; } .ot-courses-categorie { position: absolute; top: 30px; left: 30px; font-size: 16px; font-weight: 600; color: var(--ot-white-color); background: var(--ot-theme-color); text-transform: uppercase; padding: 5px 15px; border-radius: 30px; } .ot-user-price { color: var(--ot-theme-color); font-size: 24px; font-weight: 700; } .ot-heart-icon { font-size: 20px; } .ot-heart-icon i { border: 1px solid var(--ot-theme-color); border-radius: 100%; padding: 10px; } /*# sourceMappingURL=main.css.map */