/* ========================================================================== 01. GOOGLE FONT =========================================================================== */ @import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap"); :root { --main-font: "Figtree", sans-serif; --base-font: 'Inter', sans-serif; } /* ========================================================================== 02. GENERAL & BASIC STYLES =========================================================================== */ :root { --theme-color: #0084ff; --header-color: #21164c; --text-color: #6c757d; --black: #181d27; --blue: #0084ff; --cloud: #f2f4f7; --coal: #31363f; --ghost: #f1f1f2; --dark-grey: #999; --green: #0fbc49; --grey: #dfdfdf; --lavender: #ebe9fd; --light-grey: #f6f6f7; --lime: #d5d52b; --lotus: #858ae3; --metal: #606060; --oxford: #222637; --pink: #f9669d; --purple: #7a5af8; --royal: #393b5b; --sand: #f9f9f7; --silver: #ccc; --sky: #f0f3f8; --sky-blue: #00a5fe; --smoke: #e7e7e7; --white: #fff; --white-smoke: #f7f7f9; --yellow: #fbd043; --tra-black: rgba(5, 5, 5, .05); --tra-grey: rgba(96, 96, 96, .13); --tra-white: rgba(255, 255, 255, .2); } html { font-size: 16px; } body { font-family: var(--base-font); color: var(--text-color); line-height: 1.6666; font-weight: 400; } .main-font { font-family: var(--main-font); font-weight: 500; } .base-font { font-family: var(--base-font); } #page, .hidd { overflow: hidden; } .rel, section, .container { position: relative!important; z-index: 3; } .section-overlay { width: 100%; height: 100%; } /*------------------------------------------*/ /* BLOCK SHADOW /*------------------------------------------*/ .block--shadow { box-shadow: 0 4px 12px 0 var(--tra-black); } /*------------------------------------------*/ /* BORDER SETTINGS /*------------------------------------------*/ .block--border { border: 1.5px solid; } .x-border { border-top: 1.5px solid; border-bottom: 1.5px solid; } .t-border { border-top: 1.5px solid; } .b-border { border-bottom: 1.5px solid; } .border-ghost { border-color: var(--ghost)!important; } .border-grey { border-color: var(--grey)!important; } .border-silver { border-color: var(--silver)!important; } .border-smoke { border-color: var(--smoke)!important; } .border-transparent { border-color: transparent!important; } /*------------------------------------------*/ /* BORDER RADIUS SETTING /*------------------------------------------*/ .r-0 { border-radius: 0px; } .r-02 { border-radius: 2px; } .r-04 { border-radius: 4px; } .r-06 { border-radius: 6px; } .r-08 { border-radius: 8px; } .r-10 { border-radius: 10px; } .r-12 { border-radius: 12px; } .r-14 { border-radius: 14px; } .r-16 { border-radius: 16px; } .r-18 { border-radius: 18px; } .r-20 { border-radius: 20px; } .r-22 { border-radius: 22px; } .r-24 { border-radius: 24px; } .r-26 { border-radius: 26px; } .r-28 { border-radius: 28px; } .r-30 { border-radius: 30px; } .r-32 { border-radius: 32px; } .r-34 { border-radius: 34px; } .r-36 { border-radius: 36px; } /*------------------------------------------*/ /* OPACITY SETTINGS /*------------------------------------------*/ .o-0 { opacity: 0; } .o-03 { opacity: .03; } .o-04 { opacity: .04; } .o-05 { opacity: .05; } .o-06 { opacity: .06; } .o-07 { opacity: .07; } .o-08 { opacity: .08; } .o-09 { opacity: .09; } .o-10 { opacity: .1; } .o-11 { opacity: .11; } .o-12 { opacity: .12; } .o-13 { opacity: .13; } .o-14 { opacity: .14; } .o-15 { opacity: .15; } .o-16 { opacity: .16; } .o-17 { opacity: .17; } .o-18 { opacity: .18; } .o-19 { opacity: .19; } .o-20 { opacity: .2; } .o-25 { opacity: .25; } .o-30 { opacity: .3; } .o-35 { opacity: .35; } .o-40 { opacity: .4; } .o-45 { opacity: .45; } .o-50 { opacity: .5; } .o-55 { opacity: .55; } .o-60 { opacity: .60; } .o-65 { opacity: .65; } .o-70 { opacity: .7; } .o-75 { opacity: .75; } .o-80 { opacity: .8; } .o-85 { opacity: .85; } .o-90 { opacity: .9; } .o-95 { opacity: .95; } .o-100 { opacity: 1; } /*------------------------------------------*/ /* Z-INDEX SETTINGS /*------------------------------------------*/ .z-01 { z-index: 1; } .z-02 { z-index: 2; } .z-03 { z-index: 3; } .z-04 { z-index: 4; } .z-05 { z-index: 5; } .z-06 { z-index: 6; } .z-07 { z-index: 7; } .z-08 { z-index: 8; } .z-09 { z-index: 9; } .z-10 { z-index: 10; } /*------------------------------------------*/ /* SPACING & INDENTS /*------------------------------------------*/ .py-25 { padding-top: 25px; padding-bottom: 25px; } .py-30 { padding-top: 30px; padding-bottom: 30px; } .py-35 { padding-top: 35px; padding-bottom: 35px; } .py-40 { padding-top: 40px; padding-bottom: 40px; } .py-50 { padding-top: 50px; padding-bottom: 50px; } .py-60 { padding-top: 60px; padding-bottom: 60px; } .py-70 { padding-top: 70px; padding-bottom: 70px; } .py-80 { padding-top: 80px; padding-bottom: 80px; } .py-90 { padding-top: 90px; padding-bottom: 90px; } .py-100 { padding-top: 100px; padding-bottom: 100px; } .py-110 { padding-top: 110px; padding-bottom: 110px; } .py-120 { padding-top: 120px; padding-bottom: 120px; } .pt-30 { padding-top: 30px; } .pt-40 { padding-top: 40px; } .pt-50 { padding-top: 50px; } .pt-60 { padding-top: 60px; } .pt-70 { padding-top: 70px; } .pt-80 { padding-top: 80px; } .pt-90 { padding-top: 90px; } .pt-100 { padding-top: 100px; } .pt-110 { padding-top: 110px; } .pt-120 { padding-top: 120px; } .pb-30 { padding-bottom: 30px; } .pb-40 { padding-bottom: 40px; } .pb-50 { padding-bottom: 50px; } .pb-60 { padding-bottom: 60px; } .pb-70 { padding-bottom: 70px; } .pb-80 { padding-bottom: 80px; } .pb-90 { padding-bottom: 90px; } .pb-100 { padding-bottom: 100px; } .pb-110 { padding-bottom: 110px; } .pb-120 { padding-bottom: 120px; } .px-15 { padding-left: 15px; padding-right: 15px; } .px-20 { padding-left: 20px; padding-right: 20px; } .px-25 { padding-left: 25px; padding-right: 25px; } .px-30 { padding-left: 30px; padding-right: 30px; } .px-35 { padding-left: 35px; padding-right: 35px; } .mt-0 { margin-top: 0!important; } .mt-15 { margin-top: 15px; } .mt-20 { margin-top: 20px; } .mt-25 { margin-top: 25px; } .mt-30 { margin-top: 30px; } .mt-40 { margin-top: 40px; } .mt-50 { margin-top: 50px; } .mt-60 { margin-top: 60px; } .mt-70 { margin-top: 70px; } .mt-80 { margin-top: 80px; } .mt-90 { margin-top: 90px; } .mt-100 { margin-top: 100px; } .mt-110 { margin-top: 110px; } .mt-120 { margin-top: 120px; } .mb-0 { margin-bottom: 0!important; } .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-50 { margin-bottom: 50px; } .mb-60 { margin-bottom: 60px; } .mb-70 { margin-bottom: 70px; } .mb-80 { margin-bottom: 80px; } .mb-90 { margin-bottom: 90px; } .mb-100 { margin-bottom: 100px; } .mb-110 { margin-bottom: 110px; } .mb-120 { margin-bottom: 120px; } .mx-15 { margin-left: 15px; margin-right: 15px; } .mx-20 { margin-left: 20px; margin-right: 20px; } .mx-25 { margin-left: 25px; margin-right: 25px; } .mx-30 { margin-left: 30px; margin-right: 30px; } .mx-35 { margin-left: 35px; margin-right: 35px; } .mx-40 { margin-left: 40px; margin-right: 40px; } .mx-50 { margin-left: 50px; margin-right: 50px; } .mx-60 { margin-left: 60px; margin-right: 60px; } .mx-70 { margin-left: 70px; margin-right: 70px; } .mx-80 { margin-left: 80px; margin-right: 80px; } /*------------------------------------------*/ /* BACKGROUND SETTINGS /*------------------------------------------*/ .bg--fixed, .bg--scroll { background-position: center center; background-repeat: no-repeat; background-size: cover; } .bg--fixed { background-attachment: scroll!important; } .bg--scroll { background-attachment: fixed!important; } /*------------------------------------------*/ /* BACKGROUND COLORS /*------------------------------------------*/ .bg--theme { background-color: var(--theme-color); } .bg--black { background-color: var(--black); } .bg--blue { background-color: var(--blue); } .bg--cloud { background-color: var(--cloud); } .bg--coal { background-color: var(--coal); } .bg--ghost { background-color: var(--ghost); } .bg--green { background-color: var(--green); } .bg--grey { background-color: var(--grey); } .bg--lavender { background-color: var(--lavender); } .bg--lightgrey { background-color: var(--light-grey); } .bg--lime { background-color: var(--lime); } .bg--lotus { background-color: var(--lotus); } .bg--oxford { background-color: var(--oxford); } .bg--pink { background-color: var(--pink); } .bg--purple { background-color: var(--purple); } .bg--royal { background-color: var(--royal); } .bg--sand { background-color: var(--sand); } .bg--silver { background-color: var(--silver); } .bg--sky { background-color: var(--sky); } .bg--skyblue { background-color: var(--sky-blue); } .bg--smoke { background-color: var(--smoke); } .bg--white { background-color: var(--white); } .bg--whitesmoke { background-color: var(--white-smoke); } .bg--yellow { background-color: var(--yellow); } /*------------------------------------------*/ /* GRADIENT COLOR BACKGROUND /*------------------------------------------*/ .gr--cloud { background-image: linear-gradient(180deg, rgba(242, 244, 247, .65) 50%, rgba(242, 244, 247, .05) 100%); } .gr--lightgrey { background-image: linear-gradient(180deg, rgba(246, 246, 247, .65) 50%, rgba(246, 246, 247, .05) 100%); } .gr--whitesmoke { background-image: linear-gradient(180deg, rgba(244, 244, 249, .65) 50%, rgba(244, 244, 249, .05) 100%); } /*------------------------------------------*/ /* BACKGROUND IMAGE /*------------------------------------------*/ .bg--01, .bg--02, .bg--03, .bg--04, .bg--05, .bg--06, .ba--01, .ba--02, .ba--03, .ba--04 { background-repeat: no-repeat; background-position: center center; background-size: cover; } .bg--01 { background-image: url(../images/hero-5.jpg); } .bg--02 { background-image: url(../images/bg-02.jpg); } .bg--03 { background-image: url(../images/bg-03.jpg); } .bg--04 { background-image: url(../images/bg-04.jpg); } .bg--05 { background-image: url(../images/bg-05.jpg); } .bg--06 { background-image: url(../images/bg-06.jpg); } .ba--01 { background-image: url(../images/ba-01.jpg); } .ba--02 { background-image: url(../images/ba-02.jpg); } .ba--03 { background-image: url(../images/hero-5.jpg); } .ba--04 { background-image: url(../images/ba-04.jpg); } /*------------------------------------------*/ /* BACKGROUND PATTERN /*------------------------------------------*/ .pattern-01, .pattern-02, .pattern-03 { background-repeat: no-repeat; background-position: center center; background-size: cover; } .pattern-01 { background-image: url(../images/pattern-01.png); } .pattern-02 { background-image: url(../images/pattern-02.png); } .pattern-03 { background-image: url(../images/pattern-03.png); } /*------------------------------------------*/ /* BACKGROUND SHAPE /*------------------------------------------*/ .bg--shape:after { position: absolute; content: ''; width: 600px; height: 600px; top: 22%; left: 20%; z-index: -1; background-color: rgba(119, 67, 142, .12); filter: blur(15rem); } .bg--shape-top:after { position: absolute; content: ''; width: 600px; height: 600px; top: -5%; right: 12%; z-index: -1; background-color: rgba(119, 67, 142, .17); filter: blur(15rem); } .shape--01:after, .shape--02:after { position: absolute; content: ''; width: 100%; height: 55%; left: 0; z-index: -1; } .shape--01:after { top: 0; } .shape--02:after { top: 45%; } .shape--royal:after { background-color: var(--royal); } .shape--whitesmoke:after { background-color: var(--white-smoke); } /*------------------------------------------*/ /* SECTION DIVIDER /*------------------------------------------*/ hr.divider { width: 100%; height: 1px; background-color: transparent; background-image: linear-gradient(90deg, rgba(206,211,246,0) 0, #bbb 38%, #999 64%, rgba(206,211,246,0) 99%); opacity: .4; border: none; margin: 0; } /*------------------------------------------*/ /* WAVE SHAPE BOTTOM /*------------------------------------------*/ .wave-shape-bottom { position: absolute; bottom: 0; left: 0; width: 100%; } .wave-shape-bottom.fill--white path { fill: var(--white); } .wave-shape-bottom.fill--whitesmoke path { fill: var(--white-smoke); } .wave-shape-bottom.fill--ghost path { fill: var(--ghost); } .theme--dark .wave-shape-bottom.fill--white path { fill: var(--dark-theme-bg); } /* ========================================================================== 03. CUSTOM ANIMATION =========================================================================== */ .img-anim-right { animation: img-anim-right 1s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0.3s; 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; } } .img-anim-left { animation: img-anim-left 1s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0.3s; 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; } } .img-anim-top { animation: img-anim-top 1s 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; } } .image-rotate img { position: absolute; animation:spin 10s linear infinite; width: 160px; height: 160px; } @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } } /* ========================================================================== 04. TYPOGRAPHY =========================================================================== */ /*------------------------------------------*/ /* HEADERS /*------------------------------------------*/ h6, h5, h4, h3, h2, h1 { font-family: var(--main-font); color: var(--header-color); font-weight: 500; letter-spacing: 0; margin-bottom: 0; } /*------------------------------------------*/ /* TEXT SIZE /*------------------------------------------*/ .fs-10 { font-size: 0.625rem; } .fs-11 { font-size: 0.6875rem; } .fs-12 { font-size: 0.75rem; } .fs-13 { font-size: 0.8125rem; } .fs-14 { font-size: 0.875rem; } .fs-15 { font-size: 0.9375rem; } .fs-16 { font-size: 1rem; } .fs-17 { font-size: 1.0625rem; } .fs-18 { font-size: 1.125rem; } .fs-19 { font-size: 1.1875rem; } .fs-20 { font-size: 1.25rem; } .fs-21 { font-size: 1.3125rem; } .fs-22 { font-size: 1.375rem; } .fs-23 { font-size: 1.4375rem; } .fs-24 { font-size: 1.5rem; } .fs-25 { font-size: 1.5625rem; } .fs-26 { font-size: 1.625rem; } .fs-28 { font-size: 1.75rem; } .fs-30 { font-size: 1.875rem; } .fs-32 { font-size: 2rem; } .fs-34 { font-size: 2.125rem; } .fs-36 { font-size: 2.25rem; } .fs-38 { font-size: 2.375rem; } .fs-40 { font-size: 2.5rem; } .fs-42 { font-size: 2.6255rem; } .fs-44 { font-size: 2.75rem; } .fs-46 { font-size: 2.875rem; } .fs-48 { font-size: 3rem; } .fs-50 { font-size: 3.125rem; } .fs-52 { font-size: 3.25rem; } .fs-54 { font-size: 3.375rem; } .fs-56 { font-size: 3.5rem; } .fs-58 { font-size: 3.625rem; } .fs-60 { font-size: 3.75rem; } .fs-62 { font-size: 3.875rem; } .fs-64 { font-size: 4rem; } .fs-66 { font-size: 4.125rem; } .fs-68 { font-size: 4.25rem; } .fs-70 { font-size: 4.375rem; } .fs-72 { font-size: 4.5rem; } .fs-74 { font-size: 4.625rem; } .fs-76 { font-size: 4.75rem; } .fs-78 { font-size: 4.875rem; } .fs-80 { font-size: 5rem; } /*------------------------------------------*/ /* LINE HEIGHT /*------------------------------------------*/ .lh-0 { line-height: 0; } .lh-0d5 { line-height: 0.5; } .lh-1 { line-height: 1; } .lh-1d15 { line-height: 1.15; } .lh-1d2 { line-height: 1.2; } .lh-1d25 { line-height: 1.25; } .lh-1d3 { line-height: 1.3; } .lh-1d35 { line-height: 1.35; } .lh-1d4 { line-height: 1.4; } .lh-1d45 { line-height: 1.45; } .lh-1d5 { line-height: 1.5; } .lh-1d55 { line-height: 1.55; } .lh-1d6 { line-height: 1.6; } /*------------------------------------------*/ /* FONT WEIGHT /*------------------------------------------*/ .txt-upcase { text-transform: uppercase } .fw-300 { font-weight: 300; } .fw-400 { font-weight: 400; } .fw-500 { font-weight: 500; } .fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; } .fw-800 { font-weight: 800; } /*------------------------------------------*/ /* LETTERS SPACING /*------------------------------------------*/ .ls-0 { letter-spacing: 0; } .ls-0d25px { letter-spacing: -0.25px; } .ls-0d35px { letter-spacing: -0.35px; } .ls-0d5px { letter-spacing: -0.5px; } .ls-0d75px { letter-spacing: -0.75px; } .ls-1px { letter-spacing: -1px; } .ls-1d25px { letter-spacing: -1.25px; } .ls-1d3px { letter-spacing: -1.3px; } .ls-1d35px { letter-spacing: -1.35px; } .ls-1d5px { letter-spacing: -1.5px; } .ls-1d75px { letter-spacing: -1.75px; } .ls-2px { letter-spacing: -2px; } /*------------------------------------------*/ /* PARAGRAPH /*------------------------------------------*/ p { font-size: 1rem; } /* 16px */ p.main-font, span.main-font { display: block; font-family: var(--main-font); color: var(--header-color); font-weight: 500; letter-spacing: 0; } /*------------------------------------------*/ /* LINK SETTINGS /*------------------------------------------*/ a { color: var(--header-color); text-decoration: none; transition: all 400ms ease-in-out; } a:hover { color: var(--header-color); text-decoration: none; } a:focus { outline: none; text-decoration: none; } a.tra-link { font-size: 1.05rem; line-height: 1; font-weight: 500; } a.tra-link:after { position: relative; font-family: Flaticon; font-weight: 300; content: "\f165"; font-size: 0.725rem; top: 0.5px; left: 5px; } a.tra-link:hover { color: var(--header-color)!important; } /*------------------------------------------*/ /* LISTS /*------------------------------------------*/ ul { margin: 0; padding: 0; list-style: none; } /*------------------------------------------*/ /* TEXT LIST /*------------------------------------------*/ ul.simple-list { list-style: disc; margin-left: 15px; } ol.digit-list p, ul.simple-list.long-list p { margin-bottom: 8px; } .content-section ul.simple-list.long-list p { margin-bottom: 5px; } /*------------------------------------------*/ /* CHECK LIST /*------------------------------------------*/ .check-list { margin: 25px 0 16px; } .check-list.mt-10 { margin: 8px 0 0; } .check-list li p { margin-bottom: 7px; } .check-list li p span { position: relative; top: 3px; margin-right: 10px; } .check-list.ico-20 [class^="flaticon-"]:before, .check-list.ico-20 [class^="flaticon-"]:after { font-size: 1rem; } /*------------------------------------------*/ /* BUTTON SETTINGS /*------------------------------------------*/ .btn { overflow: hidden; font-size: 0.975rem; line-height: 1; font-weight: 600; background-color: transparent; padding: 0.8rem 1.5rem; border: 2px solid transparent; transition: all 400ms ease-in-out; } .btn.btn-gra { padding: 0.975rem 1.6rem; border: none; } .btn.btn-sm { font-size: 0.945rem; padding: 0.75rem 1.35rem; } .btn.btn-md { font-size: 1rem; padding: 0.9rem 1.65rem; } .btn.btn-md.btn-gra { padding: 1.0625rem 1.75rem; } .btn.ico-left, .btn.ico-right { padding: 0.9rem 1.4rem; } .btn.ico-30.ico-left { padding: 0.37rem 0; } .btn.ico-35 { padding: 0.7rem 0.6rem 0.7rem 1.15rem; border-radius: 36px; } .btn.btn-gra.ico-35 { padding: 0.895rem 0.795rem 0.895rem 1.395rem; } .btn-text { position: relative; display: inline-block; transition: transform 0.4s ease-in-out; } .ico-35 .btn-text { top: -3.5px; } .btn-text .anim-txt { display: block; } .btn-text .anim-txt:last-of-type { position: absolute; inset: 0; transform: translateY(350%); } .btn:hover .btn-text { transform: translateY(-350%); } /*------------------------------------------*/ /* Button Icon /*------------------------------------------*/ .btn.ico-20 [class*="flaticon-"]:before, .btn.ico-20 [class*="flaticon-"]:after { position: relative; font-size: 0.9rem; line-height: 0.6rem!important; top: 2px; } .btn.video-popup.ico-20 [class*="flaticon-"]:before, .btn.video-popup.ico-20 [class*="flaticon-"]:after { font-size: 1.25rem; top: 5px; } .btn.ico-left span { margin-right: 7px; } .btn.ico-right span { margin-left: 7px; } .btn.ico-30 span { position: relative; top: 0; right: 2px; margin-right: 0; } .btn.ico-30 span.ico-30-txt { position: relative; top: -10px; left: 8px; font-size: 1.05rem; } .btn.ico-35 [class*="flaticon-"]:before, .btn.ico-35 [class*="flaticon-"]:after { position: relative; font-size: 1.95rem; line-height: 0.5rem!important; top: 8px; margin-left: 6px; } /*------------------------------------------*/ /* Buttons Group /*------------------------------------------*/ .text-center .btns-group { display: inline-block; } .btns-group .btn:first-child { margin-right: 10px; } .btns-group .btn.ico-30.ico-left { padding: 0.37rem 0.5rem; } .btns-group .btn.ico-30.ico-right { padding: 0.37rem 0; } /*------------------------------------------*/ /* Button Text /*------------------------------------------*/ p.btn-txt { padding-left: 5px; margin-top: 15px; margin-bottom: 0; } p.btns-group-txt { margin: 15px 0 0 0; } .text-center p.btns-group-txt { margin-top: 20px; } p.btns-group-txt.ico-15 { padding-left: 5px; } .text-center p.btns-group-txt.ico-15 { padding-left: 0; } .text-center p.btn-txt { padding-left: 0; } p.btn-txt span, p.btns-group-txt span { position: relative; font-weight: 700; top: 0.5px; right: 3px; } .btn-txt.ico-15 [class*="flaticon-"]:before, .btns-group-txt.ico-15 [class*="flaticon-"]:before, .btn-txt.ico-15 [class*="flaticon-"]:after, .btns-group-txt.ico-15 [class*="flaticon-"]:after { font-size: 0.75rem; } /*------------------------------------------*/ /* Button Rating /*------------------------------------------*/ .btn-rating, .os-version-ext { margin-top: 15px; } .btn-rating p.btn-txt { margin-top: 0; } .star-rating small, .star-rating span.rating-txt { font-size: 0.9375rem; } .star-rating.ico-15 [class*="flaticon-"]:before, .star-rating.ico-15 [class*="flaticon-"]:after { position: relative; font-size: 1rem; top: 3px; } .star-rating.ico-20 [class*="flaticon-"]:before, .star-rating.ico-20 [class*="flaticon-"]:after { position: relative; font-size: 0.95rem; top: 1px; } .os-version-ext .star-rating small { font-size: 0.9rem; margin-left: 6px; } span.os-version { display: block; font-size: 0.9rem; line-height: 1; margin-top: 5px; } /*------------------------------------------*/ /* TRANPARENT BUTTON /*------------------------------------------*/ .btn--transparent { color: var(--black)!important; background-color: transparent!important; border-color: transparent!important; } .btn--transparent.color--white { color: var(--white)!important; } .btn--transparent:hover { background-color: transparent!important; border-color: transparent!important; } /*------------------------------------------*/ /* THEME BUTTON /*------------------------------------------*/ .btn--theme, .hover--theme:hover, .scroll .hover--theme:hover, .color--white .hover--theme:hover { color: var(--white)!important; border-color: var(--theme-color)!important; background-color: var(--theme-color)!important; } .btn--tra-theme, .hover--tra-theme:hover, .color--white .btn--tra-theme { color: var(--theme-color)!important; background-color: transparent!important; border-color: var(--theme-color)!important; } /*------------------------------------------*/ /* WHITE BUTTON /*------------------------------------------*/ .btn--white, .hover--white:hover, .color--white .btn--white, .color--white .hover--white:hover { color: var(--black)!important; background-color: var(--white)!important; border-color: var(--white)!important; } .btn--tra-white, .hover--tra-white:hover, .color--white .hover--tra-white:hover { color: var(--white)!important; background-color: transparent!important; border-color: var(--white)!important; } .scroll .hover--tra-white:hover { color: var(--black)!important; background-color: transparent!important; border-color: var(--black)!important; } .scroll .hover--white:hover { color: var(--whte)!important; background-color: var(--black)!important; border-color: var(--black)!important; } /*------------------------------------------*/ /* BLACK BUTTON /*------------------------------------------*/ .btn--black, .hover--black:hover { color: var(--white)!important; background-color: var(--black)!important; border-color: var(--black)!important; } .btn--tra-black, .hover--tra-black:hover { color: var(--black)!important; background-color: transparent!important; border-color: var(--black)!important; } /*------------------------------------------*/ /* BLUE BUTTON /*------------------------------------------*/ .btn--blue, .hover--blue:hover, .scroll .hover--blue:hover, .color--white .hover--blue:hover { color: var(--white)!important; border-color: var(--blue)!important; background-color: var(--blue)!important; } .btn--tra-blue, .hover--tra-blue:hover, .color--white .btn--tra-blue { color: var(--blue)!important; background-color: transparent!important; border-color: var(--blue)!important; } /*------------------------------------------*/ /* GREEN BUTTON /*------------------------------------------*/ .btn--green, .hover--green:hover, .scroll .hover--green:hover, .color--white .hover--green:hover { color: var(--white)!important; border-color: var(--green)!important; background-color: var(--green)!important; } .btn--tra-green, .hover--tra-green:hover, .color--white .btn--tra-green { color: var(--green)!important; background-color: transparent!important; border-color: var(--green)!important; } /*------------------------------------------*/ /* LIME BUTTON /*------------------------------------------*/ .btn--lime, .hover--lime:hover, .scroll .hover--lime:hover, .color--white .hover--lime:hover { color: var(--black)!important; border-color: var(--lime)!important; background-color: var(--lime)!important; } .color--white .btn--lime { color: var(--black)!important; } .btn--tra-lime, .hover--tra-lime:hover, .color--white .btn--tra-lime { color: var(--lime)!important; background-color: transparent!important; border-color: var(--lime)!important; } /*------------------------------------------*/ /* LOTUS BUTTON /*------------------------------------------*/ .btn--lotus, .hover--lotus:hover, .scroll .hover--lotus:hover, .color--white .hover--lotus:hover { color: var(--white)!important; border-color: var(--lotus)!important; background-color: var(--lotus)!important; } .btn--tra-lotus, .hover--tra-lotus:hover, .color--white .btn--tra-lotus { color: var(--lotus)!important; background-color: transparent!important; border-color: var(--lotus)!important; } /*------------------------------------------*/ /* PINK BUTTON /*------------------------------------------*/ .btn--pink, .hover--pink:hover, .scroll .hover--pink:hover, .color--white .hover--pink:hover { color: var(--white)!important; border-color: var(--pink)!important; background-color: var(--pink)!important; } .btn--tra-pink, .hover--tra-pink:hover, .color--white .btn--tra-pink { color: var(--pink)!important; background-color: transparent!important; border-color: var(--pink)!important; } /*------------------------------------------*/ /* PURPLE BUTTON /*------------------------------------------*/ .btn--purple, .hover--purple:hover, .scroll .hover--purple:hover, .color--white .hover--purple:hover { color: var(--white)!important; border-color: var(--purple)!important; background-color: var(--purple)!important; } .btn--tra-purple, .hover--tra-purple:hover, .color--white .btn--tra-purple { color: var(--purple)!important; background-color: transparent!important; border-color: var(--purple)!important; } /*------------------------------------------*/ /* SKYBLUE BUTTON /*------------------------------------------*/ .btn--skyblue, .hover--skyblue:hover, .scroll .hover--skyblue:hover, .color--white .hover--skyblue:hover { color: var(--white)!important; border-color: var(--sky-blue)!important; background-color: var(--sky-blue)!important; } .btn--tra-skyblue, .hover--tra-skyblue:hover, .color--white .btn--tra-skyblue { color: var(--sky-blue)!important; background-color: transparent!important; border-color: var(--sky-blue)!important; } /*------------------------------------------*/ /* YELLOW BUTTON /*------------------------------------------*/ .btn--yellow, .hover--yellow:hover, .scroll .hover--yellow:hover, .color--white .hover--yellow:hover { color: var(--black)!important; border-color: var(--yellow)!important; background-color: var(--yellow)!important; } .color--white .btn--yellow { color: var(--black)!important; } /*------------------------------------------*/ /* BUTTON FOCUS /*------------------------------------------*/ .btn:focus, .btn.btn--black:focus { color: var(--white); box-shadow: none; } .btn--transparent:focus { background-color: transparent; border-color: transparent; } .btn--tra-black:focus, .btn--transparent:focus, .btn.btn--tra-grey:focus { color: var(--black); -webkit-box-shadow: none; box-shadow: none; } /*------------------------------------------*/ /* STORE BADGE ICONS /*------------------------------------------*/ .stores-badge { display: inline-block; } .store { display: inline-block; text-align: center; margin-right: 12px; } .store:last-child { margin-right: 0; } .store img { width: auto; max-width: inherit; } .badge-img-xs .store img { max-height: 2.5rem; } .badge-img-sm .store img { max-height: 2.625rem; } .badge-img-md .store img { max-height: 2.875rem; } .badge-img-lg .store img { max-height: 3rem; } .badge-img-xl .store img { max-height: 3.25rem; } /*------------------------------------------*/ /* VECTOR ICONS /*------------------------------------------*/ .ico-10 [class*="flaticon-"]:before, .ico-10 [class*="flaticon-"]:after { font-size: 0.75rem; } .ico-15 [class*="flaticon-"]:before, .ico-15 [class*="flaticon-"]:after { font-size: 0.9375rem; } .ico-20 [class*="flaticon-"]:before, .ico-20 [class*="flaticon-"]:after { font-size: 1.25rem; } .ico-25 [class*="flaticon-"]:before, .ico-25 [class*="flaticon-"]:after { font-size: 1.5625rem; } .ico-30 [class*="flaticon-"]:before, .ico-30 [class*="flaticon-"]:after { font-size: 1.875rem; } .ico-35 [class*="flaticon-"]:before, .ico-35 [class*="flaticon-"]:after { font-size: 2.1875rem; } .ico-40 [class*="flaticon-"]:before, .ico-40 [class*="flaticon-"]:after { font-size: 2.5rem; } .ico-45 [class*="flaticon-"]:before, .ico-45 [class*="flaticon-"]:after { font-size: 2.8125rem; } .ico-50 [class*="flaticon-"]:before, .ico-50 [class*="flaticon-"]:after { font-size: 3.125rem; } .ico-55 [class*="flaticon-"]:before, .ico-55 [class*="flaticon-"]:after { font-size: 3.4375rem; } .ico-60 [class*="flaticon-"]:before, .ico-60 [class*="flaticon-"]:after { font-size: 3.75rem; } .ico-65 [class*="flaticon-"]:before, .ico-65 [class*="flaticon-"]:after { font-size: 4.0625rem; } .ico-70 [class*="flaticon-"]:before, .ico-70 [class*="flaticon-"]:after { font-size: 4.375rem; } .ico-75 [class*="flaticon-"]:before, .ico-75 [class*="flaticon-"]:after { font-size: 4.6875rem; } .ico-80 [class*="flaticon-"]:before, .ico-80 [class*="flaticon-"]:after { font-size: 5rem; } .ico-85 [class*="flaticon-"]:before, .ico-85 [class*="flaticon-"]:after { font-size: 5.3125rem; } .ico-90 [class*="flaticon-"]:before, .ico-90 [class*="flaticon-"]:after { font-size: 5.625rem; } .ico-95 [class*="flaticon-"]:before, .ico-95 [class*="flaticon-"]:after { font-size: 5.9375rem; } .ico-100 [class*="flaticon-"]:before, .ico-100 [class*="flaticon-"]:after { font-size: 6.25rem; } .ico-105 [class*="flaticon-"]:before, .ico-105 [class*="flaticon-"]:after { font-size: 6.5625rem; } .ico-110 [class*="flaticon-"]:before, .ico-110 [class*="flaticon-"]:after { font-size: 6.875rem; } .ico-115 [class*="flaticon-"]:before, .ico-115 [class*="flaticon-"]:after { font-size: 7.1875rem; } .ico-120 [class*="flaticon-"]:before, .ico-120 [class*="flaticon-"]:after { font-size: 7.5rem; } .ico-125 [class*="flaticon-"]:before, .ico-125 [class*="flaticon-"]:after { font-size: 7.8125rem; } /*------------------------------------------*/ /* PNG ICONS SETTINGS /*------------------------------------------*/ .ico-20 img { width: auto; max-width: inherit; max-height: 1.25rem; } .ico-25 img { width: auto; max-width: inherit; max-height: 1.5625rem; } .ico-30 img { width: auto; max-width: inherit; max-height: 1.875rem; } .ico-35 img { width: auto; max-width: inherit; max-height: 2.1875rem; } .ico-40 img { width: auto; max-width: inherit; max-height: 2.5rem; } .ico-45 img { width: auto; max-width: inherit; max-height: 2.8125rem; } .ico-50 img { width: auto; max-width: inherit; max-height: 3.125rem; } .ico-55 img { width: auto; max-width: inherit; max-height: 3.4375rem; } .ico-60 img { width: auto; max-width: inherit; max-height: 3.75rem; } .ico-65 img { width: auto; max-width: inherit; max-height: 4.0625rem; } .ico-70 img { width: auto; max-width: inherit; max-height: 4.375rem; } .ico-75 img { width: auto; max-width: inherit; max-height: 4.6875rem; } .ico-80 img { width: auto; max-width: inherit; max-height: 5rem; } .ico-85 img { width: auto; max-width: inherit; max-height: 5.3125rem; } .ico-90 img { width: auto; max-width: inherit; max-height: 5.625rem; } .ico-95 img { width: auto; max-width: inherit; max-height: 5.9375rem; } .ico-100 img { width: auto; max-width: inherit; max-height: 6.25rem; } .ico-105 img { width: auto; max-width: inherit; max-height: 6.5625rem; } .ico-110 img { width: auto; max-width: inherit; max-height: 6.875rem; } .ico-115 img { width: auto; max-width: inherit; max-height: 7.1875rem; } .ico-120 img { width: auto; max-width: inherit; max-height: 7.5rem; } .ico-125 img { width: auto; max-width: inherit; max-height: 7.8125rem; } /*------------------------------------------*/ /* VIDEO POPUP ICON /*------------------------------------------*/ .video-preview { position: relative; text-align: center; } .video-btn { position: absolute!important; top: 50%; left: 50%; display: inline-block; text-align: center; color: var(--white); width: 6.25rem; height: 6.25rem; margin-top: -3.125rem; margin-left: -3.125rem; border-radius: 100%; } .video-btn-sm { width: 4.2rem; height: 4.2rem; margin-top: -2.1rem; margin-left: -2.1rem; } .video-block-wrapper { transition: all 400ms ease-in-out; } .video-btn [class^="flaticon-"]:before, .video-btn [class^="flaticon-"]:after { font-size: 5rem; line-height: 6.25rem!important; margin-left: 10px; } .video-btn.video-btn-sm [class^="flaticon-"]:before, .video-btn.video-btn-sm [class^="flaticon-"]:after { font-size: 3.25rem; line-height: 4.2rem!important; margin-left: 7px; } .video-btn:hover .video-block-wrapper { transform: scale(0.95); } .video-btn:before { content: ''; position: absolute; left: -5px; right: -5px; top: -5px; bottom: -5px; background: var(--tra-white); opacity: 0; border-radius: 50%; transition: all 400ms ease-in-out; } .video-btn:hover:before { opacity: .75; left: -1.5rem; right: -1.5rem; top: -1.5rem; bottom: -1.5rem; } .video-btn.video-btn-sm:hover:before { opacity: .75; left: -1rem; right: -1rem; top: -1rem; bottom: -1rem; } .video-btn.bg--tra-white { border: 3px solid var(--white); background-color: rgba(255, 255, 255, .005); } /*------------------------------------------*/ /* VECTOR ICON BACKGROUND /*------------------------------------------*/ .shape-ico { position: relative; display: inline-block; margin: 0 auto; } .shape-ico span { position: relative; z-index: 2; } .shape-ico svg { position: absolute; z-index: 1; } .ico-55 .shape-ico svg { width: 130px; height: 130px; top: -30px; left: calc(50% - 60px); } .ico-60 .shape-ico svg { width: 140px; height: 140px; top: -30px; left: calc(50% - 65px); } .shape-ico.color--theme path { fill: #f4f9fc; } .shape-ico.color--blue path, .shape-ico.color--skyblue path { fill: #f4f9fc; } .shape-ico.color--lotus path { fill: #f4f5fc; } .shape-ico.color--purple path { fill: #f6f4fc; } /*------------------------------------------*/ /* VECTOR ROUNDED ICONS /*------------------------------------------*/ .ico-rounded { display: inline-block; text-align: center; width: 94px; height: 94px; border-radius: 100%; } .ico-rounded.ico-rounded-sm { width: 80px; height: 80px; } .ico-rounded [class*="flaticon-"]:before, .ico-rounded [class*="flaticon-"]:after { font-size: 2.55rem; line-height: 91px!important; } .ico-rounded.ico-rounded-sm [class*="flaticon-"]:before, .ico-rounded.ico-rounded-sm [class*="flaticon-"]:after { font-size: 2.3rem; line-height: 78px!important; } /*------------------------------------------*/ /* VECTOR SQUARE ICONS /*------------------------------------------*/ .ico-square { display: inline-block; text-align: center; width: 54px; height: 54px; } .ico-square [class*="flaticon-"]:before, .ico-square [class*="flaticon-"]:after { font-size: 2rem; line-height: 54px!important; } /*------------------------------------------*/ /* IMAGE HOVER OVERLAY /*------------------------------------------*/ .hover-overlay { width: 100%; height: auto; overflow: hidden; position: relative; } .hover-overlay img { transform: scale(1); overflow: hidden; transition: transform 400ms; } /*------------------------------------------*/ /* MODULE SUBTITLE /*------------------------------------------*/ .module-subtitle { display: block; font-size: 0.825rem; line-height: 1; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 40px; } .subtitle-lined { border-left: 4px solid; padding-left: 10px; } .subtitle-lined.line-blue { border-color: var(--blue); } .subtitle-lined.line-purple { border-color: var(--purple); } /*------------------------------------------*/ /* SECTION TITLE /*------------------------------------------*/ .title-01 { position: relative; text-align: center; } .title-03 .section-title { padding-right: 45px; } .title-01 p { margin: 20px 6% 0; } .title-03 p { margin-bottom: 0; } .section-rating .users { margin-left: 25px; } .section-rating .users img { position: relative; max-width: inherit; max-height: 60px; top: 0; } .section-rating .users p { font-size: 0.95rem; display: block; line-height: 1.45; margin: 14px 0 0; } .section-rating .users p span { color: var(--header-color); font-weight: 600; display: inline-block; } .color--white .section-rating .users p span { color: var(--white); } /*------------------------------------------*/ /* ADVANTAGES LIST /*------------------------------------------*/ .advantages, .text-center .advantages { margin-top: 24px; } .advantages li { width: auto!important; display: inline-block!important; vertical-align: top; clear: none!important; margin-left: -5px; } .advantages li:first-child { margin-left: 0; } .advantages li:not(:last-child):after { font-family: Flaticon; font-size: 1.15rem; /* 18.4rem */ line-height: 0.5rem!important; content: "\f172"; position: relative; top: -2.5px; } .advantages li p { float: left; line-height: 1; margin-bottom: 0; } .advantages li p a { font-weight: 400; text-decoration: underline; } .advantages li p a:hover { text-decoration: underline; } .white--color .advantages li p a:hover { color: var(--white); } /*------------------------------------------*/ /* COMPATABILITY /*------------------------------------------*/ .compatibility { display: inline-block; padding: 4px 25px; margin-top: 15px; margin-bottom: 0; } .compatibility span { position: relative; top: -1.5px; right: 2px; } .compatibility.ico-10 [class*="flaticon-"]:before, .compatibility.ico-10 [class*="flaticon-"]:after { font-size: 0.5rem; } /*------------------------------------------*/ /* TOOLS LIST / PAYMENT METHODS /*------------------------------------------*/ .tools-list, .payment-methods { margin-top: 24px; } .tools-list p, .payment-methods p { font-weight: 400; margin-bottom: 12px; } .tools-list.ico-35 [class*="flaticon-"]:before, .tools-list.ico-35 [class*="flaticon-"]:after { line-height: 2.1875rem!important; margin-right: 6px; } /*------------------------------------------*/ /* Payment Icons /*------------------------------------------*/ .payment-icons li { display: inline-block!important; vertical-align: top; clear: none!important; margin: 0; padding-right: 5px; } .payment-icons li:last-child { padding-right: 0; } .payment-icons img { width: auto; max-width: inherit; max-height: 38px; } /*------------------------------------------*/ /* QUOTE /*------------------------------------------*/ .quote p { color: var(--text-color); border-left: 3px solid var(--green); font-style: italic; padding-left: 20px; margin-bottom: 15px; } .quote h2 { border-left: 3.5px solid var(--green); padding-left: 25px; margin-bottom: 0!important; } /*------------------------------------------*/ /* Quote Avatar /*------------------------------------------*/ .quote-avatar { display: inline-block; margin: 0 auto; } .quote-avatar img { width: 60px; height: 60px; border-radius: 100%; } /*------------------------------------------*/ /* Quote Author /*------------------------------------------*/ .quote-author { position: relative; display: inline-block; padding: 0 0 0 1rem; text-align: left; top: 15px; } .quote-author h6 { margin-bottom: 1px; } .quote-author span { font-size: 0.95rem; } /*------------------------------------------*/ /* USER AVATARS /*------------------------------------------*/ .users-widget.d-block { display: block!important; text-align: left; margin: 30px 0 0 0; } .users { display: flex; position: relative; flex-flow: row wrap; align-items: center!important; justify-content: flex-start; } .users-widget .u-ava { position: relative; margin-right: 12px; } .users-widget .u-ava img { width: auto; max-width: inherit; max-height: 58px; } .users-widget .u-txt { overflow: hidden; flex: 1; max-width: 100%; } .users-widget .u-txt p { font-size: 0.935rem; line-height: 1.6; margin: 0; } .users-widget .u-txt p b { color: var(--header-color); font-weight: 600; } .color--white .users .u-txt p b { color: var(--white); } .users-widget .u-txt p span { display: block; } /*------------------------------------------*/ /* TEXT COLORS /*------------------------------------------*/ .color--theme, .color--theme a, .color--theme :is(h1, h2, h3, h4, h5, h6) { color: var(--theme-color); } .color--white, .color--white a, .color--white :is(h1, h2, h3, h4, h5, h6) { color: var(--white)!important; } .color--black, .color--black a, .color--black :is(h1, h2, h3, h4, h5, h6) { color: var(--black); } .color--header, .color--header a, .color--header :is(h1, h2, h3, h4, h5, h6) { color: var(--header-color); } .color--blue, .color--blue a, .color--blue :is(h1, h2, h3, h4, h5, h6) { color: var(--blue); } .color--coal, .color--coal a, .color--coal :is(h1, h2, h3, h4, h5, h6) { color: var(--coal); } .color--darkgrey, .color--darkgrey a, .color--darkgrey :is(h1, h2, h3, h4, h5, h6) { color: var(--dark-grey); } .color--green, .color--green a, .color--green :is(h1, h2, h3, h4, h5, h6) { color: var(--green); } .color--lime, .color--lime a, .color--lime :is(h1, h2, h3, h4, h5, h6) { color: var(--lime); } .color--lotus, .color--lotus a, .color--lotus :is(h1, h2, h3, h4, h5, h6) { color: var(--lotus); } .color--metal, .color--metal a, .color--metal :is(h1, h2, h3, h4, h5, h6) { color: var(--metal); } .color--orange, .color--orange a, .color--orange :is(h1, h2, h3, h4, h5, h6) { color: var(--orange); } .color--pink, .color--pink a, .color--pink :is(h1, h2, h3, h4, h5, h6) { color: var(--pink); } .color--purple, .color--purple a, .color--purple :is(h1, h2, h3, h4, h5, h6) { color: var(--purple); } .color--red, .color--red a, .color--red :is(h1, h2, h3, h4, h5, h6) { color: var(--red); } .color--skyblue, .color--skyblue a, .color--skyblue :is(h1, h2, h3, h4, h5, h6) { color: var(--sky-blue); } .color--silver, .color--silver a, .color--silver :is(h1, h2, h3, h4, h5, h6) { color: var(--silver); } .color--yellow, .color--yellow a, .color--yellow :is(h1, h2, h3, h4, h5, h6) { color: var(--yellow); } /*------------------------------------------*/ /* Image Hover Overlay /*------------------------------------------*/ .hover-overlay { width: 100%; height: auto; overflow: hidden; position: relative; } .hover-overlay img { transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); -moz-transform: scale(1); overflow: hidden; transition: transform 400ms; } /*------------------------------------------*/ /* Overlay Background /*------------------------------------------*/ .item-overlay { opacity: 0; -moz-opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(20, 20, 20, .45); transition: all 400ms ease-in-out; } /* ========================================================================== 05. PRELOADER SPINNER ========================================================================== */ #loading { background-color: var(--white); height: 100%; width: 100%; position: fixed; z-index: 1; margin-top: 0px; top: 0px; z-index: 99999999; } #loading-center { width: 100%; height: 100%; position: relative; } #loading-center-absolute { position: absolute; left: 50%; top: 50%; height: 60px; width: 60px; margin-top: -30px; margin-left: -30px; -webkit-animation: loading-center-absolute 1s infinite; animation: loading-center-absolute 1s infinite; } .object { width: 20px; height: 20px; background-color: #0195ff; float: left; -moz-border-radius: 50% 50% 50% 50%; -webkit-border-radius: 50% 50% 50% 50%; border-radius: 50% 50% 50% 50%; margin-right: 20px; margin-bottom: 20px; } .theme-loading .object { background-color: var(--theme-color); } .blue-loading .object { background-color: var(--blue); } .coal-loading .object { background-color: var(--coal); } .green-loading .object { background-color: var(--green); } .lotus-loading .object { background-color: var(--lotus); } .pink-loading .object { background-color: var(--pink); } .purple-loading .object { background-color: var(--purple); } .skyblue-loading .object { background-color: var(--sky-blue); } .object:nth-child(2n+0) { margin-right: 0px; } #object_one { -webkit-animation: object_one 1s infinite; animation: object_one 1s infinite; } #object_two { -webkit-animation: object_two 1s infinite; animation: object_two 1s infinite; } #object_three { -webkit-animation: object_three 1s infinite; animation: object_three 1s infinite; } #object_four { -webkit-animation: object_four 1s infinite; animation: object_four 1s infinite; } @-webkit-keyframes loading-center-absolute{ 100% { -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes loading-center-absolute{ 100% { -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes object_one{ 50% { -ms-transform: translate(20px,20px); -webkit-transform: translate(20px,20px); transform: translate(20px,20px); } } @keyframes object_one{ 50% { -ms-transform: translate(20px,20px); -webkit-transform: translate(20px,20px); transform: translate(20px,20px); } } @-webkit-keyframes object_two{ 50% { -ms-transform: translate(-20px,20px); -webkit-transform: translate(-20px,20px); transform: translate(-20px,20px); } } @keyframes object_two{ 50% { -ms-transform: translate(-20px,20px); -webkit-transform: translate(-20px,20px); transform: translate(-20px,20px); } } @-webkit-keyframes object_three{ 50% { -ms-transform: translate(20px,-20px); -webkit-transform: translate(20px,-20px); transform: translate(20px,-20px); } } @keyframes object_three{ 50% { -ms-transform: translate(20px,-20px); -webkit-transform: translate(20px,-20px); transform: translate(20px,-20px); } } @-webkit-keyframes object_four{ 50% { -ms-transform: translate(-20px,-20px); -webkit-transform: translate(-20px,-20px); transform: translate(-20px,-20px); } } @keyframes object_four{ 50% { -ms-transform: translate(-20px,-20px); -webkit-transform: translate(-20px,-20px); transform: translate(-20px,-20px); } } /* ========================================================================== 06. HEADER & NAVIGATION =========================================================================== */ #header { width: 100%; display: block; padding-top: 0px; } .header-wrapper { position: fixed; top: 0; right: 0; left: 0; z-index: 1030; } .headerwp { max-width: 1320px; margin: 0 auto; padding: 0; } .wsmainwp { max-width: 1320px; } .posrlt { position: relative; } /*------------------------------------------*/ /* HEADER LOGO /*------------------------------------------*/ .desktoplogo { line-height: 80px; } .desktoplogo img { width: auto; max-width: inherit; max-height: 58px; } /*------------------------------------------*/ /* NAVIGATION MENU /*------------------------------------------*/ .wsmainfull { width: 100%; height: auto; z-index: 1031; transition: all 450ms ease-in-out; } .tra-menu .wsmainfull { padding: 20px 0; background-color: transparent!important; box-shadow: none; } .white-menu .wsmainfull { padding: 6px 0; background-color: var(--white)!important; box-shadow: 0 2px 3px var(--tra-grey); } #header.hiddden-header { display: none; } .hidden-nav .wsmainfull { margin-top: -140px; box-shadow: 0 2px 3px var(--tra-grey); transition: all 400ms ease-in-out; } /*------------------------------------------*/ /* HEADER LINK /*------------------------------------------*/ .wsmenu > .wsmenu-list > li > a { display: block; font-size: 0.975rem; line-height: 60px; font-weight: 500; letter-spacing: 0; text-decoration: none; margin: 0 8px; padding: 10px 15px; } .navbar-dark .wsmenu > .wsmenu-list > li > a.h-link { color: var(--black); } .navbar-light .wsmenu > .wsmenu-list > li > a.h-link { color: var(--white); } .wsmenu > .wsmenu-list > li > a.h-link.last-link { padding: 10px 0px; margin: 0; } .wsmenu > .wsmenu-list > li > a .wsarrow:after { border-left: 4px solid rgba(0, 0, 0, 0); border-right: 4px solid rgba(0, 0, 0, 0); border-top: 4px solid; content: ""; float: right; right: 0; height: 0; margin: 0 0 0 17px; position: absolute; text-align: right; top: 40px; width: 0; } /*------------------------------------------*/ /* HEADER LINK INFO /*------------------------------------------*/ span.sm-info { position: relative; display: inline-block; text-align: center; width: 22px; height: 22px; color: var(--white); font-size: 0.7rem; line-height: 22px; font-weight: 500; top: -1.5px; margin-left: 8px; border-radius: 100%; } .nav-theme .sm-info { background-color: var(--theme-color); } .nav-blue .sm-info { background-color: var(--blue); } .nav-coal .sm-info { background-color: var(--lime); color: var(--coal)!important; } .nav-green .sm-info { background-color: var(--green); } .nav-lotus .sm-info { background-color: var(--lotus); } .nav-pink .sm-info { background-color: var(--pink); } .nav-purple .sm-info { background-color: var(--purple); } .nav-skyblue .sm-info { background-color: var(--sky-blue); } /*------------------------------------------*/ /* HEADER BUTTON /*------------------------------------------*/ .wsmenu > .wsmenu-list > li a.btn { font-size: 0.9rem; line-height: 30px; font-weight: 600; text-transform: none; letter-spacing: 0; margin: 18px 0 0; padding: 5px 16px; } .centered-menu .wsmenu > .wsmenu-list > li a.btn { padding: 6px 13px 5px; } .wsmenu > .wsmenu-list > li.reg-fst-link.m-left > a { margin-left: 65px; } .nl-simple.m-left .btn { margin-left: 65px; } /*------------------------------------------*/ /* LANGUAGE SELECT /*------------------------------------------*/ .wsmenu > .wsmenu-list > li.lang { margin-right: 12px; } .wsmenu > .wsmenu-list > li.lang > ul.sub-menu { width: auto; min-width: 115px!important; padding: 8px 5px; } .wsmenu > .wsmenu-list > li.lang > ul.sub-menu > li > a { font-size: 0.875rem; padding: 8px 11px; } .wsmenu > .wsmenu-list > li.lang > ul.sub-menu > li > a:hover { padding: 8px 11px; } /*------------------------------------------*/ /* HEADER SUBMENU /*------------------------------------------*/ .wsmenu > .wsmenu-list > li > ul.sub-menu { width: auto; min-width: 200px; top: 62px; padding: 14px 22px; border-radius: 4px; box-shadow: 0 2px 3px var(--tra-grey); } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a { color: var(--text-color); font-size: 0.935rem; font-weight: 500; padding: 9px 0; transition: all 0.3s ease-in-out; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a:hover { padding: 9px 0 9px 4px; } /*------------------------------------------*/ /* HEADER SUBMENU SUBMENU /*------------------------------------------*/ .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu { min-width: 210px; position: absolute; left: 102%; top: 0; margin: 0; padding: 12px 20px; border: none; border-radius: 4px; box-shadow: 0 2px 3px var(--tra-grey); } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li { border-bottom: none; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > a { color: var(--text-color); font-size: 0.935rem; font-weight: 500; padding: 9px 0; transition: all 0.3s ease-in-out; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > a:hover { padding: 9px 0 9px 4px; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a span { position: absolute; top: 10px; right: 9px; } .sub-menu.ico-10 [class*="flaticon-"]:before, .sub-menu.ico-10 [class*="flaticon-"]:after { font-size: 0.7rem; } /*------------------------------------------*/ /* HALFMENU /*------------------------------------------*/ .wsmenu > .wsmenu-list > li > .wsmegamenu { top: 70px; } .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu { width: 45%; padding: 15px 14px; border-radius: 4px; box-shadow: 0 2px 3px var(--tra-grey); } .wsmenu > .wsmenu-list > li > .wsmegamenu .link-list li { border-bottom: none; } .wsmenu > .wsmenu-list > li > .wsmegamenu.w-70 ul.link-list > li > a, .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a { background-color: transparent; color: var(--text-color); font-size: 0.935rem; font-weight: 500; padding: 9px 0; transition: all 0.3s ease-in-out; } .wsmenu > .wsmenu-list > li > .wsmegamenu.w-70 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { padding: 9px 0 9px 4px; } /*------------------------------------------*/ /* MEGAMENU /*------------------------------------------*/ .wsmenu > .wsmenu-list > li > .wsmegamenu { padding: 20px 22px; border-radius: 4px; box-shadow: 0 2px 3px var(--tra-grey); } .wsmenu > .wsmenu-list > li > .wsmegamenu.w-70 { width: 72%!important; left: 24%; padding: 25px; } /*------------------------------------------*/ /* MEGAMENU TITLE /*------------------------------------------*/ .wsmegamenu p.title { font-size: 0.8rem; line-height: 1; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; margin: 5px 0 15px; } /*------------------------------------------*/ /* NAVBAR HOVER /*------------------------------------------*/ .navbar-light .wsmenu-list > li > a.h-link:hover { color: var(--smoke); } .navbar-dark .wsmenu-list > li > a.h-link:hover { color: var(--ink); } .wsmenu > .wsmenu-list.nav-theme > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-theme > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-theme > li > .wsmegamenu.w-70 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-theme > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--theme-color); } .wsmenu > .wsmenu-list.nav-blue > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-blue > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-blue > li > .wsmegamenu.w-70 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-blue > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--blue); } .wsmenu > .wsmenu-list.nav-coal > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-coal > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-coal > li > .wsmegamenu.w-70 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-coal > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--coal); } .wsmenu > .wsmenu-list.nav-green > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-green > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-green > li > .wsmegamenu.w-70 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-green > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--green); } .wsmenu > .wsmenu-list.nav-lotus > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-lotus > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-lotus > li > .wsmegamenu.w-70 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-lotus > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--lotus); } .wsmenu > .wsmenu-list.nav-pink > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-pink > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-pink > li > .wsmegamenu.w-70 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-pink > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--pink); } .wsmenu > .wsmenu-list.nav-purple > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-purple > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-purple > li > .wsmegamenu.w-70 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-purple > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--purple); } .wsmenu > .wsmenu-list.nav-skyblue > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-skyblue > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-skyblue > li > .wsmegamenu.w-70 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-skyblue > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--sky-blue); } /*------------------------------------------*/ /* HIDDEN NAVBAR SCROLL /*------------------------------------------*/ .hidden-nav .wsmainfull.scroll { margin-top: 0; } /*------------------------------------------*/ /* NAVBAR SCROLL /*------------------------------------------*/ .tra-menu .wsmainfull.scroll, .white-menu .wsmainfull.scroll { padding: 0; border: none; background-color: rgba(255, 255, 255, .7)!important; backdrop-filter: blur(20px); box-shadow: 0 2px 3px var(--tra-grey); } .tra-menu.navbar-dark .scroll .wsmenu > .wsmenu-list > li > a.h-link, .tra-menu.navbar-light .scroll .wsmenu > .wsmenu-list > li > a.h-link { color: var(--black); } .navbar-light .scroll .wsmenu-list > li > a.h-link:hover { color: var(--ink)!important; } /*------------------------------------------*/ /* WHITE BUTTON /*------------------------------------------*/ .scroll .btn--tra-white { color: var(--black)!important; border-color: var(--black)!important; } /*------------------------------------------*/ /* LOGO IMAGE /*------------------------------------------*/ .logo-white, .logo-black { display: block; } .navbar-dark .logo-white, .navbar-light .logo-black, .tra-menu.navbar-light .scroll .logo-white { display: none; } .tra-menu.navbar-light .scroll .logo-black { display: block; } /* ========================================================================== 07. HERO ========================================================================== */ .hero-section .container-xxl { position: relative; z-index: 3; } /*------------------------------------------*/ /* HERO TYPOGRAPHY /*------------------------------------------*/ .hero-section h2 img.img-70, .hero-section h2 img.img-72, .hero-section h2 img.img-74, .hero-section h2 img.img-76 { position: relative; width: auto; max-width: inherit; margin: 0; } .hero-section h2 img.img-70 { max-height: 70px; top: -2px; } .hero-section h2 img.img-72 { max-height: 72px; top: -1.5px; } .hero-section h2 img.img-74 { max-height: 74px; top: -2.5px; } .hero-section h2 img.img-76 { max-height: 76px; 1top: -2.5px; } .hero-section .btns-group .btn:first-child { margin-right: 14px; } /*------------------------------------------*/ /* HERO ADVANTAGES LIST /*------------------------------------------*/ .hero-section .advantages { display: block; } .hero-section .advantages.mt-25 { margin-top: 25px; } .hero-section .advantages.mt-30 { margin-top: 30px; } .hero-section .advantages.mt-50 { margin-top: 50px; } .hero-section .advantages.ml-10 { margin-top: 32px; margin-left: 6px; } .hero-section .advantages li { margin-left: 5px; } .hero-section .advantages li:first-child { margin-left: 0; } .hero-section .advantages li:not(:last-child):after { font-size: 1.2rem; top: -1px; left: 5px; } .hero-section .advantages p { margin: 0!important; padding: 0!important; } /*------------------------------------------*/ /* HERO TAG WIDGET /*------------------------------------------*/ .tag-widget { margin-bottom: 42px; } .tag-widget a { font-size: 0.925rem; padding: 10px 20px 10px 8px; border-radius: 36px; } .tag-widget.r-08 a { border-radius: 8px; } .tag-widget span { font-size: 0.835rem; padding: 5px 11px; border-radius: 30px; margin-right: 5px; } .tag-widget.r-08 span { border-radius: 8px; } .theme--dark .tag-widget .bg--royal { background-color: var(--white); color: #31363f!important; } /*------------------------------------------*/ /* HERO TEXT WIDGET /*------------------------------------------*/ .txt-widget { margin-bottom: 42px; } .txt-widget.txt-widget-lg { margin-bottom: 40px; } .txt-widget a { font-size: 0.95rem; padding: 11px 22px; border-radius: 36px; } .color--white .txt-widget a.bg--white { background-color: rgba(255, 255, 255, .15); } .txt-widget.txt-widget-lg a { padding: 14px 23px; } .txt-widget span { position: relative; top: 5px; right: 9px; } .txt-widget.txt-widget-lg span { top: 8px; right: 7px; } .txt-widget.ico-20 [class*="flaticon-"]:before, .txt-widget.ico-20 [class*="flaticon-"]:after { font-size: 1.3rem; } /*------------------------------------------*/ /* HERO RATING WIDGET /*------------------------------------------*/ .rating-widget { margin-bottom: 32px; } .rating-widget a { font-size: 0.95rem; } .rating-widget a b { font-size: 0.95rem; font-weight: 600; } .rating-widget a span { font-weight: 600; } .rating-widget img.framer-stars { position: relative; top: -1.5px; max-height: 24px; margin: 0 8px; } .rating-widget img.framer-logo { position: relative; top: -3px; max-height: 30px; margin-left: 3px; } /*------------------------------------------*/ /* HERO DIGITS /*------------------------------------------*/ .hero-digits { margin-top: 45px; } #hd-1-1, #hd-1-2 { display: inline-block; float: left; padding-right: 15px; } #hd-1-1 { width: 35%; } #hd-1-2 { width: 45%; padding-left: 40px; border-left: 1px solid rgba(10, 10, 10, .3); } .color--white #hd-1-2, .theme--dark #hd-1-2 { border-color: rgba(255, 255, 255, .3); } .hero-digits h3.statistic-number { font-size: 2.75rem; line-height: 1; letter-spacing: 0; font-weight: 500; margin-bottom: 12px; } .hero-digits h3.statistic-number small { font-size: 2.3rem; margin-left: 5px; } .hero-digits p.fs-17 { font-size: 1.025rem; margin: 0; } /*------------------------------------------*/ /* HERO USERS WIDGET /*------------------------------------------*/ .hero-users-widget.d-block { display: block!important; text-align: left; margin: 35px 0 0 0; } .hero-users-widget.d-inline { display: inline-block!important; text-align: left; margin: 0 0 0 15px; } .hero-users { display: flex; position: relative; flex-flow: row wrap; align-items: center!important; justify-content: flex-start; } .hero-users .u-ava { position: relative; margin-right: 12px; } .hero-users .u-ava img { width: auto; max-width: inherit; max-height: 50px; } .hero-users .u-txt { overflow: hidden; flex: 1; max-width: 100%; } .hero-users .u-txt p { font-size: 0.915rem; line-height: 1.5; margin: 0; } .hero-users .u-txt p b { color: var(--header-color); font-weight: 600; } .color--white .hero-users .u-txt p b { color: var(--white); } .hero-users .u-txt p span { display: block; } /*------------------------------------------*/ /* HERO LOGO /*------------------------------------------*/ .hero-logo { margin-bottom: 50px; } .hero-logo img { width: auto; max-width: inherit; max-height: 40px; } /*------------------------------------------*/ /* HERO-1 /*------------------------------------------*/ .hero-1 { background-image: url(../images/hero-1.jpg); padding-top: 200px; margin-bottom: 130px; } .theme--dark .hero-1 { background-image: url(../images/hero-1d.jpg); } .hero-1 .tag-widget a { background-color: rgba(255, 255, 255, .6); } .theme--dark .hero-1 .tag-widget a { background-color: rgba(255, 255, 255, .14); } .hero-1-txt p.fs-19 { margin: 22px 8% 30px; } .hero-1-img { margin: 60px 0 -130px; } /*------------------------------------------*/ /* HERO-2 /*------------------------------------------*/ .hero-2 { background-image: url(../images/hero-2.jpg); padding-top: 160px; padding-bottom: 110px; } .theme--dark .hero-2 { background-image: url(../images/hero-2d.jpg); } .hero-2-txt { margin-top: 25px; } .hero-2 .tag-widget a { background-color: rgba(255, 255, 255, .6); } .theme--dark .hero-2 .tag-widget a { background-color: rgba(255, 255, 255, .14); } .hero-2-txt p.fs-18 { margin: 22px 5% 30px 0; } .hero-2-txt .hero-digits { margin-top: 55px; } /*------------------------------------------*/ /* HERO-3 /*------------------------------------------*/ .hero-3 { background-image: url(../images/hero-3.jpg); padding-top: 200px; overflow: hidden; } .hero-3 .tag-widget a { background-color: rgba(255, 255, 255, .17); } .hero-3-txt p.fs-19 { margin: 25px 12% 35px; } .hero-3-img { margin: 70px 0 -70px; } /*------------------------------------------*/ /* HERO-4 /*------------------------------------------*/ .hero-4 { padding-top: 200px; padding-bottom: 90px; } .theme--dark .hero-4 .tag-widget a { background-color: rgba(255, 255, 255, .15); } .hero-4-txt h2 { letter-spacing: -1px; } .hero-4-txt p.fs-18 { margin: 20px 8% 25px; } .hero-4-brands { margin: 50px 0 0; } .hero-4-brands p { margin-bottom: 25px; } .hero-4-brands .loop_carousel_left img { padding: 0 14px; height: 3.65rem; } .hero-4-brands .loop_carousel_left span:last-child img { padding: 0 0 0 14px; } /*------------------------------------------*/ /* HERO-5 /*------------------------------------------*/ .hero-5 { background-image: url(../images/hero-5.jpg); padding-top: 200px; margin-bottom: 130px; } .hero-5-txt p.fs-19 { margin: 30px 12% 40px; } .hero-5-img { margin: 70px 0 -130px; } /*------------------------------------------*/ /* HERO-6 /*------------------------------------------*/ .hero-6 { position: relative; background-color: #fdfdff; padding-bottom: 110px; } .theme--dark .hero-6 { background-color: #191c28; } .hero-6-txt { padding-top: 110px; margin-right: 5%; } .hero-6-txt p.fs-18 { margin: 20px 5% 30px 0; } .hero-6-img { width: 48%; height: 100%; position: absolute; right: 0; top: 0; } .hero-6-img img { width: 100%; height: 100%; object-fit: cover; } /*------------------------------------------*/ /* HERO-7 /*------------------------------------------*/ .hero-7-wrapper { background-image: url(../images/hero-7.jpg); overflow: hidden; padding: 85px 0 85px 80px; margin-top: 120px; } .hero-7-txt { margin-top: 30px; } .hero-7-txt p.fs-18 { margin: 16px 8% 28px 0; } /*------------------------------------------*/ /* HERO-8 /*------------------------------------------*/ .hero-8 { padding-top: 130px; } .theme--dark .hero-8 { background-color: #31363f; } .hero-8-txt p.fs-18 { margin: 20px 6% 30px 0; } .hero-8-img { text-align: center; margin-left: -15px; } /*------------------------------------------*/ /* HERO-9 /*------------------------------------------*/ .hero-9 { overflow: hidden; background-image: url(../images/hero-9.jpg); padding-top: 180px; } .theme--dark .hero-9 { background-image: url(../images/hero-9d.jpg); } .theme--dark .hero-9 .tag-widget a { background-color: rgba(255, 255, 255, .15); border-color: transparent; } .hero-9-txt p.fs-19 { margin: 22px 14% 30px; } .hero-9-img { margin: 55px 0 -65px; } /*------------------------------------------*/ /* HERO-10 /*------------------------------------------*/ .hero-10 { position: relative; background-image: url(../images/hero-10.jpg); padding-top: 175px; padding-bottom: 100px; } .hero-10-txt { margin-bottom: 65px; } .hero-10-txt p.fs-18 { margin: 25px 5% 35px 0; } .hero-10-brands { margin: 50px 25px 0 0; } .hero-10-brands p { margin-bottom: 20px; } .hero-10-brands .loop_carousel_left img { padding: 0 5px; height: 3.2rem; } .hero-10-brands .loop_carousel_left span:last-child img { padding: 0 0 0 5px; } .hero-10-img { position: relative; margin: 0 -100% 0 25px; } /*------------------------------------------*/ /* HERO-11 /*------------------------------------------*/ .hero-11 { padding-top: 180px; } .theme--dark .hero-11 .tag-widget a { background-color: rgba(255, 255, 255, .15); } .hero-11-txt p.fs-19 { margin: 22px 10% 30px; } .hero-11-img { margin-top: 55px; display: flex; } #h11-1 { margin-right: 10px; } #h11-2 { margin-left: 10px; } /*------------------------------------------*/ /* HERO-12 /*------------------------------------------*/ .hero-12 { background-image: url(../images/hero-12.jpg); padding-top: 70px; padding-bottom: 120px; } .theme--dark .hero-12 { background-image: url(../images/hero-12d.jpg); } .theme--dark .hero-12 .tag-widget a { background-color: rgba(255, 255, 255, .15); } .hero-12-txt { margin-bottom: 15px; } .hero-12 .tag-widget a { font-size: 0.9rem; padding: 9px 18px 9px 7px; } .hero-12 .tag-widget span { font-size: 0.8rem; padding: 5px 11px; } .hero-12-txt p.fs-18 { margin: 18px 6% 30px 0; } /*------------------------------------------*/ /* HERO-13 /*------------------------------------------*/ .hero-13 { position: relative; padding-top: 190px; } .hero-13-shape { position: absolute; content: ''; z-index: -1; width: 74%; height: 100%; top: 7%; left: 12%; right: 0; opacity: .4; } .theme--dark .hero-13 .tag-widget a { background-color: rgba(255, 255, 255, .15); } .hero-13-txt p.fs-18 { margin: 24px 10% 30px; } .hero-13-image { overflow: hidden; text-align: center; background-image: url(../images/hero-13.jpg); margin: 60px 20px 0; padding: 60px 55px 0; } .theme--dark .hero-13-image { background-image: url(../images/hero-13d.jpg); } /*------------------------------------------*/ /* HERO-14 /*------------------------------------------*/ .hero-14 { background-image: url(../images/hero-14.jpg); padding-top: 200px; margin-bottom: 130px; } .theme--dark .hero-14 { background-image: url(../images/hero-14d.jpg); } .hero-14-txt p.fs-18 { margin: 25px 8% 30px; } .hero-14-brands { margin: 50px 15px 0; } .hero-14-brands p { margin-bottom: 25px; } .hero-14-brands .loop_carousel_left img { padding: 0 14px; height: 3.65rem; } .hero-14-brands .loop_carousel_left span:last-child img { padding: 0 0 0 14px; } .hero-14-img { margin: 60px 0 -130px; } /*------------------------------------------*/ /* HERO-15 /*------------------------------------------*/ .hero-15 { position: relative; background-image: url(../images/hero-15.jpg); padding-top: 175px; padding-bottom: 100px; } .hero-15 .txt-widget a { background-color: rgba(255, 255, 255, .65); } .hero-15-txt p.fs-18 { margin: 25px 6% 30px 0; } .hero-15-img { position: relative; margin: 0 -80% 0 15px; } /*------------------------------------------*/ /* HERO-16 /*------------------------------------------*/ .hero-16-wrapper { overflow: hidden; background-image: url(../images/hero-16.jpg); padding-top: 120px; margin-top: 120px; } .theme--dark .hero-16-wrapper { background-image: url(../images/hero-16d.jpg); } .theme--dark .hero-16 .tag-widget a { background-color: rgba(255, 255, 255, .15); } .hero-16-txt p.fs-18 { margin: 20px 10% 30px; } .hero-16-img { margin: 70px 50px 0; } /*------------------------------------------*/ /* HERO-17 /*------------------------------------------*/ .hero-17 { background-image: url(../images/hero-17.jpg); padding-top: 160px; padding-bottom: 100px; } .theme--dark .hero-17 { background-image: url(../images/hero-17d.jpg); } .hero-17-txt p.fs-18 { margin: 22px 5% 30px 0; } .hero-17-brands { margin: 90px 10px 0; } .hero-17-brands p { margin-bottom: 35px; } .hero-17-brands .loop_carousel_left img { padding: 0 14px; height: 4rem; } .hero-17-brands .loop_carousel_left span:last-child img { padding: 0 0 0 14px; } /*------------------------------------------*/ /* HERO-18 /*------------------------------------------*/ .hero-18 { background-image: url(../images/hero-18.jpg); padding-top: 185px; padding-bottom: 120px; } .theme--dark .hero-18 { background-image: url(../images/hero-18d.jpg); } .hero-18 .tag-widget a { background-color: rgba(255, 255, 255, .55); } .theme--dark .hero-18 .tag-widget a { background-color: rgba(255, 255, 255, .15); } .hero-18-txt p.fs-18 { margin: 22px 10% 30px; } .hero-18-brands { margin: 75px 25px 0; } .hero-18-brands p { margin-bottom: 25px; } .hero-18-brands .loop_carousel_left img { padding: 0 14px; height: 3.65rem; } .hero-18-brands .loop_carousel_left span:last-child img { padding: 0 0 0 14px; } /*------------------------------------------*/ /* HERO QUICK FORM /*------------------------------------------*/ .hero-section .quick-form { background-color: var(--white); padding: 6px; border: 1.5px solid var(--silver); } .hero-section .quick-form.form-stroke { border-color: var(--silver); } .hero-section .quick-form.form--shadow { border-color: transparent; box-shadow: 0 5px 10px var(--tra-black); } .theme--dark .hero-section .quick-form { border-color: transparent; } .hero-section .text-center .quick-form { margin: 0 12%; } .hero-section .text-center .quick-form.mx-30 { margin: 0 16%; } .hero-section .quick-form.form-half { margin-right: 10%; } /*------------------------------------------*/ /* Hero Quick Form Input /*------------------------------------------*/ .hero-section .quick-form .form-control { height: 56px; background-color: rgba(244, 244, 249, .85); border: none; color: #666; font-size: 1.0625rem; font-weight: 400; padding: 0 18px; transition: all 450ms ease-in-out; } .hero-section .quick-form.r-36 .form-control { border-radius: 36px; } .hero-section .quick-form.bg--tra .form-control { background-color: transparent; } .hero-section .quick-form.form-half .form-control { height: 52px; font-size: 1rem; } /*------------------------------------------*/ /* Hero Quick Form Placeholder /*------------------------------------------*/ .hero-section .quick-form .form-control::-moz-placeholder { color: var(--text-color); } .hero-section .quick-form .form-control:-ms-input-placeholder { color: var(--text-color); } .hero-section .quick-form .form-control::-webkit-input-placeholder { color: var(--text-color); } .theme--dark .hero-section .quick-form .form-control::-moz-placeholder { color: #777; } .theme--dark .hero-section .form-control:-ms-input-placeholder { color: #777; } .theme--dark .hero-section .form-control::-webkit-input-placeholder { color: #777; } /*------------------------------------------*/ /* Hero Quick Form Focus /*------------------------------------------*/ .hero-section .quick-form .form-control:focus { background-color: var(--white); border-color: var(--purple); outline: 0; box-shadow: none; } .theme--dark .hero-section .quick-form .form-control:focus { background-color: transparent; border-color: transparent; } /*------------------------------------------*/ /* Hero Quick Form Button /*------------------------------------------*/ .hero-section .quick-form .btn { height: 56px; font-size: 1.0625rem; padding: 12px 70px; margin-left: 9px; } .hero-section .quick-form.mx-30 .btn { padding: 12px 60px; } .hero-section .quick-form.form-half .btn { height: 52px; font-size: 0.95rem; padding: 13px 40px; margin-left: 9px; } .theme--dark .hero-section .quick-form .hover--black:hover { background-color: #353f4f!important; color: #fff!important; border-color: #353f4f!important; } /*------------------------------------------*/ /* Hero Quick Form Message /*------------------------------------------*/ .hero-section .quick-form-msg { width: 100%!important; display: block; margin: 20px 0 15px 5px; } .hero-section .text-center .quick-form-msg { margin: 20px 0 -15px 0; } .hero-section .quick-form-msg .loading { color: #3eb1ff; font-size: 1.05rem; line-height: 1; font-weight: 500; } .hero-section .text-center .quick-form-msg .loading { font-size: 1.125rem; } /* ========================================================================== 08. ABOUT ========================================================================== */ .about-1-txt { text-align: center; margin-bottom: 50px; } .about-2-title { margin-bottom: 25px; } .about-2-title h3.fs-36 { margin-bottom: 35px; } .about-4 .txt-block.left-column { padding: 0 0 0 30px; } .about-4 .txt-block.right-column { padding: 0 30px 0 0; } .about-2 .txt-box.mb-30 { margin-bottom: 35px; } .about-2 .txt-block.left-column { padding-right: 5px; } /*------------------------------------------*/ /* ABOUT TYPOGRAPHY /*------------------------------------------*/ .about-2 .module-subtitle { margin-bottom: 18px; } .about-2 .txt-box span.main-font { margin-bottom: 12px; } .about-3-txt h2 { margin-bottom: 16px; } .about-1-txt p { margin: 30px 0 0; } .tb-inner h6 { margin-bottom: 10px; } /*------------------------------------------*/ /* ABOUT IMAGE /*------------------------------------------*/ .a-1-1 { padding-left: 60px; margin-bottom: 30px; } /* ========================================================================== 09. FEATURES ========================================================================== */ /*------------------------------------------*/ /* FBOX-1 /*------------------------------------------*/ .fbox-1 { border: 1.5px solid var(--grey); } .fbox-1.block--shadow, .fbox-1.bg--whitesmoke { border-color: transparent; } .fbox-1 { padding: 20px 20px 30px; } .col-lg-4 .fbox-1 { padding: 15px 15px 25px; } .fbox-1.fb-1, .fbox-1.fb-2, .fbox-1.fb-3, .fbox-1.fb-6, .fbox-1.fb-7 { margin-bottom: 30px; } .fbox-1 .fbox-txt { padding: 0 15px; } .col-lg-4 .fbox-1 .fbox-txt { padding: 0 12px; } .fbox-1 .fbox-1-img { overflow: hidden; text-align: center; margin: 0 0 30px; } /*------------------------------------------*/ /* FBOX-2 /*------------------------------------------*/ .fbox-2 { border: 1.5px solid var(--grey); } .fbox-2.block--shadow, .fbox-2.bg--whitesmoke { border-color: transparent; } .fbox-2.fb-1, .fbox-2.fb-5, .fbox-2.fb-6 { padding: 35px 20px 20px; } .fbox-2.fb-2, .fbox-2.fb-3, .fbox-2.fb-4 { padding: 20px 20px 35px; } .fbox-2.fb-7, .fbox-2.fb-8 { padding: 30px; } .fbox-2 .fbox-txt { padding: 0 15px; } .fbox-2.fb-7 .fbox-2-txt { padding: 0 40px 0 20px; } .fbox-2.fb-8 .fbox-2-txt { padding: 0 20px 0 50px; } .fbox-2 .fbox-2-img { overflow: hidden; text-align: center; } .fbox-2.fb-1 .fbox-2-img, .fbox-2.fb-5 .fbox-2-img, .fbox-2.fb-6 .fbox-2-img { margin: 35px 0 0; } .fbox-2.fb-2 .fbox-2-img, .fbox-2.fb-3 .fbox-2-img, .fbox-2.fb-4 .fbox-2-img { margin: 0 0 35px; } .fbox-2.fb-7 .fbox-2-img { margin-left: -30px; } .fbox-2.fb-8 .fbox-2-img { margin-right: -30px; } /*------------------------------------------*/ /* FBOX-3 /*------------------------------------------*/ .fbox-3 { position: relative; overflow: hidden; padding: 30px 15px 15px; border: 1.5px solid var(--grey); } .fbox-3.block--shadow { border-color: transparent; } .fbox-3.fb-4, .fbox-3.fb-5, .fbox-3.fb-6 { padding: 15px 15px 25px; } .fbox-3 .fbox-txt { padding: 0 12px; } .text-center .fbox-3 .fbox-txt { padding: 0; } .fbox-3 .fbox-3-img { overflow: hidden; text-align: center; } .fbox-3.fb-1 .fbox-3-img, .fbox-3.fb-2 .fbox-3-img, .fbox-3.fb-3 .fbox-3-img { margin: 25px 0 0; } .fbox-3.fb-4 .fbox-3-img, .fbox-3.fb-5 .fbox-3-img, .fbox-3.fb-6 .fbox-3-img { margin: 0 0 30px; } /*------------------------------------------*/ /* FBOX-4 /*------------------------------------------*/ .fbox-4 { padding: 20px 20px 30px; border: 1.5px solid var(--grey); } .fbox-4.block--shadow { border-color: transparent; } .fbox-4.fb-1, .fbox-4.fb-2 { margin-bottom: 30px; } .fbox-4 .fbox-txt { padding: 0 15px; } .fbox-4 .fbox-4-img { text-align: center; margin: 0 0 30px; } /*------------------------------------------*/ /* FBOX-5 /*------------------------------------------*/ .fbox-5 { padding: 40px; border: 1.5px solid var(--grey); transition: all 400ms ease-in-out; } .fbox-5.block--shadow { border-color: transparent; } .rows-2 .fbox-5 { padding: 45px 40px 35px; } .rows-2 .fbox-5.fb-1, .rows-2 .fbox-5.fb-2, .rows-2 .fbox-5.fb-3 { margin-bottom: 30px; } .fbox-5 .fbox-txt.mt-35 { margin-top: 32px; } .fbox-5 .txt-block-tra-link { margin-top: 16px; } .fbox-5 a.tra-link { font-size: 0.975rem; font-weight: 500; } .link-hover--theme a:hover { color: var(--theme-color)!important; } .link-hover--blue a:hover { color: var(--blue)!important; } .link-hover--green a:hover { color: var(--green)!important; } .link-hover--lotus a:hover { color: var(--lotus)!important; } .link-hover--purple a:hover { color: var(--purple)!important; } .link-hover--skyblue a:hover { color: var(--sky-blue)!important; } /*------------------------------------------*/ /* FBOX-7 /*------------------------------------------*/ .fbox-7-img { overflow: hidden; text-align: center; margin: 0 4px 28px; } .fbox-7 .fbox-txt { padding: 0 12px; } /*------------------------------------------*/ /* FBOX-8 /*------------------------------------------*/ .fbox-8 { display: flex; position: relative; flex-flow: row wrap; align-items: stretch!important; justify-content: flex-start; } .fbox-8 .fbox-ico-wrap { position: relative; margin-top: 4px; margin-right: 23px; } .fbox-8 .fbox-txt { overflow: hidden; flex: 1; max-width: 100%; } /*------------------------------------------*/ /* FBOX-9 /*------------------------------------------*/ .fbox-9-wrapper .col { padding: 0 10px; } .fbox-9 { padding: 30px 24px 25px; border: 2px solid transparent; transition: all 400ms ease-in-out; } .fbox-9 .fbox-ico { transition: all 400ms ease-in-out; } .fbox-9.blue--hover:hover { border-color: var(--blue)!important; } .fbox-9.purple--hover:hover { border-color: var(--purple)!important; } .fbox-9.blue--hover:hover .fbox-ico { background-color: var(--blue)!important; color: var(--white); } .fbox-9.purple--hover:hover .fbox-ico { background-color: var(--purple)!important; color: var(--white); } /*------------------------------------------*/ /* FBOX TYPOGRAPHY /*------------------------------------------*/ .fbox-1 .fbox-txt span, .fbox-2 .fbox-txt span, .fbox-3 .fbox-txt span, .fbox-4 .fbox-txt span, .fbox-7 .fbox-txt span { line-height: 1; margin-bottom: 15px; } .fbox-2 h3 { margin-bottom: 16px; } .fbox-2 h3.mb-20 { margin-bottom: 20px; } .fbox-5 .fbox-txt span, .fbox-6 .fbox-txt span { line-height: 1; margin: 24px 0 15px; } .fbox-9 .fbox-txt span { line-height: 1; margin: 30px 0 10px; } .fbox-1 p, .fbox-2 p, .fbox-3 p, .fbox-4 p, .fbox-5 p, .fbox-6 p, .fbox-7 p, .fbox-8 p { margin-bottom: 0; } .fbox-2-txt p.mb-15 { margin-bottom: 15px; } .fbox-9 p { font-size: 0.975rem; margin-bottom: 0; } .fbox-2-txt .btn { margin-top: 25px; } /* ========================================================================== 10. CONTENT ========================================================================== */ .ct-02-wrapper { padding: 80px 65px; } .ct-03-wrapper { overflow: hidden; padding: 70px 0 70px 80px; } .ct-07 { position: relative; width: 100%; padding: 260px 0; } .ct-06-wrapper { overflow: hidden; padding: 20px; } .ct-09 .section-overlay { margin-bottom: 100px; } .ct-10 .section-overlay { padding: 75px 60px 0; } .ct-10 .section-title { margin-bottom: 50px; } /*------------------------------------------*/ /* TEXT BLOCK /*------------------------------------------*/ .txt-block.left-column { padding-right: 35px; } .txt-block.right-column { padding-left: 35px; } .ct-02 .txt-block.left-column { padding-right: 25px; padding-left: 10px; } .ct-02 .txt-block.right-column { padding-right: 10px; padding-left: 25px; } .ct-05-txt { padding: 0 50px; } .ct-06-txt { padding: 0 30px 70px 50px; } /*------------------------------------------*/ /* TEXT BLOCK TYPOGRAPHY /*------------------------------------------*/ .txt-block h2 { margin-bottom: 22px; } .txt-block h6 { line-height: 1.5; margin: 25px 0 18px; } .ct-05-txt h2, .ct-06-txt h2 { margin-bottom: 25px; } .txt-block .btn, .ct-05-txt .btn { margin-top: 10px; } .txt-block .btn.mt-25 { margin-top: 25px; } .txt-block .btn.mt-30 { margin-top: 30px; } /*------------------------------------------*/ /* TEXT BOX /*------------------------------------------*/ .txt-box { margin-bottom: 25px; } .txt-box:last-child { margin-bottom: 0; } .txt-box span.main-font.mb-20 { line-height: 1.3; margin-bottom: 20px; } .txt-box .cbox-1 { margin-left: 10px; } /*------------------------------------------*/ /* CBOX #1 /*------------------------------------------*/ .cbox-1-wrapper { margin: 18px 0 0 0; } .cbox-1 { display: flex; position: relative; flex-flow: row wrap; align-items: stretch!important; justify-content: flex-start; margin-left: 0; } .cb-1a { margin-bottom: 10px; } .cbox-1 span { position: relative; top: 1px; right: 10px; } .cbox-1 [class*="flaticon-"]:before, .cbox-1 [class*="flaticon-"]:after { font-size: 0.85rem; } .cbox-1-txt { overflow: hidden; flex: 1; max-width: 100%; } .cbox-1-txt p { margin-bottom: 14px; } .cb-1a .cbox-1-txt p { margin-bottom: 12px; } /*------------------------------------------*/ /* CBOX #2 /*------------------------------------------*/ .cbox-2-wrapper { margin-top: 40px; } .cbox-2-txt span.main-font { margin: 15px 0 14px; } .cbox-2-txt p { margin: 0; } /*------------------------------------------*/ /* CBOX #3 /*------------------------------------------*/ .cbox-3 { display: flex; position: relative; flex-flow: row wrap; align-items: stretch!important; justify-content: flex-start; } .cbox-3 .ico-wrap { position: relative; margin-right: 1.625rem; } .cbox-3-ico { text-align: center; position: relative; width: 2.5rem; height: 2.5rem; font-size: 1.125rem; line-height: 2.15rem; font-weight: 600; border: 3px solid transparent; border-radius: 100%; transition: all 450ms ease-in-out; } .cbox-3-line { position: absolute; bottom: 14px; left: 50%; width: 2px; background-color: var(--smoke); height: calc(100% - 70px); transform: translateX(-50%); } .cbox-3:hover .cbox-3-ico { background-color: transparent; } .cbox-3:hover .cbox-3-ico.bg--theme { color: var(--theme-color)!important; border-color: var(--theme-color); } .cbox-3:hover .cbox-3-ico.bg--blue { color: var(--blue)!important; border-color: var(--blue); } .cbox-3:hover .cbox-3-ico.bg--green { color: var(--green)!important; border-color: var(--green); } .cbox-3:hover .cbox-3-ico.bg--lotus { color: var(--lotus)!important; border-color: var(--lotus); } .cbox-3:hover .cbox-3-ico.bg--pink { color: var(--pink)!important; border-color: var(--pink); } .cbox-3:hover .cbox-3-ico.bg--purple { color: var(--purple)!important; border-color: var(--purple); } .cbox-3:hover .cbox-3-ico.bg--skyblue { color: var(--sky-blue)!important; border-color: var(--sky-blue); } .cbox-3-txt { overflow: hidden; flex: 1; max-width: 100%; margin-bottom: 35px; } .cbox-3:last-child .cbox-3-txt { margin-bottom: 0; } .cbox-3-txt span.main-font { line-height: 1.4!important; margin-bottom: 15px!important; } .cbox-3-txt p { margin-bottom: 0; } /*------------------------------------------*/ /* CBOX #4 /*------------------------------------------*/ .cbox-4.cb-1, .cbox-4.cb-2 { margin-bottom: 32px; } .cbox-title { margin-bottom: 18px; } .cbox-title span { float: left; line-height: 1!important; margin-right: 18px; } .cbox-title span[class*="flaticon-"]:before, .cbox-title span[class*="flaticon-"]:after { font-size: 2.75rem; } .cbox-title span.main-font { line-height: 2.65rem!important; margin-right: 0; margin-bottom: 0!important; } .cbox-4-txt p { margin-bottom: 0; } /*------------------------------------------*/ /* CBOX #5 /*------------------------------------------*/ .cbox-5 { display: flex; position: relative; flex-flow: row wrap; align-items: stretch!important; justify-content: flex-start; } .cbox-5 .ico-wrap { position: relative; text-align: center; margin-top: 0; margin-right: 1.35rem; } .cbox-5-ico { position: relative; top: 3px; } .cbox-5-ico span[class*="flaticon-"]:before, .cbox-5-ico span[class*="flaticon-"]:after { font-size: 2.95rem; } .cbox-5-ico img { width: 3.25rem; height: 3.25rem; } .cbox-5-txt { overflow: hidden; flex: 1; max-width: 100%; margin-bottom: 40px; } .cbox-5-txt.mb-30 { margin-bottom: 30px; } .cbox-5-txt.mb-25 { margin-bottom: 25px; } .cbox-5-txt.mb-20 { margin-bottom: 20px; } .cbox-5:last-child .cbox-5-txt { margin-bottom: 0; } .cbox-5-txt span.main-font { line-height: 1; margin-bottom: 15px; } .cbox-5-txt p { margin-bottom: 0; } /*------------------------------------------*/ /* CBOX #6 /*------------------------------------------*/ .cbox-6 { display: flex; position: relative; flex-flow: row wrap; align-items: stretch!important; justify-content: flex-start; } .cbox-6.mt-25 { margin-top: 25px; } .cbox-6-txt { overflow: hidden; flex: 1; max-width: 100%; padding-left: 14px; } .cbox-6-ico.ico-30 [class*="flaticon-"]:before, .cbox-6-ico.ico-30 [class*="flaticon-"]:after { font-size: 1.6875rem; } .cbox-6-ico span { position: relative; top: 7px; } /*------------------------------------------*/ /* ACCORDION /*------------------------------------------*/ .txt-block .accordion { margin-top: 40px; } .txt-block .accordion-item { background-color: transparent; padding: 9px 0 13px; border: none; border-radius: 0 0; } .txt-block .accordion-thumb { position: relative; cursor: pointer; margin: 0; padding-bottom: 26px; border-bottom: 1px solid var(--silver); } .txt-block .accordion-item .accordion-thumb:after, .txt-block .accordion-item.is-active .accordion-thumb:after { color: #363636; font-family: Flaticon; position: absolute; font-weight: 300; } .txt-block .accordion-item .accordion-thumb:after { content: "\f15d"; font-size: 0.95rem; top: 0; right: 0; } .txt-block .accordion-item.is-active .accordion-thumb:after { content: "\f15e"; } .txt-block .accordion-panel { color: var(--text-color); margin: 0; padding: 18px 0 10px 0; display: none; } .txt-block .accordion-thumb span.main-font { color: var(--header-color); line-height: 1; padding-left: 3px; margin-bottom: 0; } /*------------------------------------------*/ /* SIGNATURE /*------------------------------------------*/ .signature { margin-top: 30px; } .signature img { width: auto; max-width: inherit; max-height: 48px; } .signature p.main-font { line-height: 1; margin: 20px 0 0 5px; } .signature span { font-family: var(--base-font); color: var(--text-color); font-size: 1.05rem; font-style: italic; line-height: 1; font-weight: 400; } .txt-block h6.fs-18 { line-height: 1.6; margin-bottom: 15px; padding-right: 8%; } .ct-11 .txt-block p { padding-right: 8%; } /*------------------------------------------*/ /* IMG BLOCK IMAGE /*------------------------------------------*/ .img-block { text-align: center; } .ct-01 .img-block.right-column { margin-left: 25px; } .ct-01 .img-block.left-column { margin-right: 25px; } .ct-04 .img-block img { max-width: 170%; display: inline-block; margin-left: 15px; } .ct-06-img { position: relative; } .img-block-hidden { margin-bottom: -70px; } .ct-09 .img-block { margin-bottom: -100px; } .half-img { width: 47%; height: 100%; position: absolute; right: 0; top: 0; } .half-img-left { width: 47%; height: 100%; position: absolute; left: 0; top: 0; } .half-img img, .half-img-left img { width: 100%; height: 100%; object-fit: cover; } .half-img.r-20 img { border-radius: 20px 0 0 20px; } .half-img-left.r-20 img { border-radius: 0 20px 20px 0; } .ct-10-img { margin-bottom: -70px; } .ct-10-img .video-btn { top: calc(50% - 35px); } /* ========================================================================== 11. STATISTIC =========================================================================== */ .statistic-1-wrapper .statistic-block { padding: 10px 45px; } #stb-1-1, #stb-1-2 { border-right: 1px solid var(--silver); } .statistic-3-wrapper { overflow: hidden; padding: 60px 10% 70px; } .statistic-3-wrapper .statistic-block { padding: 35px; } .statistic-4-wrapper { position: relative; padding: 0 5%; } #stb-4-1, #stb-4-2 { border-right: 1px solid var(--silver); } .statistic-4-wrapper .statistic-block { padding: 5px 15px 5px 35px; } .statistic-3-title { margin-bottom: 40px; } .statistic-3-title.mb-50 { margin-bottom: 50px; } .statistic-4-title { margin-bottom: 55px; } .statistic-5-wrapper { margin: 0 20px; border-top: 1px solid var(--silver); } .statistic-5-wrapper .statistic-block { padding: 40px 10% 20px; } #stb-5-1, #stb-5-2 { border-right: 1px solid var(--silver); } .statistic-3-title p { margin: 12px 5px 0!important; } .ct-11 .statistic-6-wrapper { margin: 60px 20px 0; } #stb-6-1, #stb-6-2, #stb-6-3, #stb-6-4 { border-left: 2.5px solid var(--yellow); } .statistic-6-wrapper .statistic-block { padding-left: 22px; } /*------------------------------------------*/ /* STATISTIC BLOCK NUMBER /*------------------------------------------*/ h2.statistic-number { line-height: 1; margin-bottom: 0; } .statistic-1-wrapper .statistic-block span.main-font { line-height: 1; margin-top: 20px; margin-bottom: 15px; } .statistic-2-wrapper .txt-block h2 { line-height: 1.35; margin-bottom: 0; } #stb-2-1 h2, #stb-2-2 h2 { letter-spacing: -1px; margin-bottom: 18px; } .statistic-4-wrapper span.main-font { margin: 25px 0 15px; line-height: 1; } .statistic-1-wrapper p { margin-bottom: 0; } .statistic-2-wrapper p { line-height: 1.6; margin-bottom: 0; } .statistic-3-wrapper p { margin: 0 0 35px; } .statistic-5-wrapper p { margin: 25px 0 0; } .statistic-6-wrapper .statistic-block p { line-height: 1; margin: 16px 0 0; } .statistic-block span[class*="flaticon-"] { position: relative; opacity: 1!important; top: -11px; } .statistic-3 .statistic-block h2 span[class*="flaticon-"] { top: -10px; right: -8px; } .statistic-2 .statistic-block span[class*="flaticon-"] { top: 0; } .statistic-3 .statistic-block h2 span[class*="flaticon-"] { top: -7px; } /* ========================================================================== 12. TESTIMONIALS =========================================================================== */ .reviews-3-wrapper { padding: 0 5%; } /*------------------------------------------*/ /* TESTIMONIAL /*------------------------------------------*/ .review-1 { position: relative; padding: 35px 32px 40px; border: 1px solid var(--silver); margin: 0 12px 30px; } .review-1.rv-1-line { padding: 35px 32px; } .review-1.block--shadow { border-color: var(--smoke); } .review-1.bg--whitesmoke { border-color: transparent; } .review-2 { position: relative; padding: 40px 35px 35px; margin: 0 12px 30px; border: 1.5px solid transparent; } .review-3 { padding: 25px; margin-bottom: 30px; } .reviews-3-txt { position: relative; margin: 0 25px; } .reviews-3-txt h3 { padding-right: 3%; } .reviews-3-txt p { margin: 20px 0 0; } .reviews-3-img { position: relative; margin-right: 5px; } .r3-data { display: inline-block; position: absolute; left: 20px; bottom: 22px; background-color: var(--white); padding: 15px 20px 12px; } .r3-data span { display: block; line-height: 1.2; } .r3-data p { margin: 0; } .review-item { position: relative; width: 33.33%; padding: 0 12px; margin-bottom: 25px; } .review-4 { position: relative; padding: 35px 30px; border: 1.5px solid var(--smoke); } /*------------------------------------------*/ /* BRAND LOGO /*------------------------------------------*/ .reviews-3-logo { margin-bottom: 50px; } .reviews-3-logo img { width: auto; max-width: inherit; max-height: 55px; } /*------------------------------------------*/ /* QUOTE ICON /*------------------------------------------*/ .review-1 .review-ico { position: absolute; top: 18px; right: 30px; opacity: .12; } .review-source { position: absolute; top: 24px; right: 26px; } .review-source img { width: auto; max-width: inherit; max-height: 30px; } .review-3 .review-ico { opacity: .15; } /*------------------------------------------*/ /* TESTIMONIAL TEXT /*------------------------------------------*/ .review-1 .review-txt p { font-size: 1.05rem; margin-bottom: 40px; } .review-2 .review-txt p { font-size: 1.05rem; margin-bottom: 20px; } /*------------------------------------------*/ /* TESTIMONIAL AVATAR /*------------------------------------------*/ .review-avatar img, .owl-item .review-avatar img { width: 58px; height: 58px; border-radius: 100%; } .review-2 .review-avatar img, .review-4 .review-avatar img { width: 54px; height: 54px; } .review-1 .review-avatar { position: absolute; right: 35px; bottom: 32px; } .review-2 .review-avatar, .review-4 .review-avatar { margin: 0 auto; float: left; } /*------------------------------------------*/ /* TESTIMONIAL AUTHOR /*------------------------------------------*/ .review-2 .review-author, .review-4 .review-author { position: relative; display: inline-block; text-align: left; margin-top: 2px; padding: 0 0 0 20px; } .review-author p { color: var(--header-color); font-size: 1.0625rem; line-height: 1; font-weight: 600; margin-bottom: 9px; } .review-author span { display: block; font-size: 1rem; line-height: 1; font-weight: 400; margin-bottom: 0; } .review-1 hr { margin: -10px 0 40px; } .review-2 .author-data, .review-4 .author-data { margin-bottom: 20px; } /*------------------------------------------*/ /* TESTIMONIAL RATING /*------------------------------------------*/ .review-1 .star-rating { margin-bottom: 14px; } .reviews-section .star-rating.ico-15 [class^="flaticon-"]:before, .reviews-section .star-rating.ico-15 [class^="flaticon-"]:after { font-size: 1rem; } .review-summary { line-height: 1; margin-bottom: 0; } .review-summary a { color: var(--text-color); } .rs-txt { font-size: 0.975rem; } .rs-img img { width: auto; max-width: inherit; max-height: 32px; } .rs-stars { margin: 0 3px 0 5px; } .rs-stars.ico-10 [class*="flaticon-"]:before, .rs-stars.ico-10 [class*="flaticon-"]:after { position: relative; font-size: 0.85rem; top: 0.5px; } /* ========================================================================== 13. BRANDS =========================================================================== */ .brands-1-wrapper.mx-half { padding: 0 15%; } .brands-3-wrapper { margin: 0 15px; padding: 40px; } .brands-4-wrapper { padding: 0 14%; } .brands-5-wrapper { padding: 0 12px; } .brands-title { text-align: center; margin-bottom: 45px; } .brands-3 .brands-title { margin-bottom: 28px; } .brands-title p { margin-bottom: 0; } .brands-title h5 { margin-bottom: 35px; } .brands-title p span { color: var(--header-color); font-weight: 600; padding-bottom: 6px; border-bottom: 2.5px solid var(--header-color); } .loop_carousel_left, .loop_carousel_right { overflow: hidden; } /*------------------------------------------*/ /* BRANDS LOGO IMAGE /*------------------------------------------*/ .brands-1 .loop_carousel_left img { padding: 0 30px; height: 3.5rem; transition: all 400ms ease-in-out; } .brands-1 .mx-half .loop_carousel_left img { padding: 0 18px; height: 3rem; } .brands-2 .loop_carousel_left img { padding: 0 25px; height: 3.5rem; transition: all 400ms ease-in-out; } .brands-1 .loop_carousel_left.o-4 img, .brands-2 .loop_carousel_left.o-4 img { opacity: .4; } .brands-3 .loop_carousel_left img { padding: 0 18px; height: 3.5rem; transition: all 400ms ease-in-out; } .brands-4-wrapper .brand-logo { padding: 0 15px; } .brands-5-wrapper .brand-logo { text-align: center; padding: 45px 15px; border: 1.5px solid var(--smoke); } .brands-5-wrapper .col-lg-3, .brands-5-wrapper .col-md-4 { padding: 0 8px; } #brand-5-1, #brand-5-2, #brand-5-3, #brand-5-4 { margin-bottom: 16px; } .brands-5-wrapper .brand-logo img { height: 3.85rem; } .brands-1 .loop_carousel_left.o-4 img:hover, .brands-2 .loop_carousel_left.o-4 img:hover { opacity: .95; } .brands-1 .loop_carousel_left.o-7 img { opacity: .7; } .brands-1 .loop_carousel_left.o-7 img:hover { opacity: 1; } .brands-1 .loop_carousel_left span:last-child img, .brands-2 .loop_carousel_left span:last-child img, .brands-3 .loop_carousel_left span:last-child img { padding: 0 0 0 16px; } /* ========================================================================== 14. AWARDS =========================================================================== */ .awards-wrapper p { margin-bottom: 45px; } .awards-1 .award-badge { display: inline-block; margin: 0 13px; } .awards-1 img { width: auto; max-width: inherit; max-height: 125px; } /* ========================================================================== 15. RATING =========================================================================== */ .rating-1-wrapper { padding: 0 6%; } .rating-2-wrapper { display: inline-block; margin: 0 auto; } .rating-3-wrapper { padding: 0 16%; } /*------------------------------------------*/ /* RATING TITLE /*------------------------------------------*/ .rating-title { text-align: center; } .rating-title span { margin-bottom: 0; } /*------------------------------------------*/ /* RATING BOX /*------------------------------------------*/ .rbox-2 { display: flex; align-items: center; flex-direction: row; } /*------------------------------------------*/ /* RATING BOX LOGO /*------------------------------------------*/ .rbox-1-img, .rbox-3-img { margin-bottom: 12px; } .rbox-1-img img, .rbox-3-img img { width: auto; max-width: inherit; max-height: 40px; } .rbox-2 img { position: relative; width: auto; max-width: inherit; } .rbox-2-rating img { top: -0.5px; max-height: 28px; } .rbox-2-logo img { top: -2px; max-height: 35px; } /*------------------------------------------*/ /* RATING BOX TYPOGRAPHY /*------------------------------------------*/ .rbox-1 .star-rating, .rbox-3 .star-rating { display: inline-block; font-size: 1rem; line-height: 15px; font-weight: 500; vertical-align: inherit; } .rbox-1 .star-rating span, .rbox-3 .star-rating span { position: relative; color: var(--yellow); top: -1px; } .rbox-2-rating span { position: relative; color: var(--yellow); top: 3px; } .rbox-1 .star-rating.ico-15 [class*="flaticon-"]:before, .rbox-3 .star-rating.ico-15 [class*="flaticon-"]:before, .rbox-1 .star-rating.ico-15 [class*="flaticon-"]:after, .rbox-3 .star-rating.ico-15 [class*="flaticon-"]:after { font-size: 0.9rem; } .rbox-2 .ico-25 [class*="flaticon-"]:before, .rbox-2 .ico-25 [class*="flaticon-"]:after { font-size: 1.425rem; } .rbox-1 .star-rating, .rbox-3 .star-rating { font-size: 0.86rem; line-height: 1; } .rbox-2 h6 { font-weight: 500; margin-left: 12px; margin-right: 12px; } .rbox-2 h6 span { font-weight: 700; } /* ========================================================================== 16. INTEGRATIONS =========================================================================== */ .tools_carousel .carousel_slide { display: inline-block; margin-right: 18px; } .integrations-1 .tools_carousel .carousel_slide { margin-right: 20px; } .integrations-1 .js-marquee { margin-right: 10px!important; } .integrations-2 .js-marquee { margin-right: 9px!important; } .integrations-2 .title-01 { margin-bottom: 40px; } .integrations-1.inner-page-hero { padding-top: 175px; } .integrations-1.inner-page-hero .title-01 p { margin: 20px 12% 0; } /*------------------------------------------*/ /* INTEGRATION TOOL /*------------------------------------------*/ .int_tool-1, .int_tool-2 { text-align: center; vertical-align: center; background-color: var(--white); border: 1px solid var(--silver); padding: 20px; } .int_tool-1 { padding: 28px 30px; } .int_tool-1.block--shadow { border-color: transparent; margin-bottom: 5px; } .int_tool-3.block--shadow { border-color: transparent; } .int_tool-3 { position: relative; background-color: var(--white); border: 1px solid var(--silver); padding: 30px; margin-bottom: 30px; } /*------------------------------------------*/ /* INTEGRATION TOOL LOGO /*------------------------------------------*/ .int_tool-1 img, .int_tool-2 img, .int_tool-3 img { width: auto; max-width: inherit; max-height: 167px; } /*------------------------------------------*/ /* INTEGRATION TOOL TYPOGRAPHY /*------------------------------------------*/ .int_tool-3 span.main-font { line-height: 1; margin: 30px 0 14px; padding-top: 25px; border-top: 1px solid var(--silver); } .int_tool-3 p { color: var(--text-color); margin-bottom: 0; } /*------------------------------------------*/ /* TOOL CATEGORY /*------------------------------------------*/ .tool_category { position: absolute; top: 25px; right: 25px; padding: 2px 14px 4px; } .tool_category span { color: var(--text-color); font-size: 0.85rem; line-height: 1!important; } /*------------------------------------------*/ /* CAROUSEL FADE /*------------------------------------------*/ .carousel_fade { background-image: linear-gradient(90deg, rgba(244, 244, 249, 1) 40%, rgba(244, 244, 249, .18) 100%); width: 10%; height: 100%; position: absolute; inset: 0% auto 0% 0%; } .carousel_fade.is-right { background-image: linear-gradient(270deg, rgba(244, 244, 249, 1) 40%, rgba(244, 244, 249, .18) 100%); inset: 0% 0% 0% auto; } .carousel_fade.white_fade { background-image: linear-gradient(90deg, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, .18) 100%); } .carousel_fade.whitsmoke_fade { background-image: linear-gradient(90deg, rgba(247, 247, 249, 1) 40%, rgba(247, 247, 249, .18) 100%); } .carousel_fade.is-right.white_fade { background-image: linear-gradient(270deg, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, .18) 100%); } .carousel_fade.is-right.whitsmoke_fade { background-image: linear-gradient(270deg, rgba(247, 247, 249, 1) 40%, rgba(247, 247, 249, .18) 100%); } /* ========================================================================== 17. INTEGRATION DETAILS =========================================================================== */ .idt-title { padding-bottom: 40px; margin-bottom: 60px; border-bottom: 1px solid var(--silver); } .int-details-section .txt-block h3 { margin-bottom: 20px; } .int-details-section .txt-block .module-subtitle { margin-bottom: 15px; } .idt-title img { position: relative; width: auto; max-width: inherit; max-height: 70px; top: -4px; } #idt-1 { padding-right: 15%; } #idt-2 .txt-box.mb-40 { margin-bottom: 40px; } #idt-1 p { padding-right: 8%; } /* ========================================================================== 18. PRICING =========================================================================== */ .pricing-1-wrapper.mt-20 { margin-top: 18px; } .pricing-1-wrapper.pl-40 { padding-left: 40px; } /*------------------------------------------*/ /* PRICING TEXT /*------------------------------------------*/ .pricing-1-txt { margin-top: 50px; } .pricing-1-txt h2 { margin-bottom: 20px; } /*------------------------------------------*/ /* Price Table /*------------------------------------------*/ .pricing-1-table { background-color: var(--white); padding: 35px 42px 40px; border: 1.5px solid #d2d2d2; } .pricing-2-table { background-color: #fdfdfd; padding: 30px 22px 35px; border: 1.5px solid #e7e7e7; } .pricing-3-table { background-color: var(--white); padding: 35px 40px; border: 1.5px solid #d2d2d2; } .pricing-1-table.bg--white, .pricing-2-table.bg--white, .pricing-3-table.bg--white { background-color: var(--white); border-color: var(--grey); } .pricing-1-table.block--shadow, .pricing-2-table.block--shadow, .pricing-3-table.block--shadow { background-color: var(--white); border-color: transparent; } .pricing-1-table.highlight { padding: 0 42px 40px; } .pricing-1-table.border--theme { border: 2px solid var(--theme-color); } .pricing-1-table.border--blue { border: 2px solid var(--blue); } .pricing-1-table.border--green { border: 2px solid var(--green); } .pricing-1-table.border--lotus { border: 2px solid var(--lotus); } .pricing-1-table.border--purple { border: 2px solid var(--purple); } .pricing-1-table.border--skyblue { border: 2px solid var(--sky-blue); } /*------------------------------------------*/ /* PRICING HIGHLIGHT BADGE /*------------------------------------------*/ .badge-wrapper { position: relative; top: -20px; left: 0; width: 100%; text-align: center; } .highlight-badge { display: inline-block; margin: 0 auto; padding: 11px 34px 12px; border-radius: 36px; } .highlight-badge span.main-font { font-size: 1rem; font-weight: 500; line-height: 1; letter-spacing: 0.5px; margin-bottom: 0; } /*------------------------------------------*/ /* PRICING TABLE DISCOUNT /*------------------------------------------*/ .pricing-discount { position: absolute; top: 2px; right: -5px; padding: 7px 13px; } .pricing-discount span.main-font { font-size: 0.915rem; line-height: 1!important; letter-spacing: 0; margin-bottom: 0!important; } /*------------------------------------------*/ /* TABLE HEADER /*------------------------------------------*/ .pricing-table-header { position: relative; } .pricing-table-header span.main-font { margin-bottom: 20px; } .pricing-table-header h5 { line-height: 1; font-weight: 600; margin-bottom: 30px; } /*------------------------------------------*/ /* PRICE /*------------------------------------------*/ .price span { font-family: var(--main-font); font-size: 3.65rem; line-height: 1; font-weight: 500; letter-spacing: -1px; } .pricing-2 .price span { font-size: 3rem; letter-spacing: -1px; } /*------------------------------------------*/ /* DOLLAR SIGN /*------------------------------------------*/ .price sup { font-family: var(--main-font); font-size: 2.5rem; font-weight: 600; top: -5px; right: 2px; letter-spacing: -1px; } .pricing-2 .price sup { font-size: 2rem; top: -5px; letter-spacing: -1px; } /*------------------------------------------*/ /* Validity /*------------------------------------------*/ .price sup.validity { font-family: var(--main-font); font-size: 1.55rem; font-weight: 400; letter-spacing: 0; top: -3px; left: 0; } .pricing-2 .price sup.validity { font-size: 1.425rem; top: -3px; margin-left: 3px; } /*------------------------------------------*/ /* Text /*------------------------------------------*/ .price p { margin-top: 15px; } .pricing-2 .price p { font-size: 0.9rem; } .pricing-plan p { margin: 12px 0 0; } /*------------------------------------------*/ /* PRICING TABLE HORIZONTAL LINE /*------------------------------------------*/ .pricing-1-table hr { margin-top: 22px; margin-bottom: 20px; } /*------------------------------------------*/ /* PRICING FEATURES /*------------------------------------------*/ .pricing-features li { padding: 10px 8px; } .pricing-features li p { line-height: 1; font-weight: 500; margin-bottom: 0; } .pricing-2 .pricing-features li p { font-size: 0.94rem; } .pricing-features.ico-10 li p span { position: relative; top: 0; right: 10px; } .pricing-features.ico--theme span { color: var(--theme-color); } .pricing-features.ico--blue span { color: var(--blue); } .pricing-features.ico--green span { color: var(--green); } .pricing-features.ico--lotus span { color: var(--lotus); } .pricing-features.ico--purple span { color: var(--purple); } .pricing-features.ico--skyblue span { color: var(--sky-blue); } .pricing-features.ico-5 [class*="flaticon-"]:before, .pricing-features.ico-5 [class*="flaticon-"]:after { font-size: 0.5rem; } .pricing-features li.disabled-option p, .pricing-features li.disabled-option span { color: var(--dark-grey)!important; } /*------------------------------------------*/ /* PRICING TABLE BUTTON /*------------------------------------------*/ .pt-btn { display: block; width: 100%; margin-top: 20px; } /*------------------------------------------*/ /* PRICING TOGGLE BUTTON /*------------------------------------------*/ .ext-toggle-btn { text-align: center; } .toggle-btn.inn-toggle-btn { position: absolute; } .toggle-btn.mt-35 { margin-top: 35px; } /*------------------------------------------*/ /* TOGGLE BUTTON TYPOGRAPHY /*------------------------------------------*/ .toggler-txt { font-size: 1rem; font-weight: 500; line-height: 36px; } /*------------------------------------------*/ /* TOGGLE BUTTON SWITCHER /*------------------------------------------*/ .switch-wrap { position: relative; display: inline-block; vertical-align: middle; min-width: 60px; height: 36px; margin: 0 8px; } .switcher { display: block; cursor: pointer; background-color: var(--blue); color: var(--white); font-size: 0.925rem; font-weight: 500; height: 36px; padding: 0 20px 0 40px; position: relative; border-radius: 36px; transition: all 450ms ease-in-out; } .theme--main .switcher { background-color: var(--theme-color); } .theme--blue .switcher { background-color: var(--blue); } .theme--green .switcher { background-color: var(--green); } .theme--lotus .switcher { background-color: var(--lotus); } .theme--purple .switcher { background-color: var(--purple); } .theme--skyblue .switcher { background-color: var(--sky-blue); } .switcher .show-annual, .switcher .show-monthly { line-height: 36px; } .switcher .show-monthly { display: block; } .switcher .show-annual { display: none; } .switcher:before { position: absolute; left: 5px; bottom: 4px; content: " "; background-color: var(--white); width: 28px; height: 28px; border-radius: 50%; transition: all 450ms ease-in-out; } .switch-wrap input { display: none; } .switch-wrap input:checked + .switcher { padding: 0 40px 0 20px; } .switch-wrap input:checked + .switcher:before { left: auto; right: 4px; transition: all 350ms ease-in-out; } .switch-wrap input:checked + .switcher .show-annual { display: block; } .switch-wrap input:checked + .switcher .show-monthly { display: none; } /*------------------------------------------*/ /* PRICING NOTICE TEXT /*------------------------------------------*/ .pricing-notice { text-align: center; margin-top: 60px; } .pricing-notice p { padding: 0 10%; margin-bottom: 0; } .pricing-notice p span { font-weight: 600; } /*------------------------------------------*/ /* COMPARE PRICING TABLE /*------------------------------------------*/ .table>:not(caption)>*>* { padding: 17px 0; border: none!important; background-color: transparent!important; } .comp-table .pricing-header { max-width: 700px; } .comp-table .table thead tr, .comp-table .table tbody tr { border-bottom: 1px solid var(--silver)!important; } .comp-table .table tbody tr.table-last-tr { border-bottom: none!important; } .comp-table .table-responsive thead th { font-size: 1.1rem; font-family: var(--main-font); font-weight: 600; } .comp-table .table-responsive tbody th { font-size: 1.05rem; font-family: var(--main-font); font-weight: 600; } .comp-table .table-responsive tbody td { position: relative; font-size: 0.95rem; line-height: inherit; top: 1px; } .comp-table .table-responsive tbody td span { position: relative; top: 1px; } .table>:not(caption)>*>* { color: var(--header-color); } .table-responsive .ico-15 [class*="flaticon-"]:before, .table-responsive .ico-15 [class*="flaticon-"]:after { font-size: 0.7rem; } .table-responsive .ico-20 [class*="flaticon-"]:before, .table-responsive .ico-20 [class*="flaticon-"]:after { font-size: 0.9rem; } .comp-table .disabled-option { color: var(--dark-grey); } .comp-table .color--theme { color: var(--theme-color); } .comp-table .color--blue { color: var(--blue); } .comp-table .color--green { color: var(--green); } .comp-table .color--lotus { color: var(--lotus); } .comp-table .color--purple { color: var(--purple); } .comp-table .color--skyblue { color: var(--sky-blue); } /*------------------------------------------*/ /* PRICING COMPARE PAYMENT /*------------------------------------------*/ #pbox-2 { padding-right: 6%; } #pbox-3 { padding-left: 8%; } .comp-table-payment h6 { margin-bottom: 16px; } .comp-table-payment p { margin-bottom: 0; } /* ========================================================================== 19. CHANGELOG =========================================================================== */ .version-release { margin-bottom: 100px; } .version-release:last-child { margin-bottom: 0; } .release-data { padding-bottom: 30px; border-bottom: 1px dashed var(--silver); margin-bottom: 30px; } span.version-data { display: block; color: var(--header-color); font-size: 1.45rem; line-height: 1; font-weight: 600; margin-bottom: 22px; } span.version-data span { background-color: var(--black); color: var(--white); font-size: 1.325rem; padding: 5px 12px; border-radius: 8px; margin-right: 6px; } span.release-date { display: block; color: var(--text-color); font-size: 1.05rem; line-height: 1; margin-bottom: 0; } span.release-date span { color: var(--header-color); font-weight: 500; } .release-highlights span.main-font { margin-bottom: 16px; } .release-highlights .simple-list p { margin-bottom: 2px; } .release-highlights p b { color: var(--header-color); } .release-highlights p.fs-17 { font-weight: 500; margin: 15px 0 0; } .release-highlights p.fs-18 a { text-decoration: underline; } .release-highlights p.fs-18 a:hover { color: var(--black); } .release-preview { margin-bottom: 30px; } /* ========================================================================== 20. TEAM =========================================================================== */ .team-member { margin-bottom: 45px; } /*------------------------------------------*/ /* TEAM MEMBER PHOTO /*------------------------------------------*/ .team-member-photo { position: relative; overflow: hidden; text-align: center; margin-bottom: 32px; } .team-member .item-overlay { background: rgba(10, 10, 10, .18); } /*------------------------------------------*/ /* PHOTO HOVER ZOOM /*------------------------------------------*/ .team-member:hover img { transform: scale(1.05); -ms-transform: scale(1.05); -webkit-transform: scale(1.05); -o-transform: scale(1.05); -moz-transform: scale(1.05); } .team-member:hover .item-overlay { opacity: 1; -moz-opacity: 1; } /*------------------------------------------*/ /* TEAM MEMBER TYPOGRAPHY /*------------------------------------------*/ .team-member-data p { line-height: 1; margin-bottom: 6px; } .team-member-data span { font-size: 1.05rem; line-height: 1; font-weight: 400; letter-spacing: 0; margin-bottom: 0; } .team-1 .more-btn { margin-top: 10px; } /* ========================================================================== 21. CAREERS =========================================================================== */ .careers-1 .career-item { padding: 30px 0 25px; } /*------------------------------------------*/ /* OPEN ROLE DESCRIPTION /*------------------------------------------*/ .position-description p.main-font { line-height: 1.2; margin-bottom: 13px; } .position-data li { width: auto!important; display: inline-block!important; vertical-align: top; clear: none!important; margin-left: -5px; } .position-data li:first-child { margin-left: 0; } .position-data li:not(:last-child):after { font-family: Flaticon; font-size: 1.15rem; /* 18.4rem */ line-height: 0.5rem!important; content: "\f172"; position: relative; top: -0.5px; } .position-data li p { float: left; font-size: 1.0625rem; line-height: 1; margin-bottom: 0; } /*------------------------------------------*/ /* POSITION WORKPLACE /*------------------------------------------*/ .position-workplace { text-align: center; margin-top: 5px; } /*------------------------------------------*/ /* POSITION APPLY /*------------------------------------------*/ .posting-apply a.btn { font-size: 0.925rem; padding: 0.825rem 1.65rem; } /*------------------------------------------*/ /* MORE CAREERS BUTTON /*------------------------------------------*/ .more-careers { text-align: center; margin-top: 30px; } .more-careers-holder { display: inline-block; margin: 0 auto; } .more-careers-txt { text-align: left!important; display: inline-block; float: left; } .more-careers-txt p { position: relative; top: 9px; margin-bottom: 0; } .more-careers-btn { display: inline-block; margin-left: 20px; } .more-careers-btn .btn { font-size: 0.95rem; padding: 0.75rem 1.75rem; } .careers-section .more-btn { text-align: center; margin-top: 20px; } /* ========================================================================== 22. JOB POSITION =========================================================================== */ .job-position-title { padding-top: 170px; padding-bottom: 80px; } .job-position-title p { line-height: 1; margin-top: 30px; margin-bottom: 0; } .job-position-title p span { font-weight: 600; } .job-position-title .btn { padding: 0.8rem 1.65rem; margin-bottom: 5px; } /*------------------------------------------*/ /* JOB POSITION TYPOGRAPHY /*------------------------------------------*/ .position-info span.main-font { line-height: 1; margin-top: 50px; margin-bottom: 30px; } .position-info p span { color: var(--header-color); font-weight: 600; } .position-info .btn { margin-top: 40px!important; } /* ========================================================================== 23. BANNER =========================================================================== */ .banner-1-wrapper { position: relative; overflow: hidden; text-align: center; } .banner-1-wrapper .banner-overlay { padding: 80px 25px 90px; } .banner-2 { text-align: center; padding-top: 100px; padding-bottom: 100px; } .banner-4-wrapper { overflow: hidden; padding: 95px 75px; border: 1px solid transparent; } .banner-4-txt { padding-right: 6%; } .banner-5-wrapper { overflow: hidden; padding: 50px 60px; } .banner-6-overlay { padding: 30px; } .banner-7 { text-align: center; padding-top: 14px; padding-bottom: 14px; } .banner-6-txt { text-align: center; padding: 80px 15% 90px; } .bg--royal .banner-3-wrapper.b-border { border-color: #c0c0ce; } /*------------------------------------------*/ /* BANNER TYPOGRAPHY /*------------------------------------------*/ .banner-rating { margin-bottom: 20px; } .banner-rating small { position: relative; font-size: 1rem; top: 2px; left: 6px; } .banner-1-txt p.fs-18 { margin: 20px 0 26px; } .banner-1-txt p.fs-18.mx-50 { margin: 20px 3% 26px; } .banner-2-txt p.fs-18 { margin: 22px 4% 28px; } .banner-3-txt p.fs-17 { margin: 16px 5% 0 0; } .banner-4-txt p { margin: 18px 0 25px; } .banner-3-btn p { margin: 18px 20px 0 0; } .banner-5-btn { position: relative; display: inline-block; margin: 0 auto; top: 10px; } .banner-5-btn p { margin: 12px 0 0; } .banner-6-txt .btn { margin-top: 32px; } .banner-section .btns-group .btn { margin: 0 7px; } .banner-rating .ico-15 [class*="flaticon-"]:before, .banner-rating .ico-15 [class*="flaticon-"]:after { font-size: 0.925rem; } .banner-7-txt p { margin-bottom: 0; } /* ========================================================================== 24. DOWNLOAD =========================================================================== */ .download .title-01 h2 { padding: 0; } .download .title-01 p { margin: 15px 7% 0; } .download .title-01 .btns-group { margin: 25px 0 30px; } .download .title-01 .advantages p { text-align: left!important; margin: 0; } .download .section-overlay { padding: 55px 45px 0; } .download-img { margin-bottom: -70px; } .block-info { text-align: center; background-color: #f9f9fa; padding: 12px 40px 15px; border: 1px solid #eaeaea; border-radius: 36px; } .block-info.mt-60 { margin-top: 65px; padding: 8px 30px 10px; } .theme--dark .block-info { background-color: rgba(43, 48, 64, .4); border-color: var(--silver); } .block-info p.main-font { font-weight: 500; margin-bottom: 0; } .block-info p.main-font.fw-400 { font-weight: 400; } .block-info p.main-font a { font-weight: 600; text-decoration: underline; margin-left: 4px; } .block-info p.main-font.fw-400 a { font-weight: 500; } .block-info p.main-font a:hover { color: var(--black)!important; } /* ========================================================================== 25. FAQS =========================================================================== */ /*------------------------------------------*/ /* FAQs TITLE /*------------------------------------------*/ .faq-1-title { padding-right: 12%; margin-top: 20px; } .faq-1-title p { margin-top: 20px; margin-bottom: 22px; } /*------------------------------------------*/ /* FAQs TYPOGRAPHY /*------------------------------------------*/ .faqs-2-questions h3 { margin: 70px 0 40px 25px; } .faqs-3-questions h3 { margin: 70px 0 20px; } .fb-num { position: relative; font-size: 1.35rem; font-weight: 600; margin-right: 5px; top: -2.5px; } .faqs-2 .accordion-item p, .faqs-3 .accordion-item p { color: var(--text-color); } /*------------------------------------------*/ /* FAQS ACCORDION /*------------------------------------------*/ .faqs-2.inner-page-hero .accordion-wrapper { padding: 15px 40px; border: 1px solid transparent; } .faqs-section .accordion-item { background-color: transparent!important; border: none; border-bottom: 1px solid var(--silver); } .faqs-2.faqs-section .accordion-item.acc-last-item { border-bottom: none; } .faqs-3.inner-page-hero.faqs-section .accordion-item.acc-last-item { border-bottom: none; } /*------------------------------------------*/ /* Question /*------------------------------------------*/ .faqs-section .accordion-thumb { margin: 0; padding: 25px 0; cursor: pointer; position: relative; } .faqs-section .accordion-item .accordion-thumb:after, .faqs-section .accordion-item.is-active .accordion-thumb:after { font-family: Flaticon; color: var(--header-color); font-size: 0.915rem; font-weight: 300; content: "\f15d"; position: absolute; top: 24px; right: 0; } .faqs-section .accordion-item.is-active .accordion-thumb:after { content: "\f15e"; } /*------------------------------------------*/ /* Answer /*------------------------------------------*/ .faqs-section .accordion-panel { margin: 0; padding: 0 0 10px 0; display: none; } .faqs-section .accordion-panel p { color: var(--text-color); } .faqs-section .accordion-thumb span.main-font { line-height: 1; margin-bottom: 0; } .faqs-section .accordion-thumb p { color: var(--header-color); line-height: 1; font-weight: 600; margin-bottom: 0; } /*------------------------------------------*/ /* MORE QUESTIONS BUTTON /*------------------------------------------*/ .more-questions { text-align: center; margin-top: 60px; } /* ========================================================================== 26. NEWSLETTER =========================================================================== */ .newsletter-1, .newsletter-4 { padding-top: 70px; padding-bottom: 70px; } .newsletter-2 .newsletter-overlay { padding: 80px 0 70px; } .newsletter-3 .container { padding-left: 0; padding-right: 0; } .newsletter-3 .newsletter-overlay { padding: 50px; } /*------------------------------------------*/ /* NEWSLETTER TYPOGRAPHY /*------------------------------------------*/ .newsletter-txt h2 { margin-bottom: 35px; } .newsletter-txt h4, .newsletter-txt h3, .newsletter-txt p.fs-15 { margin-bottom: 0; } .newsletter-txt a { font-weight: 500; text-decoration: underline; } .newsletter-2 .newsletter-txt p, .newsletter-4 .newsletter-txt p { padding: 0 10%; } /*------------------------------------------*/ /* NEWSLETTER FORM /*------------------------------------------*/ .newsletter-1 .newsletter-form, .newsletter-3 .newsletter-form { margin-top: 30px; padding-left: 10%; } .newsletter-2 .newsletter-form, .newsletter-4 .newsletter-form { padding: 0 5%; margin-top: 40px; } /*------------------------------------------*/ /* Newsletter Form Input /*------------------------------------------*/ .newsletter-section .form-control { height: 58px; background-color: var(--white); border: 1.5px solid var(--silver); font-size: 1rem; color: #353f4f; font-weight: 400; padding: 0 15px; margin-right: 12px; box-shadow: none; border-radius: 6px; transition: all 400ms ease-in-out; } .newsletter-2.newsletter-section .form-control { border: none; } .newsletter-section .input-group.r-36 .form-control { padding: 0 25px; border-radius: 36px; } .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } .input-group.r-36:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) { border-top-right-radius: 36px; border-bottom-right-radius: 36px; } /*------------------------------------------*/ /* Newsletter Form Input Focus /*------------------------------------------*/ .newsletter-section .form-control:focus { background-color: var(--white); border-color: var(--purple); outline: 0; box-shadow: none; } .newsletter-section .form-theme-focus .form-control:focus { border-color: var(--theme-color); } .newsletter-section .form-blue-focus .form-control:focus { border-color: var(--blue); } .newsletter-section .form-green-focus .form-control:focus { border-color: var(--green); } .newsletter-section .form-lotus-focus .form-control:focus { border-color: var(--lotus); } .newsletter-section .form-purple-focus .form-control:focus { border-color: var(--purple); } .newsletter-section .form-skyblue-focus .form-control:focus { border-color: var(--skyblue); } /*------------------------------------------*/ /* Newsletter Form Input Placeholder /*------------------------------------------*/ .newsletter-section .form-control::-moz-placeholder { color: var(--text-color); } .newsletter-section .form-control:-ms-input-placeholder { color: var(--text-color); } .newsletter-section .form-control::-webkit-input-placeholder { color: var(--text-color); } /*------------------------------------------*/ /* Newsletter Form Button /*------------------------------------------*/ .newsletter-section .btn { display: block; width: 100%!important; height: 58px; font-size: 0.925rem; padding: 0.7rem 1.3rem; } .newsletter-2.newsletter-section .btn, .newsletter-4.newsletter-section .btn { font-size: 0.975rem; padding: 0.7rem 2rem; } /*------------------------------------------*/ /* Newsletter Form Notification /*------------------------------------------*/ .newsletter-section .form-notification { color: #3eb1ff; font-size: 0.9rem; font-weight: 400; line-height: 1; margin-top: 15px; margin-left: 5px; } .newsletter-section .text-center .form-notification { margin-left: 0; } .newsletter-section .form-notification.valid, .newsletter-section .form-notification.error { color: #fc2f4b; } .newsletter-section .newsletter-form.valid { color: #0fbc49; } /* ========================================================================== 27. BLOG PAGE =========================================================================== */ .blog-1 .blog-post { padding: 0 10px; } .blog-3 .blog-post { padding: 0 10px; } #blog-page .blog-post { padding: 0 10px; margin-bottom: 50px; } #blog-page .blog-post-txt { padding: 0 10px; } /*------------------------------------------*/ /* POST META LIST /*------------------------------------------*/ .wide-post .post-meta-list { margin-top: 20px; } .blog-3 .post-meta-list { margin-bottom: 8px; } .post-meta-list li { width: auto!important; display: inline-block!important; vertical-align: top; clear: none!important; margin-left: 1px; } .post-meta-list li:first-child { margin-left: 0; } .post-meta-list li:not(:last-child):after { font-family: Flaticon; font-size: 1.1rem; line-height: 0.5rem!important; content: "\f172"; position: relative; top: -2.5px; left: 3px; } .post-meta-list li p { line-height: 1; font-weight: 400; float: left; line-height: 1; margin: 0!important; } /*------------------------------------------*/ /* POST DATE /*------------------------------------------*/ .post-date { text-align: center; position: absolute; top: 0; left: 20px; background-color: var(--white); z-index: 3; width: 66px; height: 66px; padding: 12px 10px 0; } .post-date span { display: block; color: var(--header-color); font-size: 0.935rem; line-height: 1; font-weight: 600; text-transform: uppercase; margin-bottom: 8px; } /*------------------------------------------*/ /* BLOG POST TYPOHRAPHY /*------------------------------------------*/ .blog-post-txt h2 { margin: 0 15px 15px 0; } .blog-1 .post-link, #blog-page .post-link { line-height: 1.3; margin-bottom: 20px; } .blog-2 .post-link { line-height: 1.4; margin: 8px 0 15px; } .blog-3 .post-link { line-height: 1.3; padding-right: 5%; margin-bottom: 16px; } .post-link.ico-15 [class*="flaticon-"]:before, .post-link.ico-15 [class*="flaticon-"]:after { font-size: 0.85rem; } p.post-comments { line-height: 1; margin: 0!important; } .blog-3 .blog-post p.mb-0 { padding-right: 5%; margin-bottom: 0; } /*------------------------------------------*/ /* BLOG POST IMAGE /*------------------------------------------*/ .blog-post-img { position: relative; margin-bottom: 25px; } .blog-2 .blog-post-img, .blog-3 .blog-post-img { margin-bottom: 35px; } .blog-post .item-overlay { background: rgba(10, 10, 10, .1); } .blog-post:hover img { transform: scale(1.05); -ms-transform: scale(1.05); -webkit-transform: scale(1.05); -o-transform: scale(1.05); -moz-transform: scale(1.05); } .blog-post:hover .item-overlay { opacity: 1; -moz-opacity: 1; bottom: 0; } /*------------------------------------------*/ /* WIDE BLOG POSTS /*------------------------------------------*/ #blog-page .blog-post.wide-post { padding: 50px 40px; margin-bottom: 80px; } .wide-post .blog-post-img { margin: 0 15px 0 0; } .wide-post .blog-post-txt { margin-top: 0; margin-left: 15px; } /*------------------------------------------*/ /* BLOG POSTS CATEGORY /*------------------------------------------*/ .posts-category { margin-bottom: 50px; } .posts-category h3 { line-height: 1; margin-bottom: 0; } .posts-category span { position: relative; top: 2px; } /* ========================================================================== 28. SINGLE BLOG POST =========================================================================== */ /*------------------------------------------*/ /* POST TITLE /*------------------------------------------*/ .single-post-title { padding-bottom: 50px; margin-bottom: 50px; border-bottom: 1px solid var(--silver); } .single-post-title h2 { margin-bottom: 35px; } /*------------------------------------------*/ /* BLOG POST DATA /*------------------------------------------*/ .blog-post-data { display: flex; position: relative; flex-flow: row wrap; align-items: stretch!important; justify-content: flex-start; } .author-avatar { margin-right: 20px; } .author-avatar img { width: 60px; height: 60px; border-radius: 100%; } .post-meta { position: relative; overflow: hidden; flex: 1; max-width: 100%; margin-top: 6px; } .post-meta span.main-font { font-weight: 600; line-height: 1; margin-bottom: 11px; } .post-meta span.main-font span { margin-left: 8px; } .post-meta span.main-font span a { color: var(--purple); } .post-meta span.main-font span a:hover { color: var(--header-color); } .post-meta p { line-height: 1; margin-bottom: 0; } .post-meta p span { color: var(--header-color); font-weight: 600; } /*------------------------------------------*/ /* BLOG POST SHARE ICONS /*-----------------------------------------*/ .post-title-icons { position: absolute; bottom: 55px; right: 5px; } .share-social-icons { display: inline-block; padding-left: 0; margin-top: 5px; } .share-social-icons li { width: auto !important; display: inline-block!important; vertical-align: top; clear: none !important; padding: 0; } .share-social-icons a.share-ico span { color: var(--text-color); margin-left: 18px; transition: all 450ms ease-in-out; } .share-social-icons a.share-ico span:hover { color: var(--header-color); } .post-title-icons .ico-20 [class*="flaticon-"]:before, .post-title-icons .ico-20 [class*="flaticon-"]:after { font-size: 1.45rem; } /*------------------------------------------*/ /* BLOG POST TYPOGRAPHY /*------------------------------------------*/ .single-post-txt span.main-font.fs-20 { margin-bottom: 18px; } .single-post-txt span.main-font.fs-28 { margin: 20px 0; } /* .single-post-txt span.main-font.fs-25 { line-height: 1.5; margin: 30px 0; }*/ .single-post-txt span.main-font.fs-28 span { display: block; } .single-post-txt p span { color: var(--header-color); font-weight: 600; } .single-post-txt p a { font-weight: 600; text-decoration: underline; } .single-post-txt p a.color--theme:hover { color: var(--header-color)!important; } .single-post-txt p a.color--header:hover { color: var(--theme-color)!important; } /*------------------------------------------*/ /* BLOG POST IMAGE /*------------------------------------------*/ .post-inner-img { text-align: center; margin: 45px 0; } /*------------------------------------------*/ /* SINGLE POST SHARE LINKS /*------------------------------------------*/ .post-share-links { padding-top: 60px; margin: 60px 0 50px; border-top: 1px solid var(--silver); } .post-share-links .col-md-8, .post-share-links .col-md-4 { padding: 0; } /*------------------------------------------*/ /* SINGLE POST TAGS /*-----------------------------------------*/ .post-tags-list span { color: #555; background-color: #f5f5f9; font-size: 0.75rem; line-height: 1; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; padding: 11px 22px 10px; border-radius: 6px; margin-right: 5px; } /*------------------------------------------*/ /* SINGLE POST SHARE ICONS /*-----------------------------------------*/ .post-share-list { display: inline-block; margin-top: 7px; } .post-share-list li { width: auto !important; display: inline-block!important; vertical-align: top; clear: none !important; padding: 0; } .post-share-list a.share-ico span { color: var(--text-color); margin-left: 18px; transition: all 450ms ease-in-out; } .post-share-list a.share-ico span:hover { color: var(--header-color); } /*------------------------------------------*/ /* SINGLE POST NAVIGATIONS /*-----------------------------------------*/ .post-nav-links { margin: 0 -15px; } .post-nav-links .btn { font-size: 0.95rem; padding: 0.8rem 1.6rem; font-weight: 600; } .post-nav-btn .btn:last-child { margin-left: 12px; } /* ========================================================================== 29. CONTACT =========================================================================== */ /*------------------------------------------*/ /* CONTACT INFO /*------------------------------------------*/ .contacts-info p { padding-right: 8%; margin: 25px 0 0; } .contacts-info span.main-font { margin: 35px 0 20px; } .contacts-info-socials li { width: auto!important; display: inline-block!important; vertical-align: top; clear: none !important; padding-right: 12px; } .contacts-info-socials li span { position: relative; top: 4px; opacity: .7; transition: all 400ms ease-in-out; } .contacts-info-socials li span:hover { opacity: 1; } /*------------------------------------------*/ /* CONTACT BOX /*------------------------------------------*/ .contact-box { padding: 0 20px 0 35px; } #cb-1-1, #cb-1-2 { border-right: 1px solid var(--silver); } .contact-box p { color: var(--text-color); margin: 16px 0 20px; } .contact-box .btn.btn-sm { font-size: 0.85rem; padding: 0.6rem 1.15rem; } /*------------------------------------------*/ /* CONTACT FORM INPUT /*------------------------------------------*/ .contact-form .form-control, .contact-form .form-select { height: 60px; background-color: var(--white); border: 1.5px solid var(--silver); box-shadow: 0 0 0 0; color: var(--text-color); font-size: 1rem; line-height: 1; font-weight: 400; padding: 0 20px; margin-bottom: 20px; border-radius: 6px; transition: all 300ms ease-in-out; } .contact-form .form-select { display: inline-block; width: 100%; color: var(--dark-grey); box-shadow: none; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } /*------------------------------------------*/ /* Contact Form Textarea /*------------------------------------------*/ .contact-form textarea { min-height: 220px; } .contact-form textarea.form-control { padding: 20px 15px; } /*------------------------------------------*/ /* Contact Form Button /*------------------------------------------*/ .contact-form .form-btn { margin-top: 15px; } /*------------------------------------------*/ /* Contact Form Placeholder /*------------------------------------------*/ .contact-form .form-control::-moz-placeholder { color: var(--dark-grey); } .contact-form .form-control:-ms-input-placeholder { color: var(--dark-grey); } .contact-form .form-control::-webkit-input-placeholder { color: var(--dark-grey); } /*------------------------------------------*/ /* Contact Form Input Focus /*------------------------------------------*/ .contact-form .form-control:focus, .contact-form .form-select:focus { outline: 0px none; box-shadow: none; background-color: var(--white); border-color: var(--purple); } /*------------------------------------------*/ /* Contact Form Message /*------------------------------------------*/ .contact-form-msg { width: 100%!important; display: block; margin-top: 20px; padding-left: 0; } .contact-form .loading { color: #00b2e4; font-size: 1.0625rem; line-height: 1; font-weight: 500; padding-left: 15px; } .contact-form .error { color: #e74c3c; font-size: 0.85rem; line-height: 1; font-weight: 400; margin-bottom: 10px; padding-left: 10px; } /* ========================================================================== 30. FOOTER =========================================================================== */ .footer { padding-bottom: 50px; } .footer-info, .footer-links { margin-bottom: 40px; } .footer-1 .footer-links { padding-left: 5%; } .footer-1 .fl-1, .footer-1 .fl-3, .footer-1 .fl-4 { padding-left: 8%; } .footer-2 .fl-1 { padding-left: 12%; } /*------------------------------------------*/ /* FOOTER LINKS MOBILE /*------------------------------------------*/ /* .footer span.m-title { display: none; position: relative; } .footer span.m-title:after { font-family: Flaticon; font-weight: 300; content: "\f167"; position: absolute; font-size: 0.9rem; top: 5px; right: 5px; } .footer span.m-title.expanded:after { content: "\f166"; } /*------------------------------------------*/ /* FOOTER LOGO /*------------------------------------------*/ img.footer-logo { width: auto; max-width: inherit; max-height: 58px; margin-bottom: 20px; } .footer-copyright-logo { position: relative; display: inline-block; float: left; top: -4px; } .footer-copyright-logo img.footer-logo { position: relative; top: 2px; max-height: 33px; margin-bottom: 0; } /*------------------------------------------*/ /* FOOTER TYPOGRAPHY /*------------------------------------------*/ .footer span.main-font { font-size: 1.125rem; line-height: 1; margin-bottom: 25px; } .footer a { color: var(--text-color); } .footer.bg--royal span.main-font { color: var(--white); } .footer.bg--royal a, .footer.bg--royal p { color: #d1d8e5; } .footer.bg--royal a:hover { color: var(--white); } .footer.bg--royal hr { border-color: #c0c0ce; } /*------------------------------------------*/ /* FOOTER LINKS /*------------------------------------------*/ .footer-6 .footer-links { margin-bottom: 15px; } .foo-links li { width: auto!important; display: block!important; vertical-align: top; clear: none !important; margin: 0; padding: 0; } .footer-6 .foo-links li { display: inline-block!important; padding: 0 20px; } .bg--404 .footer-6 .foo-links li a { color: #c3cee5; } .bg--404 .footer-6 .foo-links li a:hover { color: var(--white); } .foo-links.ico-10 li span { position: relative; top: 1.5px; right: 4px; } .foo-links li p { font-weight: 400; margin-bottom: 10px; } .foo-links li:last-child p { margin-bottom: 0; } /*------------------------------------------*/ /* FOOTER SOCIAL /*------------------------------------------*/ .footer-socials { margin: 0; display: inline-block; } .footer-socials li { float: left; width: auto!important; display: inline-block!important; vertical-align: top; clear: none!important; margin: 0; } .footer-socials a { display: block; margin-right: 15px; } .footer-socials.ico-20 a, .footer-socials.ico-25 a { margin-right: 16px; } .footer-socials li span { opacity: .7; transition: all 400ms ease-in-out; } .footer-socials li span:hover { opacity: 1; } .footer-socials.ico-25 [class*="flaticon-"]:before, .footer-socials.ico-25 [class*="flaticon-"]:after { font-size: 1.325rem; } /*------------------------------------------*/ /* FOOTER NEWSLETTER FORM /*------------------------------------------*/ .footer-form { margin-bottom: 20px; } .footer .newsletter-form { margin-top: 25px; } .footer-form .newsletter-form .input-group { background-color: var(--form-control); border: 1.5px solid var(--grey); padding: 9px 2px; transition: all 400ms ease-in-out; } .footer-form .form-control { height: 32px; background-color: transparent; border: none; color: var(--black); font-size: 1rem; font-weight: 400; padding: 0 10px; box-shadow: none; } .bg--coal .newsletter-form .input-group, .bg--grape .newsletter-form .input-group { background-color: var(--white); } /*------------------------------------------*/ /* Newsletter Form Input Focus /*------------------------------------------*/ .footer-form .newsletter-form .input-group:focus-within { background-color: var(--white)!important; border-color: var(--purple)!important; } .footer-form .newsletter-form .input-group.input-group-theme:focus-within { border-color: var(--theme-color)!important; } .footer-form .newsletter-form .input-group.input-group-blue:focus-within { border-color: var(--blue)!important; } .footer-form .newsletter-form .input-group.input-group-green:focus-within { border-color: var(--green)!important; } .footer-form .newsletter-form .input-group.input-group-lotus:focus-within { border-color: var(--lotus)!important; } .footer-form .newsletter-form .input-group.input-group-pink:focus-within { border-color: var(--pink)!important; } .footer-form .newsletter-form .input-group.input-group-purple:focus-within { border-color: var(--purple)!important; } .footer-form .newsletter-form .input-group.input-group-skyblue:focus-within { border-color: var(--sky-blue)!important; } .footer-form .form-control:focus { border: none; border-right: none; outline: 0; box-shadow: none; } /*------------------------------------------*/ /* Footer Form Placeholder /*------------------------------------------*/ .footer-form .form-control::-moz-placeholder { color: var(--text-color); } .footer-form .form-control:-ms-input-placeholder { color: var(--text-color); } .footer-form .form-control::-webkit-input-placeholder { color: var(--text-color); } /*------------------------------------------*/ /* Newsletter Form Button /*------------------------------------------*/ .footer-form .btn { color: var(--purple); height: 32px; padding: 0 10px; } .footer-form .input-group-theme .btn { color: var(--theme-color); } .footer-form .input-group-blue .btn { color: var(--blue); } .footer-form .input-group-green .btn { color: var(--green); } .footer-form .input-group-lotus .btn { color: var(--lotus); } .footer-form .input-group-pink .btn { color: var(--pink); } .footer-form .input-group-purple .btn { color: var(--purple); } .footer-form .input-group-skyblue .btn { color: var(--sky-blue); } .footer-form .ico-15 [class*="flaticon-"]:before, .footer-form .ico-15 [class*="flaticon-"]:after { line-height: 28px!important; } /*------------------------------------------*/ /* Footer Form Notification /*------------------------------------------*/ .footer-form .form-notification { color: #1680fb; font-size: 0.85rem; line-height: 1.25; font-weight: 400; margin-top: 12px; margin-left: 5px; } .footer-form .form-notification.error { color: #fc2f4b; } .footer-form .form-notification.valid { color: #48af4b; } /*------------------------------------------*/ /* BOTTOM FOOTER /*------------------------------------------*/ .footer hr { margin-top: 30px; margin-bottom: 50px; } /*------------------------------------------*/ /* BOTTOM FOOTER COPYRIGHT /*------------------------------------------*/ .footer-copyright p { margin-bottom: 0; } .footer-copyright.copyright-logo p { display: inline-block; line-height: 28px; margin-left: 15px; } /*------------------------------------------*/ /* BOTTOM FOOTER SECONDARY LINK /*------------------------------------------*/ .bottom-secondary-link p { margin-bottom: 0; } .bottom-secondary-link p span { position: relative; top: 1.5px; padding: 0 2px; } .bottom-secondary-link.ico-15 [class*="flaticon-"]:before, .bottom-secondary-link.ico-15 [class*="flaticon-"]:after { font-size: 0.75rem; } /*------------------------------------------*/ /* BOTTOM FOOTER LINKS /*------------------------------------------*/ .bottom-footer-list { position: relative; top: 6px; z-index: 1; } .bottom-footer-list li, .bottom-footer-socials li { width: auto!important; display: inline-block!important; vertical-align: top; clear: none !important; } .bottom-footer-list li { margin-left: -5px; } .bottom-footer-list li:first-child { margin-left: 0; } .bottom-footer-socials li { padding-left: 12px; } .footer-6 .bottom-footer-socials li { padding: 0 8px; } .bottom-footer-list li:not(:last-child):after { font-family: Flaticon; font-size: 1.15rem; /* 18.4rem */ line-height: 0.5rem!important; content: "\f172"; position: relative; top: -1.5px; } .bottom-footer-list li p { float: left; line-height: 1; margin-bottom: 0; } .bottom-footer-socials li span { position: relative; top: 4px; opacity: .7; transition: all 400ms ease-in-out; } .bottom-footer-socials li span:hover { opacity: 1; } .bottom-footer-socials.ico-20 [class*="flaticon-"]:before, .bottom-footer-socials.ico-20 [class*="flaticon-"]:after { font-size: 1.15rem; } .bottom-footer-socials.ico-25 [class*="flaticon-"]:before, .bottom-footer-socials.ico-25 [class*="flaticon-"]:after { font-size: 1.25rem; } .bottom-footer-socials.ico-30 [class*="flaticon-"]:before, .bottom-footer-socials.ico-30 [class*="flaticon-"]:after { font-size: 1.4rem; } /*------------------------------------------*/ /* BOTTOM BIG TRANSPARENT TEXT /*------------------------------------------*/ .foo-tra-txt { text-align: center; overflow: hidden; margin: 20px 0 -30px; } .footer-txt { opacity: .03; font-size: 20rem; line-height: 0.75; font-weight: 800; text-transform: uppercase; letter-spacing: -5px; margin-bottom: -50px; } /* ========================================================================== 31. INNER PAGE WRAPPER =========================================================================== */ .inner-page-hero { padding-top: 190px; } .inner-page-banner { margin-top: 90px; } /*------------------------------------------*/ /* INNER PAGE TITLE /*------------------------------------------*/ .inner-page-title { padding-bottom: 70px; margin-bottom: 70px; border-bottom: 1px solid var(--silver); } .inner-page-title p { line-height: 1; margin-top: 20px; margin-bottom: 0; } .inner-page-title p span { color: var(--header-color); font-weight: 600; } .page-hero-section p { margin-top: 16px; margin-bottom: 0; } /* ========================================================================== 32. PAGE PAGINATION =========================================================================== */ .page-link { color: var(--text-color); font-size: 1.1rem; font-weight: 500; padding: 2px 15px; margin: 0 8px; background-color: transparent; border: 2px solid transparent; border-radius: 6px; transition: all 400ms ease-in-out; } .pagination.ico-20 [class*="flaticon-"]:before, .pagination.ico-20 [class*="flaticon-"]:after { font-size: 0.9rem; } .page-item:first-child .page-link { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } .page-item:last-child .page-link { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } .page-item.disabled .page-link { color: var(--text-color); background-color: transparent; border-color: transparent; } .page-link:hover { color: var(--text-color); background-color: transparent; border-color: var(--text-color); } .page-link:focus { color: var(--text-color); background-color: transparent; border-color: transparent; box-shadow: 0 0; } .page-item.active .page-link { color: var(--white)!important; } .page-item.active .page-link { background-color: var(--theme-color); border-color: var(--theme-color); } .theme--main .page-item.active .page-link { background-color: var(--theme-color); border-color: var(--theme-color); } .theme--blue .page-item.active .page-link { background-color: var(--blue); border-color: var(--blue); } .theme--black .page-item.active .page-link { background-color: var(--black); border-color: var(--black); } .theme--green .page-item.active .page-link { background-color: var(--green); border-color: var(--green); } .theme--lotus .page-item.active .page-link { background-color: var(--lotus); border-color: var(--lotus); } .theme--pink .page-item.active .page-link { background-color: var(--pink); border-color: var(--pink); } .theme--purple .page-item.active .page-link { background-color: var(--purple); border-color: var(--purple); } .theme--skyblue .page-item.active .page-link { background-color: var(--skyblue); border-color: var(--skyblue); } /* ========================================================================== 33. TERMS, PRIVACY, COOKIES PAGES =========================================================================== */ /*------------------------------------------*/ /* TERMS PAGE TYPOGRAPHY /*------------------------------------------*/ .txt-block.legal-info h3 { margin: 50px 0 25px; } .txt-block.legal-info h4 { margin: 25px 0; } .txt-block.legal-info h3 span, .txt-block.legal-info h4 span { margin-right: 4px; } .legal-info p span { color: var(--header-color); font-weight: 700; } .legal-info a { font-weight: 600; text-decoration: underline; } .legal-info a:hover { color: var(--header-color); } /* ========================================================================== 34. SIGN-IN / SIGN-UP PAGE =========================================================================== */ .register-page { position: relative; width: 100%; min-height: 100vh; } .login-1, .signup-1 { width: 100%; min-height: 100vh; background-color: #fcfcff; } .signup-image { width: 52%; height: 100%; position: absolute; right: 0; top: 0; } .login-image { width: 52%; height: 100%; position: absolute; left: 0; top: 0; } .login-image img, .signup-image img { width: 100%; height: 100%; object-fit: cover; } .login-2, .signup-2 { width: 100%; min-height: 100vh; } /*------------------------------------------*/ /* REGISTER PAGE LOGO /*------------------------------------------*/ .register-page-logo { position: fixed; padding-top: 30px; z-index: 99; } .register-page-logo img { width: auto; max-width: inherit; max-height: 36px; } /*------------------------------------------*/ /* REGISTER PAGE FORM /*------------------------------------------*/ .login-1 .register-page-form { padding: 160px 40px 120px 0; } .signup-1 .register-page-form { padding: 180px 0 110px 40px; } .login-2 .register-page-form, .signup-2 .register-page-form { padding-top: 120px; padding-bottom: 120px; } .reset-page-wrapper { padding: 180px 20px 140px; } /*------------------------------------------*/ /* REGISTER PAGE TITLE /*------------------------------------------*/ .register-form-title { text-align: center; margin-bottom: 30px; } .register-form-title h3 { line-height: 1; } .register-form-title p { margin: 10px 0 0; } .login-2 .register-form-title p, .signup-2 .register-form-title p { margin: 8px 0 0; } .login-2 .register-form-title p a, .signup-2 .register-form-title p a { font-weight: 600; text-decoration: underline; } /*------------------------------------------*/ /* RESET PASSWORD PAGE TITLE /*------------------------------------------*/ .reset-form-title { text-align: center; margin-bottom: 22px; } .reset-form-title p { margin: 18px 0 0; } /*------------------------------------------*/ /* REGISTER PAGE TYPOGRAPHY /*------------------------------------------*/ .reset-password-link p { position: relative; font-size: 0.95rem; line-height: 1; margin-bottom: 30px; } .reset-password-link p a { color: var(--purple); text-decoration: underline; } .form-data span { display: block; font-size: 0.95rem; margin-bottom: 0; } .reset-password-form .form-data p { margin-top: 24px; margin-bottom: 12px; } .reset-password-form .form-data p a { color: var(--purple); } .form-data p a, .form-data span a { color: var(--header-color); font-weight: 600; text-decoration: underline; } .register-page-form p.create-account { font-size: 0.95rem; line-height: 1; margin-top: 25px; margin-bottom: 0; } .register-page-form p.create-account a { color: var(--purple); font-weight: 600; text-decoration: underline; } .reset-password-link p a:hover, .reset-password-form .form-data p a:hover, .register-page-form p.create-account a:hover { color: var(--header-color); } /*------------------------------------------*/ /* REGISTER PAGE SEPARATOR LINE /*------------------------------------------*/ .separator-line { display: flex; width: 100%; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; text-align: center; font-family: var(--main-font); font-size: 1.1rem; margin: 25px 0; } .separator-line::before, .separator-line::after { content: ""; border-top: 1.5px solid rgba(5, 5, 5, .18); margin: 0 15px 0 0; flex: 1 0 20px; } .separator-line::after { margin: 0 0 0 15px; } /*------------------------------------------*/ /* REGISTER PAGE FORM INPUT /*------------------------------------------*/ .reset-page-wrapper .form-control, .register-page-form .form-control { height: 58px; background-color: var(--white); border: 1.5px solid var(--grey); color: var(--header-color); font-size: 1rem; line-height: 1; font-weight: 400; margin-bottom: 25px; padding: 5px 18px; border-radius: 8px; transition: all 300ms ease-in-out; } .reset-page-wrapper .form-control { text-align: center; margin-bottom: 20px; } .register-page-form .form-control::-moz-placeholder { color: var(--text-color); } .register-page-form .form-control:-ms-input-placeholder { color: var(--text-color); } .register-page-form .form-control::-webkit-input-placeholder { color: var(--text-color); } .reset-page-wrapper .form-control::-moz-placeholder { color: var(--text-color); } .reset-page-wrapper .form-control:-ms-input-placeholder { color: var(--text-color); } .reset-page-wrapper .form-control::-webkit-input-placeholder { color: var(--text-color); } /*------------------------------------------*/ /* REGISTER PAGE FORM FOCUS /*------------------------------------------*/ .reset-page-wrapper .form-control:focus, .register-page-form .form-control:focus { border-color: var(--purple); outline: 0px none; box-shadow: none; } /*------------------------------------------*/ /* REGISTER PAGE FORM BUTTON /*------------------------------------------*/ #login .register-page-form .btn.submit, #signup .register-page-form .btn.submit { width: 100%; height: 58px; font-size: 0.975rem; margin-top: 0; } #signup .register-page-form .btn.submit { margin-top: 25px; } .reset-page-wrapper .btn.submit { width: 100%; height: 58px; font-size: 0.975rem; } .btn-register { width: 100%; color: var(--header-color); font-size: 0.975rem; padding: 0.6rem 1.6rem; background-color: var(--white); border: 1px solid var(--silver); transition: all 300ms ease-in-out; } .btn-register.txt-btn { padding: 1rem 1.6rem; } .btn-register.btn-facebook { color: var(--white); background-color: #1a76d2; border-color: #1a76d2; } .btn-register img { position: relative; width: 22px; height: 22px; top: 0; right: 5px; } .btn-register span { position: relative; top: 2px; margin-right: 0!important; } .btn-register.txt-btn span { top: 0; } .btn-register:hover { color: var(--header-color); background-color: var(--white); border: 1px solid var(--header-color); } .btn-register.btn-facebook:hover { background-color: #186cbf; border-color: #186cbf; } /*------------------------------------------*/ /* RESET PASSWORD FORM MESSAGE /*------------------------------------------*/ .reset-form-msg { text-align: center; width: 100%!important; display: block; } .reset-password-form .loading { color: #00b2e4; font-size: 1.0625rem; line-height: 1; font-weight: 500; padding-left: 15px; } .reset-password-form .error { position: relative; color: #e74c3c; font-size: 0.85rem; line-height: 1; font-weight: 400; top: -10px; margin-bottom: 12px; padding-left: 10px; } /*------------------------------------------*/ /* FORM HIDE PASSWORD /*------------------------------------------*/ .wrap-input { position: relative; } .btn-show-pass { color: var(--dark-grey); align-items: center; position: absolute; height: 100%; top: 17px; right: 20px; cursor: pointer; -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } .btn-show-pass.ico-20 [class^="flaticon-"]:before, .btn-show-pass.ico-20 [class^="flaticon-"]:after { font-size: 1.125rem; } .btn-show-pass:hover { color: var(--theme-color); } .eye-pass.flaticon-invisible { color: var(--text-color); } /* ========================================================================== 35. PAGE 404 =========================================================================== */ body.bg--404 { background-color: #292f44; } #page-404 { min-height: 100vh; padding-top: 185px; padding-bottom: 100px; } .page-404-txt { padding-left: 20px; } .page-404-txt img { width: auto; max-width: inherit; max-height: 150px; margin: 0 0 30px -10px; } .page-404-txt span.main-font { color: #c3cee5; line-height: 1.6; font-weight: 400; margin: 15px 0 25px; } .page-404-img { padding-right: 5%; } /* ========================================================================== 36. MODAL ========================================================================== */ .modal-dialog { max-width: 700px; } .modal-dialog.modal-xl { max-width: 750px; } .modal-body { padding: 0!important; } #modal-1 .modal-dialog { width: 420px; } #modal-1.modal .modal-content { overflow: hidden; border-radius: 10px; } #modal-1 .modal-body-content { padding: 20px 30px 10px; } #modal-2 .modal-body-content { padding: 0 24px 0 10px; } /*------------------------------------------*/ /* MODAL WINDOW TYPOGRAPHY /*------------------------------------------*/ #modal-1 .modal-body-content span.main-font { line-height: 1.45; } .modal-body-content p { margin-top: 16px; margin-bottom: 22px; } /*------------------------------------------*/ /* MODAL WINDOW IMAGE /*------------------------------------------*/ #modal-1 .modal-body-img { padding-top: 30px; } .modal-2-img { position: relative; text-align: center; margin-left: -15px; } .modal-logo { position: absolute; left: 25px; bottom: 30px; width: auto; max-width: inherit; max-height: 26px; } /*------------------------------------------*/ /* MODAL WINDOW CLOSE BUTTON /*------------------------------------------*/ .modal .btn-close { position: absolute; z-index: 1; right: 15px!important; top: 15px!important; height: 1.5rem; width: 1.5rem; background: rgba(14, 14, 14, .1)!important; border-radius: 50%; padding: 0; opacity: .9; z-index: 9999; } .modal .btn-close.bg--white { background: rgba(255, 255, 255, .8)!important; } .btn-close span { position: relative; line-height: 24px!important; top: -2px; } .modal .btn-close [class^="flaticon-"]:before, .modal .btn-close [class^="flaticon-"]:after { font-size: 0.6rem; } .modal .btn-close:focus { outline: none!important; box-shadow: none!important; text-decoration: none!important; } /*------------------------------------------*/ /* MODAL WINDOW NEWSLETTER FORM /*------------------------------------------*/ .modal-body .newsletter-form { margin-top: 25px; } .modal .newsletter-form .form-control { text-align: center; height: 56px; background-color: #fff; border: 1.5px solid var(--silver); font-size: 0.975rem; color: #666; font-weight: 400; padding: 0 15px; margin-bottom: 20px; box-shadow: none; border-radius: 8px; transition: all 400ms ease-in-out; } .modal .newsletter-form .r-36 .form-control { border-radius: 36px; } .modal .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) { border-top-right-radius: 8px; border-bottom-right-radius: 8px; } .modal .r-36.input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) { border-top-right-radius: 36px; border-bottom-right-radius: 36px; } /*------------------------------------------*/ /* Form Input Focus /*------------------------------------------*/ .modal .newsletter-form .form-control:focus { background-color: var(--white); border-color: var(--purple); outline: 0; box-shadow: none; } .modal .newsletter-form.mnf-theme .form-control:focus { border-color: var(--theme-color); } .modal .newsletter-form.mnf-blue .form-control:focus { border-color: var(--blue); } .modal .newsletter-form.mnf-green .form-control:focus { border-color: var(--green); } .modal .newsletter-form.mnf-lotus .form-control:focus { border-color: var(--lotus); } .modal .newsletter-form.mnf-pink .form-control:focus { border-color: var(--pink); } .modal .newsletter-form.mnf-purple .form-control:focus { border-color: var(--purple); } .modal .newsletter-form.mnf-skyblue .form-control:focus { border-color: var(--sky-blue); } /*------------------------------------------*/ /* Form Input Placeholder /*------------------------------------------*/ .modal .newsletter-form .form-control::-moz-placeholder { color: #aaa; } .modal .newsletter-form .form-control:-ms-input-placeholder { color: #aaa; } .modal .newsletter-form .form-control::-webkit-input-placeholder { color: #aaa; } /*------------------------------------------*/ /* Form Button /*------------------------------------------*/ .modal .input-group-btn { display: block; width: 100%!important; } .modal .newsletter-form .btn { display: block; width: 100%!important; font-size: 0.95rem; height: 56px; margin: 0; } /*------------------------------------------*/ /* Form Notification /*------------------------------------------*/ .modal .form-notification { text-align: center; color: #1680fb; font-size: 0.85rem; font-weight: 400; line-height: 1; margin-top: 12px; } .modal .form-notification.valid, .modal .form-notification.error { color: #fc2f4b; } .modal .form-notification.valid { color: #0fbc49; } /*------------------------------------------*/ /* MODAL WINDOW REQUEST FORM /*------------------------------------------*/ .modal .request-form { margin: 0; } .modal .request-form .col-md-12 { padding: 0; } .modal .request-form .form-control { text-align: left; height: 56px; background-color: #f9f9f9; border: 1.5px solid #e5e5e5; color: #666; font-size: 0.975rem; font-weight: 400; line-height: 1; margin-bottom: 20px; border-radius: 8px; transition: all 400ms ease-in-out; } .modal .request-form .btn { display: block; width: 100%!important; height: 56px; font-size: 0.95rem; margin: 0; } .modal .request-form .form-control:focus { background-color: var(--white); border-color: var(--blue); outline: 0; box-shadow: none; } .modal .request-form.mrf-theme .form-control:focus { border-color: var(--theme-color); } .modal .request-form.mrf-blue .form-control:focus { border-color: var(--blue); } .modal .request-form.mrf-green .form-control:focus { border-color: var(--green); } .modal .request-form.mrf-lotus .form-control:focus { border-color: var(--lotus); } .modal .request-form.mrf-purple .form-control:focus { border-color: var(--purple); } .modal .request-form.mrf-skyblue .form-control:focus { border-color: var(--sky-blue); } /*------------------------------------------*/ /* Comment Form Message /*------------------------------------------*/ .modal .request-form-msg { width: 100%!important; display: block; margin-top: 15px; padding-left: 0; } .modal .request-form .loading { color: #1680fb; font-size: 1rem; line-height: 1; font-weight: 400; } .modal .request-form .error { position: relative; color: #e74c3c; font-size: 0.8rem; line-height: 1; font-weight: 400; margin-bottom: 10px; padding-left: 10px; } /* ========================================================================== 37. COOKIES =========================================================================== */ #cookies { position: fixed; width: 90%; bottom: 25px; left: 5%; z-index: 200; padding: 25px; border: 1px solid #ddd; border-radius: 10px; box-shadow: 0 10px 20px 0 rgba(3, 3, 3, .1); } #cookies p { color: #353f4f; font-size: 0.875rem; line-height: 1.5; margin: 0; } #cookies-ok { position: absolute; right: 52px; bottom: 18px; cursor: pointer; display: inline-block; font-size: 0.8rem; font-weight: 500; background-color: #353f4f!important; border: 2px solid #353f4f!important; padding: 6px 20px; border-radius: 8px; } #cookies-ok { background-color: #1f2334!important; border: 2px solid #1f2334!important; } #cookies-ok:hover { color: #353f4f!important; background-color: transparent!important; border-color: #353f4f!important; } #cookies-info { color: #353f4f!important; font-weight: 500; text-decoration: underline; margin-left: 10px; } #cookies-info:hover { color: var(--theme-color)!important; } .theme--blue #cookies-info:hover { color: var(--blue)!important; } .theme--green #cookies-info:hover { color: var(--green)!important; } .theme--lotus #cookies-info:hover { color: var(--lotus)!important; } .theme--pink #cookies-info:hover { color: var(--pink)!important; } .theme--purple #cookies-info:hover { color: var(--purple)!important; } .theme--red #cookies-info:hover { color: var(--red)!important; } .theme--skyblue #cookies-info:hover { color: var(--skyblue)!important; } #cookies-close { position: absolute; right: 25px; top: 20px; height: 12px; width: 12px; } #cookies-close svg { width: 11px; height: 11px; } /* ========================================================================== 38. DARK MODE ========================================================================== */ body.theme--dark { --dark-theme-bg: #161821; --black: #f9f9f9; --cloud: #191c28; --coal: #fff; --ghost: #161821; --oxford: #191c28; --form-control: #191c28; --grey: rgba(43, 48, 64, 1); --header-color: #fff!important; --header-link: #dee1ea; --lavender: #191c28; --light-grey: #191c28; --metal: #f9f9f9; --text-color: #e5e5e5; --ink: #101219; --silver: rgba(43, 48, 64, 1); --smoke: rgba(43, 48, 64, .7); --white-smoke: #191c28; --sand: #191c28; } body.theme--dark { background-color: var(--dark-theme-bg); color: var(--text-color); } .theme--dark .bg--white { background-color: rgba(43, 48, 64, .4); } .theme--dark .gr--cloud, .theme--dark .gr--lightgrey, .theme--dark .gr--whitesmoke { background-image: linear-gradient(180deg, rgba(29, 33, 44, .8) 50%, rgba(29, 33, 44, .05) 100%); } /*------------------------------------------*/ /* SECTION DIVIDER /*------------------------------------------*/ .theme--dark hr.divider, .theme--dark .footer hr { background-image: linear-gradient(90deg, rgba(122,125,147,0) 0, #7a7d93 38%, #7a7d93 64%, rgba(122,125,147,0) 99%); } .theme--dark hr.divider.divider-light { background-color: #fff; background-image: linear-gradient(90deg, rgba(206,211,246,0) 0, #dedede 38%, #dedede 64%, rgba(206,211,246,0) 99%); opacity: 1; } /*------------------------------------------*/ /* DARK MODE IMAGES SWITCHER /*------------------------------------------*/ .dt-img, .theme--dark .lt-img, .owl-carousel .owl-item img.dt-img, .theme--dark .owl-carousel .owl-item img.lt-img { display: none; } .theme--dark .dt-img,.theme--dark .owl-carousel .owl-item img.dt-img { display: inline-block; position: relative; } .theme--dark .logos--gray .brand-logo img { filter: invert(100%); } .theme--dark .img-block .bg--cloud { background-color: #212632; } /*------------------------------------------*/ /* TYPOGRAPHY /*------------------------------------------*/ .theme--dark a { color: var(--text-color); } .theme--dark a.color--theme { color: var(--theme-color); } .theme--dark a.color--blue { color: var(--blue); } .theme--dark a.color--lotus { color: var(--lotus); } .theme--dark a.color--purple { color: var(--purple); } .theme--dark a.color--skyblue { color: var(--sky-blue); } .theme--dark a:hover, .theme--dark a.tra-link:hover span { color: var(--white); } .theme--dark .shape-ico.color--theme path, .theme--dark .shape-ico.color--blue path, .theme--dark .shape-ico.color--lotus path, .theme--dark .shape-ico.color--purple path, .theme--dark .shape-ico.color--skyblue path { fill: rgba(43, 48, 64, .45); } /*------------------------------------------*/ /* LIME BUTTON /*------------------------------------------*/ .theme--dark .btn--lime, .theme--dark .hover--lime:hover, .theme--dark .scroll .hover--lime:hover, .theme--dark .color--white .hover--lime:hover { color: #31363f!important; } .theme--dark .color--white .btn--lime { color: #31363f!important; } .theme--dark .btn--black, .theme--dark .hover--black:hover { color: #31363f!important; } /*------------------------------------------*/ /* NAVIGATION MENU /*------------------------------------------*/ .theme--dark .white-menu .wsmainfull { background-color: var(--ink)!important; box-shadow: 0 2px 3px var(--tra-ink); } /*------------------------------------------*/ /* HEADER LINK /*------------------------------------------*/ .theme--dark .navbar-dark .wsmenu > .wsmenu-list > li > a, .theme--dark .navbar-light .wsmenu > .wsmenu-list > li > a, .theme--dark .navbar-dark.inner-page-header .wsmenu > .wsmenu-list > li > a, .theme--dark .navbar-dark.light-hero-header .wsmenu > .wsmenu-list > li > a { color: var(--header-link); } .theme--dark .navbar-dark .wsmenu-list > li > a.h-link:hover, .theme--dark .navbar-light .wsmenu-list > li > a.h-link:hover, .theme--dark .navbar-light .wsmenu > .wsmenu-list > li > a:hover, .theme--dark .navbar-dark.inner-page-header .wsmenu > .wsmenu-list > li > a:hover, .theme--dark .navbar-dark.light-hero-header .wsmenu > .wsmenu-list > li > a:hover { color: #eee!important; } .theme--dark .navbar-light .wsmenu > .wsmenu-list > li > a.btn:hover { color: var(--white)!important; } .theme--dark .navbar-light .wsmenu > .wsmenu-list > li > a.btn.btn--lime:hover { color: #31363f!important; } .theme--dark .nav-coal .sm-info { background-color: var(--lime); color: #31363f!important; } /*------------------------------------------*/ /* HEADER SUBMENU / MEGAMENU /*------------------------------------------*/ .theme--dark .wsmenu > .wsmenu-list > li > ul.sub-menu, .theme--dark .wsmenu > .wsmenu-list > li > .wsmegamenu, .theme--dark .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu, .theme--dark .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu { background-color: var(--white-smoke)!important; border: solid 1px var(--smoke)!important; box-shadow: 0 2px 3px rgba(1, 1, 1, .1); } .theme--dark .wsmenu > .wsmenu-list > li > ul.sub-menu:before, .theme--dark .wsmenu > .wsmenu-list > li.mg_link:hover > a:after, .theme--dark .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu:before { background-color: var(--ink); border-left: solid var(--ink); border-top: solid 1px var(--ink); } .theme--dark .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a, .theme--dark .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > a, .theme--dark .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a, .theme--dark .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a { color: var(--header-link); background-color: transparent!important; } .theme--dark .scroll .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a, .theme--dark .theme--dark .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > a, .theme--dark .scroll .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a, .theme--dark .scroll .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a { color: var(--header-link); } .theme--dark .wsmegamenu p.title { color: var(--white); } /*------------------------------------------*/ /* NAVBAR SCROLL /*------------------------------------------*/ .theme--dark .tra-menu .wsmainfull.scroll, .theme--dark .white-menu .wsmainfull.scroll { background-color: var(--ink)!important; padding: 0; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25); } .theme--dark .wsmainfull.scroll .hover--theme:hover { color: var(--white)!important; border-color: var(--theme-color)!important; background-color: var(--theme-color)!important; } .theme--dark .tra-menu.navbar-dark .scroll .wsmenu > .wsmenu-list > li > a, .theme--dark .tra-menu.navbar-light .scroll .wsmenu > .wsmenu-list > li > a, .theme--dark .tra-menu.navbar-dark .scroll .wsmenu > .wsmenu-list > li > a.h-link, .theme--dark .tra-menu.navbar-light .scroll .wsmenu > .wsmenu-list > li > a.h-link { color: var(--header-link); } .theme--dark .navbar-light .scroll .wsmenu-list > li > a.h-link:hover { color: var(--white)!important; } .theme--dark .navbar-light .scroll .wsmenu-list > li > a.btn--lime:hover { color: #31363f!important; } .theme--dark .wsmainfull.scroll .nav-theme .sub-menu a:hover, .theme--dark .wsmainfull.scroll .nav-theme .halfmenu a:hover { color: var(--theme-color)!important; } .theme--dark .wsmainfull.scroll .nav-blue .sub-menu a:hover, .theme--dark .wsmainfull.scroll .nav-blue .halfmenu a:hover { color: var(--blue)!important; } .theme--dark .wsmainfull.scroll .nav-lotus .sub-menu a:hover, .theme--dark .wsmainfull.scroll .nav-lotus .halfmenu a:hover { color: var(--lotus)!important; } .theme--dark .wsmainfull.scroll .nav-purple .sub-menu a:hover, .theme--dark .wsmainfull.scroll .nav-purple .halfmenu a:hover { color: var(--purple)!important; } .theme--dark .wsmainfull.scroll .nav-skyblue .sub-menu a:hover, .theme--dark .wsmainfull.scroll .nav-skyblue .halfmenu a:hover { color: var(--sky-blue)!important; } /*------------------------------------------*/ /* Logo Image /*------------------------------------------*/ .theme--dark .navbar-dark .logo-black, .theme--dark .navbar-dark .scroll .logo-black { display: none; } .theme--dark .navbar-dark .logo-white, .theme--dark .navbar-dark .logo-black, .theme--dark .navbar-dark .scroll .logo-white { display: block; } .theme--dark .navbar-dark .logo-white { display: none; } /*------------------------------------------*/ /* FEATURES /*------------------------------------------*/ .theme--dark .fbox-1.bg--white, .theme--dark .fbox-2.bg--white, .theme--dark .fbox-3.bg--white, .theme--dark .fbox-4.bg--white, .theme--dark .fbox-5.bg--white, .theme--dark .fbox-2.fb-8.bg--white { background-color: transparent; } .theme--dark .fbox-1-img.bg--cloud, .theme--dark .fbox-2-img.bg--cloud, .theme--dark .fbox-3-img.bg--cloud, .theme--dark .fbox-4-img.bg--cloud, .theme--dark .fbox-1-img.bg--lightgrey, .theme--dark .fbox-2-img.bg--lightgrey, .theme--dark .fbox-3-img.bg--lightgrey, .theme--dark .fbox-4-img.bg--lightgrey, .theme--dark .fbox-1-img.bg--whitesmoke, .theme--dark .fbox-2-img.bg--whitesmoke, .theme--dark .fbox-3-img.bg--whitesmoke, .theme--dark .fbox-4-img.bg--whitesmoke { background-color: rgba(43, 48, 64, .45); } .theme--dark .fbox-1.block--shadow, .theme--dark .fbox-2.block--shadow, .theme--dark .fbox-3.block--shadow { border-color: var(--silver); } .theme--dark .ico-wrap.color--coal, .theme--dark .cbox-5-ico.color--coal { color: var(--lime); } .theme--dark .fbox-5.border-grey, .theme--dark .fbox-5.block--shadow { background-color: rgba(43, 48, 64, .45); border-color: var(--silver); } /*------------------------------------------*/ /* CONTENT /*------------------------------------------*/ .theme--dark .txt-block .accordion-thumb { border-color: var(--silver); } .theme--dark .txt-block .accordion-item .accordion-thumb:after, .theme--dark .txt-block .accordion-item.is-active .accordion-thumb:after { color: var(--text-color); } /*------------------------------------------*/ /* PRICING /*------------------------------------------*/ .theme--dark .pricing-1-table, .theme--dark .pricing-2-table, .theme--dark .pricing-3-table { background-color: rgba(43, 48, 64, .4); border-color: var(--silver); } .theme--dark .pricing-1-table.border--theme { border: 2px solid var(--theme-color); } .theme--dark .pricing-1-table.border--blue { border: 2px solid var(--blue); } .theme--dark .pricing-1-table.border--green { border: 2px solid var(--green); } .theme--dark .pricing-1-table.border--lotus { border: 2px solid var(--lotus); } .theme--dark .pricing-1-table.border--purple { border: 2px solid var(--purple); } .theme--dark .pricing-1-table.border--skyblue { border: 2px solid var(--sky-blue); } .theme--dark .pricing-discount span.main-font { color: #353f4f; } .theme--dark .pt-btn.hover--black:hover { color: #353f4f!important; } /*------------------------------------------*/ /* INTEGRATIONS /*------------------------------------------*/ .theme--dark .int_tool-1, .theme--dark .int_tool-3 { background-color: rgba(43, 48, 64, .4); border-color: var(--silver); } .theme--dark .carousel_fade { background-image: linear-gradient(90deg, rgba(25, 28, 40, 1) 40%, rgba(25, 28, 40, .18) 100%); } .theme--dark .carousel_fade.is-right { background-image: linear-gradient(270deg, rgba(25, 28, 40, 1) 40%, rgba(25, 28, 40, .18) 100%); } .theme--dark .carousel_fade.white_fade { background-image: linear-gradient(90deg, rgba(22, 24, 33, 1) 40%, rgba(22, 24, 33, .18) 100%); } .theme--dark .carousel_fade.is-right.white_fade { background-image: linear-gradient(270deg, rgba(22, 24, 33, 1) 40%, rgba(22, 24, 33, .18) 100%); } /*------------------------------------------*/ /* BRANDS /*------------------------------------------*/ .theme--dark .brands-5-wrapper .brand-logo { background-color: rgba(43, 48, 64, .4); border-color: var(--silver); } /*------------------------------------------*/ /* CHANGELOG /*------------------------------------------*/ .theme--dark span.version-data span { color: #120036; } .theme--dark .release-data { border-color: rgba(255, 255, 255, .3); } /*------------------------------------------*/ /* TESTIMONIALS /*------------------------------------------*/ .theme--dark .review-1, .theme--dark .review-2 { background-color: rgba(43, 48, 64, .4); border-color: var(--silver); } .theme--dark .review-1.border-grey, .theme--dark .review-2.border-grey { border-color: var(--silver)!important; } .theme--dark .owl-theme .owl-dots .owl-dot span { background: #3a3a3a; } .theme--dark .owl-theme .owl-dots .owl-dot.active span { background: var(--white); } .theme--dark .r3-data { background-color: rgba(43, 48, 64, .8); } /*------------------------------------------*/ /* BANNER /*------------------------------------------*/ .theme--dark .bg--coal.banner-section { background-color: #31363f; } .theme--dark .banner-5-wrapper.bg--white { background-color: #1e212d; } /*------------------------------------------*/ /* NEWSLETTER /*------------------------------------------*/ .theme--dark .newsletter-3 .newsletter-overlay.bg--white { background-color: #1e212d; } .theme--dark .newsletter-section .form-control::-moz-placeholder { color: #90a0b2; } .theme--dark .newsletter-section .form-control:-ms-input-placeholder { color: #90a0b2; } .theme--dark .newsletter-section .form-control::-webkit-input-placeholder { color: #90a0b2; } .theme--dark .newsletter-1.newsletter-section .form-control { color: var(--white); background-color: var(--smoke); border-color: var(--silver); } .theme--dark .newsletter-1.newsletter-section .form-control:focus { background-color: var(--dark-theme-bg); border-color: var(--purple)!important; } /*------------------------------------------*/ /* BLOG /*------------------------------------------*/ .theme--dark .post-tags-list span { color: var(--white); background-color: rgba(43, 48, 64, .55); } /*------------------------------------------*/ /* CONTACTS /*------------------------------------------*/ .theme--dark .contact-form .form-control, .theme--dark .contact-form .form-select { color: #90a0b2; background-color: rgba(43, 48, 64, .55); border: 1px solid rgba(43, 48, 64, .55); } .theme--dark .contact-form .form-control:focus, .theme--dark .contact-form .form-select:focus { background-color: var(--dark-theme-bg); border-color: var(--purple); } .theme--dark .contact-form .form-control::-moz-placeholder { color: #90a0b2; } .theme--dark .contact-form .form-control:-ms-input-placeholder { color: #90a0b2; } .theme--dark .contact-form .form-control::-webkit-input-placeholder { color: #90a0b2; } /*------------------------------------------*/ /* FOOTER /*------------------------------------------*/ .theme--dark .footer-form .newsletter-form .input-group { background-color: var(--white-smoke); border: 1.5px solid var(--silver); } .theme--dark .footer-form .newsletter-form .input-group:focus-within { background-color: var(--dark-theme-bg)!important; border-color: var(--silver)!important; } .theme--dark .footer-txt { color: #fff; opacity: .12; } /*------------------------------------------*/ /* INNER PAGE WRAPPER /*------------------------------------------*/ .theme--dark .inner-page-title p span { color: var(--white); } /*------------------------------------------*/ /* TERMS, PRIVACY, COOKIES PAGES /*------------------------------------------*/ .theme--dark .legal-info a:hover { color: var(--white); } /*------------------------------------------*/ /* MODAL /*------------------------------------------*/ .theme--dark .modal .modal-body-content span.main-font { color: #313435; } .theme--dark .modal-body-content p { color: #6c757d; } .theme--dark .newsletter-form .hover--black:hover { color: #fff!important; border-color: #353f4f!important; background-color: #353f4f!important; } .theme--dark .modal .newsletter-form .form-control { border-color: #ccc; } .theme--dark .modal .newsletter-form .form-control:focus { border-color: var(--purple); } .theme--dark .modal .newsletter-form.mnf-blue .form-control:focus { border-color: var(--blue); } /*------------------------------------------*/ /* SIGN-IN / SIGN-UP PAGE /*------------------------------------------*/ .theme--dark .login-1, .theme--dark .signup-1 { background-color: var(--dark-theme-bg); } .theme--dark .separator-line::before, .theme--dark .separator-line::after { border-top: 1.5px solid rgba(255, 255, 255, .18); } .theme--dark .reset-page-wrapper .form-control, .theme--dark .register-page-form .form-control { background-color: rgba(43, 48, 64, .55); border-color: #333a4c; } .theme--dark .reset-page-wrapper .form-control:focus, .theme--dark .register-page-form .form-control:focus { background-color: var(--dark-theme-bg); border-color: var(--purple); } .theme--dark .register-page-form .submit.hover--black:hover, .theme--dark .reset-page-wrapper .submit.hover--black:hover { color: #353f4f!important; } .theme--dark .btn-register { color: var(--header-color); background-color: var(--smoke); border-color: var(--silver); } .theme--dark .btn-register.btn-facebook { color: var(--white); background-color: #1a76d2; border-color: #1a76d2; } .theme--dark .btn-register:hover { background-color: var(--dark-theme-bg); border-color: var(--smoke); } .theme--dark .btn-register.btn-facebook:hover { background-color: #186cbf; border-color: #186cbf; } /*------------------------------------------*/ /* MODAL /*------------------------------------------*/ .theme--dark .modal .btn--black { background-color: #181d27!important; border-color: #181d27!important; color: var(--white)!important; } /* ========================================================================== MODE CHANGER ========================================================================== */ #stlChanger { position: fixed; z-index: 9999; font-size: 15px; right: 0; top: 100px; cursor: pointer; border-radius: 0; transition: all 400ms ease-in-out; } #stlChanger .bgChanger { width: 50px; height: 50px; } #stlChanger .chBut { background: #212121; width: 50px; height: 50px; position: absolute; top: 30px; left: 0; z-index: 1000000; text-align: center; border: 1px solid #212121; border-left: none; padding: 0 0 0 2px; border-radius: 0; transition: all 300ms ease-in-out; box-shadow: 0 0 2px rgba(50, 50, 50, 0.4); } .theme--dark #stlChanger .chBut { background: #fff; border: 1px solid #fff; } #stlChanger .chBut.ico-35 [class*="flaticon-"]:before, #stlChanger .chBut.ico-35 [class*="flaticon-"]:after { color: #fff; font-size: 1.75rem; line-height: 48px!important; } .theme--dark #stlChanger .chBut.ico-35 [class*="flaticon-"]:before, .theme--dark #stlChanger .chBut.ico-35 [class*="flaticon-"]:after { color: #363636; } .lgt-mode, .theme--dark .drk-mode { display: none; } .theme--dark .lgt-mode { display: block; } /* ========================================================================== XXXXX ========================================================================== */ .t-title { text-align: center; color: #fff; background-color:#1d222f; padding: 10px 5px; margin: 0; } .t-title.btn-s-title { margin: 0; } .t-title span { color: #fff; margin-bottom: 0; }