/*----------------------------------------------------------------------------------- Template Name: AYRO UI - STARTUP AND SAAS BUSINESS UI KIT Template URI: https://ayroui.com/ Description: AYRO UI - STARTUP AND SAAS BUSINESS UI KIT Author: Uideck Author URI: https://uideck.com/ Version: 1.1 ----------------------------------------------------------------------------------- CSS INDEX =================== 01.COMMON 02.PAGE BANNER 03.TYPOGRAPHY 04.TABLE 05.PROGRESS BARS 06.FORM ELEMENTS 07.LIST STYLES 08.TABS AND ACCORDIONS 09.NAVBAR 10.SLIDER 11.BUTTON 12.ALERTS 13.TEAM 14.CARD 15.ABOUT 16.PRICING 17.FEATURES 18.PORTFOLIO 19.CONTACT 20.BLOG 21.FOOTER 22.HEADER 23.ERROR 24.CHECKOUT 25.SING IN SING UP 26.TESTIMONIAL 27.PRODUCT PAGE 28.CLIENT 29.CALL TO ACTION 30.COMING SOON 31.VIDEO 32.PROFILE -----------------------------------------------------------------------------------*/ /*=========================== 01.COMMON css ===========================*/ @import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800"); body { font-family: "Poppins", sans-serif; font-weight: normal; font-style: normal; color: #121212; } * { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } img { max-width: 100%; } a:focus, input:focus, textarea:focus, button:focus { text-decoration: none; outline: none; } a:focus, a:hover { text-decoration: none; } i, span, a { display: inline-block; } h1, h2, h3, h4, h5, h6 { font-family: "Poppins", sans-serif; font-weight: 600; color: #121212; margin: 0px; } h1 { font-size: 48px; } h2 { font-size: 36px; } h3 { font-size: 28px; } h4 { font-size: 22px; } h5 { font-size: 18px; } h6 { font-size: 16px; } ul, ol { margin: 0px; padding: 0px; list-style-type: none; } p { font-size: 16px; font-weight: 400; line-height: 24px; color: #121212; margin: 0px; } .bg_cover { background-position: center center; background-size: cover; background-repeat: no-repeat; width: 100%; height: 100%; } /*===== All Slick Slide Outline Style =====*/ .slick-slide { outline: 0; } /*===== All Section Title Style =====*/ .section-title .title { font-size: 44px; font-weight: 600; color: #121212; line-height: 55px; } @media (max-width: 767px) { .section-title .title { font-size: 30px; line-height: 35px; } } .section-title .text { font-size: 16px; line-height: 24px; color: #6c6c6c; margin-top: 24px; } /*===== All Preloader Style =====*/ .preloader { /* Body Overlay */ position: fixed; top: 0; left: 0; display: table; height: 100%; width: 100%; /* Change Background Color */ background: #fff; z-index: 99999; } .preloader .loader { display: table-cell; vertical-align: middle; text-align: center; } .preloader .loader .ytp-spinner { position: absolute; left: 50%; top: 50%; width: 64px; margin-left: -32px; z-index: 18; pointer-events: none; } .preloader .loader .ytp-spinner .ytp-spinner-container { pointer-events: none; position: absolute; width: 100%; padding-bottom: 100%; top: 50%; left: 50%; margin-top: -50%; margin-left: -50%; -webkit-animation: ytp-spinner-linspin 1568.23529647ms linear infinite; -moz-animation: ytp-spinner-linspin 1568.23529647ms linear infinite; -o-animation: ytp-spinner-linspin 1568.23529647ms linear infinite; animation: ytp-spinner-linspin 1568.23529647ms linear infinite; } .preloader .loader .ytp-spinner .ytp-spinner-container .ytp-spinner-rotator { position: absolute; width: 100%; height: 100%; -webkit-animation: ytp-spinner-easespin 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; -moz-animation: ytp-spinner-easespin 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; -o-animation: ytp-spinner-easespin 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; animation: ytp-spinner-easespin 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; } .preloader .loader .ytp-spinner .ytp-spinner-container .ytp-spinner-rotator .ytp-spinner-left { position: absolute; top: 0; left: 0; bottom: 0; overflow: hidden; right: 50%; } .preloader .loader .ytp-spinner .ytp-spinner-container .ytp-spinner-rotator .ytp-spinner-right { position: absolute; top: 0; right: 0; bottom: 0; overflow: hidden; left: 50%; } .preloader .loader .ytp-spinner-circle { box-sizing: border-box; position: absolute; width: 200%; height: 100%; border-style: solid; /* Spinner Color */ border-color: #0067f4 #0067f4 #e9ecef; border-radius: 50%; border-width: 6px; } .preloader .loader .ytp-spinner-left .ytp-spinner-circle { left: 0; right: -100%; border-right-color: #e9ecef; -webkit-animation: ytp-spinner-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; -moz-animation: ytp-spinner-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; -o-animation: ytp-spinner-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; animation: ytp-spinner-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; } .preloader .loader .ytp-spinner-right .ytp-spinner-circle { left: -100%; right: 0; border-left-color: #e9ecef; -webkit-animation: ytp-right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; -moz-animation: ytp-right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; -o-animation: ytp-right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; animation: ytp-right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; } /* Preloader Animations */ @-webkit-keyframes ytp-spinner-linspin { to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes ytp-spinner-linspin { to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes ytp-spinner-easespin { 12.5% { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); } 25% { -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg); } 37.5% { -webkit-transform: rotate(405deg); -moz-transform: rotate(405deg); -ms-transform: rotate(405deg); -o-transform: rotate(405deg); transform: rotate(405deg); } 50% { -webkit-transform: rotate(540deg); -moz-transform: rotate(540deg); -ms-transform: rotate(540deg); -o-transform: rotate(540deg); transform: rotate(540deg); } 62.5% { -webkit-transform: rotate(675deg); -moz-transform: rotate(675deg); -ms-transform: rotate(675deg); -o-transform: rotate(675deg); transform: rotate(675deg); } 75% { -webkit-transform: rotate(810deg); -moz-transform: rotate(810deg); -ms-transform: rotate(810deg); -o-transform: rotate(810deg); transform: rotate(810deg); } 87.5% { -webkit-transform: rotate(945deg); -moz-transform: rotate(945deg); -ms-transform: rotate(945deg); -o-transform: rotate(945deg); transform: rotate(945deg); } to { -webkit-transform: rotate(1080deg); -moz-transform: rotate(1080deg); -ms-transform: rotate(1080deg); -o-transform: rotate(1080deg); transform: rotate(1080deg); } } @keyframes ytp-spinner-easespin { 12.5% { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); } 25% { -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg); } 37.5% { -webkit-transform: rotate(405deg); -moz-transform: rotate(405deg); -ms-transform: rotate(405deg); -o-transform: rotate(405deg); transform: rotate(405deg); } 50% { -webkit-transform: rotate(540deg); -moz-transform: rotate(540deg); -ms-transform: rotate(540deg); -o-transform: rotate(540deg); transform: rotate(540deg); } 62.5% { -webkit-transform: rotate(675deg); -moz-transform: rotate(675deg); -ms-transform: rotate(675deg); -o-transform: rotate(675deg); transform: rotate(675deg); } 75% { -webkit-transform: rotate(810deg); -moz-transform: rotate(810deg); -ms-transform: rotate(810deg); -o-transform: rotate(810deg); transform: rotate(810deg); } 87.5% { -webkit-transform: rotate(945deg); -moz-transform: rotate(945deg); -ms-transform: rotate(945deg); -o-transform: rotate(945deg); transform: rotate(945deg); } to { -webkit-transform: rotate(1080deg); -moz-transform: rotate(1080deg); -ms-transform: rotate(1080deg); -o-transform: rotate(1080deg); transform: rotate(1080deg); } } @-webkit-keyframes ytp-spinner-left-spin { 0% { -webkit-transform: rotate(130deg); -moz-transform: rotate(130deg); -ms-transform: rotate(130deg); -o-transform: rotate(130deg); transform: rotate(130deg); } 50% { -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -ms-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg); } to { -webkit-transform: rotate(130deg); -moz-transform: rotate(130deg); -ms-transform: rotate(130deg); -o-transform: rotate(130deg); transform: rotate(130deg); } } @keyframes ytp-spinner-left-spin { 0% { -webkit-transform: rotate(130deg); -moz-transform: rotate(130deg); -ms-transform: rotate(130deg); -o-transform: rotate(130deg); transform: rotate(130deg); } 50% { -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -ms-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg); } to { -webkit-transform: rotate(130deg); -moz-transform: rotate(130deg); -ms-transform: rotate(130deg); -o-transform: rotate(130deg); transform: rotate(130deg); } } @-webkit-keyframes ytp-right-spin { 0% { -webkit-transform: rotate(-130deg); -moz-transform: rotate(-130deg); -ms-transform: rotate(-130deg); -o-transform: rotate(-130deg); transform: rotate(-130deg); } 50% { -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -ms-transform: rotate(5deg); -o-transform: rotate(5deg); transform: rotate(5deg); } to { -webkit-transform: rotate(-130deg); -moz-transform: rotate(-130deg); -ms-transform: rotate(-130deg); -o-transform: rotate(-130deg); transform: rotate(-130deg); } } @keyframes ytp-right-spin { 0% { -webkit-transform: rotate(-130deg); -moz-transform: rotate(-130deg); -ms-transform: rotate(-130deg); -o-transform: rotate(-130deg); transform: rotate(-130deg); } 50% { -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -ms-transform: rotate(5deg); -o-transform: rotate(5deg); transform: rotate(5deg); } to { -webkit-transform: rotate(-130deg); -moz-transform: rotate(-130deg); -ms-transform: rotate(-130deg); -o-transform: rotate(-130deg); transform: rotate(-130deg); } } /*=========================== 11.BUTTON css ===========================*/ .buttons-title .title { font-size: 36px; line-height: 45px; color: #6c6c6c; } @media (max-width: 767px) { .buttons-title .title { font-size: 24px; line-height: 35px; } } .main-btn { display: inline-block; font-weight: 700; text-align: center; white-space: nowrap; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border: 2px solid transparent; padding: 0 32px; font-size: 16px; line-height: 46px; color: #0067f4; cursor: pointer; z-index: 5; -webkit-transition: all 0.4s ease-out 0s; -moz-transition: all 0.4s ease-out 0s; -ms-transition: all 0.4s ease-out 0s; -o-transition: all 0.4s ease-out 0s; transition: all 0.4s ease-out 0s; position: relative; text-transform: uppercase; } @media (max-width: 767px) { .main-btn { font-size: 14px; padding: 0 20px; line-height: 40px; } } /*===== standard Buttons =====*/ .standard-buttons ul li { display: inline-block; margin-left: 18px; margin-top: 20px; } @media (max-width: 767px) { .standard-buttons ul li { margin-left: 0; } } .standard-buttons ul li:first-child { margin-left: 0; } .standard-buttons .standard-one { border-color: #0067f4; } .standard-buttons .standard-one:hover { color: #0067f4; background-color: rgba(0, 103, 244, 0.4); } .standard-buttons .standard-two { color: #fff; background-color: #0067f4; border-color: #0067f4; } .standard-buttons .standard-two:hover { color: #0067f4; background-color: transparent; } .standard-buttons .standard-three { overflow: hidden; line-height: 50px; color: #fff; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); border: 0; line-height: 52px; background-size: 200% auto; } @media only screen and (min-width: 768px) and (max-width: 991px) { .standard-buttons .standard-three { line-height: 44px; } } @media (max-width: 767px) { .standard-buttons .standard-three { line-height: 44px; } } .standard-buttons .standard-three:hover { background-position: right center; } .standard-buttons .standard-four { border-color: #0067f4; padding-left: 60px; } @media (max-width: 767px) { .standard-buttons .standard-four { padding-left: 40px; } } .standard-buttons .standard-four span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; left: 30px; line-height: normal; } @media (max-width: 767px) { .standard-buttons .standard-four span { left: 15px; } } .standard-buttons .standard-four:hover { color: #0067f4; background-color: rgba(0, 103, 244, 0.4); } .standard-buttons .standard-four:hover i { animation: iconTranslateY 0.5s forwards; } .standard-buttons .standard-five { color: #fff; background-color: #0067f4; border-color: #0067f4; padding-left: 60px; } @media (max-width: 767px) { .standard-buttons .standard-five { padding-left: 40px; } } .standard-buttons .standard-five span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; left: 30px; line-height: normal; } @media (max-width: 767px) { .standard-buttons .standard-five span { left: 15px; } } .standard-buttons .standard-five:hover { color: #0067f4; background-color: transparent; } .standard-buttons .standard-five:hover i { animation: iconTranslateY 0.5s forwards; } .standard-buttons .standard-six { padding-right: 60px; overflow: hidden; line-height: 50px; color: #fff; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); border: 0; line-height: 52px; background-size: 200% auto; } @media (max-width: 767px) { .standard-buttons .standard-six { padding-right: 40px; line-height: 44px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .standard-buttons .standard-six { line-height: 44px; } } .standard-buttons .standard-six span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; right: 30px; line-height: normal; } @media (max-width: 767px) { .standard-buttons .standard-six span { right: 15px; } } .standard-buttons .standard-six:hover { background-position: right center; } .standard-buttons .standard-six:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } /*===== Light Rounded Buttons =====*/ .light-rounded-buttons ul li { display: inline-block; margin-left: 18px; margin-top: 20px; } @media (max-width: 767px) { .light-rounded-buttons ul li { margin-left: 0; } } .light-rounded-buttons ul li:first-child { margin-left: 0; } .light-rounded-buttons .main-btn { border-radius: 5px; } .light-rounded-buttons .light-rounded-one { border-color: #0067f4; } .light-rounded-buttons .light-rounded-one:hover { color: #0067f4; background-color: rgba(0, 103, 244, 0.4); } .light-rounded-buttons .light-rounded-two { color: #fff; background-color: #0067f4; border-color: #0067f4; } .light-rounded-buttons .light-rounded-two:hover { color: #0067f4; background-color: transparent; } .light-rounded-buttons .light-rounded-three { overflow: hidden; line-height: 50px; color: #fff; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background-size: 200% auto; line-height: 52px; border: 0; } @media only screen and (min-width: 768px) and (max-width: 991px) { .light-rounded-buttons .light-rounded-three { line-height: 44px; } } @media (max-width: 767px) { .light-rounded-buttons .light-rounded-three { line-height: 44px; } } .light-rounded-buttons .light-rounded-three:hover { background-position: right center; } .light-rounded-buttons .light-rounded-four { border-color: #0067f4; padding-left: 60px; } @media (max-width: 767px) { .light-rounded-buttons .light-rounded-four { padding-left: 40px; } } .light-rounded-buttons .light-rounded-four span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; left: 30px; line-height: normal; } @media (max-width: 767px) { .light-rounded-buttons .light-rounded-four span { left: 15px; } } .light-rounded-buttons .light-rounded-four:hover { color: #0067f4; background-color: rgba(0, 103, 244, 0.4); } .light-rounded-buttons .light-rounded-four:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } .light-rounded-buttons .light-rounded-five { color: #fff; background-color: #0067f4; border-color: #0067f4; padding-left: 60px; } @media (max-width: 767px) { .light-rounded-buttons .light-rounded-five { padding-left: 40px; } } .light-rounded-buttons .light-rounded-five span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; left: 30px; line-height: normal; } @media (max-width: 767px) { .light-rounded-buttons .light-rounded-five span { left: 15px; } } .light-rounded-buttons .light-rounded-five:hover { color: #0067f4; background-color: transparent; } .light-rounded-buttons .light-rounded-five:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } .light-rounded-buttons .light-rounded-six { padding-right: 60px; overflow: hidden; line-height: 50px; color: #fff; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background-size: 200% auto; line-height: 52px; border: 0; } @media only screen and (min-width: 768px) and (max-width: 991px) { .light-rounded-buttons .light-rounded-six { line-height: 44px; } } @media (max-width: 767px) { .light-rounded-buttons .light-rounded-six { padding-right: 40px; line-height: 44px; } } .light-rounded-buttons .light-rounded-six span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; right: 30px; line-height: normal; } @media (max-width: 767px) { .light-rounded-buttons .light-rounded-six span { right: 15px; } } .light-rounded-buttons .light-rounded-six:hover { background-position: right center; } .light-rounded-buttons .light-rounded-six:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } /*===== Semi Rounded Buttons =====*/ .semi-rounded-buttons ul li { display: inline-block; margin-left: 18px; margin-top: 20px; } @media (max-width: 767px) { .semi-rounded-buttons ul li { margin-left: 0; } } .semi-rounded-buttons ul li:first-child { margin-left: 0; } .semi-rounded-buttons .main-btn { border-radius: 10px; } .semi-rounded-buttons .semi-rounded-one { border-color: #0067f4; } .semi-rounded-buttons .semi-rounded-one:hover { color: #0067f4; background-color: rgba(0, 103, 244, 0.4); } .semi-rounded-buttons .semi-rounded-two { color: #fff; background-color: #0067f4; border-color: #0067f4; } .semi-rounded-buttons .semi-rounded-two:hover { color: #0067f4; background-color: transparent; } .semi-rounded-buttons .semi-rounded-three { overflow: hidden; line-height: 52px; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background-size: 200% auto; border: 0; color: #fff; } @media only screen and (min-width: 768px) and (max-width: 991px) { .semi-rounded-buttons .semi-rounded-three { line-height: 44px; } } @media (max-width: 767px) { .semi-rounded-buttons .semi-rounded-three { line-height: 44px; } } .semi-rounded-buttons .semi-rounded-three:hover { background-position: right center; } .semi-rounded-buttons .semi-rounded-four { border-color: #0067f4; padding-left: 60px; } @media (max-width: 767px) { .semi-rounded-buttons .semi-rounded-four { padding-left: 40px; } } .semi-rounded-buttons .semi-rounded-four span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; left: 30px; line-height: normal; } @media (max-width: 767px) { .semi-rounded-buttons .semi-rounded-four span { left: 15px; } } .semi-rounded-buttons .semi-rounded-four:hover { color: #0067f4; background-color: rgba(0, 103, 244, 0.4); } .semi-rounded-buttons .semi-rounded-four:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } .semi-rounded-buttons .semi-rounded-five { color: #fff; background-color: #0067f4; border-color: #0067f4; padding-left: 60px; } @media (max-width: 767px) { .semi-rounded-buttons .semi-rounded-five { padding-left: 40px; } } .semi-rounded-buttons .semi-rounded-five span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; left: 30px; line-height: normal; } @media (max-width: 767px) { .semi-rounded-buttons .semi-rounded-five span { left: 15px; } } .semi-rounded-buttons .semi-rounded-five:hover { color: #0067f4; background-color: transparent; } .semi-rounded-buttons .semi-rounded-five:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } .semi-rounded-buttons .semi-rounded-six { padding-right: 60px; overflow: hidden; line-height: 52px; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background-size: 200% auto; border: 0; color: #fff; } @media only screen and (min-width: 768px) and (max-width: 991px) { .semi-rounded-buttons .semi-rounded-six { line-height: 44px; } } @media (max-width: 767px) { .semi-rounded-buttons .semi-rounded-six { padding-right: 40px; line-height: 44px; } } .semi-rounded-buttons .semi-rounded-six span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; right: 30px; line-height: normal; } @media (max-width: 767px) { .semi-rounded-buttons .semi-rounded-six span { right: 15px; } } .semi-rounded-buttons .semi-rounded-six:hover { background-position: right center; } .semi-rounded-buttons .semi-rounded-six:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } /*===== Rounded Buttons =====*/ .rounded-buttons ul li { display: inline-block; margin-left: 18px; margin-top: 20px; } @media (max-width: 767px) { .rounded-buttons ul li { margin-left: 0; } } .rounded-buttons ul li:first-child { margin-left: 0; } .rounded-buttons .main-btn { border-radius: 50px; } .rounded-buttons .rounded-one { border-color: #0067f4; } .rounded-buttons .rounded-one:hover { color: #0067f4; background-color: rgba(0, 103, 244, 0.4); } .rounded-buttons .rounded-two { color: #fff; background-color: #0067f4; border-color: #0067f4; } .rounded-buttons .rounded-two:hover { color: #0067f4; background-color: transparent; } .rounded-buttons .rounded-three { overflow: hidden; line-height: 52px; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background-size: 200% auto; color: #fff; border: 0; } @media only screen and (min-width: 768px) and (max-width: 991px) { .rounded-buttons .rounded-three { line-height: 44px; } } @media (max-width: 767px) { .rounded-buttons .rounded-three { line-height: 44px; } } .rounded-buttons .rounded-three:hover { background-position: right center; } .rounded-buttons .rounded-four { border-color: #0067f4; padding-left: 60px; } @media (max-width: 767px) { .rounded-buttons .rounded-four { padding-left: 40px; } } .rounded-buttons .rounded-four span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; left: 30px; line-height: normal; } @media (max-width: 767px) { .rounded-buttons .rounded-four span { left: 15px; } } .rounded-buttons .rounded-four:hover { color: #0067f4; background-color: rgba(0, 103, 244, 0.4); } .rounded-buttons .rounded-four:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } .rounded-buttons .rounded-five { color: #fff; background-color: #0067f4; border-color: #0067f4; padding-left: 60px; } @media (max-width: 767px) { .rounded-buttons .rounded-five { padding-left: 40px; } } .rounded-buttons .rounded-five span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; left: 30px; line-height: normal; } @media (max-width: 767px) { .rounded-buttons .rounded-five span { left: 15px; } } .rounded-buttons .rounded-five:hover { color: #0067f4; background-color: transparent; } .rounded-buttons .rounded-five:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } .rounded-buttons .rounded-six { padding-right: 60px; overflow: hidden; line-height: 52px; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background-size: 200% auto; color: #fff; border: 0; } @media only screen and (min-width: 768px) and (max-width: 991px) { .rounded-buttons .rounded-six { line-height: 44px; } } @media (max-width: 767px) { .rounded-buttons .rounded-six { padding-right: 40px; line-height: 44px; } } .rounded-buttons .rounded-six span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; right: 30px; line-height: normal; } @media (max-width: 767px) { .rounded-buttons .rounded-six span { right: 15px; } } .rounded-buttons .rounded-six:hover { background-position: right center; } .rounded-buttons .rounded-six:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } /*===== Success Buttons =====*/ .success-buttons ul li { display: inline-block; margin-left: 18px; margin-top: 20px; } @media (max-width: 767px) { .success-buttons ul li { margin-left: 0; } } .success-buttons ul li:first-child { margin-left: 0; } .success-buttons .success-one { border-color: #4da422; color: #4da422; } .success-buttons .success-one:hover { color: #4da422; background-color: rgba(77, 164, 34, 0.4); } .success-buttons .success-two { color: #fff; background-color: #4da422; border-color: #4da422; } .success-buttons .success-two:hover { color: #4da422; background-color: transparent; } .success-buttons .success-three { overflow: hidden; line-height: 52px; color: #fff; border: 0; background: -webkit-linear-gradient(left, #4da422 0%, #69e02e 50%, #4da422 100%); background: -o-linear-gradient(left, #4da422 0%, #69e02e 50%, #4da422 100%); background: linear-gradient(to right, #4da422 0%, #69e02e 50%, #4da422 100%); background-size: 200% auto; } @media only screen and (min-width: 768px) and (max-width: 991px) { .success-buttons .success-three { line-height: 44px; } } @media (max-width: 767px) { .success-buttons .success-three { line-height: 44px; } } .success-buttons .success-three:hover { background-position: right center; } .success-buttons .success-four { padding-left: 60px; border-color: #4da422; color: #4da422; } @media (max-width: 767px) { .success-buttons .success-four { padding-left: 40px; } } .success-buttons .success-four span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; left: 30px; line-height: normal; } @media (max-width: 767px) { .success-buttons .success-four span { left: 15px; } } .success-buttons .success-four:hover { color: #4da422; background-color: rgba(77, 164, 34, 0.4); } .success-buttons .success-four:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } .success-buttons .success-five { padding-left: 60px; color: #fff; background-color: #4da422; border-color: #4da422; } @media (max-width: 767px) { .success-buttons .success-five { padding-left: 40px; } } .success-buttons .success-five span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; left: 30px; line-height: normal; } @media (max-width: 767px) { .success-buttons .success-five span { left: 15px; } } .success-buttons .success-five:hover { color: #4da422; background-color: transparent; } .success-buttons .success-five:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } .success-buttons .success-six { padding-right: 60px; overflow: hidden; line-height: 52px; color: #fff; border: 0; background: -webkit-linear-gradient(left, #4da422 0%, #69e02e 50%, #4da422 100%); background: -o-linear-gradient(left, #4da422 0%, #69e02e 50%, #4da422 100%); background: linear-gradient(to right, #4da422 0%, #69e02e 50%, #4da422 100%); background-size: 200% auto; } @media only screen and (min-width: 768px) and (max-width: 991px) { .success-buttons .success-six { line-height: 44px; } } @media (max-width: 767px) { .success-buttons .success-six { padding-right: 40px; line-height: 44px; } } .success-buttons .success-six span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; right: 30px; line-height: normal; } @media (max-width: 767px) { .success-buttons .success-six span { right: 15px; } } .success-buttons .success-six:hover { background-position: right center; } .success-buttons .success-six:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } /*===== Warning Buttons =====*/ .warning-buttons ul li { display: inline-block; margin-left: 18px; margin-top: 20px; } @media (max-width: 767px) { .warning-buttons ul li { margin-left: 0; } } .warning-buttons ul li:first-child { margin-left: 0; } .warning-buttons .warning-one { border-color: #ffb400; color: #ffb400; } .warning-buttons .warning-one:hover { color: #ffb400; background-color: rgba(255, 180, 0, 0.4); } .warning-buttons .warning-two { color: #fff; background-color: #ffb400; border-color: #ffb400; } @media only screen and (min-width: 768px) and (max-width: 991px) { .warning-buttons .warning-two { line-height: 44px; } } @media (max-width: 767px) { .warning-buttons .warning-two { padding-right: 40px; line-height: 44px; } } .warning-buttons .warning-two:hover { color: #ffb400; background-color: transparent; } .warning-buttons .warning-three { overflow: hidden; line-height: 52px; color: #fff; border: 0; background: -webkit-linear-gradient(left, #ffb400 0%, #f7e500 50%, #ffb400 100%); background: -o-linear-gradient(left, #ffb400 0%, #f7e500 50%, #ffb400 100%); background: linear-gradient(to right, #ffb400 0%, #f7e500 50%, #ffb400 100%); background-size: 200% auto; } @media only screen and (min-width: 768px) and (max-width: 991px) { .warning-buttons .warning-three { line-height: 44px; } } @media (max-width: 767px) { .warning-buttons .warning-three { line-height: 44px; } } .warning-buttons .warning-three:hover { background-position: right center; } .warning-buttons .warning-four { padding-left: 60px; border-color: #ffb400; color: #ffb400; } @media (max-width: 767px) { .warning-buttons .warning-four { padding-left: 40px; } } .warning-buttons .warning-four span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; left: 30px; line-height: normal; } @media (max-width: 767px) { .warning-buttons .warning-four span { left: 15px; } } .warning-buttons .warning-four:hover { color: #ffb400; background-color: rgba(255, 180, 0, 0.4); } .warning-buttons .warning-four:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } .warning-buttons .warning-five { padding-left: 60px; color: #fff; background-color: #ffb400; border-color: #ffb400; } @media (max-width: 767px) { .warning-buttons .warning-five { padding-left: 40px; } } .warning-buttons .warning-five span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; left: 30px; line-height: normal; } @media (max-width: 767px) { .warning-buttons .warning-five span { left: 15px; } } .warning-buttons .warning-five:hover { color: #ffb400; background-color: transparent; } .warning-buttons .warning-five:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } .warning-buttons .warning-six { padding-right: 60px; overflow: hidden; line-height: 52px; color: #fff; border: 0; background: -webkit-linear-gradient(left, #ffb400 0%, #f7e500 50%, #ffb400 100%); background: -o-linear-gradient(left, #ffb400 0%, #f7e500 50%, #ffb400 100%); background: linear-gradient(to right, #ffb400 0%, #f7e500 50%, #ffb400 100%); background-size: 200% auto; } @media only screen and (min-width: 768px) and (max-width: 991px) { .warning-buttons .warning-six { line-height: 44px; } } @media (max-width: 767px) { .warning-buttons .warning-six { padding-right: 40px; line-height: 44px; } } .warning-buttons .warning-six span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; right: 30px; line-height: normal; } @media (max-width: 767px) { .warning-buttons .warning-six span { right: 15px; } } .warning-buttons .warning-six:hover { background-position: right center; } .warning-buttons .warning-six:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } /*===== Info Buttons =====*/ .info-buttons ul li { display: inline-block; margin-left: 18px; margin-top: 20px; } @media (max-width: 767px) { .info-buttons ul li { margin-left: 0; } } .info-buttons ul li:first-child { margin-left: 0; } .info-buttons .info-one { border-color: #00b8d8; color: #00b8d8; } .info-buttons .info-one:hover { color: #00b8d8; background-color: rgba(0, 184, 216, 0.4); } .info-buttons .info-two { color: #fff; background-color: #00b8d8; border-color: #00b8d8; } .info-buttons .info-two:hover { color: #00b8d8; background-color: transparent; } .info-buttons .info-three { overflow: hidden; line-height: 52px; color: #fff; border: 0; background: -webkit-linear-gradient(left, #00b8d8 0%, #32fbfc 50%, #00b8d8 100%); background: -o-linear-gradient(left, #00b8d8 0%, #32fbfc 50%, #00b8d8 100%); background: linear-gradient(to right, #00b8d8 0%, #32fbfc 50%, #00b8d8 100%); background-size: 200% auto; } @media only screen and (min-width: 768px) and (max-width: 991px) { .info-buttons .info-three { line-height: 44px; } } @media (max-width: 767px) { .info-buttons .info-three { line-height: 44px; } } .info-buttons .info-three:hover { background-position: right center; } .info-buttons .info-four { padding-left: 60px; border-color: #00b8d8; color: #00b8d8; } @media (max-width: 767px) { .info-buttons .info-four { padding-left: 40px; } } .info-buttons .info-four span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; left: 30px; line-height: normal; } @media (max-width: 767px) { .info-buttons .info-four span { left: 15px; } } .info-buttons .info-four:hover { color: #00b8d8; background-color: rgba(0, 184, 216, 0.4); } .info-buttons .info-four:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } .info-buttons .info-five { padding-left: 60px; color: #fff; background-color: #00b8d8; border-color: #00b8d8; } @media (max-width: 767px) { .info-buttons .info-five { padding-left: 40px; } } .info-buttons .info-five span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; left: 30px; line-height: normal; } @media (max-width: 767px) { .info-buttons .info-five span { left: 15px; } } .info-buttons .info-five:hover { color: #00b8d8; background-color: transparent; } .info-buttons .info-five:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } .info-buttons .info-six { padding-right: 60px; overflow: hidden; line-height: 52px; color: #fff; border: 0; background: -webkit-linear-gradient(left, #00b8d8 0%, #32fbfc 50%, #00b8d8 100%); background: -o-linear-gradient(left, #00b8d8 0%, #32fbfc 50%, #00b8d8 100%); background: linear-gradient(to right, #00b8d8 0%, #32fbfc 50%, #00b8d8 100%); background-size: 200% auto; } @media only screen and (min-width: 768px) and (max-width: 991px) { .info-buttons .info-six { line-height: 44px; } } @media (max-width: 767px) { .info-buttons .info-six { padding-right: 40px; line-height: 44px; } } .info-buttons .info-six span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; right: 30px; line-height: normal; } @media (max-width: 767px) { .info-buttons .info-six span { right: 15px; } } .info-buttons .info-six:hover { background-position: right center; } .info-buttons .info-six:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } /*===== Danger Buttons =====*/ .danger-buttons ul li { display: inline-block; margin-left: 18px; margin-top: 20px; } @media (max-width: 767px) { .danger-buttons ul li { margin-left: 0; } } .danger-buttons ul li:first-child { margin-left: 0; } .danger-buttons .danger-one { border-color: #fc3832; color: #fc3832; } .danger-buttons .danger-one:hover { color: #fc3832; background-color: rgba(252, 56, 50, 0.4); } .danger-buttons .danger-two { color: #fff; background-color: #fc3832; border-color: #fc3832; } .danger-buttons .danger-two:hover { color: #fc3832; background-color: transparent; } .danger-buttons .danger-three { overflow: hidden; line-height: 52px; color: #fff; border: 0; background: -webkit-linear-gradient(left, #fc3832 0%, #dc312b 50%, #fc3832 100%); background: -o-linear-gradient(left, #fc3832 0%, #dc312b 50%, #fc3832 100%); background: linear-gradient(to right, #fc3832 0%, #dc312b 50%, #fc3832 100%); background-size: 200% auto; } @media only screen and (min-width: 768px) and (max-width: 991px) { .danger-buttons .danger-three { line-height: 44px; } } @media (max-width: 767px) { .danger-buttons .danger-three { line-height: 44px; } } .danger-buttons .danger-three:hover { background-position: right center; } .danger-buttons .danger-four { padding-left: 60px; border-color: #fc3832; color: #fc3832; } @media (max-width: 767px) { .danger-buttons .danger-four { padding-left: 40px; } } .danger-buttons .danger-four span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; left: 30px; line-height: normal; } @media (max-width: 767px) { .danger-buttons .danger-four span { left: 15px; } } .danger-buttons .danger-four:hover { color: #fc3832; background-color: rgba(252, 56, 50, 0.4); } .danger-buttons .danger-four:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } .danger-buttons .danger-five { padding-left: 60px; color: #fff; background-color: #fc3832; border-color: #fc3832; } @media (max-width: 767px) { .danger-buttons .danger-five { padding-left: 40px; } } .danger-buttons .danger-five span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; left: 30px; line-height: normal; } @media (max-width: 767px) { .danger-buttons .danger-five span { left: 15px; } } .danger-buttons .danger-five:hover { color: #fc3832; background-color: transparent; } .danger-buttons .danger-five:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } .danger-buttons .danger-six { padding-right: 60px; overflow: hidden; line-height: 52px; color: #fff; border: 0; background: -webkit-linear-gradient(left, #fc3832 0%, #dc312b 50%, #fc3832 100%); background: -o-linear-gradient(left, #fc3832 0%, #dc312b 50%, #fc3832 100%); background: linear-gradient(to right, #fc3832 0%, #dc312b 50%, #fc3832 100%); background-size: 200% auto; } @media only screen and (min-width: 768px) and (max-width: 991px) { .danger-buttons .danger-six { line-height: 44px; } } @media (max-width: 767px) { .danger-buttons .danger-six { padding-right: 40px; line-height: 44px; } } .danger-buttons .danger-six span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; right: 30px; line-height: normal; } @media (max-width: 767px) { .danger-buttons .danger-six span { right: 15px; } } .danger-buttons .danger-six:hover { background-position: right center; } .danger-buttons .danger-six:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } @-webkit-keyframes iconTranslateY { 49% { -webkit-transform: translateY(100%); } 50% { opacity: 0; -webkit-transform: translateY(-100%); } 51% { opacity: 1; } } @-moz-keyframes iconTranslateY { 49% { -webkit-transform: translateY(100%); } 50% { opacity: 0; -webkit-transform: translateY(-100%); } 51% { opacity: 1; } } @keyframes iconTranslateY { 49% { -webkit-transform: translateY(100%); } 50% { opacity: 0; -webkit-transform: translateY(-100%); } 51% { opacity: 1; } } .lg-btn { line-height: 64px !important; font-size: 18px; } @media (max-width: 767px) { .lg-btn { font-size: 16px; ine-height: 52px; } } .el-btn { line-height: 80px !important; font-size: 20px; } @media (max-width: 767px) { .el-btn { font-size: 18px; line-height: 74px; } } .sm-btn { line-height: 40px !important; font-size: 12px; } /*===== Regular Icon Buttons =====*/ .regular-icon-buttons ul li { display: inline-block; margin-left: 10px; margin-top: 20px; } .regular-icon-buttons ul li:first-child { margin-left: 0; } .regular-icon-buttons ul li .regular-icon-light-one { width: 40px; height: 40px; line-height: 36px; border: 2px solid #0067f4; text-align: center; font-size: 24px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; overflow: hidden; color: #0067f4; } .regular-icon-buttons ul li .regular-icon-light-one:hover { color: #fff; background-color: #0067f4; } .regular-icon-buttons ul li .regular-icon-light-two { width: 40px; height: 40px; line-height: 36px; border: 2px solid #0067f4; text-align: center; font-size: 24px; border-radius: 5px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; overflow: hidden; color: #0067f4; } .regular-icon-buttons ul li .regular-icon-light-two:hover { color: #fff; background-color: #0067f4; } .regular-icon-buttons ul li .regular-icon-light-three { width: 40px; height: 40px; line-height: 36px; border: 2px solid #0067f4; text-align: center; font-size: 24px; border-radius: 10px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; overflow: hidden; color: #0067f4; } .regular-icon-buttons ul li .regular-icon-light-three:hover { color: #fff; background-color: #0067f4; } .regular-icon-buttons ul li .regular-icon-light-four { width: 40px; height: 40px; line-height: 36px; border: 2px solid #0067f4; text-align: center; font-size: 24px; border-radius: 50%; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; overflow: hidden; } .regular-icon-buttons ul li .regular-icon-light-four:hover { color: #fff; background-color: #0067f4; } .regular-icon-buttons ul li .regular-icon-light-five { width: 40px; height: 40px; line-height: 40px; border: 0; text-align: center; font-size: 24px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; position: relative; z-index: 5; overflow: hidden; color: #fff; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background-size: 200% auto; } .regular-icon-buttons ul li .regular-icon-light-five:hover { background-position: right center; } .regular-icon-buttons ul li .regular-icon-light-six { width: 40px; height: 40px; line-height: 40px; border: 0; text-align: center; font-size: 24px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; position: relative; z-index: 5; overflow: hidden; color: #fff; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background-size: 200% auto; border-radius: 5px; } .regular-icon-buttons ul li .regular-icon-light-six:hover { background-position: right center; } .regular-icon-buttons ul li .regular-icon-light-seven { width: 40px; height: 40px; line-height: 40px; border: 0; text-align: center; font-size: 24px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; position: relative; z-index: 5; overflow: hidden; color: #fff; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background-size: 200% auto; border-radius: 10px; } .regular-icon-buttons ul li .regular-icon-light-seven:hover { background-position: right center; } .regular-icon-buttons ul li .regular-icon-light-eight { width: 40px; height: 40px; line-height: 40px; border: 0; text-align: center; font-size: 24px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; position: relative; z-index: 5; overflow: hidden; color: #fff; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background-size: 200% auto; border-radius: 50%; } .regular-icon-buttons ul li .regular-icon-light-eight:hover { background-position: right center; } .regular-icon-buttons ul li .regular-icon-light-nine { width: 40px; height: 40px; line-height: 36px; border: 2px solid #0067f4; text-align: center; font-size: 24px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; overflow: hidden; color: #fff; background-color: #0067f4; } .regular-icon-buttons ul li .regular-icon-light-nine:hover { color: #0067f4; background-color: transparent; } .regular-icon-buttons ul li .regular-icon-light-ten { width: 40px; height: 40px; line-height: 36px; border: 2px solid #0067f4; text-align: center; font-size: 24px; border-radius: 5px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; overflow: hidden; color: #fff; background-color: #0067f4; } .regular-icon-buttons ul li .regular-icon-light-ten:hover { color: #0067f4; background-color: transparent; } .regular-icon-buttons ul li .regular-icon-light-eleven { width: 40px; height: 40px; line-height: 36px; border: 2px solid #0067f4; text-align: center; font-size: 24px; border-radius: 10px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; overflow: hidden; color: #fff; background-color: #0067f4; } .regular-icon-buttons ul li .regular-icon-light-eleven:hover { color: #0067f4; background-color: transparent; } .regular-icon-buttons ul li .regular-icon-light-twelve { width: 40px; height: 40px; line-height: 36px; border: 2px solid #0067f4; text-align: center; font-size: 24px; border-radius: 50%; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; overflow: hidden; color: #fff; background-color: #0067f4; } .regular-icon-buttons ul li .regular-icon-light-twelve:hover { color: #0067f4; background-color: transparent; } /*===== Group Buttons =====*/ .group-buttons .btn-group { margin-left: 30px; } .group-buttons .group-one { margin-left: 0; } .group-buttons .group-one .main-btn { background: none; border: 2px solid #0067f4; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .group-buttons .group-one .main-btn:first-child { border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-right: 0; } .group-buttons .group-one .main-btn:last-child { border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-left: 0; } .group-buttons .group-one .main-btn:hover { background-color: #0067f4; color: #fff; } .group-buttons .group-two .main-btn { background: none; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; overflow: hidden; color: #fff; line-height: 52px; background: -webkit-linear-gradient(#0067f4 0%, #2bdbdc 50%, #0067f4 100%); background: -o-linear-gradient(#0067f4 0%, #2bdbdc 50%, #0067f4 100%); background: linear-gradient(#0067f4 0%, #2bdbdc 50%, #0067f4 100%); background-size: auto 200%; border-top: 0; border-bottom: 0; border-color: rgba(244, 246, 247, 0.2); } .group-buttons .group-two .main-btn:first-child { border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-right: 0; } .group-buttons .group-two .main-btn:last-child { border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-left: 0; } .group-buttons .group-two .main-btn:hover { background-position: bottom center; } .group-buttons .group-three .main-btn { background: none; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; overflow: hidden; color: #fff; line-height: 52px; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background-size: 200% auto; border: 0; } .group-buttons .group-three .main-btn:first-child { border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-right: 0; } .group-buttons .group-three .main-btn:last-child { border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-left: 0; } .group-buttons .group-three .main-btn:hover { background-position: right center; } .group-buttons .group-four { margin-left: 0; } .group-buttons .group-four .main-btn { background: none; border: 2px solid #0067f4; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; padding: 0 12px; } .group-buttons .group-four .main-btn i { font-size: 24px; } .group-buttons .group-four .main-btn:first-child { border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-right: 0; } .group-buttons .group-four .main-btn:last-child { border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-left: 0; } .group-buttons .group-four .main-btn:hover { background-color: #0067f4; color: #fff; } .group-buttons .group-five .main-btn { background: none; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; overflow: hidden; color: #fff; line-height: 52px; background: -webkit-linear-gradient(#0067f4 0%, #2bdbdc 50%, #0067f4 100%); background: -o-linear-gradient(#0067f4 0%, #2bdbdc 50%, #0067f4 100%); background: linear-gradient(#0067f4 0%, #2bdbdc 50%, #0067f4 100%); background-size: auto 200%; border-top: 0; border-bottom: 0; border-color: rgba(244, 246, 247, 0.2); padding: 0 16px; } .group-buttons .group-five .main-btn:first-child { border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-right: 0; } .group-buttons .group-five .main-btn:last-child { border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-left: 0; } .group-buttons .group-five .main-btn:hover { background-position: bottom center; } .group-buttons .group-six .main-btn { background: none; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; overflow: hidden; color: #fff; line-height: 52px; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background-size: 200% auto; border: 0; padding: 0 16px; } .group-buttons .group-six .main-btn:first-child { border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-right: 0; } .group-buttons .group-six .main-btn:last-child { border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-left: 0; } .group-buttons .group-six .main-btn:hover { background-position: right center; } /*=========================== 06.FORM ELEMENTS css ===========================*/ .form-elements-title { font-size: 36px; font-weight: 600; line-height: 45px; color: #6c6c6c; } @media (max-width: 767px) { .form-elements-title { font-size: 24px; line-height: 35px; } } .form-group { margin-bottom: 0; } .form-input .help-block { margin-top: 2px; } .form-input .help-block .list-unstyled li { font-size: 12px; line-height: 16px; color: #fc3832; } .form-input label { font-size: 12px; line-height: 18px; color: #6c6c6c; margin-bottom: 8px; display: inline-block; } .form-input .input-items { position: relative; } .form-input .input-items input, .form-input .input-items textarea { width: 100%; height: 44px; border: 2px solid; padding-left: 44px; padding-right: 12px; position: relative; font-size: 16px; } .form-input .input-items textarea { padding-top: 8px; height: 130px; resize: none; } .form-input .input-items i { position: absolute; top: 11px; left: 13px; font-size: 20px; z-index: 9; } .form-input .input-items.default input, .form-input .input-items.default textarea { border-color: #a4a4a4; color: #6c6c6c; } .form-input .input-items.default input:focus, .form-input .input-items.default textarea:focus { border-color: #0067f4; } .form-input .input-items.default input::placeholder, .form-input .input-items.default textarea::placeholder { color: #6c6c6c; opacity: 1; } .form-input .input-items.default input::-moz-placeholder, .form-input .input-items.default textarea::-moz-placeholder { color: #6c6c6c; opacity: 1; } .form-input .input-items.default input::-moz-placeholder, .form-input .input-items.default textarea::-moz-placeholder { color: #6c6c6c; opacity: 1; } .form-input .input-items.default input::-webkit-input-placeholder, .form-input .input-items.default textarea::-webkit-input-placeholder { color: #6c6c6c; opacity: 1; } .form-input .input-items.default i { color: #6c6c6c; } .form-input .input-items.active input, .form-input .input-items.active textarea { border-color: #0067f4; color: #121212; } .form-input .input-items.active input::placeholder, .form-input .input-items.active textarea::placeholder { color: #121212; opacity: 1; } .form-input .input-items.active input::-moz-placeholder, .form-input .input-items.active textarea::-moz-placeholder { color: #121212; opacity: 1; } .form-input .input-items.active input::-moz-placeholder, .form-input .input-items.active textarea::-moz-placeholder { color: #121212; opacity: 1; } .form-input .input-items.active input::-webkit-input-placeholder, .form-input .input-items.active textarea::-webkit-input-placeholder { color: #121212; opacity: 1; } .form-input .input-items.active i { color: #0067f4; } .form-input .input-items.error input, .form-input .input-items.error textarea { border-color: #fc3832; color: #fc3832; } .form-input .input-items.error input::placeholder, .form-input .input-items.error textarea::placeholder { color: #fc3832; opacity: 1; } .form-input .input-items.error input::-moz-placeholder, .form-input .input-items.error textarea::-moz-placeholder { color: #fc3832; opacity: 1; } .form-input .input-items.error input::-moz-placeholder, .form-input .input-items.error textarea::-moz-placeholder { color: #fc3832; opacity: 1; } .form-input .input-items.error input::-webkit-input-placeholder, .form-input .input-items.error textarea::-webkit-input-placeholder { color: #fc3832; opacity: 1; } .form-input .input-items.error i { color: #fc3832; } .form-input .input-items.success input, .form-input .input-items.success textarea { border-color: #4da422; color: #4da422; } .form-input .input-items.success input::placeholder, .form-input .input-items.success textarea::placeholder { color: #4da422; opacity: 1; } .form-input .input-items.success input::-moz-placeholder, .form-input .input-items.success textarea::-moz-placeholder { color: #4da422; opacity: 1; } .form-input .input-items.success input::-moz-placeholder, .form-input .input-items.success textarea::-moz-placeholder { color: #4da422; opacity: 1; } .form-input .input-items.success input::-webkit-input-placeholder, .form-input .input-items.success textarea::-webkit-input-placeholder { color: #4da422; opacity: 1; } .form-input .input-items.success i { color: #4da422; } .form-input .input-items.disabled input, .form-input .input-items.disabled textarea { border-color: #a4a4a4; color: #6c6c6c; background: none; } .form-input .input-items.disabled input::placeholder, .form-input .input-items.disabled textarea::placeholder { color: #6c6c6c; opacity: 1; } .form-input .input-items.disabled input::-moz-placeholder, .form-input .input-items.disabled textarea::-moz-placeholder { color: #6c6c6c; opacity: 1; } .form-input .input-items.disabled input::-moz-placeholder, .form-input .input-items.disabled textarea::-moz-placeholder { color: #6c6c6c; opacity: 1; } .form-input .input-items.disabled input::-webkit-input-placeholder, .form-input .input-items.disabled textarea::-webkit-input-placeholder { color: #6c6c6c; opacity: 1; } .form-input .input-items.disabled i { color: #6c6c6c; } .form-style-two .form-input .input-items input, .form-style-two .form-input .input-items textarea { border-radius: 5px; padding-left: 12px; padding-right: 44px; } .form-style-two .form-input .input-items i { left: auto; right: 13px; } .form-style-three .form-input { text-align: center; } .form-style-three .form-input .input-items input, .form-style-three .form-input .input-items textarea { border-radius: 50px; text-align: center; } .form-style-four .form-input label { padding-left: 44px; margin-bottom: 0; } .form-style-four .form-input .input-items input, .form-style-four .form-input .input-items textarea { border-top: 0; border-left: 0; border-right: 0; } .form-style-five .form-input { position: relative; } .form-style-five .form-input label { position: absolute; top: -10px; left: 10px; background-color: #fff; z-index: 5; padding: 0 5px; } .form-style-five .form-input .input-items input, .form-style-five .form-input .input-items textarea { border-radius: 5px; } /*=========================== 09.NAVBAR css ===========================*/ .navbar-area { position: absolute; top: 0; left: 0; width: 100%; padding: 10px 0; z-index: 99; } .navbar-area .navbar { position: relative; padding: 0; } .navbar-area .navbar .navbar-toggler .toggler-icon { width: 30px; height: 2px; background-color: #fff; margin: 5px 0; display: block; position: relative; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .navbar-area .navbar .navbar-toggler.active .toggler-icon:nth-of-type(1) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); top: 7px; } .navbar-area .navbar .navbar-toggler.active .toggler-icon:nth-of-type(2) { opacity: 0; } .navbar-area .navbar .navbar-toggler.active .toggler-icon:nth-of-type(3) { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); top: -7px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area .navbar .navbar-collapse { position: absolute; top: 115%; left: 0; width: 100%; background-color: #f4f6f7; z-index: 8; padding: 10px 0; -webkit-box-shadow: 0px 10px 25px 0px rgba(18, 18, 18, 0.05); -moz-box-shadow: 0px 10px 25px 0px rgba(18, 18, 18, 0.05); box-shadow: 0px 10px 25px 0px rgba(18, 18, 18, 0.05); } } @media (max-width: 767px) { .navbar-area .navbar .navbar-collapse { position: absolute; top: 115%; left: 0; width: 100%; background-color: #f4f6f7; z-index: 8; padding: 10px 0; -webkit-box-shadow: 0px 10px 25px 0px rgba(18, 18, 18, 0.05); -moz-box-shadow: 0px 10px 25px 0px rgba(18, 18, 18, 0.05); box-shadow: 0px 10px 25px 0px rgba(18, 18, 18, 0.05); } } .navbar-area .navbar .navbar-nav .nav-item { margin: 0 16px; position: relative; } .navbar-area .navbar .navbar-nav .nav-item a { font-size: 16px; line-height: 24px; font-weight: 700; padding: 26px 0; color: #fff; text-transform: uppercase; position: relative; opacity: 0.8; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area .navbar .navbar-nav .nav-item a { padding: 10px 0; display: block; color: #121212; } } @media (max-width: 767px) { .navbar-area .navbar .navbar-nav .nav-item a { padding: 10px 0; display: block; color: #121212; } } .navbar-area .navbar .navbar-nav .nav-item a::before { position: absolute; content: ''; width: 32px; height: 4px; background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.1) 0%, white 100%); background: -o-linear-gradient(left, rgba(255, 255, 255, 0.1) 0%, white 100%); background: linear-gradient(to right, rgba(255, 255, 255, 0.1) 0%, white 100%); left: 50%; margin: 0 2px; bottom: 14px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; -webkit-transform: translate(-50%) scaleX(0); -moz-transform: translate(-50%) scaleX(0); -ms-transform: translate(-50%) scaleX(0); -o-transform: translate(-50%) scaleX(0); transform: translate(-50%) scaleX(0); } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area .navbar .navbar-nav .nav-item a::before { display: none; } } @media (max-width: 767px) { .navbar-area .navbar .navbar-nav .nav-item a::before { display: none; } } .navbar-area .navbar .navbar-nav .nav-item.active > a, .navbar-area .navbar .navbar-nav .nav-item:hover > a { opacity: 1; color: #fff; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area .navbar .navbar-nav .nav-item.active > a, .navbar-area .navbar .navbar-nav .nav-item:hover > a { color: #121212; } } @media (max-width: 767px) { .navbar-area .navbar .navbar-nav .nav-item.active > a, .navbar-area .navbar .navbar-nav .nav-item:hover > a { color: #121212; } } .navbar-area .navbar .navbar-nav .nav-item.active > a::before, .navbar-area .navbar .navbar-nav .nav-item:hover > a::before { -webkit-transform: translate(-50%) scaleX(1); -moz-transform: translate(-50%) scaleX(1); -ms-transform: translate(-50%) scaleX(1); -o-transform: translate(-50%) scaleX(1); transform: translate(-50%) scaleX(1); } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area .navbar .navbar-btn { position: absolute; right: 70px; top: 7px; } } @media (max-width: 767px) { .navbar-area .navbar .navbar-btn { position: absolute; right: 60px; top: 7px; } } .navbar-area .navbar .navbar-btn li { display: inline-block; margin-right: 5px; } .navbar-area .navbar .navbar-btn li a { padding: 10px 16px; font-size: 16px; text-transform: uppercase; font-weight: 700; color: #fff; border: 2px solid; border-radius: 4px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .navbar-area .navbar .navbar-btn li a.light { border-color: #fff; } .navbar-area .navbar .navbar-btn li a.light:hover { background-color: rgba(255, 255, 255, 0.4); } .navbar-area .navbar .navbar-btn li a.solid { background-color: #fff; border-color: #fff; color: #0067f4; } .navbar-area .navbar .navbar-btn li a.solid:hover { background-color: transparent; color: #fff; } .navbar-area.sticky { background-color: #fff; z-index: 999; position: fixed; -webkit-box-shadow: 0px 10px 25px 0px rgba(18, 18, 18, 0.05); -moz-box-shadow: 0px 10px 25px 0px rgba(18, 18, 18, 0.05); box-shadow: 0px 10px 25px 0px rgba(18, 18, 18, 0.05); } .navbar-area.sticky .navbar .navbar-toggler .toggler-icon { background-color: #121212; } .navbar-area.sticky .navbar .navbar-nav .nav-item a { color: #121212; opacity: 0.7; } .navbar-area.sticky .navbar .navbar-nav .nav-item a::before { background: -webkit-linear-gradient(left, rgba(18, 18, 18, 0) 0%, #121212 100%); background: -o-linear-gradient(left, rgba(18, 18, 18, 0) 0%, #121212 100%); background: linear-gradient(to right, rgba(18, 18, 18, 0) 0%, #121212 100%); } .navbar-area.sticky .navbar .navbar-nav .nav-item.active, .navbar-area.sticky .navbar .navbar-nav .nav-item:hover { color: #121212; opacity: 1; } .navbar-area.sticky .navbar .navbar-btn li a.light { border-color: #0067f4; color: #0067f4; } .navbar-area.sticky .navbar .navbar-btn li a.solid { border-color: #0067f4; background-color: #0067f4; color: #fff; } /*=========================== 10.SLIDER css ===========================*/ .carousel-item { background-color: #0067f4; position: relative; } .carousel-item::before { position: absolute; content: ''; width: 33%; height: 100%; background: -webkit-linear-gradient(rgba(0, 103, 244, 0.3) 0%, rgba(43, 219, 220, 0.3) 100%); background: -o-linear-gradient(rgba(0, 103, 244, 0.3) 0%, rgba(43, 219, 220, 0.3) 100%); background: linear-gradient(rgba(0, 103, 244, 0.3) 0%, rgba(43, 219, 220, 0.3) 100%); top: 0; right: 15%; -webkit-transform: skewX(20deg); -moz-transform: skewX(20deg); -ms-transform: skewX(20deg); -o-transform: skewX(20deg); transform: skewX(20deg); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .carousel-item::before { width: 40%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .carousel-item::before { width: 60%; } } @media (max-width: 767px) { .carousel-item::before { width: 50%; right: 45%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .carousel-item::before { right: 25%; } } .carousel-item .slider-image-box { position: absolute; top: 0; right: 0; width: 50%; height: 100%; z-index: 9; } .carousel-item .slider-image-box .slider-image { max-width: 680px; width: 100%; } .slider-content { position: relative; z-index: 9; padding-top: 240px; padding-bottom: 200px; } @media (max-width: 767px) { .slider-content { padding-top: 190px; padding-bottom: 150px; } } .slider-content .title { font-size: 88px; line-height: 96px; color: #fff; font-weight: 700; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .slider-content .title { font-size: 58px; line-height: 80px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider-content .title { font-size: 72px; line-height: 90px; } } @media (max-width: 767px) { .slider-content .title { font-size: 34px; line-height: 45px; } } .slider-content .text { color: #fff; font-size: 16px; line-height: 24px; margin-top: 16px; } .slider-content .slider-btn { padding-top: 16px; } .slider-content .slider-btn li { display: inline-block; margin: 16px 8px 0; } @media (max-width: 767px) { .slider-content .slider-btn li { margin: 16px 3px 0; } } .slider-content .slider-btn li a.rounded-one { background-color: #fff; border-color: #fff; } .slider-content .slider-btn li a.rounded-one:hover { background-color: transparent; color: #fff; } .slider-content .slider-btn li a.rounded-two { border-color: #fff; } .slider-content .slider-btn li a.rounded-two:hover { background-color: #fff; color: #0067f4; } .carousel-indicators { margin-bottom: 50px; } .carousel-indicators li { display: block; width: 8px; height: 8px; background-color: rgba(255, 255, 255, 0.5); border-radius: 50px; border: 0; margin: 0px 2px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .carousel-indicators li { width: 13px; height: 13px; } } @media (max-width: 767px) { .carousel-indicators li { width: 13px; height: 13px; } } .carousel-indicators li.active { background-color: #fff; width: 16px; border-radius: 50px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .carousel-indicators li.active { width: 23px; } } @media (max-width: 767px) { .carousel-indicators li.active { width: 23px; } } .carousel .carousel-control-prev, .carousel .carousel-control-next { top: 50%; font-size: 32px; color: #fff; bottom: auto; left: 60px; right: auto; opacity: 1; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); z-index: 99; width: 48px; height: 48px; line-height: 48px; text-align: center; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 5px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .carousel .carousel-control-prev, .carousel .carousel-control-next { left: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .carousel .carousel-control-prev, .carousel .carousel-control-next { display: none; } } @media (max-width: 767px) { .carousel .carousel-control-prev, .carousel .carousel-control-next { display: none; } } .carousel .carousel-control-next { right: 60px; left: auto; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .carousel .carousel-control-next { right: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .carousel .carousel-control-next { right: 30px; } } @media (max-width: 767px) { .carousel .carousel-control-next { right: 30px; } } /*=========================== 17.FEATURES css ===========================*/ /*===== features TWO =====*/ .features-area { background-color: #f4f6f7; padding-top: 120px; padding-bottom: 130px; } .single-features { padding: 40px 20px 52px; background-color: #fff; } .single-features .features-title-icon .features-title a { font-size: 36px; line-height: 45px; color: #121212; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; font-weight: 400; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .single-features .features-title-icon .features-title a { font-size: 24px; line-height: 35px; } } @media (max-width: 767px) { .single-features .features-title-icon .features-title a { font-size: 24px; line-height: 35px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .single-features .features-title-icon .features-title a { font-size: 36px; line-height: 45px; } } .single-features .features-title-icon .features-title a:hover { color: #0067f4; } .single-features .features-title-icon .features-icon { position: relative; display: inline-block; } .single-features .features-title-icon .features-icon i { font-size: 88px; line-height: 70px; color: #0067f4; position: relative; z-index: 5; } .single-features .features-title-icon .features-icon .shape { position: absolute; top: 0; left: 0; } .single-features .features-content .text { font-size: 14px; line-height: 20px; color: #121212; margin-top: 16px; } .single-features .features-content .features-btn { color: #0067f4; font-size: 16px; font-weight: 700; margin-top: 29px; } /*=========================== 18.PORTFOLIO css ===========================*/ .portfolio-area { padding-top: 120px; padding-bottom: 130px; } .portfolio-menu ul li { font-size: 16px; font-weight: 700; color: #6c6c6c; line-height: 48px; padding: 0 30px; position: relative; z-index: 5; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; cursor: pointer; width: 100%; border-radius: 50px; overflow: hidden; margin-top: 4px; text-transform: uppercase; } .portfolio-menu ul li:last-child { margin-right: 0; } @media only screen and (min-width: 768px) and (max-width: 991px) { .portfolio-menu ul li { font-size: 14px; padding: 0 26px; } } @media (max-width: 767px) { .portfolio-menu ul li { font-size: 14px; padding: 0 22px; line-height: 42px; } } .portfolio-menu ul li::before { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%); z-index: -1; opacity: 0; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .portfolio-menu ul li:hover, .portfolio-menu ul li.active { color: #fff; } .portfolio-menu ul li:hover::before, .portfolio-menu ul li.active::before { opacity: 1; } .single-portfolio .portfolio-image { position: relative; overflow: hidden; } .single-portfolio .portfolio-image img { width: 100%; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .single-portfolio .portfolio-image .portfolio-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; -webkit-transition: all 0.5s ease-out 0s; -moz-transition: all 0.5s ease-out 0s; -ms-transition: all 0.5s ease-out 0s; -o-transition: all 0.5s ease-out 0s; transition: all 0.5s ease-out 0s; background-color: rgba(255, 255, 255, 0.8); -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); border-radius: 8px; } .single-portfolio .portfolio-image .portfolio-overlay .portfolio-content { padding: 16px; } .single-portfolio .portfolio-image .portfolio-overlay .portfolio-content .portfolio-icon { position: relative; display: inline-block; margin: 0 20px; } .single-portfolio .portfolio-image .portfolio-overlay .portfolio-content .portfolio-icon a { font-size: 48px; color: #0067f4; position: relative; z-index: 5; line-height: 50px; } .single-portfolio .portfolio-image .portfolio-overlay .portfolio-content .portfolio-icon .shape { position: absolute; top: 7px; left: 0; } .single-portfolio:hover .portfolio-overlay { opacity: 1; visibility: visible; } /*=========================== 16.PRICING css ===========================*/ .pricing-area { background-color: #f4f6f7; padding-top: 120px; padding-bottom: 130px; } /*===== PRICING STYLE NINE =====*/ .pricing-style { -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); padding: 24px 20px 38px; border-radius: 8px; position: relative; overflow: hidden; background: -webkit-linear-gradient(#2bdbdc 0%, #0067f4 100%); background: -o-linear-gradient(#2bdbdc 0%, #0067f4 100%); background: linear-gradient(#2bdbdc 0%, #0067f4 100%); } .pricing-style .pricing-icon img { width: 190px; } .pricing-style .pricing-header .sub-title { font-size: 20px; font-weight: 600; line-height: 25px; color: #fff; position: relative; margin-top: 24px; } .pricing-style .pricing-header .month { font-size: 20px; font-weight: 300; line-height: 25px; color: #fff; margin-top: 3px; } .pricing-style .pricing-header .month .price { font-size: 36px; font-weight: 600; line-height: 45px; color: #fff; margin-top: 8px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .pricing-style .pricing-header .month .price { font-size: 24px; margin-top: 32px; line-height: 30px; } } .pricing-style .pricing-list { margin-top: 24px; } .pricing-style .pricing-list ul li { font-size: 16px; line-height: 24px; color: #fff; margin-top: 16px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .pricing-style .pricing-list ul li { font-size: 14px; margin-top: 12px; } } @media (max-width: 767px) { .pricing-style .pricing-list ul li { font-size: 14px; margin-top: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .pricing-style .pricing-list ul li { font-size: 16px; margin-top: 16px; } } .pricing-style .pricing-list ul li i { color: #fff; margin-right: 8px; } .pricing-style .pricing-btn { margin-top: 31px; } .pricing-style .pricing-btn .main-btn { background-color: #fff; border-color: #fff; } .pricing-style .pricing-btn .main-btn:hover { color: #0067f4; -webkit-box-shadow: 0 3px 16px 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 3px 16px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 3px 16px 0 rgba(0, 0, 0, 0.16); } /*=========================== 15.ABOUT css ===========================*/ .about-area { padding-top: 80px; padding-bottom: 130px; position: relative; } .about-area .about-title .sub-title { font-size: 18px; font-weight: 400; color: #0067f4; text-transform: uppercase; } @media (max-width: 767px) { .about-area .about-title .sub-title { font-size: 16px; } } .about-area .about-title .title { font-size: 30px; padding-top: 10px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about-area .about-title .title { font-size: 26px; } } @media (max-width: 767px) { .about-area .about-title .title { font-size: 22px; } } .about-area .about-accordion .accordion .card { border: 0; background: none; } .about-area .about-accordion .accordion .card .card-header { padding: 0; border: 0; background: none; margin-top: 40px; } .about-area .about-accordion .accordion .card .card-header a { font-size: 18px; font-weight: 500; color: #000; display: block; position: relative; padding-right: 20px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about-area .about-accordion .accordion .card .card-header a { font-size: 16px; } } @media (max-width: 767px) { .about-area .about-accordion .accordion .card .card-header a { font-size: 16px; } } .about-area .about-accordion .accordion .card .card-header a::before { content: '\ea58'; font-family: 'LineIcons'; position: absolute; top: 50%; right: 0; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .about-area .about-accordion .accordion .card .card-header .collapsed::before { content: '\ea5c'; } .about-area .about-accordion .accordion .card .card-body { padding: 20px 20px 0; } .about-area .about-image img { width: 100%; } /*=========================== 26.TESTIMONIAL css ===========================*/ /*===== TESTIMONIAL STYLE THREE =====*/ .testimonial-area { padding-top: 80px; padding-bottom: 130px; background-color: #f4f6f7; } .testimonial-area .testimonial-left-content .sub-title { font-size: 18px; font-weight: 400; color: #0067f4; text-transform: uppercase; } @media (max-width: 767px) { .testimonial-area .testimonial-left-content .sub-title { font-size: 16px; } } .testimonial-area .testimonial-left-content .title { font-size: 32px; padding-top: 10px; color: #121212; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .testimonial-area .testimonial-left-content .title { font-size: 30px; } } @media (max-width: 767px) { .testimonial-area .testimonial-left-content .title { font-size: 24px; } } .testimonial-area .testimonial-left-content .testimonial-line { padding-top: 10px; } .testimonial-area .testimonial-left-content .testimonial-line li { height: 5px; background-color: #0067f4; opacity: 0.2; display: inline-block; border-radius: 50px; margin-right: 3px; } .testimonial-area .testimonial-left-content .testimonial-line li:nth-of-type(1) { width: 40px; } .testimonial-area .testimonial-left-content .testimonial-line li:nth-of-type(2) { width: 15px; } .testimonial-area .testimonial-left-content .testimonial-line li:nth-of-type(3) { width: 10px; } .testimonial-area .testimonial-left-content .testimonial-line li:nth-of-type(4) { width: 5px; } .testimonial-area .testimonial-left-content .text { padding-top: 15px; } .testimonial-area .testimonial-right-content { position: relative; background-color: #e9ecef; -webkit-box-shadow: 0px 30px 70px 0px rgba(0, 0, 0, 0.07); -moz-box-shadow: 0px 30px 70px 0px rgba(0, 0, 0, 0.07); box-shadow: 0px 30px 70px 0px rgba(0, 0, 0, 0.07); border-radius: 50px; max-width: 500px; padding-top: 50px; } .testimonial-area .testimonial-right-content .quota { position: absolute; top: 10px; left: 15px; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); opacity: 0.1; } .testimonial-area .testimonial-right-content .quota i { font-size: 130px; line-height: 95px; color: #0067f4; } .testimonial-area .testimonial-content-wrapper { position: relative; left: 70px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .testimonial-area .testimonial-content-wrapper { left: 0; } } @media (max-width: 767px) { .testimonial-area .testimonial-content-wrapper { left: 0; } } .single-testimonial { background-color: #fff; padding: 40px 30px 50px; border-radius: 50px; } .single-testimonial .testimonial-text .text { font-size: 24px; font-weight: 400; line-height: 36px; color: #121212; padding-bottom: 25px; } @media (max-width: 767px) { .single-testimonial .testimonial-text .text { font-size: 18px; line-height: 32px; } } .single-testimonial .testimonial-author { border-top: 1px solid #e9ecef; padding-top: 50px; } .single-testimonial .testimonial-author .author-info .author-image img { border-radius: 50%; width: 70px; } .single-testimonial .testimonial-author .author-info .author-name { padding-left: 30px; } .single-testimonial .testimonial-author .author-info .author-name .name { font-size: 16px; font-weight: 700; color: #121212; } .single-testimonial .testimonial-author .author-info .author-name .sub-title { font-size: 14px; color: #a4a4a4; margin-top: 5px; } @media (max-width: 767px) { .single-testimonial .testimonial-author .author-review { padding-left: 100px; padding-top: 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .single-testimonial .testimonial-author .author-review { padding-left: 0; padding-top: 15px; } } .single-testimonial .testimonial-author .author-review .star li { display: inline-block; font-size: 14px; color: #ffb400; } .single-testimonial .testimonial-author .author-review .review { font-size: 14px; color: #000; margin-top: 5px; } .testimonial-active .slick-arrow { position: absolute; bottom: 0; left: -635px; font-size: 22px; cursor: pointer; color: #a4a4a4; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .testimonial-active .slick-arrow { left: -480px; } } .testimonial-active .slick-arrow:hover { color: #000; } .testimonial-active .slick-arrow.next { left: -600px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .testimonial-active .slick-arrow.next { left: -445px; } } /*=========================== 13.TEAM css ===========================*/ /*===== TEAM STYLE ELEVEN =====*/ .team-style-eleven { position: relative; -webkit-box-shadow: 0px 8px 16px 0px rgba(72, 127, 255, 0.1); -moz-box-shadow: 0px 8px 16px 0px rgba(72, 127, 255, 0.1); box-shadow: 0px 8px 16px 0px rgba(72, 127, 255, 0.1); } .team-style-eleven .team-image img { width: 100%; } .team-style-eleven .team-content { position: absolute; bottom: 0; left: 0; width: 100%; background-color: #fff; padding-top: 25px; padding-bottom: 25px; z-index: 5; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media (max-width: 767px) { .team-style-eleven .team-content { padding-top: 15px; padding-bottom: 15px; } } .team-style-eleven .team-content::before { position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%); z-index: -1; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; opacity: 0; } .team-style-eleven .team-content .team-social { position: absolute; top: 0; left: 0; width: 100%; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; visibility: hidden; opacity: 0; } .team-style-eleven .team-content .team-social .social { background-color: #fff; display: inline-block; padding: 10px 20px 6px; border-radius: 50px; } .team-style-eleven .team-content .team-social .social li { display: inline-block; margin: 0 8px; } .team-style-eleven .team-content .team-social .social li a { font-size: 16px; color: #a4a4a4; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .team-style-eleven .team-content .team-social .social li a:hover { color: #0067f4; } .team-style-eleven .team-content .team-name a { color: #121212; font-size: 24px; font-weight: 600; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media (max-width: 767px) { .team-style-eleven .team-content .team-name a { font-size: 18px; } } .team-style-eleven .team-content .sub-title { font-size: 16px; color: #0067f4; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media (max-width: 767px) { .team-style-eleven .team-content .sub-title { font-size: 14px; } } .team-style-eleven:hover .team-content { padding-top: 50px; } @media (max-width: 767px) { .team-style-eleven:hover .team-content { padding-top: 35px; } } .team-style-eleven:hover .team-content::before { opacity: 1; } .team-style-eleven:hover .team-content .team-social { top: -20px; visibility: visible; opacity: 1; } .team-style-eleven:hover .team-content .team-name a { color: #fff; } .team-style-eleven:hover .team-content .sub-title { color: #fff; } /*=========================== 19.CONTACT css ===========================*/ .contact-area { padding-top: 120px; padding-bottom: 130px; background-color: #f4f6f7; } p.form-message.success, p.form-message.error { font-size: 16px; color: #333; background: #ddd; padding: 10px 15px; margin-top: 15px; margin-left: 15px; } p.form-message.success.form-message.error, p.form-message.error.form-message.error { color: #f00; } .contact-map iframe { width: 100%; height: 550px; } @media (max-width: 767px) { .contact-map iframe { height: 350px; } } .contact-info .single-contact-info .contact-info-icon i { width: 50px; height: 50px; line-height: 50px; text-align: center; font-size: 24px; color: #fff; border-radius: 50%; } .contact-info .single-contact-info .contact-info-content { padding-left: 20px; } .contact-info .single-contact-info .contact-info-content .text { color: #121212; } .contact-info .single-contact-info.contact-color-1 .contact-info-icon i { background-color: #121212; } .contact-info .single-contact-info.contact-color-2 .contact-info-icon i { background-color: #fc3832; } .contact-info .single-contact-info.contact-color-3 .contact-info-icon i { background-color: #005ad5; } .contact-wrapper .contact-title { font-size: 32px; font-weight: 700; color: #000; } @media (max-width: 767px) { .contact-wrapper .contact-title { font-size: 26px; } } .contact-wrapper .contact-title i { color: #121212; margin-right: 8px; } .contact-wrapper .contact-title span { font-weight: 400; } /*=========================== 21.FOOTER css ===========================*/ /*===== FOOTER FIVE =====*/ .footer-area { background-color: #f4f6f7; padding-top: 90px; padding-bottom: 120px; } .footer-area .social li { display: inline-block; margin: 0 5px; } .footer-area .social li a { font-size: 24px; color: #6c6c6c; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .footer-area .social li a:hover { color: #0067f4; } .footer-area .footer-support { padding-top: 21px; } .footer-area .footer-support span { font-size: 16px; line-height: 24px; color: #121212; font-weight: 600; margin-top: 9px; display: block; } @media (max-width: 767px) { .footer-area .footer-support span { display: block; } } .footer-area .footer-app-store { padding-top: 27px; } .footer-area .footer-app-store ul li { display: inline-block; margin-right: 8px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .footer-area .footer-app-store ul li { margin-right: 6px; } } .footer-area .footer-app-store ul li:last-child { margin-right: 0; } @media (max-width: 767px) { .footer-area .footer-app-store ul li { width: 120px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .footer-area .footer-app-store ul li { width: auto; } } .footer-area .copyright .text { color: #121212; } .footer-area.footer-dark { background-color: #121212; } .footer-area.footer-dark .social li a { color: #fff; } .footer-area.footer-dark .footer-support { padding-top: 21px; } .footer-area.footer-dark .footer-support span { color: #fff; } .footer-area.footer-dark .footer-app-store { padding-top: 27px; } .footer-area.footer-dark .footer-app-store ul li { color: #fff; } .footer-area.footer-dark .copyright .text { color: #fff; } /*===== BACK TO TOP =====*/ .back-to-top { font-size: 20px; color: #fff; position: fixed; right: 20px; bottom: 20px; width: 45px; height: 45px; line-height: 45px; border-radius: 5px; background-color: #0067f4; text-align: center; z-index: 99; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; display: none; } .back-to-top:hover { color: #fff; background-color: #0067f4; } /*# sourceMappingURL=style.css.map */ /*=========================== 01.COMMON css ===========================*/ @import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800"); body { font-family: "Poppins", sans-serif; font-weight: normal; font-style: normal; color: #121212; } * { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } img { max-width: 100%; } a:focus, input:focus, textarea:focus, button:focus { text-decoration: none; outline: none; } a:focus, a:hover { text-decoration: none; } i, span, a { display: inline-block; } h1, h2, h3, h4, h5, h6 { font-family: "Poppins", sans-serif; font-weight: 600; color: #121212; margin: 0px; } h1 { font-size: 48px; } h2 { font-size: 36px; } h3 { font-size: 28px; } h4 { font-size: 22px; } h5 { font-size: 18px; } h6 { font-size: 16px; } ul, ol { margin: 0px; padding: 0px; list-style-type: none; } p { font-size: 16px; font-weight: 400; line-height: 24px; color: #121212; margin: 0px; } .bg_cover { background-position: center center; background-size: cover; background-repeat: no-repeat; width: 100%; height: 100%; } /*===== All Slick Slide Outline Style =====*/ .slick-slide { outline: 0; } /*=========================== 02.PAGE BANNER css ===========================*/ .page-banner { background-color: #005ad5; padding-top: 30px; padding-bottom: 30px; } .page-banner .page-banner-content .sub-title { font-size: 38px; font-weight: 400; color: #fff; opacity: 0.6; line-height: 40px; text-transform: uppercase; } @media only screen and (min-width: 768px) and (max-width: 991px) { .page-banner .page-banner-content .sub-title { font-size: 38px; line-height: 45px; } } @media (max-width: 767px) { .page-banner .page-banner-content .sub-title { font-size: 20px; line-height: 25px; } } .page-banner .page-banner-content .page-title { font-size: 60px; line-height: 60px; color: #fff; text-transform: uppercase; margin-top: 16px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .page-banner .page-banner-content .page-title { font-size: 56px; line-height: 65px; } } @media (max-width: 767px) { .page-banner .page-banner-content .page-title { font-size: 40px; line-height: 55px; } } /*=========================== 03.TYPOGRAPHY css ===========================*/ .heading { margin-top: 20px; } .heading .heading-one { font-size: 44px; font-weight: 600; line-height: 55px; } @media (max-width: 767px) { .heading .heading-one { font-size: 36px; } } .heading .heading-two { font-size: 36px; font-weight: 600; line-height: 45px; } @media (max-width: 767px) { .heading .heading-two { font-size: 28px; } } .heading .heading-three { font-size: 28px; font-weight: 600; line-height: 35px; } @media (max-width: 767px) { .heading .heading-three { font-size: 24px; } } .heading .heading-fore { font-size: 24px; font-weight: 600; line-height: 30px; } @media (max-width: 767px) { .heading .heading-fore { font-size: 20px; } } .heading .heading-five { font-size: 20px; font-weight: 600; line-height: 25px; } @media (max-width: 767px) { .heading .heading-five { font-size: 16px; } } .heading .heading-six { font-size: 14px; font-weight: 600; line-height: 17.5px; } .heading .info { margin-top: 5px; } .paragraph { margin-top: 20px; } .display { margin-top: 20px; } .display .display-fore { font-size: 52px; font-weight: 400; line-height: 65px; } @media (max-width: 767px) { .display .display-fore { font-size: 38px; } } .display .display-three { font-size: 64px; font-weight: 400; line-height: 65px; } @media (max-width: 767px) { .display .display-three { font-size: 46px; } } .display .display-two { font-size: 76px; font-weight: 400; line-height: 95px; } @media (max-width: 767px) { .display .display-two { font-size: 52px; } } .display .display-one { font-size: 88px; font-weight: 400; line-height: 110px; } @media (max-width: 767px) { .display .display-one { font-size: 64px; } } .display .info { margin-top: 5px; } .typography-paragraph { margin-top: 50px; } .typography-paragraph .paragraph-title { font-size: 24px; font-weight: 600; line-height: 30px; margin-bottom: 20px; } .typography-paragraph .paragraph-text-one { font-size: 18px; line-height: 26px; } .typography-paragraph .paragraph-text-tow { font-size: 16px; line-height: 24px; } .typography-paragraph .paragraph-text-three { font-size: 14px; line-height: 20px; } .typography-paragraph .paragraph-text-fore { font-size: 12px; line-height: 18px; } .text-color.style-one p { margin-top: 10px; padding: 9px 0; } .text-color.style-one .default { color: #121212; } .text-color.style-one .primary { color: #0067f4; } .text-color.style-one .success { color: #4da422; } .text-color.style-one .info { color: #00b8d8; } .text-color.style-one .warning { color: #ffb400; } .text-color.style-one .danger { color: #fc3832; } .text-color.style-two p { margin-top: 10px; padding: 9px 15px; } .text-color.style-two .default { color: #121212; background-color: #f4f6f7; border-radius: 5px; } .text-color.style-two .primary { color: #0067f4; background-color: #deebfd; border-radius: 5px; } .text-color.style-two .success { color: #4da422; background-color: #e8f3e2; border-radius: 5px; } .text-color.style-two .info { color: #00b8d8; background-color: #def5f9; border-radius: 5px; } .text-color.style-two .warning { color: #ffb400; background-color: #fff5de; border-radius: 5px; } .text-color.style-two .danger { color: #fc3832; background-color: #fee5e4; border-radius: 5px; } .text-color.style-three p { margin-top: 10px; padding: 9px 15px; } .text-color.style-three .default { color: #fff; background-color: #121212; border-radius: 5px; } .text-color.style-three .primary { color: #fff; background-color: #0067f4; border-radius: 5px; } .text-color.style-three .success { color: #fff; background-color: #4da422; border-radius: 5px; } .text-color.style-three .info { color: #fff; background-color: #00b8d8; border-radius: 5px; } .text-color.style-three .warning { color: #fff; background-color: #ffb400; border-radius: 5px; } .text-color.style-three .danger { color: #fff; background-color: #fc3832; border-radius: 5px; } .text-color.style-fore p { margin-top: 10px; padding: 9px 15px; } .text-color.style-fore .default { color: #fff; background: #a4a4a4; background: -webkit-linear-gradient(left, #a4a4a4 0%, #121212 100%); background: -o-linear-gradient(left, #a4a4a4 0%, #121212 100%); background: linear-gradient(to right, #a4a4a4 0%, #121212 100%); border-radius: 5px; } .text-color.style-fore .primary { color: #fff; background: #0067f4; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%); border-radius: 5px; } .text-color.style-fore .success { color: #fff; background: #4da422; background: -webkit-linear-gradient(left, #4da422 0%, #69e02e 100%); background: -o-linear-gradient(left, #4da422 0%, #69e02e 100%); background: linear-gradient(to right, #4da422 0%, #69e02e 100%); border-radius: 5px; } .text-color.style-fore .info { color: #fff; background: #00b8d8; background: -webkit-linear-gradient(left, #00b8d8 0%, #32fbfc 100%); background: -o-linear-gradient(left, #00b8d8 0%, #32fbfc 100%); background: linear-gradient(to right, #00b8d8 0%, #32fbfc 100%); border-radius: 5px; } .text-color.style-fore .warning { color: #fff; background: #ffb400; background: -webkit-linear-gradient(left, #ffb400 0%, #f7e500 100%); background: -o-linear-gradient(left, #ffb400 0%, #f7e500 100%); background: linear-gradient(to right, #ffb400 0%, #f7e500 100%); border-radius: 5px; } .text-color.style-fore .danger { color: #fff; background: #fc3832; background: -webkit-linear-gradient(left, #fc3832 0%, #dc312b 100%); background: -o-linear-gradient(left, #fc3832 0%, #dc312b 100%); background: linear-gradient(to right, #fc3832 0%, #dc312b 100%); border-radius: 5px; } .blockquotes-title .title { font-size: 24px; line-height: 30px; font-weight: 600; } .blockquotes-content.style-one { padding: 20px 40px 20px 0; position: relative; } .blockquotes-content.style-one::before { width: 100%; height: 4px; position: absolute; content: ''; background-color: #f4f6f7; top: 0; left: 0; border-radius: 5px; } .blockquotes-content.style-one::after { width: 100%; height: 4px; position: absolute; content: ''; background-color: #f4f6f7; bottom: 0; left: 0; border-radius: 5px; } .blockquotes-content.style-one .text { font-size: 16px; font-style: italic; margin-bottom: 15px; } .blockquotes-content.style-one .content-title { font-weight: 20; font-weight: 600; line-height: 25px; } .blockquotes-content.style-two { padding: 20px 25px; background: #9166fe; background: #9166fe; background: -webkit-linear-gradient(left, rgba(145, 102, 254, 0.0788690476) 0%, rgba(201, 122, 237, 0.0760679272) 100%); background: -o-linear-gradient(left, rgba(145, 102, 254, 0.0788690476) 0%, rgba(201, 122, 237, 0.0760679272) 100%); background: linear-gradient(to right, rgba(145, 102, 254, 0.0788690476) 0%, rgba(201, 122, 237, 0.0760679272) 100%); border-radius: 5px; position: relative; } .blockquotes-content.style-two::before { width: 4px; height: 100%; position: absolute; content: ''; background: #9166fe; background: -webkit-linear-gradient(left, #9166fe 0%, #c97aed 100%); background: -o-linear-gradient(left, #9166fe 0%, #c97aed 100%); background: linear-gradient(to right, #9166fe 0%, #c97aed 100%); top: 0; right: 0; border-radius: 5px; } .blockquotes-content.style-two .text { font-size: 16px; font-style: italic; margin-bottom: 10px; } .blockquotes-content.style-two .content-title { font-weight: 20; font-weight: 600; line-height: 25px; } .blockquotes-content.style-three { padding: 20px 25px; background: #9166fe; background: #9166fe; background: -webkit-linear-gradient(left, rgba(145, 102, 254, 0.0788690476) 0%, rgba(201, 122, 237, 0.0760679272) 100%); background: -o-linear-gradient(left, rgba(145, 102, 254, 0.0788690476) 0%, rgba(201, 122, 237, 0.0760679272) 100%); background: linear-gradient(to right, rgba(145, 102, 254, 0.0788690476) 0%, rgba(201, 122, 237, 0.0760679272) 100%); border-radius: 5px; position: relative; } .blockquotes-content.style-three::before { width: 100%; height: 4px; position: absolute; content: ''; background: #9166fe; background: -webkit-linear-gradient(left, #9166fe 0%, #c97aed 100%); background: -o-linear-gradient(left, #9166fe 0%, #c97aed 100%); background: linear-gradient(to right, #9166fe 0%, #c97aed 100%); top: 0; left: 0; border-radius: 5px; } .blockquotes-content.style-three .text { font-size: 16px; font-style: italic; margin-bottom: 10px; } .blockquotes-content.style-three .content-title { font-weight: 20; font-weight: 600; line-height: 25px; } .blockquotes-content.style-fore { padding: 20px 25px; background: #9166fe; background: #9166fe; background: -webkit-linear-gradient(left, rgba(145, 102, 254, 0.0788690476) 0%, rgba(201, 122, 237, 0.0760679272) 100%); background: -o-linear-gradient(left, rgba(145, 102, 254, 0.0788690476) 0%, rgba(201, 122, 237, 0.0760679272) 100%); background: linear-gradient(to right, rgba(145, 102, 254, 0.0788690476) 0%, rgba(201, 122, 237, 0.0760679272) 100%); border-radius: 5px; position: relative; } .blockquotes-content.style-fore::before { width: 100%; height: 4px; position: absolute; content: ''; background: #9166fe; background: -webkit-linear-gradient(left, #9166fe 0%, #c97aed 100%); background: -o-linear-gradient(left, #9166fe 0%, #c97aed 100%); background: linear-gradient(to right, #9166fe 0%, #c97aed 100%); top: 0; left: 0; border-radius: 5px; } .blockquotes-content.style-fore::after { width: 100%; height: 4px; position: absolute; content: ''; background: #9166fe; background: -webkit-linear-gradient(left, #9166fe 0%, #c97aed 100%); background: -o-linear-gradient(left, #9166fe 0%, #c97aed 100%); background: linear-gradient(to right, #9166fe 0%, #c97aed 100%); bottom: 0; left: 0; border-radius: 5px; } .blockquotes-content.style-fore .text { font-size: 16px; font-style: italic; margin-bottom: 10px; } .blockquotes-content.style-fore .content-title { font-weight: 20; font-weight: 600; line-height: 25px; } .blockquotes-content.style-five { padding: 20px 25px; background-color: rgba(203, 206, 209, 0.08); position: relative; } .blockquotes-content.style-five::before { width: 100%; height: 4px; position: absolute; content: ''; background-color: #cbced1; top: 0; left: 0; border-radius: 5px; } .blockquotes-content.style-five .text { font-size: 16px; font-style: italic; margin-bottom: 10px; } .blockquotes-content.style-five .content-title { font-weight: 20; font-weight: 600; line-height: 25px; } .blockquotes-content.style-six { padding: 20px 25px; background: #9166fe; background: #9166fe; background: -webkit-linear-gradient(left, rgba(145, 102, 254, 0.0788690476) 0%, rgba(201, 122, 237, 0.0760679272) 100%); background: -o-linear-gradient(left, rgba(145, 102, 254, 0.0788690476) 0%, rgba(201, 122, 237, 0.0760679272) 100%); background: linear-gradient(to right, rgba(145, 102, 254, 0.0788690476) 0%, rgba(201, 122, 237, 0.0760679272) 100%); border-radius: 5px; position: relative; } .blockquotes-content.style-six::before { width: 4px; height: 100%; position: absolute; content: ''; background: #9166fe; background: -webkit-linear-gradient(left, #9166fe 0%, #c97aed 100%); background: -o-linear-gradient(left, #9166fe 0%, #c97aed 100%); background: linear-gradient(to right, #9166fe 0%, #c97aed 100%); top: 0; left: 0; border-radius: 5px; } .blockquotes-content.style-six .text { font-size: 16px; font-style: italic; margin-bottom: 10px; } .blockquotes-content.style-six .content-title { font-weight: 20; font-weight: 600; line-height: 25px; } /*=========================== 04.TABLE css ===========================*/ .table-title { font-size: 36px; font-weight: 600; line-height: 45px; color: #6c6c6c; } @media (max-width: 767px) { .table-title { font-size: 24px; line-height: 35px; } } .table-style .table { border-bottom: 2px solid #cbced1; } .table-style .table .table-thead tr th { border: 0; font-size: 16px; line-height: 24px; color: #fff; font-weight: 700; padding: 13px 16px; min-width: 170px; } @media (max-width: 767px) { .table-style .table .table-thead tr th { font-size: 14px; padding: 10px 13px; min-width: 140px; } } .table-style .table .table-tbody tr td { border: 0; font-size: 16px; line-height: 24px; color: #121212; font-weight: 400; padding: 13px 16px; } @media (max-width: 767px) { .table-style .table .table-tbody tr td { font-size: 14px; padding: 10px 13px; } } .table-style.style-one .table.striped .table-tbody tr:nth-of-type(2n+2) { background-color: #f4f6f7; } .table-style.style-one .table .table-thead tr { background: #0067f4; background: -webkit-linear-gradient(#0067f4 0%, #2bdbdc 100%); background: -o-linear-gradient(#0067f4 0%, #2bdbdc 100%); background: linear-gradient(#0067f4 0%, #2bdbdc 100%); } .table-style.style-two .table.striped .table-tbody tr:nth-of-type(2n+2) { background-color: #deebfd; } .table-style.style-two .table .table-thead tr { background-color: #0067f4; } .table-style.style-two .table .table-thead tr th { border-left: 1px solid #cbced1; border-right: 1px solid #cbced1; } .table-style.style-two .table .table-tbody tr td { border-left: 1px solid #cbced1; border-right: 1px solid #cbced1; } .table-style.style-three .table.striped .table-tbody tr:nth-of-type(2n+2) { background-color: #f4f6f7; } .table-style.style-three .table .table-thead tr { background-color: #deebfd; } .table-style.style-three .table .table-thead tr th { color: #0067f4; border-left: 1px solid #cbced1; border-right: 1px solid #cbced1; } .table-style.style-three .table .table-tbody tr td { border-left: 1px solid #cbced1; border-right: 1px solid #cbced1; } .table-style.style-four .table .table-thead tr { border-top: 2px solid #6c6c6c; border-bottom: 2px solid #6c6c6c; } .table-style.style-four .table .table-thead tr th { color: #121212; } .table-style.style-four .table .table-tbody tr { border-bottom: 1px solid #cbced1; } .table-style.style-five .table.striped .table-tbody tr:nth-of-type(2n+2) { background-color: #f4f6f7; } .table-style.style-five .table .table-thead tr { background: #f45e7a; background: -webkit-linear-gradient(#f45e7a 0%, #ffa97c 100%); background: -o-linear-gradient(#f45e7a 0%, #ffa97c 100%); background: linear-gradient(#f45e7a 0%, #ffa97c 100%); } .table-style.style-six .table.striped .table-tbody tr:nth-of-type(2n+2) { background-color: #f4f6f7; } .table-style.style-six .table .table-thead tr { background: #9166fe; background: -webkit-linear-gradient(#9166fe 0%, #c97aed 100%); background: -o-linear-gradient(#9166fe 0%, #c97aed 100%); background: linear-gradient(#9166fe 0%, #c97aed 100%); } /*=========================== 05.PROGRESS BARS css ===========================*/ .progress-title { font-size: 36px; font-weight: 600; line-height: 45px; color: #6c6c6c; } @media (max-width: 767px) { .progress-title { font-size: 24px; line-height: 35px; } } .color-one { background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%); } .color-two { background: -webkit-linear-gradient(left, #4da422 0%, #69e02e 100%); background: -o-linear-gradient(left, #4da422 0%, #69e02e 100%); background: linear-gradient(to right, #4da422 0%, #69e02e 100%); } .color-three { background: -webkit-linear-gradient(left, #00b8d8 0%, #32fbfc 100%); background: -o-linear-gradient(left, #00b8d8 0%, #32fbfc 100%); background: linear-gradient(to right, #00b8d8 0%, #32fbfc 100%); } .color-four { background: -webkit-linear-gradient(left, #ffb400 0%, #f7e500 100%); background: -o-linear-gradient(left, #ffb400 0%, #f7e500 100%); background: linear-gradient(to right, #ffb400 0%, #f7e500 100%); } .color-five { background: -webkit-linear-gradient(left, #fc3832 0%, #dc312b 100%); background: -o-linear-gradient(left, #fc3832 0%, #dc312b 100%); background: linear-gradient(to right, #fc3832 0%, #dc312b 100%); } .progress-style .single-progress-bar { margin-top: 30px; } .progress-style .single-progress-bar .progress-outter { width: 100%; background-color: #e9ecef; height: 32px; border-radius: 50px; position: relative; } .progress-style .single-progress-bar .progress-outter .progress-content { position: absolute; top: 0; left: 0; height: 32px; border-radius: 50px; width: 0; -webkit-transition: all 2s ease-out 0s; -moz-transition: all 2s ease-out 0s; -ms-transition: all 2s ease-out 0s; -o-transition: all 2s ease-out 0s; transition: all 2s ease-out 0s; } .progress-style.style-two .single-progress-bar .progress-text { color: #fff; padding: 0 25px; position: absolute; top: 0; left: 0; line-height: 32px; } .progress-style.style-three .single-progress-bar { margin-top: 68px; } .progress-style.style-three .single-progress-bar .progress-outter { height: 16px; } .progress-style.style-three .single-progress-bar .progress-outter .progress-content { height: 16px; } .progress-style.style-four .single-progress-bar { margin-top: 35px; } .progress-style.style-four .single-progress-bar .progress-title-holder { margin-bottom: 8px; } .progress-style.style-four .single-progress-bar .progress-title-holder .holder-title p { font-size: 16px; line-height: 24px; color: #121212; } .progress-style.style-four .single-progress-bar .progress-title-holder .holder-percent span { font-size: 20px; font-weight: 600; line-height: 24px; color: #121212; } .progress-style.style-four .single-progress-bar .progress-outter { height: 16px; } .progress-style.style-four .single-progress-bar .progress-outter .progress-content { height: 16px; } .progress-style.style-five .single-progress-bar { margin-top: 70px; } .progress-style.style-five .single-progress-bar .progress-title-holder { margin-top: 8px; } .progress-style.style-five .single-progress-bar .progress-title-holder .holder-percent span { font-size: 20px; font-weight: 600; line-height: 24px; color: #121212; } .progress-style.style-five .single-progress-bar .progress-outter { height: 16px; } .progress-style.style-five .single-progress-bar .progress-outter .progress-content { height: 16px; } .progress-style.style-five .single-progress-bar .progress-outter .progress-content .holder-title { width: 120px; text-align: center; height: 30px; border-radius: 50px; position: absolute; top: -45px; right: -60px; } .progress-style.style-five .single-progress-bar .progress-outter .progress-content .holder-title p { font-size: 16px; line-height: 30px; color: #fff; } /*===== COUNTER STYLE =====*/ .counter-style .counter-one { -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.16); -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.16); box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.16); padding-top: 55px; padding-bottom: 40px; position: relative; border-radius: 5px; overflow: hidden; text-align: center; } .counter-style .counter-one::before { position: absolute; content: ''; width: 100%; height: 4px; top: 0; left: 0; background: #0067f4; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%); } .counter-style .counter-one .counter-icon { margin-bottom: 5px; } .counter-style .counter-one .counter-icon i { font-size: 80px; line-height: 60px; color: #0067f4; } .counter-style .counter-one .counter-content .count { font-size: 44px; font-weight: 600; line-height: 55px; color: #121212; margin-bottom: 4px; } .counter-style .counter-one .counter-content .text { font-size: 24px; color: #6c6c6c; } .counter-style .counter-two { -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.16); -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.16); box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.16); padding: 23px; position: relative; border-radius: 5px; overflow: hidden; } .counter-style .counter-two::before { position: absolute; content: ''; width: 100%; height: 4px; top: 0; left: 0; background: #fc3832; background: -webkit-linear-gradient(left, #fc3832 0%, #dc312b 100%); background: -o-linear-gradient(left, #fc3832 0%, #dc312b 100%); background: linear-gradient(to right, #fc3832 0%, #dc312b 100%); } .counter-style .counter-two .counter-icon { margin-bottom: 5px; } .counter-style .counter-two .counter-icon i { font-size: 66px; line-height: 60px; color: #fc3832; } .counter-style .counter-two .counter-content { padding-left: 11px; } .counter-style .counter-two .counter-content .count { font-size: 36px; font-weight: 600; line-height: 45px; color: #121212; margin-bottom: 4px; } .counter-style .counter-two .counter-content .text { font-size: 16px; color: #6c6c6c; } .counter-style .counter-three { -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.16); -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.16); box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.16); padding: 23px; position: relative; border-radius: 5px; overflow: hidden; background: #4da422; background: -webkit-linear-gradient(left, #4da422 0%, #69e02e 100%); background: -o-linear-gradient(left, #4da422 0%, #69e02e 100%); background: linear-gradient(to right, #4da422 0%, #69e02e 100%); } .counter-style .counter-three .counter-icon { margin-bottom: 5px; } .counter-style .counter-three .counter-icon i { font-size: 66px; line-height: 60px; color: #fff; } .counter-style .counter-three .counter-content { padding-left: 11px; } .counter-style .counter-three .counter-content .count { font-size: 36px; font-weight: 600; line-height: 45px; color: #fff; margin-bottom: 4px; } .counter-style .counter-three .counter-content .text { font-size: 16px; color: #fff; } .counter-style .counter-four { -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.16); -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.16); box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.16); padding: 23px; position: relative; border-radius: 5px; overflow: hidden; } .counter-style .counter-four::before { position: absolute; content: ''; width: 4px; height: 100%; top: 0; left: 0; background: -webkit-linear-gradient(#2bdbdc 0%, #0067f4 100%); background: -o-linear-gradient(#2bdbdc 0%, #0067f4 100%); background: linear-gradient(#2bdbdc 0%, #0067f4 100%); } .counter-style .counter-four .counter-icon { margin-bottom: 5px; } .counter-style .counter-four .counter-icon i { font-size: 66px; line-height: 60px; color: #0067f4; } .counter-style .counter-four .counter-content { padding-left: 11px; } .counter-style .counter-four .counter-content .count { font-size: 36px; font-weight: 600; line-height: 45px; color: #121212; margin-bottom: 4px; } .counter-style .counter-four .counter-content .text { font-size: 16px; color: #6c6c6c; } .counter-style .counter-five { -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.16); -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.16); box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.16); padding: 23px; position: relative; border-radius: 5px; overflow: hidden; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%); } .counter-style .counter-five .counter-icon { margin-bottom: 5px; } .counter-style .counter-five .counter-icon i { font-size: 66px; line-height: 60px; color: #fff; } .counter-style .counter-five .counter-content { padding-left: 11px; } .counter-style .counter-five .counter-content .count { font-size: 36px; font-weight: 600; line-height: 45px; color: #fff; margin-bottom: 4px; } .counter-style .counter-five .counter-content .text { font-size: 16px; color: #fff; } .counter-style .counter-six { -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.16); -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.16); box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.16); padding-top: 55px; padding-bottom: 40px; position: relative; border-radius: 5px; overflow: hidden; text-align: center; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%); } .counter-style .counter-six .counter-icon { margin-bottom: 5px; } .counter-style .counter-six .counter-icon i { font-size: 80px; line-height: 60px; color: #fff; } .counter-style .counter-six .counter-content .count { font-size: 44px; font-weight: 600; line-height: 55px; color: #fff; margin-bottom: 4px; } .counter-style .counter-six .counter-content .text { font-size: 24px; color: #fff; } .single-counter .counter-shape { width: 55px; } .single-counter .counter-shape .shape-1, .single-counter .counter-shape .shape-2 { width: 14px; height: 70px; position: relative; -webkit-transform: rotate(25deg); -moz-transform: rotate(25deg); -ms-transform: rotate(25deg); -o-transform: rotate(25deg); transform: rotate(25deg); left: 12px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .single-counter .counter-shape .shape-1, .single-counter .counter-shape .shape-2 { width: 10px; } } .single-counter .counter-shape .shape-1::before, .single-counter .counter-shape .shape-1::after, .single-counter .counter-shape .shape-2::before, .single-counter .counter-shape .shape-2::after { position: absolute; content: ''; width: 0; height: 0; top: -1px; right: -1px; border-top: 12px solid #fff; border-left: 16px solid transparent; } .single-counter .counter-shape .shape-1::after, .single-counter .counter-shape .shape-2::after { border-top: 0; border-bottom: 6px solid #fff; top: auto; bottom: -1px; } .single-counter .counter-shape .shape-1 { opacity: 0.5; left: 15px; bottom: 1px; } .single-counter .counter-content { padding-left: 10px; } .single-counter .counter-content .counter-count { font-size: 48px; font-weight: 700; line-height: 50px; color: #121212; } @media only screen and (min-width: 576px) and (max-width: 767px) { .single-counter .counter-content .counter-count { font-size: 32px; } } .single-counter .counter-content .text { font-weight: 500; color: #a4a4a4; } .single-counter.counter-color-1 .counter-shape .shape-1, .single-counter.counter-color-1 .counter-shape .shape-2 { background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%); } .single-counter.counter-color-2 .counter-shape .shape-1, .single-counter.counter-color-2 .counter-shape .shape-2 { background: -webkit-linear-gradient(left, #4da422 0%, #69e02e 100%); background: -o-linear-gradient(left, #4da422 0%, #69e02e 100%); background: linear-gradient(to right, #4da422 0%, #69e02e 100%); } .single-counter.counter-color-3 .counter-shape .shape-1, .single-counter.counter-color-3 .counter-shape .shape-2 { background: -webkit-linear-gradient(left, #00b8d8 0%, #32fbfc 100%); background: -o-linear-gradient(left, #00b8d8 0%, #32fbfc 100%); background: linear-gradient(to right, #00b8d8 0%, #32fbfc 100%); } .single-counter.counter-color-4 .counter-shape .shape-1, .single-counter.counter-color-4 .counter-shape .shape-2 { background: -webkit-linear-gradient(left, #ffb400 0%, #f7e500 100%); background: -o-linear-gradient(left, #ffb400 0%, #f7e500 100%); background: linear-gradient(to right, #ffb400 0%, #f7e500 100%); } /*===== COUNTER STYLE =====*/ .circle-progress .circles-text { font-size: 24px !important; font-weight: 700; color: #000; } .circle-progress .circle-progress-content { padding-left: 30px; } .circle-progress .circle-progress-content .circle-progress-title { font-size: 18px; line-height: 30px; } /*=========================== 06.FORM ELEMENTS css ===========================*/ .form-elements-title { font-size: 36px; font-weight: 600; line-height: 45px; color: #6c6c6c; } @media (max-width: 767px) { .form-elements-title { font-size: 24px; line-height: 35px; } } .form-group { margin-bottom: 0; } .form-input .help-block { margin-top: 2px; } .form-input .help-block .list-unstyled li { font-size: 12px; line-height: 16px; color: #fc3832; } .form-input label { font-size: 12px; line-height: 18px; color: #6c6c6c; margin-bottom: 8px; display: inline-block; } .form-input .input-items { position: relative; } .form-input .input-items input, .form-input .input-items textarea { width: 100%; height: 44px; border: 2px solid; padding-left: 44px; padding-right: 12px; position: relative; font-size: 16px; } .form-input .input-items textarea { padding-top: 8px; height: 130px; resize: none; } .form-input .input-items i { position: absolute; top: 11px; left: 13px; font-size: 20px; z-index: 9; } .form-input .input-items.default input, .form-input .input-items.default textarea { border-color: #a4a4a4; color: #6c6c6c; } .form-input .input-items.default input:focus, .form-input .input-items.default textarea:focus { border-color: #0067f4; } .form-input .input-items.default input::placeholder, .form-input .input-items.default textarea::placeholder { color: #6c6c6c; opacity: 1; } .form-input .input-items.default input::-moz-placeholder, .form-input .input-items.default textarea::-moz-placeholder { color: #6c6c6c; opacity: 1; } .form-input .input-items.default input::-moz-placeholder, .form-input .input-items.default textarea::-moz-placeholder { color: #6c6c6c; opacity: 1; } .form-input .input-items.default input::-webkit-input-placeholder, .form-input .input-items.default textarea::-webkit-input-placeholder { color: #6c6c6c; opacity: 1; } .form-input .input-items.default i { color: #6c6c6c; } .form-input .input-items.active input, .form-input .input-items.active textarea { border-color: #0067f4; color: #121212; } .form-input .input-items.active input::placeholder, .form-input .input-items.active textarea::placeholder { color: #121212; opacity: 1; } .form-input .input-items.active input::-moz-placeholder, .form-input .input-items.active textarea::-moz-placeholder { color: #121212; opacity: 1; } .form-input .input-items.active input::-moz-placeholder, .form-input .input-items.active textarea::-moz-placeholder { color: #121212; opacity: 1; } .form-input .input-items.active input::-webkit-input-placeholder, .form-input .input-items.active textarea::-webkit-input-placeholder { color: #121212; opacity: 1; } .form-input .input-items.active i { color: #0067f4; } .form-input .input-items.error input, .form-input .input-items.error textarea { border-color: #fc3832; color: #fc3832; } .form-input .input-items.error input::placeholder, .form-input .input-items.error textarea::placeholder { color: #fc3832; opacity: 1; } .form-input .input-items.error input::-moz-placeholder, .form-input .input-items.error textarea::-moz-placeholder { color: #fc3832; opacity: 1; } .form-input .input-items.error input::-moz-placeholder, .form-input .input-items.error textarea::-moz-placeholder { color: #fc3832; opacity: 1; } .form-input .input-items.error input::-webkit-input-placeholder, .form-input .input-items.error textarea::-webkit-input-placeholder { color: #fc3832; opacity: 1; } .form-input .input-items.error i { color: #fc3832; } .form-input .input-items.success input, .form-input .input-items.success textarea { border-color: #4da422; color: #4da422; } .form-input .input-items.success input::placeholder, .form-input .input-items.success textarea::placeholder { color: #4da422; opacity: 1; } .form-input .input-items.success input::-moz-placeholder, .form-input .input-items.success textarea::-moz-placeholder { color: #4da422; opacity: 1; } .form-input .input-items.success input::-moz-placeholder, .form-input .input-items.success textarea::-moz-placeholder { color: #4da422; opacity: 1; } .form-input .input-items.success input::-webkit-input-placeholder, .form-input .input-items.success textarea::-webkit-input-placeholder { color: #4da422; opacity: 1; } .form-input .input-items.success i { color: #4da422; } .form-input .input-items.disabled input, .form-input .input-items.disabled textarea { border-color: #a4a4a4; color: #6c6c6c; background: none; } .form-input .input-items.disabled input::placeholder, .form-input .input-items.disabled textarea::placeholder { color: #6c6c6c; opacity: 1; } .form-input .input-items.disabled input::-moz-placeholder, .form-input .input-items.disabled textarea::-moz-placeholder { color: #6c6c6c; opacity: 1; } .form-input .input-items.disabled input::-moz-placeholder, .form-input .input-items.disabled textarea::-moz-placeholder { color: #6c6c6c; opacity: 1; } .form-input .input-items.disabled input::-webkit-input-placeholder, .form-input .input-items.disabled textarea::-webkit-input-placeholder { color: #6c6c6c; opacity: 1; } .form-input .input-items.disabled i { color: #6c6c6c; } .form-style-two .form-input .input-items input, .form-style-two .form-input .input-items textarea { border-radius: 5px; padding-left: 12px; padding-right: 44px; } .form-style-two .form-input .input-items i { left: auto; right: 13px; } .form-style-three .form-input { text-align: center; } .form-style-three .form-input .input-items input, .form-style-three .form-input .input-items textarea { border-radius: 50px; text-align: center; } .form-style-four .form-input label { padding-left: 44px; margin-bottom: 0; } .form-style-four .form-input .input-items input, .form-style-four .form-input .input-items textarea { border-top: 0; border-left: 0; border-right: 0; } .form-style-five .form-input { position: relative; } .form-style-five .form-input label { position: absolute; top: -10px; left: 10px; background-color: #fff; z-index: 5; padding: 0 5px; } .form-style-five .form-input .input-items input, .form-style-five .form-input .input-items textarea { border-radius: 5px; } /*=========================== 07.LIST STYLES css ===========================*/ .list-title { font-size: 24px; font-weight: 600; line-height: 30px; color: #6c6c6c; } @media (max-width: 767px) { .list-title { font-size: 20px; line-height: 30px; } } .list-style .list-style-one ul li { font-size: 16px; line-height: 24px; margin-top: 13px; color: #121212; } .list-style .list-style-one ul li span { font-size: 16px; font-weight: 600; color: #121212; line-height: 25px; margin-right: 13px; } .list-style .list-style-two ul li { font-size: 16px; line-height: 24px; margin-top: 13px; color: #121212; } .list-style .list-style-two ul li i { font-size: 16px; font-weight: 600; color: #0067f4; line-height: 25px; margin-right: 7px; } .list-style .list-style-three ul li { font-size: 16px; line-height: 24px; margin-top: 13px; color: #121212; } .list-style .list-style-three ul li i { font-size: 16px; font-weight: 600; color: #00b8d8; line-height: 25px; margin-right: 6px; } .list-style .list-style-four ul li { font-size: 16px; line-height: 24px; margin-top: 13px; color: #121212; } .list-style .list-style-four ul li i { font-size: 16px; font-weight: 600; color: #ffb400; line-height: 25px; margin-right: 6px; } .list-style .list-style-five ul li { font-size: 16px; line-height: 24px; margin-top: 13px; color: #121212; } .list-style .list-style-five ul li i { font-size: 16px; font-weight: 600; color: #4da422; line-height: 25px; margin-right: 7px; } .list-style .list-style-six ul li { font-size: 16px; line-height: 24px; margin-top: 13px; color: #121212; } .list-style .list-style-six ul li i { font-size: 16px; font-weight: 600; color: #fc3832; line-height: 25px; margin-right: 7px; } .list-style .list-style-seven ul li { font-size: 16px; line-height: 24px; margin-top: 13px; color: #121212; } .list-style .list-style-seven ul li i { font-size: 16px; font-weight: 600; color: #4da422; line-height: 25px; margin-right: 7px; } .list-style .list-style-eight ul li { font-size: 16px; line-height: 24px; margin-top: 13px; color: #121212; } .list-style .list-style-eight ul li i { font-size: 16px; font-weight: 600; color: #00b8d8; line-height: 25px; margin-right: 7px; } .list-style .list-style-nine ul li { font-size: 16px; line-height: 24px; margin-top: 13px; color: #121212; } .list-style .list-style-nine ul li i { font-size: 16px; font-weight: 600; color: #0067f4; line-height: 25px; margin-right: 7px; } .list-style .list-style-ten ul li { font-size: 16px; line-height: 24px; margin-top: 13px; color: #121212; } .list-style .list-style-ten ul li i { font-size: 16px; font-weight: 600; color: #0067f4; line-height: 25px; margin-right: 6px; } .list-style .list-style-eleven ul li { font-size: 16px; line-height: 24px; margin-top: 13px; color: #121212; } .list-style .list-style-eleven ul li i { font-size: 16px; font-weight: 600; color: #0067f4; line-height: 25px; margin-right: 6px; } .list-style .list-style-twenty ul li { font-size: 16px; line-height: 24px; margin-top: 13px; color: #121212; } .list-style .list-style-twenty ul li span { width: 16px; height: 16px; border-radius: 50%; background-color: #121212; margin-right: 6px; } /*=========================== 08.TABS AND ACCORDIONS css ===========================*/ .tabs-title { font-size: 36px; font-weight: 600; line-height: 45px; color: #6c6c6c; } @media (max-width: 767px) { .tabs-title { font-size: 24px; line-height: 35px; } } .tebs-one { border: 1px solid #cbced1; } .tebs-one .nav { border-bottom: 1px solid #cbced1; } @media (max-width: 767px) { .tebs-one .nav { display: block; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tebs-one .nav { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; } } .tebs-one .nav .nav-item a { font-size: 16px; line-height: 24px; color: #a4a4a4; font-weight: 700; padding: 13px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; display: block; } .tebs-one .nav .nav-item a.active { color: #fff; background: #0067f4; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%); } .tebs-one .tab-content .tab-text { padding: 15px; } .tebs-one .tab-content .tab-text .text { font-size: 14px; color: #121212; line-height: 20px; } .tebs-two { border: 1px solid #cbced1; } @media (max-width: 767px) { .tebs-two .nav { display: block; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tebs-two .nav { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; } } .tebs-two .nav .nav-item a { font-size: 16px; line-height: 24px; color: #a4a4a4; font-weight: 700; padding: 13px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; display: block; border-bottom: 1px solid #cbced1; position: relative; } .tebs-two .nav .nav-item a.active { color: #0067f4; border: 1px solid #cbced1; border-bottom: 0; border-top: 0; } @media (max-width: 767px) { .tebs-two .nav .nav-item a.active { border: 1px solid #cbced1; border-top: 0; border-left: 0; border-right: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tebs-two .nav .nav-item a.active { border: 1px solid #cbced1; border-bottom: 0; border-top: 0; } } .tebs-two .nav .nav-item a.active::before { position: absolute; content: ''; top: 0; width: 100%; height: 4px; left: 0; background: #0067f4; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%); } .tebs-two .nav .nav-item:first-child a.active { border-left: 0; } .tebs-two .nav .nav-item:last-child a.active { border-right: 0; } .tebs-two .tab-content .tab-text { padding: 15px; } .tebs-two .tab-content .tab-text .text { font-size: 14px; color: #121212; line-height: 20px; } @media (max-width: 767px) { .tebs-three .nav { display: block; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tebs-three .nav { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; } } .tebs-three .nav .nav-item a { font-size: 16px; line-height: 24px; color: #a4a4a4; font-weight: 700; padding: 13px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; display: block; position: relative; } .tebs-three .nav .nav-item a i { margin-right: 5px; font-size: 18px; } .tebs-three .nav .nav-item a::before { position: absolute; content: ''; background-color: #a4a4a4; width: 100%; height: 4px; left: 0; bottom: 0; } .tebs-three .nav .nav-item a.active { color: #0067f4; } .tebs-three .nav .nav-item a.active::before { background: #0067f4; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%); } .tebs-three .tab-content .tab-text { padding: 15px; } .tebs-three .tab-content .tab-text .text { font-size: 14px; color: #121212; line-height: 20px; } @media (max-width: 767px) { .tebs-four .nav { display: block; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tebs-four .nav { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; } } .tebs-four .nav .nav-item a { font-size: 16px; line-height: 24px; color: #a4a4a4; font-weight: 700; padding: 13px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; display: block; position: relative; } @media (max-width: 767px) { .tebs-four .nav .nav-item a { margin-top: -4px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tebs-four .nav .nav-item a { margin-top: 0; } } .tebs-four .nav .nav-item a i { margin-right: 5px; font-size: 18px; } .tebs-four .nav .nav-item a::before { position: absolute; content: ''; background-color: #a4a4a4; width: 100%; height: 4px; left: 0; bottom: 0; } .tebs-four .nav .nav-item a.active { color: #fff; background: #0067f4; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%); } .tebs-four .nav .nav-item a.active::before { background: #0067f4; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%); } .tebs-four .tab-content .tab-text { padding: 15px; } .tebs-four .tab-content .tab-text .text { font-size: 14px; color: #121212; line-height: 20px; } .tebs-four .nav .nav-item a { font-size: 16px; line-height: 24px; color: #a4a4a4; font-weight: 700; padding: 13px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; display: block; position: relative; } .tebs-four .nav .nav-item a i { margin-right: 5px; font-size: 18px; } .tebs-four .nav .nav-item a::before { position: absolute; content: ''; background-color: #a4a4a4; width: 100%; height: 4px; left: 0; bottom: 0; } .tebs-four .nav .nav-item a.active { color: #fff; background: #0067f4; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%); } .tebs-four .nav .nav-item a.active::before { background: #0067f4; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%); } .tebs-four .tab-content .tab-text { padding: 15px; } .tebs-four .tab-content .tab-text .text { font-size: 14px; color: #121212; line-height: 20px; } .tebs-five { border: 1px solid #cbced1; } .tebs-five .nav { border-right: 1px solid #cbced1; height: 100%; } .tebs-five .nav a { font-size: 16px; line-height: 24px; color: #a4a4a4; font-weight: 700; padding: 13px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; display: block; position: relative; text-align: center; } .tebs-five .nav a i { margin-right: 5px; font-size: 18px; } .tebs-five .nav a.active { color: #fff; background: #0067f4; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%); } .tebs-five .tab-content .tab-text { padding: 15px; } .tebs-five .tab-content .tab-text .text { font-size: 14px; color: #121212; line-height: 20px; } .tebs-six .nav { height: 100%; position: relative; } .tebs-six .nav::before { position: absolute; content: ''; width: 4px; height: 100%; background-color: #cbced1; top: 0; right: 0; } .tebs-six .nav a { font-size: 16px; line-height: 24px; color: #a4a4a4; font-weight: 700; padding: 13px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; display: block; position: relative; text-align: center; } .tebs-six .nav a i { margin-right: 5px; font-size: 18px; } .tebs-six .nav a.active { color: #0067f4; } .tebs-six .nav a.active::before { position: absolute; content: ''; width: 4px; height: 100%; background: #2bdbdc; background: -webkit-linear-gradient(#2bdbdc 0%, #0067f4 100%); background: -o-linear-gradient(#2bdbdc 0%, #0067f4 100%); background: linear-gradient(#2bdbdc 0%, #0067f4 100%); top: 0; right: 0; } .tebs-six .tab-content .tab-text { padding: 15px; } .tebs-six .tab-content .tab-text .text { font-size: 14px; color: #121212; line-height: 20px; } .accordion-style-one .accordion .card { margin-top: 8px; border: 1px solid #cbced1 !important; border-radius: 0; } .accordion-style-one .accordion .card .card-header { padding: 0; background: none; } .accordion-style-one .accordion .card .card-header a { display: block; font-size: 16px; font-weight: 700; line-height: 24px; position: relative; color: #0067f4; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; border: 1px solid #0067f4; margin: -1px; border-radius: 0; padding: 13px 16px; z-index: 5; } .accordion-style-one .accordion .card .card-header a::before { position: absolute; content: "\ea45"; font-family: lineicons !important; right: 16px; top: 15px; font-size: 16px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .accordion-style-one .accordion .card .card-header a.collapsed { color: #121212; border-color: #cbced1; } .accordion-style-one .accordion .card .card-header a.collapsed::before { -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } .accordion-style-one .accordion .card .card-body { padding: 16px; } .accordion-style-one .accordion .card .card-body .text { font-size: 14px; color: #121212; line-height: 24px; } .accordion-style-two .accordion .card { margin-top: 8px; border: 1px solid #cbced1 !important; border-radius: 0; } .accordion-style-two .accordion .card .card-header { padding: 0; background: none; } .accordion-style-two .accordion .card .card-header a { display: block; font-size: 16px; font-weight: 700; line-height: 24px; position: relative; color: #fff; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; border: 1px solid #0067f4; margin: -1px; border-radius: 0; padding: 13px 16px; z-index: 5; background-color: #0067f4; } .accordion-style-two .accordion .card .card-header a::before { position: absolute; content: "\ea45"; font-family: lineicons !important; right: 16px; top: 15px; font-size: 16px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .accordion-style-two .accordion .card .card-header a.collapsed { color: #121212; border-color: #cbced1; background-color: transparent; } .accordion-style-two .accordion .card .card-header a.collapsed::before { -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } .accordion-style-two .accordion .card .card-body { padding: 16px; } .accordion-style-two .accordion .card .card-body .text { font-size: 14px; color: #121212; line-height: 24px; } .accordion-style-three .accordion .card { border-radius: 0; border: 0; overflow: visible; } .accordion-style-three .accordion .card .card-header { padding: 0; background: none; } .accordion-style-three .accordion .card .card-header a { display: block; font-size: 16px; font-weight: 700; line-height: 24px; position: relative; color: #fff; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; border: 2px solid linear-gradient(90deg, #0067f4 0%, #2bdbdc 100%); border-radius: 0; padding: 13px 16px; z-index: 5; border-left: 0; border-right: 0; background: #0067f4; background: linear-gradient(90deg, #0067f4 0%, #2bdbdc 100%); margin-top: -2px; } .accordion-style-three .accordion .card .card-header a::before { position: absolute; content: "\ea45"; font-family: lineicons !important; right: 16px; top: 15px; font-size: 16px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .accordion-style-three .accordion .card .card-header a.collapsed { color: #121212; border: 2px solid #e9ecef; background: transparent; border-left: 0; border-right: 0; } .accordion-style-three .accordion .card .card-header a.collapsed::before { -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } .accordion-style-three .accordion .card .card-body { padding: 16px; } .accordion-style-three .accordion .card .card-body .text { font-size: 14px; color: #121212; line-height: 24px; } .accordion-style-four .accordion .card { margin-top: 8px; border-radius: 0; border: 0; } .accordion-style-four .accordion .card .card-header { padding: 0; background: none; } .accordion-style-four .accordion .card .card-header a { display: block; font-size: 16px; font-weight: 700; line-height: 24px; position: relative; color: #fff; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; margin: -1px; border-radius: 0; padding: 13px 16px; z-index: 5; border: 0; background: #0067f4; background: linear-gradient(90deg, #0067f4 0%, #2bdbdc 100%); } .accordion-style-four .accordion .card .card-header a::before { position: absolute; content: "\ea45"; font-family: lineicons !important; right: 16px; top: 15px; font-size: 16px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .accordion-style-four .accordion .card .card-header a.collapsed { color: #121212; border-color: #cbced1; background: #f4f6f7; } .accordion-style-four .accordion .card .card-header a.collapsed::before { -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } .accordion-style-four .accordion .card .card-body { padding: 16px; } .accordion-style-four .accordion .card .card-body .text { font-size: 14px; color: #121212; line-height: 24px; } /*=========================== 09.NAVBAR css ===========================*/ /*===== NAVBAR ONE =====*/ .navbar-area.navbar-one { background: #0067f4; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%); padding: 10px 0; } .navbar-area.navbar-one .navbar { position: relative; padding: 0; } .navbar-area.navbar-one .navbar .navbar-toggler .toggler-icon { width: 30px; height: 2px; background-color: #fff; margin: 5px 0; display: block; position: relative; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .navbar-area.navbar-one .navbar .navbar-toggler.active .toggler-icon:nth-of-type(1) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); top: 7px; } .navbar-area.navbar-one .navbar .navbar-toggler.active .toggler-icon:nth-of-type(2) { opacity: 0; } .navbar-area.navbar-one .navbar .navbar-toggler.active .toggler-icon:nth-of-type(3) { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); top: -7px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-one .navbar .navbar-collapse { position: absolute; top: 116%; left: 0; width: 100%; background-color: #0067f4; z-index: 8; padding: 10px 0; } } @media (max-width: 767px) { .navbar-area.navbar-one .navbar .navbar-collapse { position: absolute; top: 116%; left: 0; width: 100%; background-color: #0067f4; z-index: 8; padding: 10px 0; } } .navbar-area.navbar-one .navbar .navbar-nav .nav-item { margin: 0 16px; position: relative; } .navbar-area.navbar-one .navbar .navbar-nav .nav-item a { font-size: 16px; line-height: 24px; font-weight: 700; padding: 26px 0; color: #fff; text-transform: uppercase; position: relative; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-one .navbar .navbar-nav .nav-item a { padding: 10px 0; display: block; } } @media (max-width: 767px) { .navbar-area.navbar-one .navbar .navbar-nav .nav-item a { padding: 10px 0; display: block; } } .navbar-area.navbar-one .navbar .navbar-nav .nav-item a.active::before, .navbar-area.navbar-one .navbar .navbar-nav .nav-item a.active::after { opacity: 1; } .navbar-area.navbar-one .navbar .navbar-nav .nav-item a::before, .navbar-area.navbar-one .navbar .navbar-nav .nav-item a::after { position: absolute; content: ''; width: 8px; height: 4px; background-color: #2bdbdc; left: 50%; margin: 0 2px; bottom: 14px; opacity: 0; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-one .navbar .navbar-nav .nav-item a::before, .navbar-area.navbar-one .navbar .navbar-nav .nav-item a::after { display: none; } } @media (max-width: 767px) { .navbar-area.navbar-one .navbar .navbar-nav .nav-item a::before, .navbar-area.navbar-one .navbar .navbar-nav .nav-item a::after { display: none; } } .navbar-area.navbar-one .navbar .navbar-nav .nav-item a::after { left: auto; right: 50%; } .navbar-area.navbar-one .navbar .navbar-nav .nav-item:hover > a::before, .navbar-area.navbar-one .navbar .navbar-nav .nav-item:hover > a::after { opacity: 1; } .navbar-area.navbar-one .navbar .navbar-nav .nav-item .sub-menu { position: absolute; right: 0; top: 100%; width: 260px; background-color: #005ad5; border-radius: 5px; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; z-index: 99; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-one .navbar .navbar-nav .nav-item .sub-menu { position: relative !important; width: 100% !important; left: 0 !important; top: auto !important; opacity: 1 !important; visibility: visible !important; display: none; right: auto; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); -webkit-transition: all none ease-out 0s; -moz-transition: all none ease-out 0s; -ms-transition: all none ease-out 0s; -o-transition: all none ease-out 0s; transition: all none ease-out 0s; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; text-align: left; border-top: 0; } } @media (max-width: 767px) { .navbar-area.navbar-one .navbar .navbar-nav .nav-item .sub-menu { position: relative !important; width: 100% !important; left: 0 !important; top: auto !important; opacity: 1 !important; visibility: visible !important; display: none; right: auto; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); -webkit-transition: all none ease-out 0s; -moz-transition: all none ease-out 0s; -ms-transition: all none ease-out 0s; -o-transition: all none ease-out 0s; transition: all none ease-out 0s; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; text-align: left; border-top: 0; } } .navbar-area.navbar-one .navbar .navbar-nav .nav-item .sub-menu li { position: relative; } .navbar-area.navbar-one .navbar .navbar-nav .nav-item .sub-menu li a { display: block; padding: 8px 24px; position: relative; color: #fff; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; z-index: 5; } .navbar-area.navbar-one .navbar .navbar-nav .nav-item .sub-menu li a i { float: right; font-size: 14px; margin-top: 5px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-one .navbar .navbar-nav .nav-item .sub-menu li a i { display: none; } } @media (max-width: 767px) { .navbar-area.navbar-one .navbar .navbar-nav .nav-item .sub-menu li a i { display: none; } } .navbar-area.navbar-one .navbar .navbar-nav .nav-item .sub-menu li a .sub-nav-toggler i { display: inline-block; } .navbar-area.navbar-one .navbar .navbar-nav .nav-item .sub-menu li a::before { position: absolute; content: ''; top: 0; left: 0; width: 5px; height: 100%; border-radius: 5px; background-color: #fff; opacity: 0; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; margin: 0; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-one .navbar .navbar-nav .nav-item .sub-menu li a::before { display: block; } } @media (max-width: 767px) { .navbar-area.navbar-one .navbar .navbar-nav .nav-item .sub-menu li a::before { display: block; } } .navbar-area.navbar-one .navbar .navbar-nav .nav-item .sub-menu li a::after { position: absolute; content: ''; top: 0; left: -2px; width: 100%; height: 100%; border-radius: 5px; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%); opacity: 0; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; z-index: -1; } .navbar-area.navbar-one .navbar .navbar-nav .nav-item .sub-menu li .sub-menu { right: auto; left: 100%; top: 0; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-one .navbar .navbar-nav .nav-item .sub-menu li .sub-menu { padding-left: 30px; } } @media (max-width: 767px) { .navbar-area.navbar-one .navbar .navbar-nav .nav-item .sub-menu li .sub-menu { padding-left: 30px; } } .navbar-area.navbar-one .navbar .navbar-nav .nav-item .sub-menu li:hover .sub-menu { opacity: 1; visibility: visible; } .navbar-area.navbar-one .navbar .navbar-nav .nav-item .sub-menu li:hover > a::after { opacity: 1; } .navbar-area.navbar-one .navbar .navbar-nav .nav-item .sub-menu li:hover > a::before { opacity: 1; } .navbar-area.navbar-one .navbar .navbar-nav .nav-item:hover .sub-menu { opacity: 1; visibility: visible; } .navbar-area.navbar-one .navbar .navbar-nav .nav-item .sub-nav-toggler { display: none; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-one .navbar .navbar-nav .nav-item .sub-nav-toggler { display: inline-block; position: absolute; top: 0; right: 0; padding: 10px 14px; font-size: 16px; background: none; border: 0; color: #fff; } } @media (max-width: 767px) { .navbar-area.navbar-one .navbar .navbar-nav .nav-item .sub-nav-toggler { display: inline-block; position: absolute; top: 0; right: 0; padding: 10px 14px; font-size: 16px; background: none; border: 0; color: #fff; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-one .navbar .navbar-btn { position: absolute; right: 70px; top: 7px; } } @media (max-width: 767px) { .navbar-area.navbar-one .navbar .navbar-btn { position: absolute; right: 60px; top: 7px; } } .navbar-area.navbar-one .navbar .navbar-btn ul li { display: inline-block; margin-right: 5px; } .navbar-area.navbar-one .navbar .navbar-btn ul li a { padding: 10px 16px; font-size: 16px; text-transform: uppercase; font-weight: 700; color: #fff; border: 2px solid; border-radius: 4px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .navbar-area.navbar-one .navbar .navbar-btn ul li a.light { border-color: #fff; } .navbar-area.navbar-one .navbar .navbar-btn ul li a.light:hover { background-color: rgba(255, 255, 255, 0.4); } .navbar-area.navbar-one .navbar .navbar-btn ul li a.solid { background-color: #fff; border-color: #fff; color: #0067f4; } .navbar-area.navbar-one .navbar .navbar-btn ul li a.solid:hover { background-color: transparent; color: #fff; } /*===== NAVBAR TWO =====*/ .navbar-area.navbar-two { background-color: #f4f6f7; padding: 10px 0; } .navbar-area.navbar-two .navbar { position: relative; padding: 0; } .navbar-area.navbar-two .navbar .navbar-toggler .toggler-icon { width: 30px; height: 2px; background-color: #121212; margin: 5px 0; display: block; position: relative; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .navbar-area.navbar-two .navbar .navbar-toggler.active .toggler-icon:nth-of-type(1) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); top: 7px; } .navbar-area.navbar-two .navbar .navbar-toggler.active .toggler-icon:nth-of-type(2) { opacity: 0; } .navbar-area.navbar-two .navbar .navbar-toggler.active .toggler-icon:nth-of-type(3) { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); top: -7px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-two .navbar .navbar-collapse { position: absolute; top: 116%; left: 0; width: 100%; background-color: #f4f6f7; z-index: 8; padding: 10px 0; } } @media (max-width: 767px) { .navbar-area.navbar-two .navbar .navbar-collapse { position: absolute; top: 116%; left: 0; width: 100%; background-color: #f4f6f7; z-index: 8; padding: 10px 0; } } .navbar-area.navbar-two .navbar .navbar-nav .nav-item { margin: 0 16px; position: relative; } .navbar-area.navbar-two .navbar .navbar-nav .nav-item a { font-size: 16px; line-height: 24px; font-weight: 700; padding: 26px 0; color: #121212; text-transform: uppercase; position: relative; opacity: 0.7; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-two .navbar .navbar-nav .nav-item a { padding: 10px 0; display: block; } } @media (max-width: 767px) { .navbar-area.navbar-two .navbar .navbar-nav .nav-item a { padding: 10px 0; display: block; } } .navbar-area.navbar-two .navbar .navbar-nav .nav-item a::before { position: absolute; content: ''; width: 32px; height: 4px; background: #0067f4; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%); left: 50%; margin: 0 2px; bottom: 14px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; -webkit-transform: translate(-50%) scaleX(0); -moz-transform: translate(-50%) scaleX(0); -ms-transform: translate(-50%) scaleX(0); -o-transform: translate(-50%) scaleX(0); transform: translate(-50%) scaleX(0); } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-two .navbar .navbar-nav .nav-item a::before { display: none; } } @media (max-width: 767px) { .navbar-area.navbar-two .navbar .navbar-nav .nav-item a::before { display: none; } } .navbar-area.navbar-two .navbar .navbar-nav .nav-item a.active { opacity: 1; color: #121212; } .navbar-area.navbar-two .navbar .navbar-nav .nav-item a.active::before { -webkit-transform: translate(-50%) scaleX(1); -moz-transform: translate(-50%) scaleX(1); -ms-transform: translate(-50%) scaleX(1); -o-transform: translate(-50%) scaleX(1); transform: translate(-50%) scaleX(1); } .navbar-area.navbar-two .navbar .navbar-nav .nav-item:hover > a { opacity: 1; color: #121212; } .navbar-area.navbar-two .navbar .navbar-nav .nav-item:hover > a::before { -webkit-transform: translate(-50%) scaleX(1); -moz-transform: translate(-50%) scaleX(1); -ms-transform: translate(-50%) scaleX(1); -o-transform: translate(-50%) scaleX(1); transform: translate(-50%) scaleX(1); } .navbar-area.navbar-two .navbar .navbar-nav .nav-item .sub-menu { position: absolute; right: 0; top: 100%; width: 260px; background-color: #fff; border-radius: 5px; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; -webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.16); } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-two .navbar .navbar-nav .nav-item .sub-menu { position: relative !important; width: 100% !important; left: 0 !important; top: auto !important; opacity: 1 !important; visibility: visible !important; display: none; right: auto; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); -webkit-transition: all none ease-out 0s; -moz-transition: all none ease-out 0s; -ms-transition: all none ease-out 0s; -o-transition: all none ease-out 0s; transition: all none ease-out 0s; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; text-align: left; border-top: 0; } } @media (max-width: 767px) { .navbar-area.navbar-two .navbar .navbar-nav .nav-item .sub-menu { position: relative !important; width: 100% !important; left: 0 !important; top: auto !important; opacity: 1 !important; visibility: visible !important; display: none; right: auto; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); -webkit-transition: all none ease-out 0s; -moz-transition: all none ease-out 0s; -ms-transition: all none ease-out 0s; -o-transition: all none ease-out 0s; transition: all none ease-out 0s; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; text-align: left; border-top: 0; } } .navbar-area.navbar-two .navbar .navbar-nav .nav-item .sub-menu li { position: relative; } .navbar-area.navbar-two .navbar .navbar-nav .nav-item .sub-menu li a { display: block; padding: 8px 24px; position: relative; color: #121212; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .navbar-area.navbar-two .navbar .navbar-nav .nav-item .sub-menu li a i { float: right; font-size: 14px; margin-top: 5px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-two .navbar .navbar-nav .nav-item .sub-menu li a i { display: none; } } @media (max-width: 767px) { .navbar-area.navbar-two .navbar .navbar-nav .nav-item .sub-menu li a i { display: none; } } .navbar-area.navbar-two .navbar .navbar-nav .nav-item .sub-menu li a .sub-nav-toggler i { display: inline-block; } .navbar-area.navbar-two .navbar .navbar-nav .nav-item .sub-menu li a::before { position: absolute; content: ''; top: 0; left: 0; width: 5px; height: 100%; border-radius: 5px; background: #0067f4; background: -webkit-linear-gradient(270deg, #0067f4 0%, #2bdbdc 100%); background: -o-linear-gradient(270deg, #0067f4 0%, #2bdbdc 100%); background: linear-gradient(3600deg, #0067f4 0%, #2bdbdc 100%); opacity: 0; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; margin: 0; -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -ms-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1); } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-two .navbar .navbar-nav .nav-item .sub-menu li a::before { display: block; } } @media (max-width: 767px) { .navbar-area.navbar-two .navbar .navbar-nav .nav-item .sub-menu li a::before { display: block; } } .navbar-area.navbar-two .navbar .navbar-nav .nav-item .sub-menu li .sub-menu { right: auto; left: 100%; top: 0; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-two .navbar .navbar-nav .nav-item .sub-menu li .sub-menu { padding-left: 30px; } } @media (max-width: 767px) { .navbar-area.navbar-two .navbar .navbar-nav .nav-item .sub-menu li .sub-menu { padding-left: 30px; } } .navbar-area.navbar-two .navbar .navbar-nav .nav-item .sub-menu li:hover .sub-menu { opacity: 1; visibility: visible; } .navbar-area.navbar-two .navbar .navbar-nav .nav-item .sub-menu li:hover > a { background-color: #f4f6f7; color: #0067f4; opacity: 1; } .navbar-area.navbar-two .navbar .navbar-nav .nav-item .sub-menu li:hover > a::before { opacity: 1; } .navbar-area.navbar-two .navbar .navbar-nav .nav-item:hover .sub-menu { opacity: 1; visibility: visible; } .navbar-area.navbar-two .navbar .navbar-nav .nav-item .sub-nav-toggler { display: none; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-two .navbar .navbar-nav .nav-item .sub-nav-toggler { display: inline-block; position: absolute; top: 0; right: 0; padding: 10px 14px; font-size: 16px; background: none; border: 0; color: #121212; } } @media (max-width: 767px) { .navbar-area.navbar-two .navbar .navbar-nav .nav-item .sub-nav-toggler { display: inline-block; position: absolute; top: 0; right: 0; padding: 10px 14px; font-size: 16px; background: none; border: 0; color: #121212; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-two .navbar .navbar-btn { position: absolute; right: 70px; top: 7px; } } @media (max-width: 767px) { .navbar-area.navbar-two .navbar .navbar-btn { position: absolute; right: 60px; top: 7px; } } .navbar-area.navbar-two .navbar .navbar-btn ul li { display: inline-block; margin-right: 5px; } .navbar-area.navbar-two .navbar .navbar-btn ul li a { padding: 10px 16px; font-size: 16px; text-transform: uppercase; font-weight: 700; color: #fff; border: 2px solid; border-radius: 4px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .navbar-area.navbar-two .navbar .navbar-btn ul li a.light { border-image-source: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); border-image-source: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); border-image-source: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%); border-image-slice: 1; color: #0067f4; position: relative; z-index: 5; } .navbar-area.navbar-two .navbar .navbar-btn ul li a.light::before { position: absolute; content: ''; width: 100%; height: 100%; background-image: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background-image: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background-image: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%); left: 0; top: 0; z-index: -1; opacity: 0; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .navbar-area.navbar-two .navbar .navbar-btn ul li a.light:hover { color: #fff; } .navbar-area.navbar-two .navbar .navbar-btn ul li a.light:hover::before { opacity: 1; } .navbar-area.navbar-two .navbar .navbar-btn ul li a.solid { color: #fff; position: relative; border-image-source: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); border-image-source: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); border-image-source: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%); border-image-slice: 1; z-index: 5; } .navbar-area.navbar-two .navbar .navbar-btn ul li a.solid::before { position: absolute; content: ''; width: 100%; height: 100%; background-image: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background-image: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background-image: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%); left: 0; top: 0; z-index: -1; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; opacity: 1; } .navbar-area.navbar-two .navbar .navbar-btn ul li a.solid:hover { color: #0067f4; } .navbar-area.navbar-two .navbar .navbar-btn ul li a.solid:hover::before { opacity: 0; } /*===== NAVBAR THREE =====*/ .navbar-area.navbar-three { background: #0067f4; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%); padding: 10px 0; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-three { padding: 10px 0; } } @media (max-width: 767px) { .navbar-area.navbar-three { padding: 10px 0; } } .navbar-area.navbar-three .navbar { position: relative; padding: 0; } .navbar-area.navbar-three .navbar .navbar-toggler .toggler-icon { width: 30px; height: 2px; background-color: #fff; margin: 5px 0; display: block; position: relative; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .navbar-area.navbar-three .navbar .navbar-toggler.active .toggler-icon:nth-of-type(1) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); top: 7px; } .navbar-area.navbar-three .navbar .navbar-toggler.active .toggler-icon:nth-of-type(2) { opacity: 0; } .navbar-area.navbar-three .navbar .navbar-toggler.active .toggler-icon:nth-of-type(3) { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); top: -7px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-three .navbar .navbar-collapse { position: absolute; top: 116%; left: 0; width: 100%; background-color: #0067f4; z-index: 8; padding: 10px 16px; } } @media (max-width: 767px) { .navbar-area.navbar-three .navbar .navbar-collapse { position: absolute; top: 116%; left: 0; width: 100%; background-color: #0067f4; z-index: 8; padding: 10px 16px; } } .navbar-area.navbar-three .navbar .navbar-nav { margin-right: 24px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-three .navbar .navbar-nav { margin-right: 0; } } @media (max-width: 767px) { .navbar-area.navbar-three .navbar .navbar-nav { margin-right: 0; } } .navbar-area.navbar-three .navbar .navbar-nav .nav-item { position: relative; } .navbar-area.navbar-three .navbar .navbar-nav .nav-item a { font-size: 16px; line-height: 24px; font-weight: 700; padding: 11px 14px; color: #fff; text-transform: uppercase; position: relative; border: 1px solid rgba(255, 255, 255, 0); border-radius: 5px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; margin: 14px 4px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-three .navbar .navbar-nav .nav-item a { padding: 10px 0; display: block; border: 0; margin: 0; } } @media (max-width: 767px) { .navbar-area.navbar-three .navbar .navbar-nav .nav-item a { padding: 10px 0; display: block; border: 0; margin: 0; } } .navbar-area.navbar-three .navbar .navbar-nav .nav-item a.active { border: 1px solid rgba(255, 255, 255, 0.3); } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-three .navbar .navbar-nav .nav-item a.active { border: 0; } } @media (max-width: 767px) { .navbar-area.navbar-three .navbar .navbar-nav .nav-item a.active { border: 0; } } .navbar-area.navbar-three .navbar .navbar-nav .nav-item a.active::before, .navbar-area.navbar-three .navbar .navbar-nav .nav-item a.active::after { -webkit-transform: translateX(-50%) scaleX(1); -moz-transform: translateX(-50%) scaleX(1); -ms-transform: translateX(-50%) scaleX(1); -o-transform: translateX(-50%) scaleX(1); transform: translateX(-50%) scaleX(1); } .navbar-area.navbar-three .navbar .navbar-nav .nav-item a::before, .navbar-area.navbar-three .navbar .navbar-nav .nav-item a::after { position: absolute; content: ''; width: 32px; height: 2px; background-color: #fff; left: 50%; margin: 0 2px; top: 0; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; -webkit-transform: translateX(-50%) scaleX(0); -moz-transform: translateX(-50%) scaleX(0); -ms-transform: translateX(-50%) scaleX(0); -o-transform: translateX(-50%) scaleX(0); transform: translateX(-50%) scaleX(0); } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-three .navbar .navbar-nav .nav-item a::before, .navbar-area.navbar-three .navbar .navbar-nav .nav-item a::after { display: none; } } @media (max-width: 767px) { .navbar-area.navbar-three .navbar .navbar-nav .nav-item a::before, .navbar-area.navbar-three .navbar .navbar-nav .nav-item a::after { display: none; } } .navbar-area.navbar-three .navbar .navbar-nav .nav-item a::after { top: auto; bottom: 0; } .navbar-area.navbar-three .navbar .navbar-nav .nav-item:hover > a { border: 1px solid rgba(255, 255, 255, 0.3); } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-three .navbar .navbar-nav .nav-item:hover > a { border: 0; } } @media (max-width: 767px) { .navbar-area.navbar-three .navbar .navbar-nav .nav-item:hover > a { border: 0; } } .navbar-area.navbar-three .navbar .navbar-nav .nav-item:hover > a::before, .navbar-area.navbar-three .navbar .navbar-nav .nav-item:hover > a::after { -webkit-transform: translateX(-50%) scaleX(1); -moz-transform: translateX(-50%) scaleX(1); -ms-transform: translateX(-50%) scaleX(1); -o-transform: translateX(-50%) scaleX(1); transform: translateX(-50%) scaleX(1); } .navbar-area.navbar-three .navbar .navbar-nav .nav-item .sub-menu { position: absolute; right: 0; top: 100%; width: 260px; background-color: #fff; border-radius: 5px; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; z-index: 99; -webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.16); } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-three .navbar .navbar-nav .nav-item .sub-menu { position: relative !important; width: 100% !important; left: 0 !important; top: auto !important; opacity: 1 !important; visibility: visible !important; display: none; right: auto; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); -webkit-transition: all none ease-out 0s; -moz-transition: all none ease-out 0s; -ms-transition: all none ease-out 0s; -o-transition: all none ease-out 0s; transition: all none ease-out 0s; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; text-align: left; border-top: 0; } } @media (max-width: 767px) { .navbar-area.navbar-three .navbar .navbar-nav .nav-item .sub-menu { position: relative !important; width: 100% !important; left: 0 !important; top: auto !important; opacity: 1 !important; visibility: visible !important; display: none; right: auto; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); -webkit-transition: all none ease-out 0s; -moz-transition: all none ease-out 0s; -ms-transition: all none ease-out 0s; -o-transition: all none ease-out 0s; transition: all none ease-out 0s; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; text-align: left; border-top: 0; } } .navbar-area.navbar-three .navbar .navbar-nav .nav-item .sub-menu li { position: relative; } .navbar-area.navbar-three .navbar .navbar-nav .nav-item .sub-menu li .sub-nav-toggler { color: #121212; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .navbar-area.navbar-three .navbar .navbar-nav .nav-item .sub-menu li a { display: block; padding: 8px 24px; position: relative; color: #121212; -webkit-transition: all 0s ease-out 0s; -moz-transition: all 0s ease-out 0s; -ms-transition: all 0s ease-out 0s; -o-transition: all 0s ease-out 0s; transition: all 0s ease-out 0s; border-radius: 0; margin: 0 0; border: 0; } .navbar-area.navbar-three .navbar .navbar-nav .nav-item .sub-menu li a i { float: right; font-size: 14px; margin-top: 5px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-three .navbar .navbar-nav .nav-item .sub-menu li a i { display: none; } } @media (max-width: 767px) { .navbar-area.navbar-three .navbar .navbar-nav .nav-item .sub-menu li a i { display: none; } } .navbar-area.navbar-three .navbar .navbar-nav .nav-item .sub-menu li a .sub-nav-toggler i { display: inline-block; } .navbar-area.navbar-three .navbar .navbar-nav .nav-item .sub-menu li a::before { display: none; } .navbar-area.navbar-three .navbar .navbar-nav .nav-item .sub-menu li .sub-menu { right: auto; left: 100%; top: 0; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-three .navbar .navbar-nav .nav-item .sub-menu li .sub-menu { padding-left: 30px; } } @media (max-width: 767px) { .navbar-area.navbar-three .navbar .navbar-nav .nav-item .sub-menu li .sub-menu { padding-left: 30px; } } .navbar-area.navbar-three .navbar .navbar-nav .nav-item .sub-menu li:hover .sub-menu { opacity: 1; visibility: visible; } .navbar-area.navbar-three .navbar .navbar-nav .nav-item .sub-menu li:hover .sub-nav-toggler { color: #fff; } .navbar-area.navbar-three .navbar .navbar-nav .nav-item .sub-menu li:hover > a { background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%); color: #fff; } .navbar-area.navbar-three .navbar .navbar-nav .nav-item .sub-menu li:hover > a::before { opacity: 1; } .navbar-area.navbar-three .navbar .navbar-nav .nav-item:hover .sub-menu { opacity: 1; visibility: visible; } .navbar-area.navbar-three .navbar .navbar-nav .nav-item .sub-nav-toggler { display: none; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-three .navbar .navbar-nav .nav-item .sub-nav-toggler { display: inline-block; position: absolute; top: 0; right: 0; padding: 10px 14px; font-size: 16px; background: none; border: 0; color: #fff; } } @media (max-width: 767px) { .navbar-area.navbar-three .navbar .navbar-nav .nav-item .sub-nav-toggler { display: inline-block; position: absolute; top: 0; right: 0; padding: 10px 14px; font-size: 16px; background: none; border: 0; color: #fff; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-three .navbar .navbar-social { position: absolute; right: 70px; top: 7px; } } @media (max-width: 767px) { .navbar-area.navbar-three .navbar .navbar-social { position: absolute; right: 60px; top: 7px; } } .navbar-area.navbar-three .navbar .navbar-social ul li { display: inline-block; margin-left: 12px; } .navbar-area.navbar-three .navbar .navbar-social ul li a { font-size: 32px; color: #fff; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } /*===== NAVBAR FOUR =====*/ .navbar-area.navbar-four { background-color: #f4f6f7; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-four { padding: 10px 0; } } @media (max-width: 767px) { .navbar-area.navbar-four { padding: 10px 0; } } .navbar-area.navbar-four .navbar { position: relative; padding: 0; } .navbar-area.navbar-four .navbar .navbar-brand img { max-width: 40px; margin-right: 10px; } .navbar-area.navbar-four .navbar .navbar-toggler .toggler-icon { width: 30px; height: 2px; background-color: #121212; margin: 5px 0; display: block; position: relative; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .navbar-area.navbar-four .navbar .navbar-toggler.active .toggler-icon:nth-of-type(1) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); top: 7px; } .navbar-area.navbar-four .navbar .navbar-toggler.active .toggler-icon:nth-of-type(2) { opacity: 0; } .navbar-area.navbar-four .navbar .navbar-toggler.active .toggler-icon:nth-of-type(3) { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); top: -7px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-four .navbar .navbar-collapse { position: absolute; top: 116%; left: 0; width: 100%; background-color: #f4f6f7; z-index: 8; padding: 10px 0; } } @media (max-width: 767px) { .navbar-area.navbar-four .navbar .navbar-collapse { position: absolute; top: 116%; left: 0; width: 100%; background-color: #f4f6f7; z-index: 8; padding: 10px 0; } } .navbar-area.navbar-four .navbar .navbar-nav .nav-item { margin: 0 16px; position: relative; } .navbar-area.navbar-four .navbar .navbar-nav .nav-item a { font-size: 16px; line-height: 24px; font-weight: 700; padding: 26px 0; color: #121212; text-transform: uppercase; position: relative; opacity: 0.7; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-four .navbar .navbar-nav .nav-item a { padding: 10px 0; display: block; } } @media (max-width: 767px) { .navbar-area.navbar-four .navbar .navbar-nav .nav-item a { padding: 10px 0; display: block; } } .navbar-area.navbar-four .navbar .navbar-nav .nav-item a.active { opacity: 1; } .navbar-area.navbar-four .navbar .navbar-nav .nav-item a.active::before, .navbar-area.navbar-four .navbar .navbar-nav .nav-item a.active::after { opacity: 1; } .navbar-area.navbar-four .navbar .navbar-nav .nav-item a::before, .navbar-area.navbar-four .navbar .navbar-nav .nav-item a::after { position: absolute; content: ''; width: 8px; height: 4px; background-color: #2bdbdc; left: 50%; margin: 0 2px; bottom: 14px; opacity: 0; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-four .navbar .navbar-nav .nav-item a::before, .navbar-area.navbar-four .navbar .navbar-nav .nav-item a::after { display: none; } } @media (max-width: 767px) { .navbar-area.navbar-four .navbar .navbar-nav .nav-item a::before, .navbar-area.navbar-four .navbar .navbar-nav .nav-item a::after { display: none; } } .navbar-area.navbar-four .navbar .navbar-nav .nav-item a::after { left: auto; right: 50%; } .navbar-area.navbar-four .navbar .navbar-nav .nav-item:hover > a { opacity: 1; } .navbar-area.navbar-four .navbar .navbar-nav .nav-item:hover > a::before, .navbar-area.navbar-four .navbar .navbar-nav .nav-item:hover > a::after { opacity: 1; } .navbar-area.navbar-four .navbar .navbar-nav .nav-item .sub-menu { position: absolute; left: 0; top: 100%; width: 260px; background-color: #fff; border-radius: 5px; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; z-index: 99; -webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.16); } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-four .navbar .navbar-nav .nav-item .sub-menu { position: relative !important; width: 100% !important; left: 0 !important; top: auto !important; opacity: 1 !important; visibility: visible !important; display: none; right: auto; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); -webkit-transition: all none ease-out 0s; -moz-transition: all none ease-out 0s; -ms-transition: all none ease-out 0s; -o-transition: all none ease-out 0s; transition: all none ease-out 0s; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; text-align: left; border-top: 0; } } @media (max-width: 767px) { .navbar-area.navbar-four .navbar .navbar-nav .nav-item .sub-menu { position: relative !important; width: 100% !important; left: 0 !important; top: auto !important; opacity: 1 !important; visibility: visible !important; display: none; right: auto; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); -webkit-transition: all none ease-out 0s; -moz-transition: all none ease-out 0s; -ms-transition: all none ease-out 0s; -o-transition: all none ease-out 0s; transition: all none ease-out 0s; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; text-align: left; border-top: 0; } } .navbar-area.navbar-four .navbar .navbar-nav .nav-item .sub-menu li { position: relative; } .navbar-area.navbar-four .navbar .navbar-nav .nav-item .sub-menu li a { display: block; padding: 8px 24px; position: relative; color: #121212; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; opacity: 1; z-index: 5; } .navbar-area.navbar-four .navbar .navbar-nav .nav-item .sub-menu li a i { float: right; font-size: 14px; margin-top: 5px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-four .navbar .navbar-nav .nav-item .sub-menu li a i { display: none; } } @media (max-width: 767px) { .navbar-area.navbar-four .navbar .navbar-nav .nav-item .sub-menu li a i { display: none; } } .navbar-area.navbar-four .navbar .navbar-nav .nav-item .sub-menu li a .sub-nav-toggler i { display: inline-block; } .navbar-area.navbar-four .navbar .navbar-nav .nav-item .sub-menu li a::before { position: absolute; content: ''; top: 0; left: 0; width: 5px; height: 100%; border-radius: 5px; background-color: #fff; opacity: 0; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; margin: 0; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-four .navbar .navbar-nav .nav-item .sub-menu li a::before { display: block; } } @media (max-width: 767px) { .navbar-area.navbar-four .navbar .navbar-nav .nav-item .sub-menu li a::before { display: block; } } .navbar-area.navbar-four .navbar .navbar-nav .nav-item .sub-menu li a::after { position: absolute; content: ''; top: 0; left: -2px; width: 100%; height: 100%; border-radius: 5px; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%); opacity: 0; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; z-index: -1; } .navbar-area.navbar-four .navbar .navbar-nav .nav-item .sub-menu li .sub-menu { right: auto; left: 100%; top: 0; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-four .navbar .navbar-nav .nav-item .sub-menu li .sub-menu { padding-left: 30px; } } @media (max-width: 767px) { .navbar-area.navbar-four .navbar .navbar-nav .nav-item .sub-menu li .sub-menu { padding-left: 30px; } } .navbar-area.navbar-four .navbar .navbar-nav .nav-item .sub-menu li:hover .sub-menu { opacity: 1; visibility: visible; } .navbar-area.navbar-four .navbar .navbar-nav .nav-item .sub-menu li:hover > a { color: #fff; } .navbar-area.navbar-four .navbar .navbar-nav .nav-item .sub-menu li:hover > a::after { opacity: 1; } .navbar-area.navbar-four .navbar .navbar-nav .nav-item .sub-menu li:hover > a::before { opacity: 1; } .navbar-area.navbar-four .navbar .navbar-nav .nav-item:hover .sub-menu { opacity: 1; visibility: visible; } .navbar-area.navbar-four .navbar .navbar-nav .nav-item .sub-nav-toggler { display: none; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-four .navbar .navbar-nav .nav-item .sub-nav-toggler { display: inline-block; position: absolute; top: 0; right: 0; padding: 10px 14px; font-size: 16px; background: none; border: 0; color: #121212; } } @media (max-width: 767px) { .navbar-area.navbar-four .navbar .navbar-nav .nav-item .sub-nav-toggler { display: inline-block; position: absolute; top: 0; right: 0; padding: 10px 14px; font-size: 16px; background: none; border: 0; color: #121212; } } .navbar-area.navbar-four .navbar .navbar-social span { font-size: 16px; line-height: 24px; color: #6c6c6c; text-transform: uppercase; font-weight: 700; margin-right: 14px; } .navbar-area.navbar-four .navbar .navbar-social ul li { display: inline-block; margin-right: 5px; } .navbar-area.navbar-four .navbar .navbar-social ul li a { font-size: 32px; color: #0067f4; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } /*===== NAVBAR FIVE =====*/ .navbar-area.navbar-five { background: #0067f4; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%); padding: 10px 0; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-five { padding: 10px 0; } } @media (max-width: 767px) { .navbar-area.navbar-five { padding: 10px 0; } } .navbar-area.navbar-five .navbar { position: relative; padding: 0; } .navbar-area.navbar-five .navbar .navbar-toggler .toggler-icon { width: 30px; height: 2px; background-color: #fff; margin: 5px 0; display: block; position: relative; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .navbar-area.navbar-five .navbar .navbar-toggler.active .toggler-icon:nth-of-type(1) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); top: 7px; } .navbar-area.navbar-five .navbar .navbar-toggler.active .toggler-icon:nth-of-type(2) { opacity: 0; } .navbar-area.navbar-five .navbar .navbar-toggler.active .toggler-icon:nth-of-type(3) { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); top: -7px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-five .navbar .navbar-collapse { position: absolute; top: 116%; left: 0; width: 100%; background-color: #0067f4; z-index: 8; padding: 10px 16px; } } @media (max-width: 767px) { .navbar-area.navbar-five .navbar .navbar-collapse { position: absolute; top: 116%; left: 0; width: 100%; background-color: #0067f4; z-index: 8; padding: 10px 16px; } } .navbar-area.navbar-five .navbar .navbar-nav { margin-right: 24px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-five .navbar .navbar-nav { margin-right: 0; } } @media (max-width: 767px) { .navbar-area.navbar-five .navbar .navbar-nav { margin-right: 0; } } .navbar-area.navbar-five .navbar .navbar-nav .nav-item { position: relative; } .navbar-area.navbar-five .navbar .navbar-nav .nav-item a { font-size: 16px; line-height: 24px; font-weight: 700; padding: 11px 16px; color: #fff; text-transform: uppercase; position: relative; border-radius: 5px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; margin: 14px 0; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-five .navbar .navbar-nav .nav-item a { padding: 10px 0; display: block; border: 0; margin: 0; } } @media (max-width: 767px) { .navbar-area.navbar-five .navbar .navbar-nav .nav-item a { padding: 10px 0; display: block; border: 0; margin: 0; } } .navbar-area.navbar-five .navbar .navbar-nav .nav-item a.active::before { -webkit-transform: translateX(-50%) scaleX(1); -moz-transform: translateX(-50%) scaleX(1); -ms-transform: translateX(-50%) scaleX(1); -o-transform: translateX(-50%) scaleX(1); transform: translateX(-50%) scaleX(1); } .navbar-area.navbar-five .navbar .navbar-nav .nav-item a::before { position: absolute; content: ''; width: 32px; height: 4px; background-color: #fff; left: 50%; bottom: 0; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; -webkit-transform: translateX(-50%) scaleX(0); -moz-transform: translateX(-50%) scaleX(0); -ms-transform: translateX(-50%) scaleX(0); -o-transform: translateX(-50%) scaleX(0); transform: translateX(-50%) scaleX(0); } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-five .navbar .navbar-nav .nav-item a::before { display: none; } } @media (max-width: 767px) { .navbar-area.navbar-five .navbar .navbar-nav .nav-item a::before { display: none; } } .navbar-area.navbar-five .navbar .navbar-nav .nav-item a::after { top: auto; bottom: 0; } .navbar-area.navbar-five .navbar .navbar-nav .nav-item:hover > a::before { -webkit-transform: translateX(-50%) scaleX(1); -moz-transform: translateX(-50%) scaleX(1); -ms-transform: translateX(-50%) scaleX(1); -o-transform: translateX(-50%) scaleX(1); transform: translateX(-50%) scaleX(1); } .navbar-area.navbar-five .navbar .navbar-nav .nav-item .sub-menu { position: absolute; right: 0; top: 100%; width: 260px; background-color: #fff; border-radius: 5px; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; z-index: 99; -webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.16); } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-five .navbar .navbar-nav .nav-item .sub-menu { position: relative !important; width: 100% !important; left: 0 !important; top: auto !important; opacity: 1 !important; visibility: visible !important; display: none; right: auto; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); -webkit-transition: all none ease-out 0s; -moz-transition: all none ease-out 0s; -ms-transition: all none ease-out 0s; -o-transition: all none ease-out 0s; transition: all none ease-out 0s; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; text-align: left; border-top: 0; } } @media (max-width: 767px) { .navbar-area.navbar-five .navbar .navbar-nav .nav-item .sub-menu { position: relative !important; width: 100% !important; left: 0 !important; top: auto !important; opacity: 1 !important; visibility: visible !important; display: none; right: auto; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); -webkit-transition: all none ease-out 0s; -moz-transition: all none ease-out 0s; -ms-transition: all none ease-out 0s; -o-transition: all none ease-out 0s; transition: all none ease-out 0s; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; text-align: left; border-top: 0; } } .navbar-area.navbar-five .navbar .navbar-nav .nav-item .sub-menu li { position: relative; } .navbar-area.navbar-five .navbar .navbar-nav .nav-item .sub-menu li .sub-nav-toggler { color: #121212; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .navbar-area.navbar-five .navbar .navbar-nav .nav-item .sub-menu li a { display: block; padding: 8px 24px; position: relative; color: #121212; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; border-radius: 0; margin: 0 0; z-index: 5; } .navbar-area.navbar-five .navbar .navbar-nav .nav-item .sub-menu li a i { float: right; font-size: 14px; margin-top: 5px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-five .navbar .navbar-nav .nav-item .sub-menu li a i { display: none; } } @media (max-width: 767px) { .navbar-area.navbar-five .navbar .navbar-nav .nav-item .sub-menu li a i { display: none; } } .navbar-area.navbar-five .navbar .navbar-nav .nav-item .sub-menu li a .sub-nav-toggler i { display: inline-block; } .navbar-area.navbar-five .navbar .navbar-nav .nav-item .sub-menu li a::before { display: none; } .navbar-area.navbar-five .navbar .navbar-nav .nav-item .sub-menu li a::after { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; border-radius: 5px; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%); opacity: 0; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; z-index: -1; } .navbar-area.navbar-five .navbar .navbar-nav .nav-item .sub-menu li .sub-menu { right: auto; left: 100%; top: 0; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-five .navbar .navbar-nav .nav-item .sub-menu li .sub-menu { padding-left: 30px; } } @media (max-width: 767px) { .navbar-area.navbar-five .navbar .navbar-nav .nav-item .sub-menu li .sub-menu { padding-left: 30px; } } .navbar-area.navbar-five .navbar .navbar-nav .nav-item .sub-menu li:hover .sub-menu { opacity: 1; visibility: visible; } .navbar-area.navbar-five .navbar .navbar-nav .nav-item .sub-menu li:hover .sub-nav-toggler { color: #fff; } .navbar-area.navbar-five .navbar .navbar-nav .nav-item .sub-menu li:hover > a { color: #fff; } .navbar-area.navbar-five .navbar .navbar-nav .nav-item .sub-menu li:hover > a::after { opacity: 1; } .navbar-area.navbar-five .navbar .navbar-nav .nav-item .sub-menu li:hover > a::before { opacity: 1; } .navbar-area.navbar-five .navbar .navbar-nav .nav-item:hover .sub-menu { opacity: 1; visibility: visible; } .navbar-area.navbar-five .navbar .navbar-nav .nav-item .sub-nav-toggler { display: none; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-five .navbar .navbar-nav .nav-item .sub-nav-toggler { display: inline-block; position: absolute; top: 0; right: 0; padding: 10px 14px; font-size: 16px; background: none; border: 0; color: #fff; } } @media (max-width: 767px) { .navbar-area.navbar-five .navbar .navbar-nav .nav-item .sub-nav-toggler { display: inline-block; position: absolute; top: 0; right: 0; padding: 10px 14px; font-size: 16px; background: none; border: 0; color: #fff; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-five .navbar .navbar-btn { position: absolute; right: 70px; top: 7px; } } @media (max-width: 767px) { .navbar-area.navbar-five .navbar .navbar-btn { position: absolute; right: 60px; top: 7px; } } .navbar-area.navbar-five .navbar .navbar-btn .main-btn { z-index: 5; overflow: hidden; background: -webkit-linear-gradient(#f4f6f7 0%, #deebfd 100%); background: -o-linear-gradient(#f4f6f7 0%, #deebfd 100%); background: linear-gradient(#f4f6f7 0%, #deebfd 100%); line-height: 52px; border: 0; } .navbar-area.navbar-five .navbar .navbar-btn .main-btn:hover { color: #0067f4; background: -webkit-linear-gradient(bottom, #f4f6f7 0%, #deebfd 100%); background: -o-linear-gradient(bottom, #f4f6f7 0%, #deebfd 100%); background: linear-gradient(to top, #f4f6f7 0%, #deebfd 100%); } /*===== NAVBAR SIX =====*/ .navbar-area.navbar-six { background-color: #f4f6f7; padding: 10px 0; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-six { padding: 10px 0; } } @media (max-width: 767px) { .navbar-area.navbar-six { padding: 10px 0; } } .navbar-area.navbar-six .navbar { position: relative; padding: 0; } .navbar-area.navbar-six .navbar .navbar-toggler .toggler-icon { width: 30px; height: 2px; background-color: #121212; margin: 5px 0; display: block; position: relative; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .navbar-area.navbar-six .navbar .navbar-toggler.active .toggler-icon:nth-of-type(1) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); top: 7px; } .navbar-area.navbar-six .navbar .navbar-toggler.active .toggler-icon:nth-of-type(2) { opacity: 0; } .navbar-area.navbar-six .navbar .navbar-toggler.active .toggler-icon:nth-of-type(3) { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); top: -7px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-six .navbar .navbar-collapse { position: absolute; top: 116%; left: 0; width: 100%; background-color: #f4f6f7; z-index: 8; padding: 10px 16px; } } @media (max-width: 767px) { .navbar-area.navbar-six .navbar .navbar-collapse { position: absolute; top: 116%; left: 0; width: 100%; background-color: #f4f6f7; z-index: 8; padding: 10px 16px; } } .navbar-area.navbar-six .navbar .navbar-nav { margin-right: 24px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-six .navbar .navbar-nav { margin-right: 0; } } @media (max-width: 767px) { .navbar-area.navbar-six .navbar .navbar-nav { margin-right: 0; } } .navbar-area.navbar-six .navbar .navbar-nav .nav-item { position: relative; } .navbar-area.navbar-six .navbar .navbar-nav .nav-item a { font-size: 16px; line-height: 24px; font-weight: 700; padding: 11px 14px; color: #121212; text-transform: uppercase; position: relative; border-radius: 5px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; margin: 14px 4px; opacity: 0.7; border: 1px solid transparent; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-six .navbar .navbar-nav .nav-item a { padding: 10px 0; display: block; border: 0; margin: 0; } } @media (max-width: 767px) { .navbar-area.navbar-six .navbar .navbar-nav .nav-item a { padding: 10px 0; display: block; border: 0; margin: 0; } } .navbar-area.navbar-six .navbar .navbar-nav .nav-item a.active { opacity: 1; border-color: #e5e5e8; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-six .navbar .navbar-nav .nav-item a.active { border: 0; } } @media (max-width: 767px) { .navbar-area.navbar-six .navbar .navbar-nav .nav-item a.active { border: 0; } } .navbar-area.navbar-six .navbar .navbar-nav .nav-item a.active::before, .navbar-area.navbar-six .navbar .navbar-nav .nav-item a.active::after { -webkit-transform: translateX(-50%) scaleX(1); -moz-transform: translateX(-50%) scaleX(1); -ms-transform: translateX(-50%) scaleX(1); -o-transform: translateX(-50%) scaleX(1); transform: translateX(-50%) scaleX(1); } .navbar-area.navbar-six .navbar .navbar-nav .nav-item a::before, .navbar-area.navbar-six .navbar .navbar-nav .nav-item a::after { position: absolute; content: ''; width: 32px; height: 2px; background: #0067f4; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%); left: 50%; top: 0; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; -webkit-transform: translateX(-50%) scaleX(0); -moz-transform: translateX(-50%) scaleX(0); -ms-transform: translateX(-50%) scaleX(0); -o-transform: translateX(-50%) scaleX(0); transform: translateX(-50%) scaleX(0); } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-six .navbar .navbar-nav .nav-item a::before, .navbar-area.navbar-six .navbar .navbar-nav .nav-item a::after { display: none; } } @media (max-width: 767px) { .navbar-area.navbar-six .navbar .navbar-nav .nav-item a::before, .navbar-area.navbar-six .navbar .navbar-nav .nav-item a::after { display: none; } } .navbar-area.navbar-six .navbar .navbar-nav .nav-item a::after { top: auto; bottom: 0; } .navbar-area.navbar-six .navbar .navbar-nav .nav-item:hover > a { opacity: 1; border-color: #e5e5e8; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-six .navbar .navbar-nav .nav-item:hover > a { border: 0; } } @media (max-width: 767px) { .navbar-area.navbar-six .navbar .navbar-nav .nav-item:hover > a { border: 0; } } .navbar-area.navbar-six .navbar .navbar-nav .nav-item:hover > a::before, .navbar-area.navbar-six .navbar .navbar-nav .nav-item:hover > a::after { -webkit-transform: translateX(-50%) scaleX(1); -moz-transform: translateX(-50%) scaleX(1); -ms-transform: translateX(-50%) scaleX(1); -o-transform: translateX(-50%) scaleX(1); transform: translateX(-50%) scaleX(1); } .navbar-area.navbar-six .navbar .navbar-nav .nav-item .sub-nav-toggler { display: none; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-six .navbar .navbar-nav .nav-item .sub-nav-toggler { display: inline-block; position: absolute; top: 0; right: 0; padding: 10px 14px; font-size: 16px; background: none; border: 0; color: #121212; } } @media (max-width: 767px) { .navbar-area.navbar-six .navbar .navbar-nav .nav-item .sub-nav-toggler { display: inline-block; position: absolute; top: 0; right: 0; padding: 10px 14px; font-size: 16px; background: none; border: 0; color: #121212; } } .navbar-area.navbar-six .navbar .navbar-nav .nav-item .sub-menu { position: absolute; right: 0; top: 100%; width: 260px; background-color: #fff; border-radius: 5px; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; z-index: 99; -webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.16); } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-six .navbar .navbar-nav .nav-item .sub-menu { position: relative !important; width: 100% !important; left: 0 !important; top: auto !important; opacity: 1 !important; visibility: visible !important; display: none; right: auto; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); -webkit-transition: all none ease-out 0s; -moz-transition: all none ease-out 0s; -ms-transition: all none ease-out 0s; -o-transition: all none ease-out 0s; transition: all none ease-out 0s; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; text-align: left; border-top: 0; } } @media (max-width: 767px) { .navbar-area.navbar-six .navbar .navbar-nav .nav-item .sub-menu { position: relative !important; width: 100% !important; left: 0 !important; top: auto !important; opacity: 1 !important; visibility: visible !important; display: none; right: auto; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); -webkit-transition: all none ease-out 0s; -moz-transition: all none ease-out 0s; -ms-transition: all none ease-out 0s; -o-transition: all none ease-out 0s; transition: all none ease-out 0s; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; text-align: left; border-top: 0; } } .navbar-area.navbar-six .navbar .navbar-nav .nav-item .sub-menu li { position: relative; } .navbar-area.navbar-six .navbar .navbar-nav .nav-item .sub-menu li .sub-nav-toggler { color: #121212; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .navbar-area.navbar-six .navbar .navbar-nav .nav-item .sub-menu li a { display: block; padding: 8px 24px; position: relative; color: #121212; -webkit-transition: all 0s ease-out 0s; -moz-transition: all 0s ease-out 0s; -ms-transition: all 0s ease-out 0s; -o-transition: all 0s ease-out 0s; transition: all 0s ease-out 0s; border-radius: 0; margin: 0 0; opacity: 1; border: 0; } .navbar-area.navbar-six .navbar .navbar-nav .nav-item .sub-menu li a .sub-nav-toggler { color: #121212; } .navbar-area.navbar-six .navbar .navbar-nav .nav-item .sub-menu li a i { float: right; font-size: 14px; margin-top: 5px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-six .navbar .navbar-nav .nav-item .sub-menu li a i { display: none; } } @media (max-width: 767px) { .navbar-area.navbar-six .navbar .navbar-nav .nav-item .sub-menu li a i { display: none; } } .navbar-area.navbar-six .navbar .navbar-nav .nav-item .sub-menu li a .sub-nav-toggler i { display: inline-block; } .navbar-area.navbar-six .navbar .navbar-nav .nav-item .sub-menu li a::before { display: none; } .navbar-area.navbar-six .navbar .navbar-nav .nav-item .sub-menu li .sub-menu { right: auto; left: 100%; top: 0; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-six .navbar .navbar-nav .nav-item .sub-menu li .sub-menu { padding-left: 30px; } } @media (max-width: 767px) { .navbar-area.navbar-six .navbar .navbar-nav .nav-item .sub-menu li .sub-menu { padding-left: 30px; } } .navbar-area.navbar-six .navbar .navbar-nav .nav-item .sub-menu li:hover .sub-menu { opacity: 1; visibility: visible; } .navbar-area.navbar-six .navbar .navbar-nav .nav-item .sub-menu li:hover .sub-nav-toggler { color: #fff; } .navbar-area.navbar-six .navbar .navbar-nav .nav-item .sub-menu li:hover > a { background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%); color: #fff; } .navbar-area.navbar-six .navbar .navbar-nav .nav-item .sub-menu li:hover > a::before { opacity: 1; } .navbar-area.navbar-six .navbar .navbar-nav .nav-item:hover .sub-menu { opacity: 1; visibility: visible; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-six .navbar .navbar-btn { position: absolute; right: 70px; top: 7px; } } @media (max-width: 767px) { .navbar-area.navbar-six .navbar .navbar-btn { position: absolute; right: 60px; top: 7px; } } /*===== NAVBAR SAVEN =====*/ .navbar-area.navbar-saven { background: #0067f4; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%); padding: 10px 0; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-saven { padding: 10px 0; } } @media (max-width: 767px) { .navbar-area.navbar-saven { padding: 10px 0; } } .navbar-area.navbar-saven .navbar { position: relative; padding: 0; } .navbar-area.navbar-saven .navbar .navbar-toggler .toggler-icon { width: 30px; height: 2px; background-color: #fff; margin: 5px 0; display: block; position: relative; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .navbar-area.navbar-saven .navbar .navbar-toggler.active .toggler-icon:nth-of-type(1) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); top: 7px; } .navbar-area.navbar-saven .navbar .navbar-toggler.active .toggler-icon:nth-of-type(2) { opacity: 0; } .navbar-area.navbar-saven .navbar .navbar-toggler.active .toggler-icon:nth-of-type(3) { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); top: -7px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-saven .navbar .navbar-collapse { position: absolute; top: 116%; left: 0; width: 100%; background-color: #0067f4; z-index: 8; padding: 10px 16px; } } @media (max-width: 767px) { .navbar-area.navbar-saven .navbar .navbar-collapse { position: absolute; top: 116%; left: 0; width: 100%; background-color: #0067f4; z-index: 8; padding: 10px 16px; } } .navbar-area.navbar-saven .navbar .navbar-nav { margin-right: 24px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-saven .navbar .navbar-nav { margin-right: 0; } } @media (max-width: 767px) { .navbar-area.navbar-saven .navbar .navbar-nav { margin-right: 0; } } .navbar-area.navbar-saven .navbar .navbar-nav .nav-item { position: relative; } .navbar-area.navbar-saven .navbar .navbar-nav .nav-item a { font-size: 16px; line-height: 24px; font-weight: 700; padding: 11px 16px; color: #fff; text-transform: uppercase; position: relative; border-radius: 5px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; margin: 14px 0; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-saven .navbar .navbar-nav .nav-item a { padding: 10px 0; display: block; border: 0; margin: 0; } } @media (max-width: 767px) { .navbar-area.navbar-saven .navbar .navbar-nav .nav-item a { padding: 10px 0; display: block; border: 0; margin: 0; } } .navbar-area.navbar-saven .navbar .navbar-nav .nav-item a.active::before { -webkit-transform: translateX(-50%) scaleX(1); -moz-transform: translateX(-50%) scaleX(1); -ms-transform: translateX(-50%) scaleX(1); -o-transform: translateX(-50%) scaleX(1); transform: translateX(-50%) scaleX(1); } .navbar-area.navbar-saven .navbar .navbar-nav .nav-item a::before { position: absolute; content: ''; width: 32px; height: 4px; background-color: #fff; left: 50%; bottom: 0; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; -webkit-transform: translateX(-50%) scaleX(0); -moz-transform: translateX(-50%) scaleX(0); -ms-transform: translateX(-50%) scaleX(0); -o-transform: translateX(-50%) scaleX(0); transform: translateX(-50%) scaleX(0); } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-saven .navbar .navbar-nav .nav-item a::before { display: none; } } @media (max-width: 767px) { .navbar-area.navbar-saven .navbar .navbar-nav .nav-item a::before { display: none; } } .navbar-area.navbar-saven .navbar .navbar-nav .nav-item a::after { top: auto; bottom: 0; } .navbar-area.navbar-saven .navbar .navbar-nav .nav-item:hover > a::before { -webkit-transform: translateX(-50%) scaleX(1); -moz-transform: translateX(-50%) scaleX(1); -ms-transform: translateX(-50%) scaleX(1); -o-transform: translateX(-50%) scaleX(1); transform: translateX(-50%) scaleX(1); } .navbar-area.navbar-saven .navbar .navbar-nav .nav-item .sub-menu { position: absolute; right: 0; top: 100%; width: 260px; background-color: #fff; border-radius: 5px; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; z-index: 99; -webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.16); } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-saven .navbar .navbar-nav .nav-item .sub-menu { position: relative !important; width: 100% !important; left: 0 !important; top: auto !important; opacity: 1 !important; visibility: visible !important; display: none; right: auto; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); -webkit-transition: all none ease-out 0s; -moz-transition: all none ease-out 0s; -ms-transition: all none ease-out 0s; -o-transition: all none ease-out 0s; transition: all none ease-out 0s; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; text-align: left; border-top: 0; } } @media (max-width: 767px) { .navbar-area.navbar-saven .navbar .navbar-nav .nav-item .sub-menu { position: relative !important; width: 100% !important; left: 0 !important; top: auto !important; opacity: 1 !important; visibility: visible !important; display: none; right: auto; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); -webkit-transition: all none ease-out 0s; -moz-transition: all none ease-out 0s; -ms-transition: all none ease-out 0s; -o-transition: all none ease-out 0s; transition: all none ease-out 0s; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; text-align: left; border-top: 0; } } .navbar-area.navbar-saven .navbar .navbar-nav .nav-item .sub-menu li { position: relative; } .navbar-area.navbar-saven .navbar .navbar-nav .nav-item .sub-menu li .sub-nav-toggler { color: #121212; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .navbar-area.navbar-saven .navbar .navbar-nav .nav-item .sub-menu li a { display: block; padding: 8px 24px; position: relative; color: #121212; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; border-radius: 0; margin: 0 0; } .navbar-area.navbar-saven .navbar .navbar-nav .nav-item .sub-menu li a i { float: right; font-size: 14px; margin-top: 5px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-saven .navbar .navbar-nav .nav-item .sub-menu li a i { display: none; } } @media (max-width: 767px) { .navbar-area.navbar-saven .navbar .navbar-nav .nav-item .sub-menu li a i { display: none; } } .navbar-area.navbar-saven .navbar .navbar-nav .nav-item .sub-menu li a .sub-nav-toggler i { display: inline-block; } .navbar-area.navbar-saven .navbar .navbar-nav .nav-item .sub-menu li a::after { position: absolute; content: ''; top: 0; left: 0px; width: 100%; height: 100%; border-radius: 5px; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%); opacity: 0; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; z-index: -1; } .navbar-area.navbar-saven .navbar .navbar-nav .nav-item .sub-menu li a::before { display: none; } .navbar-area.navbar-saven .navbar .navbar-nav .nav-item .sub-menu li .sub-menu { right: auto; left: 100%; top: 0; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-saven .navbar .navbar-nav .nav-item .sub-menu li .sub-menu { padding-left: 30px; } } @media (max-width: 767px) { .navbar-area.navbar-saven .navbar .navbar-nav .nav-item .sub-menu li .sub-menu { padding-left: 30px; } } .navbar-area.navbar-saven .navbar .navbar-nav .nav-item .sub-menu li:hover .sub-menu { opacity: 1; visibility: visible; } .navbar-area.navbar-saven .navbar .navbar-nav .nav-item .sub-menu li:hover .sub-nav-toggler { color: #fff; } .navbar-area.navbar-saven .navbar .navbar-nav .nav-item .sub-menu li:hover > a { color: #fff; } .navbar-area.navbar-saven .navbar .navbar-nav .nav-item .sub-menu li:hover > a::after { opacity: 1; } .navbar-area.navbar-saven .navbar .navbar-nav .nav-item .sub-menu li:hover > a::before { opacity: 1; } .navbar-area.navbar-saven .navbar .navbar-nav .nav-item:hover .sub-menu { opacity: 1; visibility: visible; } .navbar-area.navbar-saven .navbar .navbar-nav .nav-item .sub-nav-toggler { display: none; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-saven .navbar .navbar-nav .nav-item .sub-nav-toggler { display: inline-block; position: absolute; top: 0; right: 0; padding: 10px 14px; font-size: 16px; background: none; border: 0; color: #fff; } } @media (max-width: 767px) { .navbar-area.navbar-saven .navbar .navbar-nav .nav-item .sub-nav-toggler { display: inline-block; position: absolute; top: 0; right: 0; padding: 10px 14px; font-size: 16px; background: none; border: 0; color: #fff; } } .navbar-area.navbar-saven .navbar .navbar-btn { margin-top: 15px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-saven .navbar .navbar-btn { position: absolute; right: 70px; top: 7px; } } @media (max-width: 767px) { .navbar-area.navbar-saven .navbar .navbar-btn { position: absolute; right: 60px; top: 7px; } } .navbar-area.navbar-saven .navbar .navbar-btn .menu-bar { font-size: 32px; position: relative; overflow: hidden; color: #fff; } /*===== NAVBAR EIGHT =====*/ .navbar-area.navbar-eight { background-color: #f4f6f7; padding: 10px 0; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-eight { padding: 10px 0; } } @media (max-width: 767px) { .navbar-area.navbar-eight { padding: 10px 0; } } .navbar-area.navbar-eight .navbar { position: relative; padding: 0; } .navbar-area.navbar-eight .navbar .navbar-toggler .toggler-icon { width: 30px; height: 2px; background-color: #121212; margin: 5px 0; display: block; position: relative; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .navbar-area.navbar-eight .navbar .navbar-toggler.active .toggler-icon:nth-of-type(1) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); top: 7px; } .navbar-area.navbar-eight .navbar .navbar-toggler.active .toggler-icon:nth-of-type(2) { opacity: 0; } .navbar-area.navbar-eight .navbar .navbar-toggler.active .toggler-icon:nth-of-type(3) { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); top: -7px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-eight .navbar .navbar-collapse { position: absolute; top: 116%; left: 0; width: 100%; background-color: #f4f6f7; z-index: 8; padding: 10px 16px; } } @media (max-width: 767px) { .navbar-area.navbar-eight .navbar .navbar-collapse { position: absolute; top: 116%; left: 0; width: 100%; background-color: #f4f6f7; z-index: 8; padding: 10px 16px; } } .navbar-area.navbar-eight .navbar .navbar-nav { margin-right: 24px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-eight .navbar .navbar-nav { margin-right: 0; } } @media (max-width: 767px) { .navbar-area.navbar-eight .navbar .navbar-nav { margin-right: 0; } } .navbar-area.navbar-eight .navbar .navbar-nav .nav-item { position: relative; } .navbar-area.navbar-eight .navbar .navbar-nav .nav-item a { font-size: 16px; line-height: 24px; font-weight: 700; padding: 11px 14px; color: #121212; text-transform: uppercase; position: relative; border-radius: 5px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; margin: 14px 4px; opacity: 0.7; border: 1px solid transparent; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-eight .navbar .navbar-nav .nav-item a { padding: 10px 0; display: block; border: 0; margin: 0; } } @media (max-width: 767px) { .navbar-area.navbar-eight .navbar .navbar-nav .nav-item a { padding: 10px 0; display: block; border: 0; margin: 0; } } .navbar-area.navbar-eight .navbar .navbar-nav .nav-item a.active { opacity: 1; border-color: #e5e5e8; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-eight .navbar .navbar-nav .nav-item a.active { border: 0; } } @media (max-width: 767px) { .navbar-area.navbar-eight .navbar .navbar-nav .nav-item a.active { border: 0; } } .navbar-area.navbar-eight .navbar .navbar-nav .nav-item a.active::before, .navbar-area.navbar-eight .navbar .navbar-nav .nav-item a.active::after { -webkit-transform: translateX(-50%) scaleX(1); -moz-transform: translateX(-50%) scaleX(1); -ms-transform: translateX(-50%) scaleX(1); -o-transform: translateX(-50%) scaleX(1); transform: translateX(-50%) scaleX(1); } .navbar-area.navbar-eight .navbar .navbar-nav .nav-item a::before, .navbar-area.navbar-eight .navbar .navbar-nav .nav-item a::after { position: absolute; content: ''; width: 32px; height: 2px; background: #0067f4; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%); left: 50%; top: 0; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; -webkit-transform: translateX(-50%) scaleX(0); -moz-transform: translateX(-50%) scaleX(0); -ms-transform: translateX(-50%) scaleX(0); -o-transform: translateX(-50%) scaleX(0); transform: translateX(-50%) scaleX(0); } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-eight .navbar .navbar-nav .nav-item a::before, .navbar-area.navbar-eight .navbar .navbar-nav .nav-item a::after { display: none; } } @media (max-width: 767px) { .navbar-area.navbar-eight .navbar .navbar-nav .nav-item a::before, .navbar-area.navbar-eight .navbar .navbar-nav .nav-item a::after { display: none; } } .navbar-area.navbar-eight .navbar .navbar-nav .nav-item a::after { top: auto; bottom: 0; } .navbar-area.navbar-eight .navbar .navbar-nav .nav-item:hover > a { opacity: 1; border-color: #e5e5e8; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-eight .navbar .navbar-nav .nav-item:hover > a { border: 0; } } @media (max-width: 767px) { .navbar-area.navbar-eight .navbar .navbar-nav .nav-item:hover > a { border: 0; } } .navbar-area.navbar-eight .navbar .navbar-nav .nav-item:hover > a::before, .navbar-area.navbar-eight .navbar .navbar-nav .nav-item:hover > a::after { -webkit-transform: translateX(-50%) scaleX(1); -moz-transform: translateX(-50%) scaleX(1); -ms-transform: translateX(-50%) scaleX(1); -o-transform: translateX(-50%) scaleX(1); transform: translateX(-50%) scaleX(1); } .navbar-area.navbar-eight .navbar .navbar-nav .nav-item .sub-nav-toggler { display: none; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-eight .navbar .navbar-nav .nav-item .sub-nav-toggler { display: inline-block; position: absolute; top: 0; right: 0; padding: 10px 14px; font-size: 16px; background: none; border: 0; color: #121212; } } @media (max-width: 767px) { .navbar-area.navbar-eight .navbar .navbar-nav .nav-item .sub-nav-toggler { display: inline-block; position: absolute; top: 0; right: 0; padding: 10px 14px; font-size: 16px; background: none; border: 0; color: #121212; } } .navbar-area.navbar-eight .navbar .navbar-nav .nav-item .sub-menu { position: absolute; right: 0; top: 100%; width: 260px; background-color: #fff; border-radius: 5px; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; z-index: 99; -webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.16); } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-eight .navbar .navbar-nav .nav-item .sub-menu { position: relative !important; width: 100% !important; left: 0 !important; top: auto !important; opacity: 1 !important; visibility: visible !important; display: none; right: auto; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); -webkit-transition: all none ease-out 0s; -moz-transition: all none ease-out 0s; -ms-transition: all none ease-out 0s; -o-transition: all none ease-out 0s; transition: all none ease-out 0s; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; text-align: left; border-top: 0; } } @media (max-width: 767px) { .navbar-area.navbar-eight .navbar .navbar-nav .nav-item .sub-menu { position: relative !important; width: 100% !important; left: 0 !important; top: auto !important; opacity: 1 !important; visibility: visible !important; display: none; right: auto; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); -webkit-transition: all none ease-out 0s; -moz-transition: all none ease-out 0s; -ms-transition: all none ease-out 0s; -o-transition: all none ease-out 0s; transition: all none ease-out 0s; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; text-align: left; border-top: 0; } } .navbar-area.navbar-eight .navbar .navbar-nav .nav-item .sub-menu li { position: relative; } .navbar-area.navbar-eight .navbar .navbar-nav .nav-item .sub-menu li .sub-nav-toggler { color: #121212; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .navbar-area.navbar-eight .navbar .navbar-nav .nav-item .sub-menu li a { display: block; padding: 8px 24px; position: relative; color: #121212; -webkit-transition: all 0s ease-out 0s; -moz-transition: all 0s ease-out 0s; -ms-transition: all 0s ease-out 0s; -o-transition: all 0s ease-out 0s; transition: all 0s ease-out 0s; border-radius: 0; margin: 0 0; opacity: 1; border: 0; } .navbar-area.navbar-eight .navbar .navbar-nav .nav-item .sub-menu li a .sub-nav-toggler { color: #121212; } .navbar-area.navbar-eight .navbar .navbar-nav .nav-item .sub-menu li a i { float: right; font-size: 14px; margin-top: 5px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-eight .navbar .navbar-nav .nav-item .sub-menu li a i { display: none; } } @media (max-width: 767px) { .navbar-area.navbar-eight .navbar .navbar-nav .nav-item .sub-menu li a i { display: none; } } .navbar-area.navbar-eight .navbar .navbar-nav .nav-item .sub-menu li a .sub-nav-toggler i { display: inline-block; } .navbar-area.navbar-eight .navbar .navbar-nav .nav-item .sub-menu li a::before { display: none; } .navbar-area.navbar-eight .navbar .navbar-nav .nav-item .sub-menu li .sub-menu { right: auto; left: 100%; top: 0; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-eight .navbar .navbar-nav .nav-item .sub-menu li .sub-menu { padding-left: 30px; } } @media (max-width: 767px) { .navbar-area.navbar-eight .navbar .navbar-nav .nav-item .sub-menu li .sub-menu { padding-left: 30px; } } .navbar-area.navbar-eight .navbar .navbar-nav .nav-item .sub-menu li:hover .sub-menu { opacity: 1; visibility: visible; } .navbar-area.navbar-eight .navbar .navbar-nav .nav-item .sub-menu li:hover .sub-nav-toggler { color: #fff; } .navbar-area.navbar-eight .navbar .navbar-nav .nav-item .sub-menu li:hover > a { background: #0067f4; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%); color: #fff; } .navbar-area.navbar-eight .navbar .navbar-nav .nav-item .sub-menu li:hover > a::before { opacity: 1; } .navbar-area.navbar-eight .navbar .navbar-nav .nav-item:hover .sub-menu { opacity: 1; visibility: visible; } .navbar-area.navbar-eight .navbar .navbar-btn { margin-top: 15px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-eight .navbar .navbar-btn { position: absolute; right: 70px; top: 7px; } } @media (max-width: 767px) { .navbar-area.navbar-eight .navbar .navbar-btn { position: absolute; right: 60px; top: 7px; } } .navbar-area.navbar-eight .navbar .navbar-btn .menu-bar { font-size: 32px; position: relative; overflow: hidden; color: #121212; } /*===== NAVBAR SAVEN =====*/ .navbar-area.navbar-nine { background: #0067f4; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%); padding: 10px 0; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-nine { padding: 10px 0; } } @media (max-width: 767px) { .navbar-area.navbar-nine { padding: 10px 0; } } .navbar-area.navbar-nine .navbar { position: relative; padding: 0; } .navbar-area.navbar-nine .navbar .navbar-toggler .toggler-icon { width: 30px; height: 2px; background-color: #fff; margin: 5px 0; display: block; position: relative; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .navbar-area.navbar-nine .navbar .navbar-toggler.active .toggler-icon:nth-of-type(1) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); top: 7px; } .navbar-area.navbar-nine .navbar .navbar-toggler.active .toggler-icon:nth-of-type(2) { opacity: 0; } .navbar-area.navbar-nine .navbar .navbar-toggler.active .toggler-icon:nth-of-type(3) { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); top: -7px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-nine .navbar .navbar-collapse { position: absolute; top: 116%; left: 0; width: 100%; background-color: #0067f4; z-index: 8; padding: 10px 16px; } } @media (max-width: 767px) { .navbar-area.navbar-nine .navbar .navbar-collapse { position: absolute; top: 116%; left: 0; width: 100%; background-color: #0067f4; z-index: 8; padding: 10px 16px; } } .navbar-area.navbar-nine .navbar .navbar-nav { margin-right: 24px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-nine .navbar .navbar-nav { margin-right: 0; } } @media (max-width: 767px) { .navbar-area.navbar-nine .navbar .navbar-nav { margin-right: 0; } } .navbar-area.navbar-nine .navbar .navbar-nav .nav-item { position: relative; } .navbar-area.navbar-nine .navbar .navbar-nav .nav-item a { font-size: 16px; line-height: 24px; font-weight: 700; padding: 11px 16px; color: #fff; text-transform: uppercase; position: relative; border-radius: 5px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; margin: 14px 0; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-nine .navbar .navbar-nav .nav-item a { padding: 10px 0; display: block; border: 0; margin: 0; } } @media (max-width: 767px) { .navbar-area.navbar-nine .navbar .navbar-nav .nav-item a { padding: 10px 0; display: block; border: 0; margin: 0; } } .navbar-area.navbar-nine .navbar .navbar-nav .nav-item a.active::before, .navbar-area.navbar-nine .navbar .navbar-nav .nav-item a.active::after { opacity: 1; } .navbar-area.navbar-nine .navbar .navbar-nav .nav-item a::before, .navbar-area.navbar-nine .navbar .navbar-nav .nav-item a::after { position: absolute; content: ''; width: 8px; height: 4px; background-color: #2bdbdc; left: 50%; margin: 0 2px; bottom: 0; opacity: 0; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-nine .navbar .navbar-nav .nav-item a::before, .navbar-area.navbar-nine .navbar .navbar-nav .nav-item a::after { display: none; } } @media (max-width: 767px) { .navbar-area.navbar-nine .navbar .navbar-nav .nav-item a::before, .navbar-area.navbar-nine .navbar .navbar-nav .nav-item a::after { display: none; } } .navbar-area.navbar-nine .navbar .navbar-nav .nav-item a::after { left: auto; right: 50%; } .navbar-area.navbar-nine .navbar .navbar-nav .nav-item:hover > a::before, .navbar-area.navbar-nine .navbar .navbar-nav .nav-item:hover > a::after { opacity: 1; } .navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu { position: absolute; left: 0; top: 100%; width: 260px; background-color: #fff; border-radius: 5px; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; z-index: 99; -webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.16); } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu { position: relative !important; width: 100% !important; left: 0 !important; top: auto !important; opacity: 1 !important; visibility: visible !important; display: none; right: auto; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); -webkit-transition: all none ease-out 0s; -moz-transition: all none ease-out 0s; -ms-transition: all none ease-out 0s; -o-transition: all none ease-out 0s; transition: all none ease-out 0s; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; text-align: left; border-top: 0; } } @media (max-width: 767px) { .navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu { position: relative !important; width: 100% !important; left: 0 !important; top: auto !important; opacity: 1 !important; visibility: visible !important; display: none; right: auto; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); -webkit-transition: all none ease-out 0s; -moz-transition: all none ease-out 0s; -ms-transition: all none ease-out 0s; -o-transition: all none ease-out 0s; transition: all none ease-out 0s; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; text-align: left; border-top: 0; } } .navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu li { position: relative; } .navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu li .sub-nav-toggler { color: #121212; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu li a { display: block; padding: 8px 24px; position: relative; color: #121212; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; border-radius: 0; margin: 0 0; z-index: 5; } .navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu li a i { float: right; font-size: 14px; margin-top: 5px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu li a i { display: none; } } @media (max-width: 767px) { .navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu li a i { display: none; } } .navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu li a .sub-nav-toggler i { display: inline-block; } .navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu li a::after { position: absolute; content: ''; top: 0; left: -2px; width: 100%; height: 100%; border-radius: 5px; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%); opacity: 0; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; z-index: -1; } .navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu li a::before { display: none; } .navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu li .sub-menu { right: auto; left: 100%; top: 0; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu li .sub-menu { padding-left: 30px; } } @media (max-width: 767px) { .navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu li .sub-menu { padding-left: 30px; } } .navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu li:hover .sub-menu { opacity: 1; visibility: visible; } .navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu li:hover .sub-nav-toggler { color: #fff; } .navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu li:hover > a { color: #fff; } .navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu li:hover > a::after { opacity: 1; } .navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu li:hover > a::before { opacity: 1; } .navbar-area.navbar-nine .navbar .navbar-nav .nav-item:hover .sub-menu { opacity: 1; visibility: visible; } .navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-nav-toggler { display: none; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-nav-toggler { display: inline-block; position: absolute; top: 0; right: 0; padding: 10px 14px; font-size: 16px; background: none; border: 0; color: #fff; } } @media (max-width: 767px) { .navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-nav-toggler { display: inline-block; position: absolute; top: 0; right: 0; padding: 10px 14px; font-size: 16px; background: none; border: 0; color: #fff; } } .navbar-area.navbar-nine .navbar .navbar-btn { margin-top: 15px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-nine .navbar .navbar-btn { position: absolute; right: 70px; top: 7px; } } @media (max-width: 767px) { .navbar-area.navbar-nine .navbar .navbar-btn { position: absolute; right: 60px; top: 7px; } } .navbar-area.navbar-nine .navbar .navbar-btn .menu-bar { font-size: 32px; position: relative; overflow: hidden; color: #fff; } /*===== NAVBAR NINE =====*/ .navbar-area.navbar-ten { background-color: #f4f6f7; padding: 10px 0; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-ten { padding: 10px 0; } } @media (max-width: 767px) { .navbar-area.navbar-ten { padding: 10px 0; } } .navbar-area.navbar-ten .navbar { position: relative; padding: 0; } .navbar-area.navbar-ten .navbar .navbar-toggler .toggler-icon { width: 30px; height: 2px; background-color: #121212; margin: 5px 0; display: block; position: relative; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .navbar-area.navbar-ten .navbar .navbar-toggler.active .toggler-icon:nth-of-type(1) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); top: 7px; } .navbar-area.navbar-ten .navbar .navbar-toggler.active .toggler-icon:nth-of-type(2) { opacity: 0; } .navbar-area.navbar-ten .navbar .navbar-toggler.active .toggler-icon:nth-of-type(3) { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); top: -7px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-ten .navbar .navbar-collapse { position: absolute; top: 116%; left: 0; width: 100%; background-color: #f4f6f7; z-index: 8; padding: 10px 16px; } } @media (max-width: 767px) { .navbar-area.navbar-ten .navbar .navbar-collapse { position: absolute; top: 116%; left: 0; width: 100%; background-color: #f4f6f7; z-index: 8; padding: 10px 16px; } } .navbar-area.navbar-ten .navbar .navbar-nav { margin-right: 24px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-ten .navbar .navbar-nav { margin-right: 0; } } @media (max-width: 767px) { .navbar-area.navbar-ten .navbar .navbar-nav { margin-right: 0; } } .navbar-area.navbar-ten .navbar .navbar-nav .nav-item { position: relative; } .navbar-area.navbar-ten .navbar .navbar-nav .nav-item a { font-size: 16px; line-height: 24px; font-weight: 700; padding: 11px 16px; color: #121212; text-transform: uppercase; position: relative; border-radius: 5px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; margin: 14px 0; opacity: 0.7; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-ten .navbar .navbar-nav .nav-item a { padding: 10px 0; display: block; border: 0; margin: 0; } } @media (max-width: 767px) { .navbar-area.navbar-ten .navbar .navbar-nav .nav-item a { padding: 10px 0; display: block; border: 0; margin: 0; } } .navbar-area.navbar-ten .navbar .navbar-nav .nav-item a.active { opacity: 1; } .navbar-area.navbar-ten .navbar .navbar-nav .nav-item a.active::before { -webkit-transform: translateX(-50%) scaleX(1); -moz-transform: translateX(-50%) scaleX(1); -ms-transform: translateX(-50%) scaleX(1); -o-transform: translateX(-50%) scaleX(1); transform: translateX(-50%) scaleX(1); } .navbar-area.navbar-ten .navbar .navbar-nav .nav-item a::before { position: absolute; content: ''; width: 32px; height: 4px; background: #0067f4; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%); left: 50%; bottom: 0; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; -webkit-transform: translateX(-50%) scaleX(0); -moz-transform: translateX(-50%) scaleX(0); -ms-transform: translateX(-50%) scaleX(0); -o-transform: translateX(-50%) scaleX(0); transform: translateX(-50%) scaleX(0); } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-ten .navbar .navbar-nav .nav-item a::before { display: none; } } @media (max-width: 767px) { .navbar-area.navbar-ten .navbar .navbar-nav .nav-item a::before { display: none; } } .navbar-area.navbar-ten .navbar .navbar-nav .nav-item:hover > a { opacity: 1; } .navbar-area.navbar-ten .navbar .navbar-nav .nav-item:hover > a::before { -webkit-transform: translateX(-50%) scaleX(1); -moz-transform: translateX(-50%) scaleX(1); -ms-transform: translateX(-50%) scaleX(1); -o-transform: translateX(-50%) scaleX(1); transform: translateX(-50%) scaleX(1); } .navbar-area.navbar-ten .navbar .navbar-nav .nav-item .sub-nav-toggler { display: none; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-ten .navbar .navbar-nav .nav-item .sub-nav-toggler { display: inline-block; position: absolute; top: 0; right: 0; padding: 10px 14px; font-size: 16px; background: none; border: 0; color: #121212; } } @media (max-width: 767px) { .navbar-area.navbar-ten .navbar .navbar-nav .nav-item .sub-nav-toggler { display: inline-block; position: absolute; top: 0; right: 0; padding: 10px 14px; font-size: 16px; background: none; border: 0; color: #121212; } } .navbar-area.navbar-ten .navbar .navbar-nav .nav-item .sub-menu { position: absolute; left: 0; top: 100%; width: 260px; background-color: #fff; border-radius: 5px; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; z-index: 99; -webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.16); } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-ten .navbar .navbar-nav .nav-item .sub-menu { position: relative !important; width: 100% !important; left: 0 !important; top: auto !important; opacity: 1 !important; visibility: visible !important; display: none; right: auto; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); -webkit-transition: all none ease-out 0s; -moz-transition: all none ease-out 0s; -ms-transition: all none ease-out 0s; -o-transition: all none ease-out 0s; transition: all none ease-out 0s; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; text-align: left; border-top: 0; } } @media (max-width: 767px) { .navbar-area.navbar-ten .navbar .navbar-nav .nav-item .sub-menu { position: relative !important; width: 100% !important; left: 0 !important; top: auto !important; opacity: 1 !important; visibility: visible !important; display: none; right: auto; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); -webkit-transition: all none ease-out 0s; -moz-transition: all none ease-out 0s; -ms-transition: all none ease-out 0s; -o-transition: all none ease-out 0s; transition: all none ease-out 0s; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; text-align: left; border-top: 0; } } .navbar-area.navbar-ten .navbar .navbar-nav .nav-item .sub-menu li { position: relative; } .navbar-area.navbar-ten .navbar .navbar-nav .nav-item .sub-menu li .sub-nav-toggler { color: #121212; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .navbar-area.navbar-ten .navbar .navbar-nav .nav-item .sub-menu li a { display: block; padding: 8px 24px; position: relative; color: #121212; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; border-radius: 0; margin: 0 0; opacity: 1; border: 0; z-index: 5; } .navbar-area.navbar-ten .navbar .navbar-nav .nav-item .sub-menu li a .sub-nav-toggler { color: #121212; } .navbar-area.navbar-ten .navbar .navbar-nav .nav-item .sub-menu li a i { float: right; font-size: 14px; margin-top: 5px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-ten .navbar .navbar-nav .nav-item .sub-menu li a i { display: none; } } @media (max-width: 767px) { .navbar-area.navbar-ten .navbar .navbar-nav .nav-item .sub-menu li a i { display: none; } } .navbar-area.navbar-ten .navbar .navbar-nav .nav-item .sub-menu li a .sub-nav-toggler i { display: inline-block; } .navbar-area.navbar-ten .navbar .navbar-nav .nav-item .sub-menu li a::after { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; border-radius: 5px; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%); opacity: 0; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; z-index: -1; } .navbar-area.navbar-ten .navbar .navbar-nav .nav-item .sub-menu li a::before { display: none; } .navbar-area.navbar-ten .navbar .navbar-nav .nav-item .sub-menu li .sub-menu { right: auto; left: 100%; top: 0; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-ten .navbar .navbar-nav .nav-item .sub-menu li .sub-menu { padding-left: 30px; } } @media (max-width: 767px) { .navbar-area.navbar-ten .navbar .navbar-nav .nav-item .sub-menu li .sub-menu { padding-left: 30px; } } .navbar-area.navbar-ten .navbar .navbar-nav .nav-item .sub-menu li:hover .sub-menu { opacity: 1; visibility: visible; } .navbar-area.navbar-ten .navbar .navbar-nav .nav-item .sub-menu li:hover .sub-nav-toggler { color: #fff; } .navbar-area.navbar-ten .navbar .navbar-nav .nav-item .sub-menu li:hover > a { color: #fff; } .navbar-area.navbar-ten .navbar .navbar-nav .nav-item .sub-menu li:hover > a::after { opacity: 1; } .navbar-area.navbar-ten .navbar .navbar-nav .nav-item .sub-menu li:hover > a::before { opacity: 1; } .navbar-area.navbar-ten .navbar .navbar-nav .nav-item:hover .sub-menu { opacity: 1; visibility: visible; } .navbar-area.navbar-ten .navbar .navbar-btn { margin-top: 15px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-ten .navbar .navbar-btn { position: absolute; right: 70px; top: 7px; } } @media (max-width: 767px) { .navbar-area.navbar-ten .navbar .navbar-btn { position: absolute; right: 60px; top: 7px; } } .navbar-area.navbar-ten .navbar .navbar-btn .menu-bar { font-size: 32px; position: relative; overflow: hidden; color: #121212; } /*===== NAVBAR ELEVEN =====*/ .navbar-eleven { background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%); padding: 10px 0; } .navbar-eleven .navbar { padding: 0; } .navbar-eleven .navbar .navbar-menu .menu-bar { font-size: 32px; position: relative; overflow: hidden; color: #fff; line-height: 28px; } .navbar-eleven .navbar .navbar-brand { margin-right: 0; } @media (max-width: 767px) { .navbar-eleven .navbar .navbar-brand img { width: 40px; } } .navbar-eleven .navbar .navbar-btn ul li { display: inline-block; margin-right: 5px; } .navbar-eleven .navbar .navbar-btn ul li a { padding: 10px 16px; font-size: 16px; text-transform: uppercase; font-weight: 700; color: #fff; border: 2px solid; border-radius: 4px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media (max-width: 767px) { .navbar-eleven .navbar .navbar-btn ul li a { padding: 6px 8px; font-size: 14px; } } .navbar-eleven .navbar .navbar-btn ul li a.light { border-color: #fff; } .navbar-eleven .navbar .navbar-btn ul li a.light:hover { background-color: rgba(255, 255, 255, 0.4); } .navbar-eleven .navbar .navbar-btn ul li a.solid { background-color: #fff; border-color: #fff; color: #0067f4; } .navbar-eleven .navbar .navbar-btn ul li a.solid:hover { background-color: transparent; color: #fff; } /*===== NAVBAR TWELVE =====*/ .navbar-twelve { background-color: #f4f6f7; padding: 10px 0; } .navbar-twelve .navbar { padding: 0; } .navbar-twelve .navbar .navbar-menu .menu-bar { font-size: 32px; position: relative; overflow: hidden; color: #0067f4; line-height: 28px; } .navbar-twelve .navbar .navbar-brand { margin-right: 0; } @media (max-width: 767px) { .navbar-twelve .navbar .navbar-brand img { width: 40px; } } .navbar-twelve .navbar .navbar-btn ul li { display: inline-block; margin-right: 5px; } .navbar-twelve .navbar .navbar-btn ul li a { padding: 10px 16px; font-size: 16px; text-transform: uppercase; font-weight: 700; color: #fff; border: 2px solid; border-radius: 4px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media (max-width: 767px) { .navbar-twelve .navbar .navbar-btn ul li a { padding: 6px 8px; font-size: 14px; } } .navbar-twelve .navbar .navbar-btn ul li a.light { border-image-source: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); border-image-source: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); border-image-source: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%); border-image-slice: 1; color: #0067f4; position: relative; z-index: 5; } .navbar-twelve .navbar .navbar-btn ul li a.light::before { position: absolute; content: ''; width: 100%; height: 100%; background-image: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background-image: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background-image: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%); left: 0; top: 0; z-index: -1; opacity: 0; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .navbar-twelve .navbar .navbar-btn ul li a.light:hover { color: #fff; } .navbar-twelve .navbar .navbar-btn ul li a.light:hover::before { opacity: 1; } .navbar-twelve .navbar .navbar-btn ul li a.solid { color: #fff; position: relative; border-image-source: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); border-image-source: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); border-image-source: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%); border-image-slice: 1; z-index: 5; } .navbar-twelve .navbar .navbar-btn ul li a.solid::before { position: absolute; content: ''; width: 100%; height: 100%; background-image: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background-image: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background-image: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%); left: 0; top: 0; z-index: -1; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; opacity: 1; } .navbar-twelve .navbar .navbar-btn ul li a.solid:hover { color: #0067f4; } .navbar-twelve .navbar .navbar-btn ul li a.solid:hover::before { opacity: 0; } /*===== NAVBAR THIRTEEN =====*/ .navbar-thirteen { background-color: #f4f6f7; } .navbar-thirteen .navbar .navbar-right .navbar-social span { font-size: 16px; line-height: 24px; color: #6c6c6c; text-transform: uppercase; font-weight: 700; margin-right: 14px; } .navbar-thirteen .navbar .navbar-right .navbar-social ul li { display: inline-block; margin-right: 5px; } .navbar-thirteen .navbar .navbar-right .navbar-social ul li a { font-size: 32px; color: #0067f4; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .navbar-thirteen .navbar .navbar-right .navbar-btn { margin-left: 30px; } /*===== SAIDEBAR ONE =====*/ .sidebar-left { position: fixed; top: 0; left: 0; background-color: #f4f6f7; height: 100%; width: 300px; padding-top: 80px; z-index: 99; -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .sidebar-left.open { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } @media (max-width: 767px) { .sidebar-left { width: 250px; } } .sidebar-left .sidebar-close { position: absolute; top: 30px; right: 30px; } .sidebar-left .sidebar-close .close { font-size: 24px; color: #121212; } .sidebar-left .sidebar-content .sidebar-menu { margin-top: 40px; } .sidebar-left .sidebar-content .sidebar-menu ul li a { font-size: 16px; line-height: 24px; font-weight: 700; padding: 11px 16px; color: #121212; text-transform: uppercase; position: relative; border-radius: 5px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; border-bottom: 1px solid #cbced1; display: block; } .sidebar-left .sidebar-content .sidebar-menu ul li a:hover { color: #0067f4; } .sidebar-left .sidebar-content .sidebar-social { margin-top: 30px; } .sidebar-left .sidebar-content .sidebar-social span { font-size: 16px; line-height: 24px; color: #6c6c6c; text-transform: uppercase; font-weight: 700; margin-right: 14px; } .sidebar-left .sidebar-content .sidebar-social ul li { display: inline-block; margin-right: 5px; } .sidebar-left .sidebar-content .sidebar-social ul li a { font-size: 32px; color: #0067f4; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .sidebar-right { position: fixed; top: 0; right: 0; background-color: #f4f6f7; height: 100%; width: 300px; padding-top: 80px; z-index: 99; -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .sidebar-right.open { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } @media (max-width: 767px) { .sidebar-right { width: 250px; } } .sidebar-right .sidebar-close { position: absolute; top: 30px; left: 30px; } .sidebar-right .sidebar-close .close { font-size: 24px; color: #121212; } .sidebar-right .sidebar-content .sidebar-menu { margin-top: 40px; } .sidebar-right .sidebar-content .sidebar-menu ul li a { font-size: 16px; line-height: 24px; font-weight: 700; padding: 11px 16px; color: #121212; text-transform: uppercase; position: relative; border-radius: 5px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; border-bottom: 1px solid #cbced1; display: block; } .sidebar-right .sidebar-content .sidebar-menu ul li a:hover { color: #0067f4; } .sidebar-right .sidebar-content .sidebar-social { margin-top: 30px; } .sidebar-right .sidebar-content .sidebar-social span { font-size: 16px; line-height: 24px; color: #6c6c6c; text-transform: uppercase; font-weight: 700; margin-right: 14px; } .sidebar-right .sidebar-content .sidebar-social ul li { display: inline-block; margin-right: 5px; } .sidebar-right .sidebar-content .sidebar-social ul li a { font-size: 32px; color: #0067f4; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .overlay-left { position: fixed; background-color: rgba(0, 0, 0, 0.6); top: 0; left: 0; width: 100%; height: 100%; display: none; z-index: 9; } .overlay-left.open { display: block; } .overlay-right { position: fixed; background-color: rgba(0, 0, 0, 0.6); top: 0; left: 0; width: 100%; height: 100%; display: none; z-index: 9; } .overlay-right.open { display: block; } /*=========================== 10.SLIDER css ===========================*/ /*===== SLIDER ONE =====*/ .slider-one .bd-example .carousel .carousel-inner { background-color: #0067f4; } .slider-one .bd-example .carousel .carousel-inner .carousel-item { height: 600px; } @media (max-width: 767px) { .slider-one .bd-example .carousel .carousel-inner .carousel-item { height: 400px; } } .slider-one .bd-example .carousel .carousel-inner .carousel-item .carousel-caption { top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 100%; left: 0; } .slider-one .bd-example .carousel .carousel-inner .carousel-item .carousel-caption .carousel-title { font-size: 44px; font-weight: 700; color: #fff; line-height: 55px; } @media (max-width: 767px) { .slider-one .bd-example .carousel .carousel-inner .carousel-item .carousel-caption .carousel-title { font-size: 24px; line-height: 32px; } } .slider-one .bd-example .carousel .carousel-inner .carousel-item .carousel-caption .carousel-btn li { display: inline-block; margin: 16px 8px 0; } @media (max-width: 767px) { .slider-one .bd-example .carousel .carousel-inner .carousel-item .carousel-caption .carousel-btn li { margin: 16px 3px 0; } } .slider-one .bd-example .carousel .carousel-inner .carousel-item .carousel-caption .carousel-btn li a.rounded-three { border: 0; } .slider-one .bd-example .carousel .carousel-inner .carousel-item .carousel-caption .carousel-btn li a.rounded-one { border-color: #fff; color: #fff; } .slider-one .bd-example .carousel .carousel-inner .carousel-item .carousel-caption .carousel-btn li a.rounded-one:hover { background-color: #fff; color: #0067f4; } .slider-one .bd-example .carousel .carousel-control-prev, .slider-one .bd-example .carousel .carousel-control-next { top: 50%; width: auto; height: auto; font-size: 70px; color: #fff; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); bottom: auto; left: 70px; opacity: 1; z-index: 99; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .slider-one .bd-example .carousel .carousel-control-prev, .slider-one .bd-example .carousel .carousel-control-next { left: 30px; font-size: 50px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider-one .bd-example .carousel .carousel-control-prev, .slider-one .bd-example .carousel .carousel-control-next { left: 30px; font-size: 50px; } } @media (max-width: 767px) { .slider-one .bd-example .carousel .carousel-control-prev, .slider-one .bd-example .carousel .carousel-control-next { left: 20px; font-size: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider-one .bd-example .carousel .carousel-control-prev, .slider-one .bd-example .carousel .carousel-control-next { font-size: 34px; } } .slider-one .bd-example .carousel .carousel-control-next { right: 70px; left: auto; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .slider-one .bd-example .carousel .carousel-control-next { right: 40px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider-one .bd-example .carousel .carousel-control-next { right: 40px; } } @media (max-width: 767px) { .slider-one .bd-example .carousel .carousel-control-next { right: 20px; } } .slider-one .bd-example .carousel .carousel-indicators { margin-bottom: 20px; } .slider-one .bd-example .carousel .carousel-indicators li { width: 8px; height: 8px; background-color: rgba(255, 255, 255, 0.3); border-radius: 50px; border: 0; } .slider-one .bd-example .carousel .carousel-indicators li.active { width: 16px; background-color: #fff; border-radius: 5px; } /*===== SLIDER TWO =====*/ .slider-area.slider-two { background-color: #f4f6f7; position: relative; } .slider-area.slider-two .slider-content { padding-top: 232px; padding-bottom: 232px; max-width: 560px; width: 100%; margin: 0 auto; } @media (max-width: 767px) { .slider-area.slider-two .slider-content { padding-top: 132px; padding-bottom: 132px; } } .slider-area.slider-two .slider-content .slider-title { font-size: 44px; line-height: 55px; color: #121212; padding: 0 5px; } @media (max-width: 767px) { .slider-area.slider-two .slider-content .slider-title { font-size: 24px; line-height: 32px; } } .slider-area.slider-two .slider-content .text { font-size: 16px; line-height: 24px; color: #6c6c6c; margin-top: 16px; } @media (max-width: 767px) { .slider-area.slider-two .slider-content .text { font-size: 14px; } } .slider-area.slider-two .slider-content .slider-btn { margin-top: 14px; } .slider-area.slider-two .slider-content .slider-btn li { display: inline-block; margin: 10px 8px 0; } @media (max-width: 767px) { .slider-area.slider-two .slider-content .slider-btn li { margin: 10px 3px 0; } } .slider-area.slider-two .carousel { position: absolute; top: 0; right: 0; width: 50%; height: 100%; } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider-area.slider-two .carousel { position: relative; height: 700px; width: 100%; } } @media (max-width: 767px) { .slider-area.slider-two .carousel { position: relative; height: 400px; width: 100%; } } .slider-area.slider-two .carousel .carousel-inner { width: 100%; height: 100%; } .slider-area.slider-two .carousel .carousel-inner .carousel-item { width: 100%; height: 100%; } .slider-area.slider-two .carousel .carousel-control-prev, .slider-area.slider-two .carousel .carousel-control-next { top: 30%; width: auto; height: auto; font-size: 32px; color: #fff; bottom: auto; left: 8px; right: auto; opacity: 1; } @media (max-width: 767px) { .slider-area.slider-two .carousel .carousel-control-prev, .slider-area.slider-two .carousel .carousel-control-next { font-size: 24px; } } .slider-area.slider-two .carousel .carousel-control-next { top: auto; bottom: 30%; } .slider-area.slider-two .carousel .carousel-indicators { display: block; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); left: 20px; bottom: auto; margin-left: 0; margin-right: 0; } @media (max-width: 767px) { .slider-area.slider-two .carousel .carousel-indicators { left: 16px; } } .slider-area.slider-two .carousel .carousel-indicators li { display: block; width: 8px; height: 8px; background-color: rgba(255, 255, 255, 0.5); border-radius: 50px; border: 0; margin: 5px 0; } .slider-area.slider-two .carousel .carousel-indicators li.active { background-color: #fff; height: 16px; border-radius: 5px; } /*===== SLIDER THREE =====*/ .slider-three { background-color: #f4f6f7; padding-top: 112px; padding-bottom: 130px; } .slider-three .section-title .title { font-size: 44px; line-height: 55px; font-weight: 700; color: #121212; } @media (max-width: 767px) { .slider-three .section-title .title { font-size: 28px; line-height: 32px; } } .slider-three .section-title .text { font-size: 16px; line-height: 24px; color: #6c6c6c; margin-top: 24px; } @media (max-width: 767px) { .slider-three .section-title .text { font-size: 14px; } } .slider-three .slider-items-active .slick-dots { text-align: center; margin-top: 38px; } .slider-three .slider-items-active .slick-dots li { display: inline-block; margin: 0 2px; } .slider-three .slider-items-active .slick-dots li button { width: 8px; height: 8px; border-radius: 50px; background-color: rgba(0, 103, 244, 0.3); border: 0; font-size: 0; } .slider-three .slider-items-active .slick-dots li.slick-active button { width: 16px; background-color: #0067f4; border-radius: 5px; } .slider-three .single-items-one img { width: 100%; -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16); border-radius: 10px; } /*===== SLIDER FOUR =====*/ .slider-four .carousel-item { background-color: #0067f4; position: relative; } .slider-four .carousel-item::before { position: absolute; content: ''; width: 33%; height: 100%; background: #0067f4; background: -webkit-linear-gradient(rgba(0, 103, 244, 0.3) 0%, rgba(43, 219, 220, 0.3) 100%); background: -o-linear-gradient(rgba(0, 103, 244, 0.3) 0%, rgba(43, 219, 220, 0.3) 100%); background: linear-gradient(rgba(0, 103, 244, 0.3) 0%, rgba(43, 219, 220, 0.3) 100%); top: 0; right: 15%; -webkit-transform: skewX(20deg); -moz-transform: skewX(20deg); -ms-transform: skewX(20deg); -o-transform: skewX(20deg); transform: skewX(20deg); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .slider-four .carousel-item::before { width: 40%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider-four .carousel-item::before { width: 60%; } } @media (max-width: 767px) { .slider-four .carousel-item::before { width: 50%; right: 45%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider-four .carousel-item::before { right: 25%; } } .slider-four .carousel-item .slider-content { padding-top: 124px; padding-bottom: 136px; position: relative; z-index: 9; } .slider-four .carousel-item .slider-content .title { font-size: 88px; line-height: 96px; color: #fff; font-weight: 700; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .slider-four .carousel-item .slider-content .title { font-size: 68px; line-height: 90px; } } @media (max-width: 767px) { .slider-four .carousel-item .slider-content .title { font-size: 48px; line-height: 65px; } } .slider-four .carousel-item .slider-content .text { color: #fff; font-size: 16px; line-height: 24px; margin-top: 16px; } .slider-four .carousel-item .slider-content .slider-btn { padding-top: 16px; } .slider-four .carousel-item .slider-content .slider-btn li { display: inline-block; margin: 16px 8px 0; } @media (max-width: 767px) { .slider-four .carousel-item .slider-content .slider-btn li { margin: 16px 3px 0; } } .slider-four .carousel-item .slider-content .slider-btn li a.rounded-one { background-color: #fff; border-color: #fff; } .slider-four .carousel-item .slider-content .slider-btn li a.rounded-one:hover { background-color: transparent; color: #fff; } .slider-four .carousel-item .slider-content .slider-btn li a.rounded-two { border-color: #fff; } .slider-four .carousel-item .slider-content .slider-btn li a.rounded-two:hover { background-color: #fff; color: #0067f4; } .slider-four .carousel-item .slider-image-box { position: absolute; top: 0; right: 0; width: 50%; height: 100%; z-index: 9; } .slider-four .carousel-item .slider-image-box .slider-image { max-width: 680px; width: 100%; } .slider-four .carousel .carousel-control-prev, .slider-four .carousel .carousel-control-next { top: 50%; font-size: 32px; color: #fff; bottom: auto; left: 60px; right: auto; opacity: 1; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); z-index: 99; width: 48px; height: 48px; line-height: 48px; text-align: center; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 5px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .slider-four .carousel .carousel-control-prev, .slider-four .carousel .carousel-control-next { left: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider-four .carousel .carousel-control-prev, .slider-four .carousel .carousel-control-next { left: 30px; } } @media (max-width: 767px) { .slider-four .carousel .carousel-control-prev, .slider-four .carousel .carousel-control-next { font-size: 24px; width: 38px; height: 38px; left: 30px; } } .slider-four .carousel .carousel-control-next { right: 60px; left: auto; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .slider-four .carousel .carousel-control-next { right: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider-four .carousel .carousel-control-next { right: 30px; } } @media (max-width: 767px) { .slider-four .carousel .carousel-control-next { right: 30px; } } .slider-four .carousel .carousel-indicators { margin-bottom: 50px; } .slider-four .carousel .carousel-indicators li { display: block; width: 8px; height: 8px; background-color: rgba(255, 255, 255, 0.5); border-radius: 50px; border: 0; margin: 0px 2px; } .slider-four .carousel .carousel-indicators li.active { background-color: #fff; width: 16px; border-radius: 5px; } /*===== SLIDER FIVE =====*/ .slider-five { background-color: #0067f4; position: relative; } .slider-five .slider-content { max-width: 560px; margin: 0 auto; padding-top: 230px; padding-bottom: 236px; } @media (max-width: 767px) { .slider-five .slider-content { padding-top: 100px; padding-bottom: 106px; } } .slider-five .slider-content .slider-title { font-size: 44px; font-weight: 600; color: #fff; line-height: 55px; } @media (max-width: 767px) { .slider-five .slider-content .slider-title { font-size: 28px; line-height: 38px; } } .slider-five .slider-content .text { font-size: 16px; color: #fff; line-height: 24px; margin-top: 16px; } @media (max-width: 767px) { .slider-five .slider-content .text { font-size: 14px; } } .slider-five .slider-content .slider-newsletter { max-width: 410px; position: relative; margin: 24px auto 0; } .slider-five .slider-content .slider-newsletter i { font-size: 26px; color: #0067f4; position: absolute; left: 18px; top: 12px; } .slider-five .slider-content .slider-newsletter input { width: 100%; height: 48px; border: 0; border-radius: 50px; background-color: #fff; padding-left: 60px; padding-right: 30px; } .slider-five .slider-content .slider-newsletter input::placeholder { opacity: 1; color: #6c6c6c; } .slider-five .slider-content .slider-newsletter input::-moz-placeholder { opacity: 1; color: #6c6c6c; } .slider-five .slider-content .slider-newsletter input::-moz-placeholder { opacity: 1; color: #6c6c6c; } .slider-five .slider-content .slider-newsletter input::-webkit-input-placeholder { opacity: 1; color: #6c6c6c; } .slider-five .slider-content .slider-newsletter .slider-btn { border: 0; position: absolute; top: 0; right: 0; } @media (max-width: 767px) { .slider-five .slider-content .slider-newsletter .slider-btn { position: relative; right: auto; margin-top: 15px; } } .slider-five .slider-content .slider-newsletter .slider-btn .main-btn { border: 0; border-radius: 50px; line-height: 48px; } .slider-five .carousel { position: absolute; top: 0; left: 0; width: 50%; height: 100%; } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider-five .carousel { height: 720px; position: relative; width: 100%; } } @media (max-width: 767px) { .slider-five .carousel { height: 420px; position: relative; width: 100%; } } .slider-five .carousel .carousel-inner { height: 100%; width: 100%; } .slider-five .carousel .carousel-inner .carousel-item { height: 100%; width: 100%; } .slider-five .carousel .carousel-control-prev, .slider-five .carousel .carousel-control-next { top: 50%; width: auto; height: auto; font-size: 32px; color: rgba(0, 103, 244, 0.3); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); bottom: auto; left: 70px; opacity: 1; z-index: 99; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .slider-five .carousel .carousel-control-prev, .slider-five .carousel .carousel-control-next { left: 40px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider-five .carousel .carousel-control-prev, .slider-five .carousel .carousel-control-next { left: 40px; } } @media (max-width: 767px) { .slider-five .carousel .carousel-control-prev, .slider-five .carousel .carousel-control-next { left: 20px; font-size: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider-five .carousel .carousel-control-prev, .slider-five .carousel .carousel-control-next { font-size: 34px; } } .slider-five .carousel .carousel-control-prev:hover, .slider-five .carousel .carousel-control-next:hover { color: #0067f4; } .slider-five .carousel .carousel-control-next { right: 70px; left: auto; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .slider-five .carousel .carousel-control-next { right: 40px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider-five .carousel .carousel-control-next { right: 40px; } } @media (max-width: 767px) { .slider-five .carousel .carousel-control-next { right: 20px; } } .slider-five .carousel .carousel-indicators { margin-bottom: 20px; } .slider-five .carousel .carousel-indicators li { width: 8px; height: 8px; background-color: rgba(0, 103, 244, 0.3); border-radius: 50px; border: 0; } .slider-five .carousel .carousel-indicators li.active { width: 16px; background-color: #0067f4; border-radius: 5px; } /*===== SLIDER SIX =====*/ .slider-six { background-color: #0067f4; padding-top: 124px; padding-bottom: 130px; } .slider-six .section-title .title { font-size: 44px; font-weight: 600; line-height: 55px; color: #fff; } @media (max-width: 767px) { .slider-six .section-title .title { font-size: 32px; line-height: 40px; } } .slider-six .single-items-two .items-image img { width: 100%; border-radius: 10px; } .slider-six .single-items-two .items-content { margin-top: 16px; } .slider-six .single-items-two .items-content .items-title a { font-size: 24px; line-height: 30px; color: #fff; font-weight: 600; } @media (max-width: 767px) { .slider-six .single-items-two .items-content .items-title a { font-size: 20px; line-height: 28px; } } .slider-six .single-items-two .items-content .text { color: #fff; font-size: 16px; line-height: 24px; margin-top: 8px; } .slider-six .slider-items-two-active .slick-dots { text-align: center; margin-top: 38px; } .slider-six .slider-items-two-active .slick-dots li { display: inline-block; margin: 0 2px; } .slider-six .slider-items-two-active .slick-dots li button { width: 8px; height: 8px; border-radius: 50px; background-color: rgba(255, 255, 255, 0.3); border: 0; font-size: 0; } .slider-six .slider-items-two-active .slick-dots li.slick-active button { width: 16px; background-color: #fff; border-radius: 5px; } .slider-six .slider-items-two-active .slick-arrow { font-size: 32px; color: rgba(255, 255, 255, 0.3); position: absolute; top: -40px; right: 15px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; cursor: pointer; } .slider-six .slider-items-two-active .slick-arrow.prev { right: 70px; } .slider-six .slider-items-two-active .slick-arrow:hover { color: #fff; } /*===== SLIDER SAVEN =====*/ .slider-seven { background-color: #f4f6f7; padding-top: 100px; padding-bottom: 100px; } .slider-seven .single-items-three .items-image img { width: 100%; border-radius: 10px; } .slider-seven .single-items-three .items-content { margin-top: 16px; position: relative; } .slider-seven .single-items-three .items-content .items-title { padding-right: 30px; } .slider-seven .single-items-three .items-content .items-title a { font-size: 24px; line-height: 30px; color: #121212; font-weight: 600; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media (max-width: 767px) { .slider-seven .single-items-three .items-content .items-title a { font-size: 20px; line-height: 28px; } } .slider-seven .single-items-three .items-content .items-title a:hover { color: #0067f4; } .slider-seven .single-items-three .items-content i { position: absolute; top: 0; right: 0; font-size: 24px; color: #121212; } .slider-seven .slider-items-three-active .slick-dots { text-align: center; margin-top: 38px; } .slider-seven .slider-items-three-active .slick-dots li { display: inline-block; margin: 0 2px; } .slider-seven .slider-items-three-active .slick-dots li button { width: 8px; height: 8px; border-radius: 50px; background-color: rgba(0, 103, 244, 0.3); border: 0; font-size: 0; } .slider-seven .slider-items-three-active .slick-dots li.slick-active button { width: 16px; background-color: #0067f4; border-radius: 5px; } .slider-seven .slider-items-three-active .slick-arrow { font-size: 32px; color: #a4a4a4; position: absolute; top: 50%; left: -46px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; cursor: pointer; } @media (max-width: 767px) { .slider-seven .slider-items-three-active .slick-arrow { left: -28px; font-size: 24px; } } .slider-seven .slider-items-three-active .slick-arrow.next { left: auto; right: -46px; } @media (max-width: 767px) { .slider-seven .slider-items-three-active .slick-arrow.next { right: -28px; } } .slider-seven .slider-items-three-active .slick-arrow:hover { color: #0067f4; } /*=========================== 11.BUTTON css ===========================*/ .buttons-title .title { font-size: 36px; line-height: 45px; color: #6c6c6c; } @media (max-width: 767px) { .buttons-title .title { font-size: 24px; line-height: 35px; } } .main-btn { display: inline-block; font-weight: 700; text-align: center; white-space: nowrap; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border: 2px solid transparent; padding: 0 32px; font-size: 16px; line-height: 46px; color: #0067f4; cursor: pointer; z-index: 5; -webkit-transition: all 0.4s ease-out 0s; -moz-transition: all 0.4s ease-out 0s; -ms-transition: all 0.4s ease-out 0s; -o-transition: all 0.4s ease-out 0s; transition: all 0.4s ease-out 0s; position: relative; text-transform: uppercase; } @media (max-width: 767px) { .main-btn { font-size: 14px; padding: 0 20px; line-height: 40px; } } /*===== standard Buttons =====*/ .standard-buttons ul li { display: inline-block; margin-left: 18px; margin-top: 20px; } @media (max-width: 767px) { .standard-buttons ul li { margin-left: 0; } } .standard-buttons ul li:first-child { margin-left: 0; } .standard-buttons .standard-one { border-color: #0067f4; } .standard-buttons .standard-one:hover { color: #0067f4; background-color: rgba(0, 103, 244, 0.4); } .standard-buttons .standard-two { color: #fff; background-color: #0067f4; border-color: #0067f4; } .standard-buttons .standard-two:hover { color: #0067f4; background-color: transparent; } .standard-buttons .standard-three { overflow: hidden; line-height: 50px; color: #fff; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); border: 0; line-height: 52px; background-size: 200% auto; } @media only screen and (min-width: 768px) and (max-width: 991px) { .standard-buttons .standard-three { line-height: 44px; } } @media (max-width: 767px) { .standard-buttons .standard-three { line-height: 44px; } } .standard-buttons .standard-three:hover { background-position: right center; } .standard-buttons .standard-four { border-color: #0067f4; padding-left: 60px; } @media (max-width: 767px) { .standard-buttons .standard-four { padding-left: 40px; } } .standard-buttons .standard-four span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; left: 30px; line-height: normal; } @media (max-width: 767px) { .standard-buttons .standard-four span { left: 15px; } } .standard-buttons .standard-four:hover { color: #0067f4; background-color: rgba(0, 103, 244, 0.4); } .standard-buttons .standard-four:hover i { animation: iconTranslateY 0.5s forwards; } .standard-buttons .standard-five { color: #fff; background-color: #0067f4; border-color: #0067f4; padding-left: 60px; } @media (max-width: 767px) { .standard-buttons .standard-five { padding-left: 40px; } } .standard-buttons .standard-five span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; left: 30px; line-height: normal; } @media (max-width: 767px) { .standard-buttons .standard-five span { left: 15px; } } .standard-buttons .standard-five:hover { color: #0067f4; background-color: transparent; } .standard-buttons .standard-five:hover i { animation: iconTranslateY 0.5s forwards; } .standard-buttons .standard-six { padding-right: 60px; overflow: hidden; line-height: 50px; color: #fff; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); border: 0; line-height: 52px; background-size: 200% auto; } @media (max-width: 767px) { .standard-buttons .standard-six { padding-right: 40px; line-height: 44px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .standard-buttons .standard-six { line-height: 44px; } } .standard-buttons .standard-six span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; right: 30px; line-height: normal; } @media (max-width: 767px) { .standard-buttons .standard-six span { right: 15px; } } .standard-buttons .standard-six:hover { background-position: right center; } .standard-buttons .standard-six:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } /*===== Light Rounded Buttons =====*/ .light-rounded-buttons ul li { display: inline-block; margin-left: 18px; margin-top: 20px; } @media (max-width: 767px) { .light-rounded-buttons ul li { margin-left: 0; } } .light-rounded-buttons ul li:first-child { margin-left: 0; } .light-rounded-buttons .main-btn { border-radius: 5px; } .light-rounded-buttons .light-rounded-one { border-color: #0067f4; } .light-rounded-buttons .light-rounded-one:hover { color: #0067f4; background-color: rgba(0, 103, 244, 0.4); } .light-rounded-buttons .light-rounded-two { color: #fff; background-color: #0067f4; border-color: #0067f4; } .light-rounded-buttons .light-rounded-two:hover { color: #0067f4; background-color: transparent; } .light-rounded-buttons .light-rounded-three { overflow: hidden; line-height: 50px; color: #fff; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background-size: 200% auto; line-height: 52px; border: 0; } @media only screen and (min-width: 768px) and (max-width: 991px) { .light-rounded-buttons .light-rounded-three { line-height: 44px; } } @media (max-width: 767px) { .light-rounded-buttons .light-rounded-three { line-height: 44px; } } .light-rounded-buttons .light-rounded-three:hover { background-position: right center; } .light-rounded-buttons .light-rounded-four { border-color: #0067f4; padding-left: 60px; } @media (max-width: 767px) { .light-rounded-buttons .light-rounded-four { padding-left: 40px; } } .light-rounded-buttons .light-rounded-four span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; left: 30px; line-height: normal; } @media (max-width: 767px) { .light-rounded-buttons .light-rounded-four span { left: 15px; } } .light-rounded-buttons .light-rounded-four:hover { color: #0067f4; background-color: rgba(0, 103, 244, 0.4); } .light-rounded-buttons .light-rounded-four:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } .light-rounded-buttons .light-rounded-five { color: #fff; background-color: #0067f4; border-color: #0067f4; padding-left: 60px; } @media (max-width: 767px) { .light-rounded-buttons .light-rounded-five { padding-left: 40px; } } .light-rounded-buttons .light-rounded-five span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; left: 30px; line-height: normal; } @media (max-width: 767px) { .light-rounded-buttons .light-rounded-five span { left: 15px; } } .light-rounded-buttons .light-rounded-five:hover { color: #0067f4; background-color: transparent; } .light-rounded-buttons .light-rounded-five:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } .light-rounded-buttons .light-rounded-six { padding-right: 60px; overflow: hidden; line-height: 50px; color: #fff; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background-size: 200% auto; line-height: 52px; border: 0; } @media only screen and (min-width: 768px) and (max-width: 991px) { .light-rounded-buttons .light-rounded-six { line-height: 44px; } } @media (max-width: 767px) { .light-rounded-buttons .light-rounded-six { padding-right: 40px; line-height: 44px; } } .light-rounded-buttons .light-rounded-six span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; right: 30px; line-height: normal; } @media (max-width: 767px) { .light-rounded-buttons .light-rounded-six span { right: 15px; } } .light-rounded-buttons .light-rounded-six:hover { background-position: right center; } .light-rounded-buttons .light-rounded-six:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } /*===== Semi Rounded Buttons =====*/ .semi-rounded-buttons ul li { display: inline-block; margin-left: 18px; margin-top: 20px; } @media (max-width: 767px) { .semi-rounded-buttons ul li { margin-left: 0; } } .semi-rounded-buttons ul li:first-child { margin-left: 0; } .semi-rounded-buttons .main-btn { border-radius: 10px; } .semi-rounded-buttons .semi-rounded-one { border-color: #0067f4; } .semi-rounded-buttons .semi-rounded-one:hover { color: #0067f4; background-color: rgba(0, 103, 244, 0.4); } .semi-rounded-buttons .semi-rounded-two { color: #fff; background-color: #0067f4; border-color: #0067f4; } .semi-rounded-buttons .semi-rounded-two:hover { color: #0067f4; background-color: transparent; } .semi-rounded-buttons .semi-rounded-three { overflow: hidden; line-height: 52px; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background-size: 200% auto; border: 0; color: #fff; } @media only screen and (min-width: 768px) and (max-width: 991px) { .semi-rounded-buttons .semi-rounded-three { line-height: 44px; } } @media (max-width: 767px) { .semi-rounded-buttons .semi-rounded-three { line-height: 44px; } } .semi-rounded-buttons .semi-rounded-three:hover { background-position: right center; } .semi-rounded-buttons .semi-rounded-four { border-color: #0067f4; padding-left: 60px; } @media (max-width: 767px) { .semi-rounded-buttons .semi-rounded-four { padding-left: 40px; } } .semi-rounded-buttons .semi-rounded-four span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; left: 30px; line-height: normal; } @media (max-width: 767px) { .semi-rounded-buttons .semi-rounded-four span { left: 15px; } } .semi-rounded-buttons .semi-rounded-four:hover { color: #0067f4; background-color: rgba(0, 103, 244, 0.4); } .semi-rounded-buttons .semi-rounded-four:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } .semi-rounded-buttons .semi-rounded-five { color: #fff; background-color: #0067f4; border-color: #0067f4; padding-left: 60px; } @media (max-width: 767px) { .semi-rounded-buttons .semi-rounded-five { padding-left: 40px; } } .semi-rounded-buttons .semi-rounded-five span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; left: 30px; line-height: normal; } @media (max-width: 767px) { .semi-rounded-buttons .semi-rounded-five span { left: 15px; } } .semi-rounded-buttons .semi-rounded-five:hover { color: #0067f4; background-color: transparent; } .semi-rounded-buttons .semi-rounded-five:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } .semi-rounded-buttons .semi-rounded-six { padding-right: 60px; overflow: hidden; line-height: 52px; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background-size: 200% auto; border: 0; color: #fff; } @media only screen and (min-width: 768px) and (max-width: 991px) { .semi-rounded-buttons .semi-rounded-six { line-height: 44px; } } @media (max-width: 767px) { .semi-rounded-buttons .semi-rounded-six { padding-right: 40px; line-height: 44px; } } .semi-rounded-buttons .semi-rounded-six span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; right: 30px; line-height: normal; } @media (max-width: 767px) { .semi-rounded-buttons .semi-rounded-six span { right: 15px; } } .semi-rounded-buttons .semi-rounded-six:hover { background-position: right center; } .semi-rounded-buttons .semi-rounded-six:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } /*===== Rounded Buttons =====*/ .rounded-buttons ul li { display: inline-block; margin-left: 18px; margin-top: 20px; } @media (max-width: 767px) { .rounded-buttons ul li { margin-left: 0; } } .rounded-buttons ul li:first-child { margin-left: 0; } .rounded-buttons .main-btn { border-radius: 50px; } .rounded-buttons .rounded-one { border-color: #0067f4; } .rounded-buttons .rounded-one:hover { color: #0067f4; background-color: rgba(0, 103, 244, 0.4); } .rounded-buttons .rounded-two { color: #fff; background-color: #0067f4; border-color: #0067f4; } .rounded-buttons .rounded-two:hover { color: #0067f4; background-color: transparent; } .rounded-buttons .rounded-three { overflow: hidden; line-height: 52px; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background-size: 200% auto; color: #fff; border: 0; } @media only screen and (min-width: 768px) and (max-width: 991px) { .rounded-buttons .rounded-three { line-height: 44px; } } @media (max-width: 767px) { .rounded-buttons .rounded-three { line-height: 44px; } } .rounded-buttons .rounded-three:hover { background-position: right center; } .rounded-buttons .rounded-four { border-color: #0067f4; padding-left: 60px; } @media (max-width: 767px) { .rounded-buttons .rounded-four { padding-left: 40px; } } .rounded-buttons .rounded-four span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; left: 30px; line-height: normal; } @media (max-width: 767px) { .rounded-buttons .rounded-four span { left: 15px; } } .rounded-buttons .rounded-four:hover { color: #0067f4; background-color: rgba(0, 103, 244, 0.4); } .rounded-buttons .rounded-four:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } .rounded-buttons .rounded-five { color: #fff; background-color: #0067f4; border-color: #0067f4; padding-left: 60px; } @media (max-width: 767px) { .rounded-buttons .rounded-five { padding-left: 40px; } } .rounded-buttons .rounded-five span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; left: 30px; line-height: normal; } @media (max-width: 767px) { .rounded-buttons .rounded-five span { left: 15px; } } .rounded-buttons .rounded-five:hover { color: #0067f4; background-color: transparent; } .rounded-buttons .rounded-five:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } .rounded-buttons .rounded-six { padding-right: 60px; overflow: hidden; line-height: 52px; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background-size: 200% auto; color: #fff; border: 0; } @media only screen and (min-width: 768px) and (max-width: 991px) { .rounded-buttons .rounded-six { line-height: 44px; } } @media (max-width: 767px) { .rounded-buttons .rounded-six { padding-right: 40px; line-height: 44px; } } .rounded-buttons .rounded-six span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; right: 30px; line-height: normal; } @media (max-width: 767px) { .rounded-buttons .rounded-six span { right: 15px; } } .rounded-buttons .rounded-six:hover { background-position: right center; } .rounded-buttons .rounded-six:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } /*===== Success Buttons =====*/ .success-buttons ul li { display: inline-block; margin-left: 18px; margin-top: 20px; } @media (max-width: 767px) { .success-buttons ul li { margin-left: 0; } } .success-buttons ul li:first-child { margin-left: 0; } .success-buttons .success-one { border-color: #4da422; color: #4da422; } .success-buttons .success-one:hover { color: #4da422; background-color: rgba(77, 164, 34, 0.4); } .success-buttons .success-two { color: #fff; background-color: #4da422; border-color: #4da422; } .success-buttons .success-two:hover { color: #4da422; background-color: transparent; } .success-buttons .success-three { overflow: hidden; line-height: 52px; color: #fff; border: 0; background: -webkit-linear-gradient(left, #4da422 0%, #69e02e 50%, #4da422 100%); background: -o-linear-gradient(left, #4da422 0%, #69e02e 50%, #4da422 100%); background: linear-gradient(to right, #4da422 0%, #69e02e 50%, #4da422 100%); background-size: 200% auto; } @media only screen and (min-width: 768px) and (max-width: 991px) { .success-buttons .success-three { line-height: 44px; } } @media (max-width: 767px) { .success-buttons .success-three { line-height: 44px; } } .success-buttons .success-three:hover { background-position: right center; } .success-buttons .success-four { padding-left: 60px; border-color: #4da422; color: #4da422; } @media (max-width: 767px) { .success-buttons .success-four { padding-left: 40px; } } .success-buttons .success-four span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; left: 30px; line-height: normal; } @media (max-width: 767px) { .success-buttons .success-four span { left: 15px; } } .success-buttons .success-four:hover { color: #4da422; background-color: rgba(77, 164, 34, 0.4); } .success-buttons .success-four:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } .success-buttons .success-five { padding-left: 60px; color: #fff; background-color: #4da422; border-color: #4da422; } @media (max-width: 767px) { .success-buttons .success-five { padding-left: 40px; } } .success-buttons .success-five span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; left: 30px; line-height: normal; } @media (max-width: 767px) { .success-buttons .success-five span { left: 15px; } } .success-buttons .success-five:hover { color: #4da422; background-color: transparent; } .success-buttons .success-five:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } .success-buttons .success-six { padding-right: 60px; overflow: hidden; line-height: 52px; color: #fff; border: 0; background: -webkit-linear-gradient(left, #4da422 0%, #69e02e 50%, #4da422 100%); background: -o-linear-gradient(left, #4da422 0%, #69e02e 50%, #4da422 100%); background: linear-gradient(to right, #4da422 0%, #69e02e 50%, #4da422 100%); background-size: 200% auto; } @media only screen and (min-width: 768px) and (max-width: 991px) { .success-buttons .success-six { line-height: 44px; } } @media (max-width: 767px) { .success-buttons .success-six { padding-right: 40px; line-height: 44px; } } .success-buttons .success-six span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; right: 30px; line-height: normal; } @media (max-width: 767px) { .success-buttons .success-six span { right: 15px; } } .success-buttons .success-six:hover { background-position: right center; } .success-buttons .success-six:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } /*===== Warning Buttons =====*/ .warning-buttons ul li { display: inline-block; margin-left: 18px; margin-top: 20px; } @media (max-width: 767px) { .warning-buttons ul li { margin-left: 0; } } .warning-buttons ul li:first-child { margin-left: 0; } .warning-buttons .warning-one { border-color: #ffb400; color: #ffb400; } .warning-buttons .warning-one:hover { color: #ffb400; background-color: rgba(255, 180, 0, 0.4); } .warning-buttons .warning-two { color: #fff; background-color: #ffb400; border-color: #ffb400; } @media only screen and (min-width: 768px) and (max-width: 991px) { .warning-buttons .warning-two { line-height: 44px; } } @media (max-width: 767px) { .warning-buttons .warning-two { padding-right: 40px; line-height: 44px; } } .warning-buttons .warning-two:hover { color: #ffb400; background-color: transparent; } .warning-buttons .warning-three { overflow: hidden; line-height: 52px; color: #fff; border: 0; background: -webkit-linear-gradient(left, #ffb400 0%, #f7e500 50%, #ffb400 100%); background: -o-linear-gradient(left, #ffb400 0%, #f7e500 50%, #ffb400 100%); background: linear-gradient(to right, #ffb400 0%, #f7e500 50%, #ffb400 100%); background-size: 200% auto; } @media only screen and (min-width: 768px) and (max-width: 991px) { .warning-buttons .warning-three { line-height: 44px; } } @media (max-width: 767px) { .warning-buttons .warning-three { line-height: 44px; } } .warning-buttons .warning-three:hover { background-position: right center; } .warning-buttons .warning-four { padding-left: 60px; border-color: #ffb400; color: #ffb400; } @media (max-width: 767px) { .warning-buttons .warning-four { padding-left: 40px; } } .warning-buttons .warning-four span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; left: 30px; line-height: normal; } @media (max-width: 767px) { .warning-buttons .warning-four span { left: 15px; } } .warning-buttons .warning-four:hover { color: #ffb400; background-color: rgba(255, 180, 0, 0.4); } .warning-buttons .warning-four:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } .warning-buttons .warning-five { padding-left: 60px; color: #fff; background-color: #ffb400; border-color: #ffb400; } @media (max-width: 767px) { .warning-buttons .warning-five { padding-left: 40px; } } .warning-buttons .warning-five span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; left: 30px; line-height: normal; } @media (max-width: 767px) { .warning-buttons .warning-five span { left: 15px; } } .warning-buttons .warning-five:hover { color: #ffb400; background-color: transparent; } .warning-buttons .warning-five:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } .warning-buttons .warning-six { padding-right: 60px; overflow: hidden; line-height: 52px; color: #fff; border: 0; background: -webkit-linear-gradient(left, #ffb400 0%, #f7e500 50%, #ffb400 100%); background: -o-linear-gradient(left, #ffb400 0%, #f7e500 50%, #ffb400 100%); background: linear-gradient(to right, #ffb400 0%, #f7e500 50%, #ffb400 100%); background-size: 200% auto; } @media only screen and (min-width: 768px) and (max-width: 991px) { .warning-buttons .warning-six { line-height: 44px; } } @media (max-width: 767px) { .warning-buttons .warning-six { padding-right: 40px; line-height: 44px; } } .warning-buttons .warning-six span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; right: 30px; line-height: normal; } @media (max-width: 767px) { .warning-buttons .warning-six span { right: 15px; } } .warning-buttons .warning-six:hover { background-position: right center; } .warning-buttons .warning-six:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } /*===== Info Buttons =====*/ .info-buttons ul li { display: inline-block; margin-left: 18px; margin-top: 20px; } @media (max-width: 767px) { .info-buttons ul li { margin-left: 0; } } .info-buttons ul li:first-child { margin-left: 0; } .info-buttons .info-one { border-color: #00b8d8; color: #00b8d8; } .info-buttons .info-one:hover { color: #00b8d8; background-color: rgba(0, 184, 216, 0.4); } .info-buttons .info-two { color: #fff; background-color: #00b8d8; border-color: #00b8d8; } .info-buttons .info-two:hover { color: #00b8d8; background-color: transparent; } .info-buttons .info-three { overflow: hidden; line-height: 52px; color: #fff; border: 0; background: -webkit-linear-gradient(left, #00b8d8 0%, #32fbfc 50%, #00b8d8 100%); background: -o-linear-gradient(left, #00b8d8 0%, #32fbfc 50%, #00b8d8 100%); background: linear-gradient(to right, #00b8d8 0%, #32fbfc 50%, #00b8d8 100%); background-size: 200% auto; } @media only screen and (min-width: 768px) and (max-width: 991px) { .info-buttons .info-three { line-height: 44px; } } @media (max-width: 767px) { .info-buttons .info-three { line-height: 44px; } } .info-buttons .info-three:hover { background-position: right center; } .info-buttons .info-four { padding-left: 60px; border-color: #00b8d8; color: #00b8d8; } @media (max-width: 767px) { .info-buttons .info-four { padding-left: 40px; } } .info-buttons .info-four span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; left: 30px; line-height: normal; } @media (max-width: 767px) { .info-buttons .info-four span { left: 15px; } } .info-buttons .info-four:hover { color: #00b8d8; background-color: rgba(0, 184, 216, 0.4); } .info-buttons .info-four:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } .info-buttons .info-five { padding-left: 60px; color: #fff; background-color: #00b8d8; border-color: #00b8d8; } @media (max-width: 767px) { .info-buttons .info-five { padding-left: 40px; } } .info-buttons .info-five span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; left: 30px; line-height: normal; } @media (max-width: 767px) { .info-buttons .info-five span { left: 15px; } } .info-buttons .info-five:hover { color: #00b8d8; background-color: transparent; } .info-buttons .info-five:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } .info-buttons .info-six { padding-right: 60px; overflow: hidden; line-height: 52px; color: #fff; border: 0; background: -webkit-linear-gradient(left, #00b8d8 0%, #32fbfc 50%, #00b8d8 100%); background: -o-linear-gradient(left, #00b8d8 0%, #32fbfc 50%, #00b8d8 100%); background: linear-gradient(to right, #00b8d8 0%, #32fbfc 50%, #00b8d8 100%); background-size: 200% auto; } @media only screen and (min-width: 768px) and (max-width: 991px) { .info-buttons .info-six { line-height: 44px; } } @media (max-width: 767px) { .info-buttons .info-six { padding-right: 40px; line-height: 44px; } } .info-buttons .info-six span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; right: 30px; line-height: normal; } @media (max-width: 767px) { .info-buttons .info-six span { right: 15px; } } .info-buttons .info-six:hover { background-position: right center; } .info-buttons .info-six:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } /*===== Danger Buttons =====*/ .danger-buttons ul li { display: inline-block; margin-left: 18px; margin-top: 20px; } @media (max-width: 767px) { .danger-buttons ul li { margin-left: 0; } } .danger-buttons ul li:first-child { margin-left: 0; } .danger-buttons .danger-one { border-color: #fc3832; color: #fc3832; } .danger-buttons .danger-one:hover { color: #fc3832; background-color: rgba(252, 56, 50, 0.4); } .danger-buttons .danger-two { color: #fff; background-color: #fc3832; border-color: #fc3832; } .danger-buttons .danger-two:hover { color: #fc3832; background-color: transparent; } .danger-buttons .danger-three { overflow: hidden; line-height: 52px; color: #fff; border: 0; background: -webkit-linear-gradient(left, #fc3832 0%, #dc312b 50%, #fc3832 100%); background: -o-linear-gradient(left, #fc3832 0%, #dc312b 50%, #fc3832 100%); background: linear-gradient(to right, #fc3832 0%, #dc312b 50%, #fc3832 100%); background-size: 200% auto; } @media only screen and (min-width: 768px) and (max-width: 991px) { .danger-buttons .danger-three { line-height: 44px; } } @media (max-width: 767px) { .danger-buttons .danger-three { line-height: 44px; } } .danger-buttons .danger-three:hover { background-position: right center; } .danger-buttons .danger-four { padding-left: 60px; border-color: #fc3832; color: #fc3832; } @media (max-width: 767px) { .danger-buttons .danger-four { padding-left: 40px; } } .danger-buttons .danger-four span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; left: 30px; line-height: normal; } @media (max-width: 767px) { .danger-buttons .danger-four span { left: 15px; } } .danger-buttons .danger-four:hover { color: #fc3832; background-color: rgba(252, 56, 50, 0.4); } .danger-buttons .danger-four:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } .danger-buttons .danger-five { padding-left: 60px; color: #fff; background-color: #fc3832; border-color: #fc3832; } @media (max-width: 767px) { .danger-buttons .danger-five { padding-left: 40px; } } .danger-buttons .danger-five span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; left: 30px; line-height: normal; } @media (max-width: 767px) { .danger-buttons .danger-five span { left: 15px; } } .danger-buttons .danger-five:hover { color: #fc3832; background-color: transparent; } .danger-buttons .danger-five:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } .danger-buttons .danger-six { padding-right: 60px; overflow: hidden; line-height: 52px; color: #fff; border: 0; background: -webkit-linear-gradient(left, #fc3832 0%, #dc312b 50%, #fc3832 100%); background: -o-linear-gradient(left, #fc3832 0%, #dc312b 50%, #fc3832 100%); background: linear-gradient(to right, #fc3832 0%, #dc312b 50%, #fc3832 100%); background-size: 200% auto; } @media only screen and (min-width: 768px) and (max-width: 991px) { .danger-buttons .danger-six { line-height: 44px; } } @media (max-width: 767px) { .danger-buttons .danger-six { padding-right: 40px; line-height: 44px; } } .danger-buttons .danger-six span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; right: 30px; line-height: normal; } @media (max-width: 767px) { .danger-buttons .danger-six span { right: 15px; } } .danger-buttons .danger-six:hover { background-position: right center; } .danger-buttons .danger-six:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } @-webkit-keyframes iconTranslateY { 49% { -webkit-transform: translateY(100%); } 50% { opacity: 0; -webkit-transform: translateY(-100%); } 51% { opacity: 1; } } @-moz-keyframes iconTranslateY { 49% { -webkit-transform: translateY(100%); } 50% { opacity: 0; -webkit-transform: translateY(-100%); } 51% { opacity: 1; } } @keyframes iconTranslateY { 49% { -webkit-transform: translateY(100%); } 50% { opacity: 0; -webkit-transform: translateY(-100%); } 51% { opacity: 1; } } .lg-btn { line-height: 64px !important; font-size: 18px; } @media (max-width: 767px) { .lg-btn { font-size: 16px; ine-height: 52px; } } .el-btn { line-height: 80px !important; font-size: 20px; } @media (max-width: 767px) { .el-btn { font-size: 18px; line-height: 74px; } } .sm-btn { line-height: 40px !important; font-size: 12px; } /*===== Regular Icon Buttons =====*/ .regular-icon-buttons ul li { display: inline-block; margin-left: 10px; margin-top: 20px; } .regular-icon-buttons ul li:first-child { margin-left: 0; } .regular-icon-buttons ul li .regular-icon-light-one { width: 40px; height: 40px; line-height: 36px; border: 2px solid #0067f4; text-align: center; font-size: 24px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; overflow: hidden; color: #0067f4; } .regular-icon-buttons ul li .regular-icon-light-one:hover { color: #fff; background-color: #0067f4; } .regular-icon-buttons ul li .regular-icon-light-two { width: 40px; height: 40px; line-height: 36px; border: 2px solid #0067f4; text-align: center; font-size: 24px; border-radius: 5px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; overflow: hidden; color: #0067f4; } .regular-icon-buttons ul li .regular-icon-light-two:hover { color: #fff; background-color: #0067f4; } .regular-icon-buttons ul li .regular-icon-light-three { width: 40px; height: 40px; line-height: 36px; border: 2px solid #0067f4; text-align: center; font-size: 24px; border-radius: 10px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; overflow: hidden; color: #0067f4; } .regular-icon-buttons ul li .regular-icon-light-three:hover { color: #fff; background-color: #0067f4; } .regular-icon-buttons ul li .regular-icon-light-four { width: 40px; height: 40px; line-height: 36px; border: 2px solid #0067f4; text-align: center; font-size: 24px; border-radius: 50%; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; overflow: hidden; } .regular-icon-buttons ul li .regular-icon-light-four:hover { color: #fff; background-color: #0067f4; } .regular-icon-buttons ul li .regular-icon-light-five { width: 40px; height: 40px; line-height: 40px; border: 0; text-align: center; font-size: 24px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; position: relative; z-index: 5; overflow: hidden; color: #fff; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background-size: 200% auto; } .regular-icon-buttons ul li .regular-icon-light-five:hover { background-position: right center; } .regular-icon-buttons ul li .regular-icon-light-six { width: 40px; height: 40px; line-height: 40px; border: 0; text-align: center; font-size: 24px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; position: relative; z-index: 5; overflow: hidden; color: #fff; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background-size: 200% auto; border-radius: 5px; } .regular-icon-buttons ul li .regular-icon-light-six:hover { background-position: right center; } .regular-icon-buttons ul li .regular-icon-light-seven { width: 40px; height: 40px; line-height: 40px; border: 0; text-align: center; font-size: 24px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; position: relative; z-index: 5; overflow: hidden; color: #fff; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background-size: 200% auto; border-radius: 10px; } .regular-icon-buttons ul li .regular-icon-light-seven:hover { background-position: right center; } .regular-icon-buttons ul li .regular-icon-light-eight { width: 40px; height: 40px; line-height: 40px; border: 0; text-align: center; font-size: 24px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; position: relative; z-index: 5; overflow: hidden; color: #fff; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background-size: 200% auto; border-radius: 50%; } .regular-icon-buttons ul li .regular-icon-light-eight:hover { background-position: right center; } .regular-icon-buttons ul li .regular-icon-light-nine { width: 40px; height: 40px; line-height: 36px; border: 2px solid #0067f4; text-align: center; font-size: 24px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; overflow: hidden; color: #fff; background-color: #0067f4; } .regular-icon-buttons ul li .regular-icon-light-nine:hover { color: #0067f4; background-color: transparent; } .regular-icon-buttons ul li .regular-icon-light-ten { width: 40px; height: 40px; line-height: 36px; border: 2px solid #0067f4; text-align: center; font-size: 24px; border-radius: 5px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; overflow: hidden; color: #fff; background-color: #0067f4; } .regular-icon-buttons ul li .regular-icon-light-ten:hover { color: #0067f4; background-color: transparent; } .regular-icon-buttons ul li .regular-icon-light-eleven { width: 40px; height: 40px; line-height: 36px; border: 2px solid #0067f4; text-align: center; font-size: 24px; border-radius: 10px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; overflow: hidden; color: #fff; background-color: #0067f4; } .regular-icon-buttons ul li .regular-icon-light-eleven:hover { color: #0067f4; background-color: transparent; } .regular-icon-buttons ul li .regular-icon-light-twelve { width: 40px; height: 40px; line-height: 36px; border: 2px solid #0067f4; text-align: center; font-size: 24px; border-radius: 50%; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; overflow: hidden; color: #fff; background-color: #0067f4; } .regular-icon-buttons ul li .regular-icon-light-twelve:hover { color: #0067f4; background-color: transparent; } /*===== Group Buttons =====*/ .group-buttons .btn-group { margin-left: 30px; } .group-buttons .group-one { margin-left: 0; } .group-buttons .group-one .main-btn { background: none; border: 2px solid #0067f4; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .group-buttons .group-one .main-btn:first-child { border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-right: 0; } .group-buttons .group-one .main-btn:last-child { border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-left: 0; } .group-buttons .group-one .main-btn:hover { background-color: #0067f4; color: #fff; } .group-buttons .group-two .main-btn { background: none; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; overflow: hidden; color: #fff; line-height: 52px; background: -webkit-linear-gradient(#0067f4 0%, #2bdbdc 50%, #0067f4 100%); background: -o-linear-gradient(#0067f4 0%, #2bdbdc 50%, #0067f4 100%); background: linear-gradient(#0067f4 0%, #2bdbdc 50%, #0067f4 100%); background-size: auto 200%; border-top: 0; border-bottom: 0; border-color: rgba(244, 246, 247, 0.2); } .group-buttons .group-two .main-btn:first-child { border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-right: 0; } .group-buttons .group-two .main-btn:last-child { border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-left: 0; } .group-buttons .group-two .main-btn:hover { background-position: bottom center; } .group-buttons .group-three .main-btn { background: none; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; overflow: hidden; color: #fff; line-height: 52px; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background-size: 200% auto; border: 0; } .group-buttons .group-three .main-btn:first-child { border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-right: 0; } .group-buttons .group-three .main-btn:last-child { border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-left: 0; } .group-buttons .group-three .main-btn:hover { background-position: right center; } .group-buttons .group-four { margin-left: 0; } .group-buttons .group-four .main-btn { background: none; border: 2px solid #0067f4; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; padding: 0 12px; } .group-buttons .group-four .main-btn i { font-size: 24px; } .group-buttons .group-four .main-btn:first-child { border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-right: 0; } .group-buttons .group-four .main-btn:last-child { border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-left: 0; } .group-buttons .group-four .main-btn:hover { background-color: #0067f4; color: #fff; } .group-buttons .group-five .main-btn { background: none; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; overflow: hidden; color: #fff; line-height: 52px; background: -webkit-linear-gradient(#0067f4 0%, #2bdbdc 50%, #0067f4 100%); background: -o-linear-gradient(#0067f4 0%, #2bdbdc 50%, #0067f4 100%); background: linear-gradient(#0067f4 0%, #2bdbdc 50%, #0067f4 100%); background-size: auto 200%; border-top: 0; border-bottom: 0; border-color: rgba(244, 246, 247, 0.2); padding: 0 16px; } .group-buttons .group-five .main-btn:first-child { border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-right: 0; } .group-buttons .group-five .main-btn:last-child { border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-left: 0; } .group-buttons .group-five .main-btn:hover { background-position: bottom center; } .group-buttons .group-six .main-btn { background: none; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; overflow: hidden; color: #fff; line-height: 52px; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 50%, #0067f4 100%); background-size: 200% auto; border: 0; padding: 0 16px; } .group-buttons .group-six .main-btn:first-child { border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-right: 0; } .group-buttons .group-six .main-btn:last-child { border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-left: 0; } .group-buttons .group-six .main-btn:hover { background-position: right center; } /*=========================== 12.ALERTS css ===========================*/ .alerts-title .title { font-size: 36px; line-height: 45px; color: #6c6c6c; } @media (max-width: 767px) { .alerts-title .title { font-size: 24px; line-height: 35px; } } .label { line-height: 48px; padding: 0 16px; font-size: 16px; color: #fff; font-weight: 500; margin-right: 15px; margin-bottom: 0; margin-top: 30px; } .label.label-default { background-color: #0067f4; border-radius: 50px; } .label.label-success { background-color: #4da422; } .label.label-info { background-color: #00b8d8; } .label.label-warning { background-color: #ffb400; } .label.label-danger { background-color: #fc3832; } .label.label-gradient-default { background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%); } .label.label-gradient-success { background: -webkit-linear-gradient(left, #4da422 0%, #69e02e 100%); background: -o-linear-gradient(left, #4da422 0%, #69e02e 100%); background: linear-gradient(to right, #4da422 0%, #69e02e 100%); } .label.label-gradient-info { background: -webkit-linear-gradient(left, #00b8d8 0%, #32fbfc 100%); background: -o-linear-gradient(left, #00b8d8 0%, #32fbfc 100%); background: linear-gradient(to right, #00b8d8 0%, #32fbfc 100%); } .label.label-gradient-warning { background: -webkit-linear-gradient(left, #ffb400 0%, #f7e500 100%); background: -o-linear-gradient(left, #ffb400 0%, #f7e500 100%); background: linear-gradient(to right, #ffb400 0%, #f7e500 100%); } .label.label-gradient-danger { background: -webkit-linear-gradient(left, #fc3832 0%, #dc312b 100%); background: -o-linear-gradient(left, #fc3832 0%, #dc312b 100%); background: linear-gradient(to right, #fc3832 0%, #dc312b 100%); } .tg-btn { position: relative; display: inline-block; height: 30px; cursor: pointer; } .tg-btn [type="checkbox"] { position: absolute; opacity: 0; z-index: -1; visibility: hidden; } .tg-btn .tg-body { width: 144px; height: 48px; background: white; display: inline-block; position: relative; border-radius: 50px; } .tg-btn .tg-body .tg-switch { width: 48px; height: 48px; display: inline-block; background-color: white; position: absolute; left: -1px; top: 0; border-radius: 50%; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16); border: solid 2px #f4f6f7; z-index: 1; } .tg-btn .tg-body .tg-track { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; border-radius: 50px; } .tg-btn .tg-body .tg-track .tg-bgd { font-size: 16px; position: absolute; right: -10px; top: 0; bottom: 0; width: 144px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; background-color: #f4f6f7; color: #6c6c6c; padding: 0 45px; text-align: center; line-height: 46px; border-radius: 50px; } .tg-btn .tg-body .tg-track .tg-bgd.tg-bgd-negative { right: auto; left: -120px; background-color: #0067f4; color: #fff; } .tg-btn > :not(:checked) ~ .tg-body > .tg-switch { left: 97px; right: auto; } .tg-btn > :not(:checked) ~ .tg-body .tg-bgd { right: -120px; } .tg-btn > :not(:checked) ~ .tg-body .tg-bgd.tg-bgd-negative { right: auto; left: -10px; } .tg-btn.tg-gradient .tg-body .tg-track .tg-bgd.tg-bgd-negative { background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%); } .tg-btn.small-tg .tg-body { width: 96px; } .tg-btn.small-tg .tg-body .tg-track .tg-bgd { width: 96px; } .tg-btn.small-tg .tg-body .tg-track .tg-bgd.tg-bgd-negative { left: -75px; } .tg-btn.small-tg > :not(:checked) ~ .tg-body > .tg-switch { left: 48px; } .tg-btn.small-tg > :not(:checked) ~ .tg-body .tg-bgd { right: -75px; } .tg-btn.small-tg > :not(:checked) ~ .tg-body .tg-bgd.tg-bgd-negative { right: auto; left: -10px; } .alerts-default-bg { background-color: #0067f4; } .alerts-default-gradient-bg { background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%); } .alerts-success-bg { background-color: #4da422; } .alerts-success-gradient-bg { background: -webkit-linear-gradient(left, #4da422 0%, #69e02e 100%); background: -o-linear-gradient(left, #4da422 0%, #69e02e 100%); background: linear-gradient(to right, #4da422 0%, #69e02e 100%); } .alerts-danger-bg { background-color: #fc3832; } .alerts-danger-gradient-bg { background: -webkit-linear-gradient(left, #fc3832 0%, #dc312b 100%); background: -o-linear-gradient(left, #fc3832 0%, #dc312b 100%); background: linear-gradient(to right, #fc3832 0%, #dc312b 100%); } .alerts-info-bg { background-color: #00b8d8; } .alerts-info-gradient-bg { background: -webkit-linear-gradient(left, #00b8d8 0%, #32fbfc 100%); background: -o-linear-gradient(left, #00b8d8 0%, #32fbfc 100%); background: linear-gradient(to right, #00b8d8 0%, #32fbfc 100%); } .alerts-warning-bg { background-color: #ffb400; } .alerts-warning-gradient-bg { background: -webkit-linear-gradient(left, #ffb400 0%, #f7e500 100%); background: -o-linear-gradient(left, #ffb400 0%, #f7e500 100%); background: linear-gradient(to right, #ffb400 0%, #f7e500 100%); } .single-alerts-message { position: relative; padding: 20px 24px; border-radius: 8px; } @media (max-width: 767px) { .single-alerts-message { padding: 16px 20px; } } .single-alerts-message .alerts-message-icon { position: absolute; top: 20px; left: 24px; } @media (max-width: 767px) { .single-alerts-message .alerts-message-icon { top: 16px; left: 20px; } } .single-alerts-message .alerts-message-icon i { font-size: 32px; color: #fff; } @media (max-width: 767px) { .single-alerts-message .alerts-message-icon i { font-size: 28px; } } .single-alerts-message .alerts-message-content { padding-left: 50px; } @media (max-width: 767px) { .single-alerts-message .alerts-message-content { padding-left: 40px; } } .single-alerts-message .alerts-message-content .message-title { font-size: 24px; font-weight: 600; line-height: 30px; color: #fff; } @media (max-width: 767px) { .single-alerts-message .alerts-message-content .message-title { font-size: 20px; } } .single-alerts-message .alerts-message-content .text { font-size: 16px; line-height: 24px; color: #fff; margin-top: 8px; } @media (max-width: 767px) { .single-alerts-message .alerts-message-content .text { font-size: 14px; } } .single-alerts-message-small { padding: 12px 16px; border-radius: 8px; margin-bottom: 0; border: 0; } .single-alerts-message-small .alerts-message-small-icon { position: absolute; top: 12px; left: 16px; } .single-alerts-message-small .alerts-message-small-icon i { font-size: 24px; color: #fff; } @media (max-width: 767px) { .single-alerts-message-small .alerts-message-small-icon i { font-size: 16px; } } .single-alerts-message-small .alerts-message-small-content { padding-left: 36px; } @media (max-width: 767px) { .single-alerts-message-small .alerts-message-small-content { padding-left: 28px; } } .single-alerts-message-small .alerts-message-small-content .text { font-size: 16px; font-weight: 600; color: #fff; } @media (max-width: 767px) { .single-alerts-message-small .alerts-message-small-content .text { font-size: 14px; } } .single-alerts-message-small .close { font-size: 10px; color: #fff; border: 0; padding: 0; position: absolute; top: 5px; right: 5px; opacity: 1; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media (max-width: 767px) { .single-alerts-message-small .close { font-size: 12px; } } .single-alerts-message-small .close:hover { color: #fff; } /*=========================== 13.TEAM css ===========================*/ .single-team { position: relative; } .single-team .team-image img { width: 100%; } .single-team .team-content { padding: 16px; -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); border-radius: 8px; } .single-team .team-content .name a { font-size: 24px; font-weight: 600; line-height: 30px; color: #121212; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .single-team .team-content .name a { font-size: 20px; } } .single-team .team-content .sub-title { font-size: 16px; line-height: 24px; color: #a4a4a4; margin-top: 8px; } .single-team .team-content .social { margin-top: 8px; } .single-team .team-content .social li { display: inline-block; margin: 0 8px; } .single-team .team-content .social li a { font-size: 20px; color: #0067f4; } /*===== TEAM STYLE ONE =====*/ .team-style-one .team-content { position: absolute; left: 0; width: 100%; bottom: 62px; background-color: #fff; } .team-style-one .team-content::before { position: absolute; content: ''; width: 72px; height: 4px; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%); top: 0; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .team-style-one .team-content .name a:hover { color: #0067f4; } /*===== TEAM STYLE TWo =====*/ .team-style-two .team-content { position: absolute; left: 0; width: 100%; bottom: 62px; background: -linear-gradient(90deg, #0467f4 0%, #2bdbdc 50%, #0467f4 100%); background: -o-linear-gradient(90deg, #0467f4 0%, #2bdbdc 50%, #0467f4 100%); background: linear-gradient(90deg, #0467f4 0%, #2bdbdc 50%, #0467f4 100%); background-size: 200%; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .team-style-two .team-content .name a { color: #fff; } .team-style-two .team-content .sub-title { color: #fff; } .team-style-two .team-content .social li a { color: #fff; } .team-style-two .team-content:hover { background-position: right center; } /*===== TEAM STYLE THREE =====*/ .team-style-three .team-content { position: absolute; left: 0; width: 100%; bottom: 62px; background-color: #fff; } .team-style-three .team-content::before { position: absolute; content: ''; width: 100%; height: 4px; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%); top: 0; left: 0; } .team-style-three .team-content .name a:hover { color: #0067f4; } /*===== TEAM STYLE FOUR =====*/ .team-style-four .team-content { position: relative; background-color: #fff; } .team-style-four .team-content::before { position: absolute; content: ''; width: 4px; height: 72px; background: -webkit-linear-gradient(#f09819 0%, #ff5858 100%); background: -o-linear-gradient(#f09819 0%, #ff5858 100%); background: linear-gradient(#f09819 0%, #ff5858 100%); top: 50%; left: 0; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .team-style-four .team-content .name a:hover { color: #4da422; } /*===== TEAM STYLE FIVE =====*/ .team-style-five .team-content { background: -webkit-linear-gradient(#f09819 0%, #ff5858 100%); background: -o-linear-gradient(#f09819 0%, #ff5858 100%); background: linear-gradient(#f09819 0%, #ff5858 100%); } .team-style-five .team-content .name a { color: #fff; } .team-style-five .team-content .sub-title { color: #fff; } .team-style-five .team-content .social li a { color: #fff; } /*===== TEAM STYLE SIX =====*/ .team-style-six .team-content { position: relative; background-color: #fff; } .team-style-six .team-content::before { position: absolute; content: ''; width: 4px; height: 100%; background: -webkit-linear-gradient(#f09819 0%, #ff5858 100%); background: -o-linear-gradient(#f09819 0%, #ff5858 100%); background: linear-gradient(#f09819 0%, #ff5858 100%); top: 0; right: 0; } .team-style-six .team-content .name a:hover { color: #4da422; } /*===== TEAM STYLE SAVEN =====*/ .team-style-saven .team-content { position: relative; background-color: #fff; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .team-style-saven .team-content::before { position: absolute; content: ''; width: 72px; height: 4px; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%); top: 0; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .team-style-saven .team-content .name a:hover { color: #0067f4; } /*===== TEAM STYLE EIGHT =====*/ .team-style-eight .team-content { position: relative; background-color: #fff; } .team-style-eight .team-content::before { position: absolute; content: ''; width: 100%; height: 4px; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%); bottom: 0; left: 0; } .team-style-eight .team-content .name a:hover { color: #0067f4; } /*===== TEAM STYLE NINE =====*/ .team-style-nine { -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); border-radius: 20px; overflow: hidden; } .team-style-nine .team-content { background-color: #fff; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .team-style-nine .team-content .name { position: relative; } .team-style-nine .team-content .name::before { position: absolute; content: ''; width: 72px; height: 8px; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%); top: 0; left: 0; border-radius: 25px; } .team-style-nine .team-content .name a { margin-top: 16px; } .team-style-nine .team-content .name a:hover { color: #0067f4; } /*===== TEAM STYLE TEN =====*/ .team-style-ten .team-image img { -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); border-radius: 50%; } .team-style-ten .team-content { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .team-style-ten .team-content .name { position: relative; } .team-style-ten .team-content .name::before { position: absolute; content: ''; width: 72px; height: 8px; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%); top: 0; left: 0; border-radius: 25px; } .team-style-ten .team-content .name a { margin-top: 16px; } .team-style-ten .team-content .name a:hover { color: #0067f4; } /*===== TEAM STYLE ELEVEN =====*/ .team-style-eleven { position: relative; -webkit-box-shadow: 0px 8px 16px 0px rgba(72, 127, 255, 0.1); -moz-box-shadow: 0px 8px 16px 0px rgba(72, 127, 255, 0.1); box-shadow: 0px 8px 16px 0px rgba(72, 127, 255, 0.1); } .team-style-eleven .team-image img { width: 100%; } .team-style-eleven .team-content { position: absolute; bottom: 0; left: 0; width: 100%; background-color: #fff; padding-top: 25px; padding-bottom: 25px; z-index: 5; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media (max-width: 767px) { .team-style-eleven .team-content { padding-top: 15px; padding-bottom: 15px; } } .team-style-eleven .team-content::before { position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%); z-index: -1; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; opacity: 0; } .team-style-eleven .team-content .team-social { position: absolute; top: 0; left: 0; width: 100%; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; visibility: hidden; opacity: 0; } .team-style-eleven .team-content .team-social .social { background-color: #fff; display: inline-block; padding: 10px 20px 6px; border-radius: 50px; } .team-style-eleven .team-content .team-social .social li { display: inline-block; margin: 0 8px; } .team-style-eleven .team-content .team-social .social li a { font-size: 16px; color: #a4a4a4; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .team-style-eleven .team-content .team-social .social li a:hover { color: #0067f4; } .team-style-eleven .team-content .team-name a { color: #121212; font-size: 24px; font-weight: 600; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media (max-width: 767px) { .team-style-eleven .team-content .team-name a { font-size: 18px; } } .team-style-eleven .team-content .sub-title { font-size: 16px; color: #0067f4; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media (max-width: 767px) { .team-style-eleven .team-content .sub-title { font-size: 14px; } } .team-style-eleven:hover .team-content { padding-top: 50px; } @media (max-width: 767px) { .team-style-eleven:hover .team-content { padding-top: 35px; } } .team-style-eleven:hover .team-content::before { opacity: 1; } .team-style-eleven:hover .team-content .team-social { top: -20px; visibility: visible; opacity: 1; } .team-style-eleven:hover .team-content .team-name a { color: #fff; } .team-style-eleven:hover .team-content .sub-title { color: #fff; } /*=========================== 14.CARD css ===========================*/ .single-card { -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16); border-radius: 8px; overflow: hidden; } .single-card .card-image img { width: 100%; height: 100%; } .single-card .card-content { padding: 16px; } .single-card .card-content .card-title { margin-bottom: 0; } .single-card .card-content .card-title a { font-size: 24px; line-height: 30px; color: #121212; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .single-card .card-content .card-title a { font-size: 20px; } } @media (max-width: 767px) { .single-card .card-content .card-title a { font-size: 20px; } } .single-card .card-content .card-title a:hover { color: #0067f4; } .single-card .card-content .text { color: #121212; font-size: 16px; line-height: 24px; margin-top: 8px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .single-card .card-content .text { font-size: 14px; } } @media (max-width: 767px) { .single-card .card-content .text { font-size: 14px; } } .single-card .card-content .card-btn { margin-top: 24px; } .single-card .card-content .card-btn .main-btn { line-height: 48px; } .card-style-two .card-content .card-btn .main-btn { line-height: 50px; } .card-style-three .card-content { background-color: #0067f4; } .card-style-three .card-content .card-title a { color: #fff; } .card-style-three .card-content .card-title a:hover { color: #fff; } .card-style-three .card-content .text { color: #fff; } .card-style-five { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .card-style-five .card-content { position: relative; padding-left: 0; padding-right: 0; } .card-style-five .card-content .card-icon { position: absolute; top: -20px; right: 8px; } .card-style-five .card-content .card-icon i { width: 40px; line-height: 40px; height: 40px; text-align: center; color: #fff; background-color: #0067f4; border-radius: 50%; font-size: 24px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .card-style-five .card-content .card-icon:hover i { background-color: #fff; color: #0067f4; -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16); } .card-style-six { background: -webkit-linear-gradient(left, #0acffe 0%, #495aff 100%); background: -o-linear-gradient(left, #0acffe 0%, #495aff 100%); background: linear-gradient(to right, #0acffe 0%, #495aff 100%); } .card-style-six .card-content .card-title a { color: #fff; } .card-style-six .card-content .card-title a:hover { color: #fff; } .card-style-six .card-content .text { color: #fff; } .card-style-six .card-content .card-btn .main-btn { line-height: 50px; } .card-style-saven { background: linear-gradient(90deg, #9166fe 0%, #c97aed 100%); } .card-style-saven .card-content .card-title a { color: #fff; } .card-style-saven .card-content .card-title a:hover { color: #fff; } .card-style-saven .card-content .text { color: #fff; } .card-style-saven .card-content .card-btn .main-btn { border-color: #fff; background-color: #fff; } .card-style-saven .card-content .card-btn .main-btn:hover { background-color: transparent; color: #fff; } /*===== CARD MINI =====*/ .single-mini-card { -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16); border-radius: 8px; overflow: hidden; } .single-mini-card .card-image img { width: 100%; height: 100%; } .single-mini-card .card-content { padding: 16px; } .single-mini-card .card-content .card-title { margin-bottom: 0; } .single-mini-card .card-content .card-title a { font-size: 20px; line-height: 30px; color: #121212; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media (max-width: 767px) { .single-mini-card .card-content .card-title a { font-size: 18px; } } .single-mini-card .card-content .card-title a:hover { color: #4da422; } .single-mini-card .card-content .text { color: #121212; font-size: 14px; line-height: 24px; margin-top: 8px; } .single-mini-card .card-content .card-btn { margin-top: 24px; } .single-mini-card .card-content .card-btn .main-btn { border: 2px solid #0067f4; font-size: 14px; line-height: 40px; padding: 0 24px; } .mini-card-style-two { background: -webkit-linear-gradient(left, #ff5858 0%, #f09819 100%); background: -o-linear-gradient(left, #ff5858 0%, #f09819 100%); background: linear-gradient(to right, #ff5858 0%, #f09819 100%); } .mini-card-style-two .card-content .card-title a { color: #fff; } .mini-card-style-two .card-content .text { color: #fff; } .mini-card-style-three .card-image img { width: 100%; object-fit: cover; object-position: center; } @media (max-width: 767px) { .mini-card-style-three .card-image img { height: 210px; } } .mini-card-style-three .card-content .card-btn .main-btn { border: 0; line-height: 42px; } .mini-card-style-four { background: -webkit-linear-gradient(left, #0067f4 0%, #9c09db 100%); background: -o-linear-gradient(left, #0067f4 0%, #9c09db 100%); background: linear-gradient(to right, #0067f4 0%, #9c09db 100%); } .mini-card-style-four .card-image img { width: 100%; object-fit: cover; object-position: center; } @media (max-width: 767px) { .mini-card-style-four .card-image img { height: 210px; } } .mini-card-style-four .card-content .card-title a { color: #fff; } .mini-card-style-four .card-content .card-title a:hover { color: #fff; } .mini-card-style-four .card-content .text { color: #fff; } .mini-card-style-four .card-content .card-btn .main-btn { border: 0; line-height: 42px; } .mini-card-style-five { background: -webkit-linear-gradient(left, #9be15d 0%, #00e3ae 100%); background: -o-linear-gradient(left, #9be15d 0%, #00e3ae 100%); background: linear-gradient(to right, #9be15d 0%, #00e3ae 100%); } .mini-card-style-five .card-image img { width: 100%; object-fit: cover; object-position: center; } @media (max-width: 767px) { .mini-card-style-five .card-image img { height: 210px; } } .mini-card-style-five .card-content .card-title a { color: #fff; } .mini-card-style-five .card-content .card-title a:hover { color: #fff; } .mini-card-style-five .card-content .text { color: #fff; } .mini-card-style-five .card-content .card-btn .main-btn { border-color: #fff; background-color: #fff; } .mini-card-style-five .card-content .card-btn .main-btn:hover { background-color: transparent; color: #fff; } .mini-card-style-six { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .mini-card-style-six .card-content { position: relative; padding-left: 0; padding-right: 0; } .mini-card-style-six .card-content .card-icon { position: absolute; top: -20px; right: 8px; } .mini-card-style-six .card-content .card-icon i { width: 40px; line-height: 40px; height: 40px; text-align: center; color: #fff; background-color: #0067f4; border-radius: 50%; font-size: 24px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .mini-card-style-six .card-content .card-icon:hover i { background-color: #fff; color: #0067f4; -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16); } .mini-card-style-saven { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .mini-card-style-saven .card-content { position: relative; padding-left: 0; padding-right: 0; } .mini-card-style-saven .card-content .card-icon { position: absolute; top: -20px; right: 8px; } .mini-card-style-saven .card-content .card-icon i { width: 40px; line-height: 40px; height: 40px; text-align: center; color: #0067f4; background-color: #fff; border-radius: 50%; font-size: 24px; -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16); -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .mini-card-style-saven .card-content .card-icon:hover i { background-color: #0067f4; color: #fff; } .mini-card-style-nine { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .mini-card-style-nine .card-image img { width: 100%; object-fit: cover; object-position: center; } @media (max-width: 767px) { .mini-card-style-nine .card-image img { height: 210px; } } /*=========================== 15.ABOUT css ===========================*/ .about-title .title { font-size: 44px; line-height: 55px; color: #121212; } @media (max-width: 767px) { .about-title .title { font-size: 28px; line-height: 35px; } } .about-one { background-color: #f4f6f7; padding-top: 120px; padding-bottom: 120px; } .single-about-items .items-icon img { width: 120px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .single-about-items .items-icon img { width: 90px; } } @media (max-width: 767px) { .single-about-items .items-icon img { width: 80px; } } .single-about-items .items-content { margin-top: 24px; } .single-about-items .items-content .items-title a { font-size: 20px; color: #121212; line-height: 25px; } .single-about-items .items-content .text { color: #121212; font-size: 14px; line-height: 24px; margin-top: 8px; } /*===== ABOUT TWO =====*/ .about-two { background-color: #f4f6f7; padding-top: 120px; padding-bottom: 120px; } .single-features-one-items .features-image img { width: 255px; } .single-features-one-items .features-content { margin-top: 32px; } .single-features-one-items .features-content .features-title { font-size: 36px; font-weight: 500; line-height: 45px; color: #121212; } @media (max-width: 767px) { .single-features-one-items .features-content .features-title { font-size: 24px; line-height: 35px; } } .single-features-one-items .features-content .text { font-size: 16px; line-height: 24px; color: #121212; margin-top: 8px; } /*===== ABOUT THREE =====*/ .about-three { background-color: #f4f6f7; padding-top: 90px; padding-bottom: 120px; } .about-feature-three .about-feature-image img { width: 100%; } .about-feature-three .about-feature-content { margin-top: 48px; } .about-feature-three .about-feature-content .feature-title { font-size: 44px; font-weight: 600; line-height: 55px; color: #121212; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about-feature-three .about-feature-content .feature-title { font-size: 38px; line-height: 45px; } } @media (max-width: 767px) { .about-feature-three .about-feature-content .feature-title { font-size: 30px; line-height: 35px; } } .about-feature-three .about-feature-content .text { font-size: 20px; line-height: 25px; color: #121212; margin-top: 8px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about-feature-three .about-feature-content .text { font-size: 18px; } } @media (max-width: 767px) { .about-feature-three .about-feature-content .text { font-size: 18px; } } .about-feature-items-three .feature-items-icon img { width: 120px; } @media (max-width: 767px) { .about-feature-items-three .feature-items-icon img { width: 90px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .about-feature-items-three .feature-items-icon img { width: 120px; } } .about-feature-items-three .feature-items-content { padding-left: 30px; } @media (max-width: 767px) { .about-feature-items-three .feature-items-content { padding-left: 0; padding-top: 25px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .about-feature-items-three .feature-items-content { padding-left: 30px; padding-top: 0; } } .about-feature-items-three .feature-items-content .items-title { font-size: 20px; font-weight: 600; line-height: 25px; color: #121212; } @media (max-width: 767px) { .about-feature-items-three .feature-items-content .items-title { font-size: 18px; } } .about-feature-items-three .feature-items-content .text { font-size: 16px; line-height: 24px; color: #121212; margin-top: 16px; } @media (max-width: 767px) { .about-feature-items-three .feature-items-content .text { font-size: 14px; } } /*===== ABOUT FOUR =====*/ .about-four { background-color: #f4f6f7; padding-top: 90px; padding-bottom: 120px; position: relative; } .feature-image-four { position: absolute; width: 45%; right: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } @media only screen and (min-width: 768px) and (max-width: 991px) { .feature-image-four { position: relative; width: 720px; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); margin: 50px auto 0; padding-left: 15px; padding-right: 15px; } } @media (max-width: 767px) { .feature-image-four { position: relative; width: 100%; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); margin: 50px auto 0; padding-left: 15px; padding-right: 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .feature-image-four { width: 540px; } } .feature-image-four .image { max-width: 720px; } .feature-image-four .image img { width: 100%; } .about-feature-four .about-feature-image img { width: 100%; } .about-feature-four .about-feature-content { margin-top: 48px; } .about-feature-four .about-feature-content .feature-title { font-size: 44px; font-weight: 600; line-height: 55px; color: #121212; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about-feature-four .about-feature-content .feature-title { font-size: 38px; line-height: 45px; } } @media (max-width: 767px) { .about-feature-four .about-feature-content .feature-title { font-size: 30px; line-height: 35px; } } .about-feature-four .about-feature-content .text { font-size: 20px; line-height: 25px; color: #121212; margin-top: 8px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about-feature-four .about-feature-content .text { font-size: 18px; } } @media (max-width: 767px) { .about-feature-four .about-feature-content .text { font-size: 18px; } } .about-feature-items-four .feature-items-icon img { width: 120px; border-radius: 50%; background-color: #fff; -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); } @media (max-width: 767px) { .about-feature-items-four .feature-items-icon img { width: 90px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .about-feature-items-four .feature-items-icon img { width: 120px; } } .about-feature-items-four .feature-items-content { padding-left: 30px; } @media (max-width: 767px) { .about-feature-items-four .feature-items-content { padding-left: 0; padding-top: 25px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .about-feature-items-four .feature-items-content { padding-left: 30px; padding-top: 0; } } .about-feature-items-four .feature-items-content .items-title { font-size: 20px; font-weight: 600; line-height: 25px; color: #121212; } @media (max-width: 767px) { .about-feature-items-four .feature-items-content .items-title { font-size: 18px; } } .about-feature-items-four .feature-items-content .text { font-size: 16px; line-height: 24px; color: #121212; margin-top: 16px; } @media (max-width: 767px) { .about-feature-items-four .feature-items-content .text { font-size: 14px; } } /*===== ABOUT FIVE =====*/ .about-five { background-color: #f4f6f7; padding-top: 120px; } .about-content-five .sub-title { font-size: 24px; font-weight: 700; line-height: 30px; color: #121212; text-transform: uppercase; } @media (max-width: 767px) { .about-content-five .sub-title { font-size: 20px; } } .about-content-five .about-title { font-size: 44px; font-weight: 500; line-height: 55px; margin-top: 16px; color: #121212; } @media (max-width: 767px) { .about-content-five .about-title { font-size: 32px; line-height: 40px; } } .about-image-five { margin-top: 50px; } .about-image-five img { width: 100%; } /*===== ABOUT SIX =====*/ .about-six { padding-top: 90px; padding-bottom: 120px; position: relative; } .about-six .faq-title .sub-title { font-size: 18px; font-weight: 400; color: #0067f4; text-transform: uppercase; } @media (max-width: 767px) { .about-six .faq-title .sub-title { font-size: 16px; } } .about-six .faq-title .title { font-size: 32px; padding-top: 10px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about-six .faq-title .title { font-size: 30px; } } @media (max-width: 767px) { .about-six .faq-title .title { font-size: 24px; } } .about-six .faq-accordion .accordion .card { border: 0; background: none; } .about-six .faq-accordion .accordion .card .card-header { padding: 0; border: 0; background: none; margin-top: 40px; } .about-six .faq-accordion .accordion .card .card-header a { font-size: 18px; font-weight: 500; color: #000; display: block; position: relative; padding-right: 20px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about-six .faq-accordion .accordion .card .card-header a { font-size: 16px; } } @media (max-width: 767px) { .about-six .faq-accordion .accordion .card .card-header a { font-size: 16px; } } .about-six .faq-accordion .accordion .card .card-header a::before { content: '\E957'; font-family: 'LineIcons'; position: absolute; top: 50%; right: 0; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .about-six .faq-accordion .accordion .card .card-header .collapsed::before { content: '\E959'; } .about-six .faq-accordion .accordion .card .card-body { padding: 20px 20px 0; } .about-six .faq-image img { width: 100%; } /*=========================== 16.PRICING css ===========================*/ /*===== PRICING STYLE ONE =====*/ .pricing-style-one { -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); padding: 24px 20px 50px; border-radius: 8px; position: relative; overflow: hidden; background-color: #fff; } .pricing-style-one .pricing-header .sub-title { font-size: 20px; font-weight: 600; line-height: 25px; color: #121212; position: relative; padding-bottom: 8px; } .pricing-style-one .pricing-header .sub-title::before { position: absolute; content: ''; width: 72px; height: 4px; bottom: 0; left: 0; right: 0; background-color: #2bdbdc; margin: 0 auto; } .pricing-style-one .pricing-header .price { display: block; font-size: 64px; font-weight: 600; line-height: 80px; margin-top: 32px; color: #121212; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .pricing-style-one .pricing-header .price { font-size: 50px; margin-top: 16px; } } @media (max-width: 767px) { .pricing-style-one .pricing-header .price { font-size: 50px; margin-top: 16px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .pricing-style-one .pricing-header .price { font-size: 64px; margin-top: 32px; } } .pricing-style-one .pricing-header .year { font-size: 20px; font-weight: 500; line-height: 25px; color: #6c6c6c; margin-top: 3px; } .pricing-style-one .pricing-list { margin-top: 40px; } .pricing-style-one .pricing-list ul li { font-size: 16px; line-height: 24px; color: #121212; margin-top: 16px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .pricing-style-one .pricing-list ul li { font-size: 14px; margin-top: 12px; } } @media (max-width: 767px) { .pricing-style-one .pricing-list ul li { font-size: 14px; margin-top: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .pricing-style-one .pricing-list ul li { font-size: 16px; margin-top: 16px; } } .pricing-style-one .pricing-list ul li i { color: #0067f4; margin-right: 8px; } .pricing-style-one .pricing-btn { margin-top: 42px; } .pricing-style-one .pricing-btn .main-btn { background-color: #0067f4; color: #fff; border-color: #0067f4; } .pricing-style-one .pricing-btn .main-btn:hover { background-color: #005ad5; border-color: #005ad5; } .pricing-style-one .bottom-shape { position: absolute; bottom: -20px; left: 0; width: 101%; } /*===== PRICING STYLE TWO =====*/ .pricing-style-two { -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); padding: 24px 20px 50px; border-radius: 8px; position: relative; overflow: hidden; background-color: #fff; } .pricing-style-two .pricing-header .sub-title { font-size: 20px; font-weight: 600; line-height: 25px; color: #121212; position: relative; padding-bottom: 8px; } .pricing-style-two .pricing-header .sub-title::before { position: absolute; content: ''; width: 72px; height: 4px; bottom: 0; left: 0; background-color: #0067f4; margin: 0 auto; } .pricing-style-two .pricing-header .price { display: block; font-size: 64px; font-weight: 600; line-height: 80px; margin-top: 32px; color: #121212; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .pricing-style-two .pricing-header .price { font-size: 50px; margin-top: 16px; } } @media (max-width: 767px) { .pricing-style-two .pricing-header .price { font-size: 50px; margin-top: 16px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .pricing-style-two .pricing-header .price { font-size: 64px; margin-top: 32px; } } .pricing-style-two .pricing-header .year { font-size: 20px; font-weight: 500; line-height: 25px; color: #6c6c6c; margin-top: 3px; } .pricing-style-two .pricing-baloon { position: absolute; top: 0; right: -78px; width: 156px; } .pricing-style-two .pricing-list { margin-top: 40px; } .pricing-style-two .pricing-list ul li { font-size: 16px; line-height: 24px; color: #121212; margin-top: 16px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .pricing-style-two .pricing-list ul li { font-size: 14px; margin-top: 12px; } } @media (max-width: 767px) { .pricing-style-two .pricing-list ul li { font-size: 14px; margin-top: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .pricing-style-two .pricing-list ul li { font-size: 16px; margin-top: 16px; } } .pricing-style-two .pricing-list ul li i { color: #0067f4; margin-right: 8px; } .pricing-style-two .pricing-btn { margin-top: 42px; } .pricing-style-two .pricing-btn .main-btn { background-color: #0067f4; color: #fff; border-color: #0067f4; } .pricing-style-two .pricing-btn .main-btn:hover { background-color: #005ad5; border-color: #005ad5; } .pricing-style-two .bottom-shape { position: absolute; bottom: -20px; left: 0; width: 101%; } /*===== PRICING STYLE THREE =====*/ .pricing-style-three { -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); padding: 24px 20px 50px; border-radius: 8px; position: relative; overflow: hidden; background-color: #fff; } .pricing-style-three .pricing-header .sub-title { font-size: 20px; font-weight: 600; line-height: 25px; color: #121212; position: relative; padding-bottom: 8px; } .pricing-style-three .pricing-header .sub-title::before { position: absolute; content: ''; width: 72px; height: 4px; bottom: 0; right: 0; background-color: #0067f4; margin: 0 auto; } .pricing-style-three .pricing-header .price { display: block; font-size: 64px; font-weight: 600; line-height: 80px; margin-top: 32px; color: #121212; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .pricing-style-three .pricing-header .price { font-size: 50px; margin-top: 16px; } } @media (max-width: 767px) { .pricing-style-three .pricing-header .price { font-size: 50px; margin-top: 16px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .pricing-style-three .pricing-header .price { font-size: 64px; margin-top: 32px; } } .pricing-style-three .pricing-header .year { font-size: 20px; font-weight: 500; line-height: 25px; color: #6c6c6c; margin-top: 3px; } .pricing-style-three .pricing-flower { position: absolute; top: 10px; left: 10px; width: 144px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .pricing-style-three .pricing-flower { width: 110px; } } @media (max-width: 767px) { .pricing-style-three .pricing-flower { width: 110px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .pricing-style-three .pricing-flower { width: 144px; } } .pricing-style-three .pricing-flower img { width: 100%; } .pricing-style-three .pricing-list { margin-top: 40px; } .pricing-style-three .pricing-list ul li { font-size: 16px; line-height: 24px; color: #121212; margin-top: 16px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .pricing-style-three .pricing-list ul li { font-size: 14px; margin-top: 12px; } } @media (max-width: 767px) { .pricing-style-three .pricing-list ul li { font-size: 14px; margin-top: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .pricing-style-three .pricing-list ul li { font-size: 16px; margin-top: 16px; } } .pricing-style-three .pricing-list ul li i { color: #0067f4; margin-right: 8px; } .pricing-style-three .pricing-btn { margin-top: 42px; } .pricing-style-three .pricing-btn .main-btn { background-color: #0067f4; color: #fff; border-color: #0067f4; } .pricing-style-three .pricing-btn .main-btn:hover { background-color: #005ad5; border-color: #005ad5; } .pricing-style-three .bottom-shape { position: absolute; bottom: -20px; left: 0; width: 101%; } /*===== PRICING FOUR =====*/ .pricing-style-four { -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); padding: 24px 20px 50px; border-radius: 8px; position: relative; overflow: hidden; background-color: #0067f4; } .pricing-style-four .pricing-header .sub-title { font-size: 20px; font-weight: 600; line-height: 25px; color: #fff; position: relative; padding-bottom: 8px; } .pricing-style-four .pricing-header .sub-title::before { position: absolute; content: ''; width: 72px; height: 4px; bottom: 0; left: 0; right: 0; background-color: #2bdbdc; margin: 0 auto; } .pricing-style-four .pricing-header .price { display: block; font-size: 64px; font-weight: 600; line-height: 80px; margin-top: 32px; color: #fff; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .pricing-style-four .pricing-header .price { font-size: 50px; margin-top: 16px; } } @media (max-width: 767px) { .pricing-style-four .pricing-header .price { font-size: 50px; margin-top: 16px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .pricing-style-four .pricing-header .price { font-size: 64px; margin-top: 32px; } } .pricing-style-four .pricing-header .year { font-size: 20px; font-weight: 500; line-height: 25px; color: #fff; margin-top: 3px; } .pricing-style-four .pricing-list { margin-top: 40px; } .pricing-style-four .pricing-list ul li { font-size: 16px; line-height: 24px; color: #fff; margin-top: 16px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .pricing-style-four .pricing-list ul li { font-size: 14px; margin-top: 12px; } } @media (max-width: 767px) { .pricing-style-four .pricing-list ul li { font-size: 14px; margin-top: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .pricing-style-four .pricing-list ul li { font-size: 16px; margin-top: 16px; } } .pricing-style-four .pricing-list ul li i { color: #fff; margin-right: 8px; } .pricing-style-four .pricing-btn { margin-top: 42px; } .pricing-style-four .pricing-btn .main-btn { background-color: #fff; border-color: #fff; } .pricing-style-four .pricing-btn .main-btn:hover { color: #0067f4; -webkit-box-shadow: 0 3px 16px 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 3px 16px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 3px 16px 0 rgba(0, 0, 0, 0.16); } .pricing-style-four .bottom-shape { position: absolute; bottom: -20px; left: 0; width: 101%; } /*===== PRICING FIVE =====*/ .pricing-style-five { -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); padding: 24px 20px 50px; border-radius: 8px; position: relative; overflow: hidden; background: -webkit-linear-gradient(#1067ff, #8544eb); background: -o-linear-gradient(#1067ff, #8544eb); background: linear-gradient(#1067ff, #8544eb); } .pricing-style-five .pricing-header .sub-title { font-size: 20px; font-weight: 600; line-height: 25px; color: #fff; position: relative; padding-bottom: 8px; } .pricing-style-five .pricing-header .sub-title::before { position: absolute; content: ''; width: 72px; height: 4px; bottom: 0; left: 0; background-color: #2bdbdc; margin: 0 auto; } .pricing-style-five .pricing-header .price { display: block; font-size: 64px; font-weight: 600; line-height: 80px; margin-top: 32px; color: #fff; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .pricing-style-five .pricing-header .price { font-size: 50px; margin-top: 16px; } } @media (max-width: 767px) { .pricing-style-five .pricing-header .price { font-size: 50px; margin-top: 16px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .pricing-style-five .pricing-header .price { font-size: 64px; margin-top: 32px; } } .pricing-style-five .pricing-header .year { font-size: 20px; font-weight: 500; line-height: 25px; color: #fff; margin-top: 3px; } .pricing-style-five .pricing-baloon { position: absolute; top: 0; right: -78px; width: 156px; } .pricing-style-five .pricing-list { margin-top: 40px; } .pricing-style-five .pricing-list ul li { font-size: 16px; line-height: 24px; color: #fff; margin-top: 16px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .pricing-style-five .pricing-list ul li { font-size: 14px; margin-top: 12px; } } @media (max-width: 767px) { .pricing-style-five .pricing-list ul li { font-size: 14px; margin-top: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .pricing-style-five .pricing-list ul li { font-size: 16px; margin-top: 16px; } } .pricing-style-five .pricing-list ul li i { color: #fff; margin-right: 8px; } .pricing-style-five .pricing-btn { margin-top: 42px; } .pricing-style-five .pricing-btn .main-btn { background-color: #fff; border-color: #fff; } .pricing-style-five .pricing-btn .main-btn:hover { color: #0067f4; -webkit-box-shadow: 0 3px 16px 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 3px 16px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 3px 16px 0 rgba(0, 0, 0, 0.16); } .pricing-style-five .bottom-shape { position: absolute; bottom: -20px; left: 0; width: 101%; } /*===== PRICING SIX =====*/ .pricing-style-six { -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); padding: 24px 20px 50px; border-radius: 8px; position: relative; overflow: hidden; background: -webkit-linear-gradient(#0067f4, #2bdbdc); background: -o-linear-gradient(#0067f4, #2bdbdc); background: linear-gradient(#0067f4, #2bdbdc); } .pricing-style-six .pricing-header .sub-title { font-size: 20px; font-weight: 600; line-height: 25px; color: #fff; position: relative; padding-bottom: 8px; } .pricing-style-six .pricing-header .sub-title::before { position: absolute; content: ''; width: 72px; height: 4px; bottom: 0; right: 0; background-color: #2bdbdc; margin: 0 auto; } .pricing-style-six .pricing-header .price { display: block; font-size: 64px; font-weight: 600; line-height: 80px; margin-top: 32px; color: #fff; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .pricing-style-six .pricing-header .price { font-size: 50px; margin-top: 16px; } } @media (max-width: 767px) { .pricing-style-six .pricing-header .price { font-size: 50px; margin-top: 16px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .pricing-style-six .pricing-header .price { font-size: 64px; margin-top: 32px; } } .pricing-style-six .pricing-header .year { font-size: 20px; font-weight: 500; line-height: 25px; color: #fff; margin-top: 3px; } .pricing-style-six .pricing-baloon-two { position: absolute; top: 0; left: -45px; width: 140px; opacity: 0.5; } .pricing-style-six .pricing-list { margin-top: 40px; } .pricing-style-six .pricing-list ul li { font-size: 16px; line-height: 24px; color: #fff; margin-top: 16px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .pricing-style-six .pricing-list ul li { font-size: 14px; margin-top: 12px; } } @media (max-width: 767px) { .pricing-style-six .pricing-list ul li { font-size: 14px; margin-top: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .pricing-style-six .pricing-list ul li { font-size: 16px; margin-top: 16px; } } .pricing-style-six .pricing-list ul li i { color: #fff; margin-right: 8px; } .pricing-style-six .pricing-btn { margin-top: 42px; } .pricing-style-six .pricing-btn .main-btn { background-color: #fff; border-color: #fff; } .pricing-style-six .pricing-btn .main-btn:hover { color: #0067f4; -webkit-box-shadow: 0 3px 16px 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 3px 16px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 3px 16px 0 rgba(0, 0, 0, 0.16); } .pricing-style-six .bottom-shape { position: absolute; bottom: -20px; left: 0; width: 101%; } /*===== PRICING STYLE SEVEN =====*/ .pricing-style-seven { -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); padding: 112px 20px 38px; border-radius: 8px; position: relative; overflow: hidden; background-color: #fff; } .pricing-style-seven .top-shape { position: absolute; top: -20px; left: 0; width: 101%; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .pricing-style-seven .pricing-header .sub-title { font-size: 20px; font-weight: 600; line-height: 25px; color: #121212; position: relative; } .pricing-style-seven .pricing-header .price { display: block; font-size: 64px; font-weight: 600; line-height: 80px; color: #121212; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .pricing-style-seven .pricing-header .price { font-size: 50px; margin-top: 16px; } } @media (max-width: 767px) { .pricing-style-seven .pricing-header .price { font-size: 50px; margin-top: 16px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .pricing-style-seven .pricing-header .price { font-size: 64px; margin-top: 32px; } } .pricing-style-seven .pricing-header .year { font-size: 20px; font-weight: 500; line-height: 25px; color: #6c6c6c; margin-top: 3px; } .pricing-style-seven .pricing-list { margin-top: 24px; } .pricing-style-seven .pricing-list ul li { font-size: 16px; line-height: 24px; color: #121212; margin-top: 16px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .pricing-style-seven .pricing-list ul li { font-size: 14px; margin-top: 12px; } } @media (max-width: 767px) { .pricing-style-seven .pricing-list ul li { font-size: 14px; margin-top: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .pricing-style-seven .pricing-list ul li { font-size: 16px; margin-top: 16px; } } .pricing-style-seven .pricing-list ul li i { color: #0067f4; margin-right: 8px; } .pricing-style-seven .pricing-btn { margin-top: 26px; } /*===== PRICING STYLE EIGHT =====*/ .pricing-style-eight { -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); padding: 24px 20px 38px; border-radius: 8px; position: relative; overflow: hidden; background-color: #fff; } .pricing-style-eight .pricing-icon img { width: 200px; } .pricing-style-eight .pricing-header .sub-title { font-size: 20px; font-weight: 600; line-height: 25px; color: #121212; position: relative; margin-top: 24px; } .pricing-style-eight .pricing-header .month { font-size: 20px; font-weight: 300; line-height: 25px; color: #6c6c6c; margin-top: 3px; } .pricing-style-eight .pricing-header .month .price { font-size: 36px; font-weight: 600; line-height: 45px; color: #121212; margin-top: 8px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .pricing-style-eight .pricing-header .month .price { font-size: 24px; margin-top: 32px; line-height: 30px; } } .pricing-style-eight .pricing-list { margin-top: 24px; } .pricing-style-eight .pricing-list ul li { font-size: 16px; line-height: 24px; color: #121212; margin-top: 16px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .pricing-style-eight .pricing-list ul li { font-size: 14px; margin-top: 12px; } } @media (max-width: 767px) { .pricing-style-eight .pricing-list ul li { font-size: 14px; margin-top: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .pricing-style-eight .pricing-list ul li { font-size: 16px; margin-top: 16px; } } .pricing-style-eight .pricing-list ul li i { color: #0067f4; margin-right: 8px; } .pricing-style-eight .pricing-btn { margin-top: 31px; } /*===== PRICING STYLE NINE =====*/ .pricing-style-nine { -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); padding: 24px 20px 38px; border-radius: 8px; position: relative; overflow: hidden; background: -webkit-linear-gradient(#2bdbdc 0%, #0067f4 100%); background: -o-linear-gradient(#2bdbdc 0%, #0067f4 100%); background: linear-gradient(#2bdbdc 0%, #0067f4 100%); } .pricing-style-nine .pricing-icon img { width: 190px; } .pricing-style-nine .pricing-header .sub-title { font-size: 20px; font-weight: 600; line-height: 25px; color: #fff; position: relative; margin-top: 24px; } .pricing-style-nine .pricing-header .month { font-size: 20px; font-weight: 300; line-height: 25px; color: #fff; margin-top: 3px; } .pricing-style-nine .pricing-header .month .price { font-size: 36px; font-weight: 600; line-height: 45px; color: #fff; margin-top: 8px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .pricing-style-nine .pricing-header .month .price { font-size: 24px; margin-top: 32px; line-height: 30px; } } .pricing-style-nine .pricing-list { margin-top: 24px; } .pricing-style-nine .pricing-list ul li { font-size: 16px; line-height: 24px; color: #fff; margin-top: 16px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .pricing-style-nine .pricing-list ul li { font-size: 14px; margin-top: 12px; } } @media (max-width: 767px) { .pricing-style-nine .pricing-list ul li { font-size: 14px; margin-top: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .pricing-style-nine .pricing-list ul li { font-size: 16px; margin-top: 16px; } } .pricing-style-nine .pricing-list ul li i { color: #fff; margin-right: 8px; } .pricing-style-nine .pricing-btn { margin-top: 31px; } .pricing-style-nine .pricing-btn .main-btn { background-color: #fff; border-color: #fff; } .pricing-style-nine .pricing-btn .main-btn:hover { color: #0067f4; -webkit-box-shadow: 0 3px 16px 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 3px 16px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 3px 16px 0 rgba(0, 0, 0, 0.16); } /*===== PRICING TEN =====*/ .pricing-style-ten { -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); border-radius: 8px; position: relative; overflow: hidden; background-color: #fff; } .pricing-style-ten .pricing-header { background: -webkit-linear-gradient(left, #1067ff 0%, #8544eb 100%); background: -o-linear-gradient(left, #1067ff 0%, #8544eb 100%); background: linear-gradient(to right, #1067ff 0%, #8544eb 100%); padding: 20px; } .pricing-style-ten .pricing-header .sub-title { font-size: 20px; font-weight: 600; line-height: 25px; color: #fff; position: relative; } .pricing-style-ten .pricing-header .pricing-year .price { font-size: 64px; font-weight: 600; line-height: 80px; color: #fff; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .pricing-style-ten .pricing-header .pricing-year .price { font-size: 50px; } } @media (max-width: 767px) { .pricing-style-ten .pricing-header .pricing-year .price { font-size: 50px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .pricing-style-ten .pricing-header .pricing-year .price { font-size: 64px; } } .pricing-style-ten .pricing-header .pricing-year .year { font-size: 20px; font-weight: 300; line-height: 25px; color: #fff; margin-top: -10px; } .pricing-style-ten .pricing-list { padding: 16px 20px 20px; height: 348px; } .pricing-style-ten .pricing-list ul li { font-size: 16px; line-height: 24px; color: #121212; margin-top: 16px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .pricing-style-ten .pricing-list ul li { font-size: 14px; margin-top: 12px; } } @media (max-width: 767px) { .pricing-style-ten .pricing-list ul li { font-size: 14px; margin-top: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .pricing-style-ten .pricing-list ul li { font-size: 16px; margin-top: 16px; } } .pricing-style-ten .pricing-list ul li i { color: #0067f4; margin-right: 8px; } .pricing-style-ten .pricing-btn .main-btn { color: #fff; border: 0; line-height: 50px; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%); width: 100%; } /*===== PRICING ELEVEN =====*/ .pricing-style-eleven { -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); border-radius: 8px; position: relative; overflow: hidden; background-color: #fff; } .pricing-style-eleven .pricing-header { background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%); padding: 8px 20px; } .pricing-style-eleven .pricing-header .sub-title { font-size: 20px; font-weight: 600; line-height: 25px; color: #fff; position: relative; } .pricing-style-eleven .pricing-list { padding: 32px 20px 20px; height: 448px; } .pricing-style-eleven .pricing-list .pricing-year .price { font-size: 64px; font-weight: 600; line-height: 80px; color: #121212; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .pricing-style-eleven .pricing-list .pricing-year .price { font-size: 50px; margin-top: 16px; } } @media (max-width: 767px) { .pricing-style-eleven .pricing-list .pricing-year .price { font-size: 50px; margin-top: 16px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .pricing-style-eleven .pricing-list .pricing-year .price { font-size: 64px; margin-top: 32px; } } .pricing-style-eleven .pricing-list .pricing-year .year { font-size: 20px; font-weight: 300; line-height: 25px; color: #6c6c6c; margin-top: -10px; } .pricing-style-eleven .pricing-list ul { margin-top: 40px; } .pricing-style-eleven .pricing-list ul li { font-size: 16px; line-height: 24px; color: #121212; margin-top: 16px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .pricing-style-eleven .pricing-list ul li { font-size: 14px; margin-top: 12px; } } @media (max-width: 767px) { .pricing-style-eleven .pricing-list ul li { font-size: 14px; margin-top: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .pricing-style-eleven .pricing-list ul li { font-size: 16px; margin-top: 16px; } } .pricing-style-eleven .pricing-list ul li i { color: #0067f4; margin-right: 8px; } .pricing-style-eleven .pricing-btn .main-btn { color: #fff; border: 0; line-height: 50px; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%); width: 100%; } /*===== PRICING TWELVE =====*/ .pricing-style-twelve { -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); padding: 24px 20px; border-radius: 8px; position: relative; overflow: hidden; background-color: #fff; } .pricing-style-twelve .pricing-icon img { width: 112px; } .pricing-style-twelve .pricing-header { margin-top: 24px; } .pricing-style-twelve .pricing-header .sub-title { font-size: 20px; font-weight: 600; line-height: 25px; color: #121212; } .pricing-style-twelve .pricing-header .price { display: block; font-size: 64px; font-weight: 600; line-height: 80px; color: #121212; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .pricing-style-twelve .pricing-header .price { font-size: 50px; margin-top: 16px; } } @media (max-width: 767px) { .pricing-style-twelve .pricing-header .price { font-size: 50px; margin-top: 16px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .pricing-style-twelve .pricing-header .price { font-size: 64px; margin-top: 32px; } } .pricing-style-twelve .pricing-header .year { font-size: 20px; font-weight: 500; line-height: 25px; color: #6c6c6c; margin-top: -10px; } .pricing-style-twelve .pricing-list { margin-top: 33px; } .pricing-style-twelve .pricing-list ul li { font-size: 16px; line-height: 24px; color: #121212; margin-top: 16px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .pricing-style-twelve .pricing-list ul li { font-size: 14px; margin-top: 12px; } } @media (max-width: 767px) { .pricing-style-twelve .pricing-list ul li { font-size: 14px; margin-top: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .pricing-style-twelve .pricing-list ul li { font-size: 16px; margin-top: 16px; } } .pricing-style-twelve .pricing-list ul li i { color: #0067f4; margin-right: 8px; } .pricing-style-twelve .pricing-btn { margin-top: 26px; } /*===== PRICING THIRTEEN =====*/ .pricing-style-thirteen { padding: 65px 50px 70px; } @media (max-width: 767px) { .pricing-style-thirteen { padding: 45px 30px 50px; } } .pricing-style-thirteen .pricing-price .price { font-size: 42px; color: #121212; } .pricing-style-thirteen .pricing-price .price b { font-weight: 800; } .pricing-style-thirteen .pricing-price .price .symbol { font-size: 18px; color: #0067f4; font-weight: 700; } .pricing-style-thirteen .pricing-title { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: center; -webkit-justify-content: center; -moz-justify-content: center; padding-bottom: 50px; } .pricing-style-thirteen .pricing-title .btn { padding: 0 15px; line-height: 25px; border-radius: 50px; background-color: #4bb3f9; color: #fff; font-size: 14px; } .pricing-style-thirteen .pricing-title .title { font-weight: 600; font-size: 24px; padding-left: 10px; } .pricing-style-thirteen .pricing-list ul li { font-size: 14px; color: #a4a4a4; margin-top: 20px; } .pricing-style-thirteen.pricing-color-1 .pricing-title .btn { background-color: #005ad5; } .pricing-style-thirteen.pricing-color-2 .pricing-title .btn { background-color: #fc3832; } .pricing-style-thirteen.pricing-color-3 .pricing-title .btn { background-color: #4da422; } .pricing-style-thirteen.pricing-active { -webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.07); -moz-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.07); box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.07); } /*=========================== 17.FEATURES css ===========================*/ .services-area .section-title .title { font-size: 50px; font-weight: 600; line-height: 55px; color: #121212; } @media (max-width: 767px) { .services-area .section-title .title { font-size: 30px; line-height: 40px; } } .services-area .section-title .text { font-size: 16px; line-height: 24px; color: #6c6c6c; margin-top: 24px; } /*===== SERVICES ONE =====*/ .services-one { position: relative; background-color: #f4f6f7; padding-top: 120px; padding-bottom: 120px; } .services-one .services-content .services-icon i { font-size: 64px; color: #0067f4; } .services-one .services-content .services-content { padding-left: 15px; } @media (max-width: 767px) { .services-one .services-content .services-content { padding-left: 0; padding-top: 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .services-one .services-content .services-content { padding-left: 15px; padding-top: 0; } } .services-one .services-content .services-content .services-title { font-size: 24px; font-weight: 500; line-height: 30px; color: #121212; } .services-one .services-content .services-content .text { font-size: 14px; line-height: 20px; color: #121212; margin-top: 8px; } .services-one .services-image { position: absolute; width: 40%; height: 100%; top: 0; right: 0; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .services-one .services-image { width: 34%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .services-one .services-image { position: relative; width: 720px; margin: 0 auto; } } @media (max-width: 767px) { .services-one .services-image { position: relative; width: 100%; padding-left: 15px; padding-right: 16px; margin: 0 auto; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .services-one .services-image { position: relative; width: 540px; margin: 0 auto; } } .services-one .services-image .image { max-width: 580px; width: 100%; } @media only screen and (min-width: 768px) and (max-width: 991px) { .services-one .services-image .image { margin: 0 auto; padding-top: 50px; } } @media (max-width: 767px) { .services-one .services-image .image { margin: 0 auto; padding-top: 50px; } } .services-one .services-image .image img { width: 100%; } /*===== SERVICES TWO =====*/ .services-two { position: relative; background-color: #f4f6f7; padding-top: 120px; padding-bottom: 120px; height: 600px; } @media only screen and (min-width: 1400px) { .services-two { height: 920px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .services-two { height: auto; } } @media (max-width: 767px) { .services-two { height: auto; } } .services-two .services-image { position: absolute; top: 0; left: 0; width: 50%; height: 100%; } @media only screen and (min-width: 768px) and (max-width: 991px) { .services-two .services-image { position: relative; max-width: 720px; width: 100%; margin: 50px auto 0; padding-left: 15px; padding-right: 15px; } } @media (max-width: 767px) { .services-two .services-image { position: relative; max-width: 100%; width: 100%; margin: 50px auto 0; padding-left: 15px; padding-right: 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .services-two .services-image { max-width: 540px; } } .services-two .services-image .image { max-width: 720px; margin-left: auto; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .services-two .services-image .image { max-width: 470px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .services-two .services-image .image { max-width: 520px; } } .services-two .services-image .image img { width: 100%; } .services-two .services-content .sub-title { color: #121212; font-size: 24px; line-height: 30px; font-weight: 700; text-transform: uppercase; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .services-two .services-content .sub-title { font-size: 20px; } } @media (max-width: 767px) { .services-two .services-content .sub-title { font-size: 20px; } } .services-two .services-content .services-title { font-size: 44px; font-weight: 500; line-height: 55px; color: #121212; margin-top: 16px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .services-two .services-content .services-title { font-size: 38px; line-height: 45px; } } @media (max-width: 767px) { .services-two .services-content .services-title { font-size: 32px; line-height: 35px; } } .services-two .services-content .text { color: #6c6c6c; font-size: 20px; font-weight: 500; margin-top: 16px; line-height: 25px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .services-two .services-content .text { font-size: 18px; } } @media (max-width: 767px) { .services-two .services-content .text { font-size: 16px; line-height: 24px; } } /*===== SERVICES THREE =====*/ .services-three { position: relative; background-color: #f4f6f7; padding-top: 120px; padding-bottom: 120px; height: 600px; } @media only screen and (min-width: 1400px) { .services-three { height: 920px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .services-three { height: auto; } } @media (max-width: 767px) { .services-three { height: auto; } } .services-three .services-image { position: absolute; top: 0; right: 0; width: 50%; height: 100%; } @media only screen and (min-width: 768px) and (max-width: 991px) { .services-three .services-image { position: relative; max-width: 720px; width: 100%; margin: 50px auto 0; padding-left: 15px; padding-right: 15px; } } @media (max-width: 767px) { .services-three .services-image { position: relative; max-width: 100%; width: 100%; margin: 50px auto 0; padding-left: 15px; padding-right: 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .services-three .services-image { max-width: 540px; } } .services-three .services-image .image { max-width: 720px; margin-right: auto; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .services-three .services-image .image { max-width: 470px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .services-three .services-image .image { max-width: 520px; } } .services-three .services-image .image img { width: 100%; } .services-three .services-content .sub-title { color: #121212; font-size: 24px; line-height: 30px; font-weight: 700; text-transform: uppercase; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .services-three .services-content .sub-title { font-size: 20px; } } @media (max-width: 767px) { .services-three .services-content .sub-title { font-size: 20px; } } .services-three .services-content .services-title { font-size: 44px; font-weight: 500; line-height: 55px; color: #121212; margin-top: 16px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .services-three .services-content .services-title { font-size: 38px; line-height: 45px; } } @media (max-width: 767px) { .services-three .services-content .services-title { font-size: 32px; line-height: 35px; } } .services-three .services-content .text { color: #6c6c6c; font-size: 20px; font-weight: 500; margin-top: 16px; line-height: 25px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .services-three .services-content .text { font-size: 18px; } } @media (max-width: 767px) { .services-three .services-content .text { font-size: 16px; line-height: 24px; } } /*===== SERVICES FOUR =====*/ .services-four { position: relative; background-color: #f4f6f7; padding-top: 120px; padding-bottom: 120px; } .services-four .services-image { position: absolute; top: 0; right: 0; width: 50%; height: 100%; } @media only screen and (min-width: 768px) and (max-width: 991px) { .services-four .services-image { position: relative; max-width: 690px; width: 100%; margin: 50px auto 0; padding-left: 15px; padding-right: 15px; } } @media (max-width: 767px) { .services-four .services-image { position: relative; max-width: 100%; width: 100%; margin: 50px auto 0; padding-left: 15px; padding-right: 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .services-four .services-image { max-width: 540px; } } .services-four .services-image .image { max-width: 720px; margin-right: auto; } .services-four .services-image .image img { width: 100%; } .services-four .single-services .services-icon { position: relative; display: inline-block; } .services-four .single-services .services-icon i { font-size: 64px; color: #0067f4; position: relative; z-index: 5; } .services-four .single-services .services-icon .shape { position: absolute; top: 0; left: 0; } .services-four .single-services .services-content { margin-top: 16px; } .services-four .single-services .services-content .services-title a { font-size: 24px; line-height: 30px; color: #121212; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; font-weight: 500; } @media (max-width: 767px) { .services-four .single-services .services-content .services-title a { font-size: 20px; } } .services-four .single-services .services-content .services-title a:hover { color: #0067f4; } .services-four .single-services .services-content .text { font-size: 14px; color: #121212; line-height: 20px; margin-top: 8px; } /*===== SERVICES FIVE =====*/ .services-five { position: relative; background-color: #f4f6f7; padding-top: 120px; padding-bottom: 120px; } .services-five .section-title .title { font-size: 44px; font-weight: 600; line-height: 55px; color: #121212; } @media (max-width: 767px) { .services-five .section-title .title { font-size: 28px; line-height: 40px; } } .services-five .section-title .text { font-size: 20px; line-height: 25px; color: #121212; margin-top: 8px; } @media (max-width: 767px) { .services-five .section-title .text { font-size: 16px; } } .services-five .single-services .services-icon img { width: 120px; } @media (max-width: 767px) { .services-five .single-services .services-icon img { width: 100px; } } .services-five .single-services .services-content { padding-left: 30px; } @media (max-width: 767px) { .services-five .single-services .services-content { padding-left: 0; padding-top: 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .services-five .single-services .services-content { padding-left: 30px; padding-top: 0; } } .services-five .single-services .services-content .services-title { font-size: 20px; font-weight: 600; line-height: 25px; color: #121212; } .services-five .single-services .services-content .text { font-size: 16px; color: #121212; margin-top: 16px; } .features-area .section-title .title { font-size: 44px; font-weight: 500; color: #121212; line-height: 55px; } @media (max-width: 767px) { .features-area .section-title .title { font-size: 30px; line-height: 35px; } } .features-area .section-title .text { font-size: 16px; line-height: 24px; color: #6c6c6c; margin-top: 24px; } /*===== features One =====*/ .features-one { background-color: #f4f6f7; padding-top: 120px; padding-bottom: 120px; } .features-one .single-features { background-color: #fff; padding: 40px 20px; } .features-one .single-features .features-icon { position: relative; display: inline-block; } .features-one .single-features .features-icon i { font-size: 88px; line-height: 70px; color: #0067f4; } .features-one .single-features .features-icon .shape { position: absolute; top: 0; left: 0; } .features-one .single-features .features-content { margin-top: 24px; } .features-one .single-features .features-content .features-title a { font-size: 28px; line-height: 35px; font-weight: 500; color: #121212; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .features-one .single-features .features-content .features-title a { font-size: 22px; } } @media (max-width: 767px) { .features-one .single-features .features-content .features-title a { font-size: 22px; } } .features-one .single-features .features-content .features-title a:hover { color: #0067f4; } .features-one .single-features .features-content .text { font-size: 14px; line-height: 20px; color: #121212; margin-top: 16px; } .features-one .single-features .features-content .features-btn { margin-top: 32px; } /*===== features TWO =====*/ .features-two { background-color: #f4f6f7; padding-top: 120px; padding-bottom: 120px; } .features-two .single-features { padding: 40px 20px 52px; background-color: #fff; } .features-two .single-features .features-title-icon .features-title a { font-size: 36px; line-height: 45px; color: #121212; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; font-weight: 400; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .features-two .single-features .features-title-icon .features-title a { font-size: 24px; line-height: 35px; } } @media (max-width: 767px) { .features-two .single-features .features-title-icon .features-title a { font-size: 24px; line-height: 35px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .features-two .single-features .features-title-icon .features-title a { font-size: 36px; line-height: 45px; } } .features-two .single-features .features-title-icon .features-title a:hover { color: #0067f4; } .features-two .single-features .features-title-icon .features-icon { position: relative; display: inline-block; } .features-two .single-features .features-title-icon .features-icon i { font-size: 88px; line-height: 70px; color: #0067f4; } .features-two .single-features .features-title-icon .features-icon .shape { position: absolute; top: 0; left: 0; } .features-two .single-features .features-content .text { font-size: 14px; line-height: 20px; color: #121212; margin-top: 16px; } .features-two .single-features .features-content .features-btn { color: #0067f4; font-size: 16px; font-weight: 700; margin-top: 29px; } /*===== features THREE =====*/ .features-three { background-color: #f4f6f7; padding-top: 120px; padding-bottom: 120px; } .features-three .single-features .features-icon { position: relative; display: inline-block; padding-bottom: 16px; } .features-three .single-features .features-icon::before { position: absolute; content: ''; width: 72px; height: 4px; background-color: #9c09db; bottom: 0; left: 0; } .features-three .single-features .features-icon i { font-size: 72px; line-height: 70px; color: #9c09db; position: relative; z-index: 5; } .features-three .single-features .features-icon .shape { position: absolute; top: 0; left: 0; opacity: 0.5; } .features-three .single-features .features-content { margin-top: 24px; } .features-three .single-features .features-content .features-title a { font-size: 24px; line-height: 30px; font-weight: 600; color: #121212; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .features-three .single-features .features-content .features-title a { font-size: 20px; } } @media (max-width: 767px) { .features-three .single-features .features-content .features-title a { font-size: 20px; } } .features-three .single-features .features-content .features-title a:hover { color: #0067f4; } .features-three .single-features .features-content .text { font-size: 14px; line-height: 20px; color: #121212; margin-top: 16px; } /*===== features FOUR =====*/ .features-four { background-color: #f4f6f7; padding-top: 120px; padding-bottom: 120px; } .features-four .single-features .features-icon { position: relative; display: inline-block; padding-bottom: 16px; width: 120px; height: 105px; } .features-four .single-features .features-icon i { font-size: 80px; line-height: 80px; color: #fc3832; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 5; } .features-four .single-features .features-icon .shape { position: absolute; top: 0; left: 0; opacity: 0.4; } .features-four .single-features .features-content { padding-left: 16px; } @media (max-width: 767px) { .features-four .single-features .features-content { padding-top: 15px; padding-left: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .features-four .single-features .features-content { padding-top: 0; padding-left: 15px; } } .features-four .single-features .features-content .features-title a { font-size: 20px; line-height: 25px; font-weight: 600; color: #121212; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .features-four .single-features .features-content .features-title a:hover { color: #fc3832; } .features-four .single-features .features-content .text { font-size: 16px; line-height: 24px; color: #121212; margin-top: 16px; } /*===== features Five =====*/ .features-five { background-color: #f4f6f7; padding-top: 120px; padding-bottom: 120px; } .features-five .single-features { position: relative; padding: 0 20px; } .features-five .single-features::before { position: absolute; content: ''; height: 100%; width: 4px; top: 0; left: 0; background: -webkit-linear-gradient(#0067f4 0%, #2bdbdc 100%); background: -o-linear-gradient(#0067f4 0%, #2bdbdc 100%); background: linear-gradient(#0067f4 0%, #2bdbdc 100%); } .features-five .single-features .features-title a { font-size: 24px; line-height: 30px; font-weight: 600; color: #121212; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .features-five .single-features .features-title a { font-size: 20px; } } @media (max-width: 767px) { .features-five .single-features .features-title a { font-size: 20px; } } .features-five .single-features .features-title a:hover { color: #0067f4; } .features-five .single-features .text { font-size: 14px; line-height: 20px; color: #121212; margin-top: 16px; } /*===== features SIX =====*/ .features-six { background-color: #f4f6f7; padding-top: 120px; padding-bottom: 120px; } .features-six .single-features { position: relative; } .features-six .single-features .features-title a { font-size: 24px; line-height: 30px; font-weight: 600; color: #121212; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; position: relative; z-index: 5; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .features-six .single-features .features-title a { font-size: 20px; } } @media (max-width: 767px) { .features-six .single-features .features-title a { font-size: 20px; } } .features-six .single-features .features-title a:hover { color: #0067f4; } .features-six .single-features .text { font-size: 14px; line-height: 20px; color: #121212; margin-top: 27px; } .features-six .single-features .shape { position: absolute; top: -12px; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } /*===== features SAVEN =====*/ .features-saven { background-color: #f4f6f7; padding-top: 120px; padding-bottom: 120px; } .features-saven .single-features { position: relative; background-color: #fff; padding: 16px 20px; border: 1px solid #f4f6f7; } .features-saven .single-features::before { position: absolute; content: ''; width: 100%; height: 100%; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%); top: 0; left: 0; opacity: 0; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .features-saven .single-features .features-title a { font-size: 24px; line-height: 30px; font-weight: 600; color: #121212; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; position: relative; z-index: 5; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .features-saven .single-features .features-title a { font-size: 20px; } } @media (max-width: 767px) { .features-saven .single-features .features-title a { font-size: 20px; } } .features-saven .single-features .text { font-size: 14px; line-height: 20px; color: #121212; margin-top: 16px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; position: relative; z-index: 5; } .features-saven .single-features:hover::before { opacity: 1; } .features-saven .single-features:hover .features-title a { color: #fff; } .features-saven .single-features:hover .text { color: #fff; } /*===== features Eight =====*/ .features-eight { background-color: #f4f6f7; padding-top: 120px; padding-bottom: 120px; } .features-eight .section-title .text { color: #121212; } .features-eight .single-features { background-color: rgba(255, 255, 255, 0.9); padding: 40px 20px; } .features-eight .single-features .features-icon { position: relative; display: inline-block; } .features-eight .single-features .features-icon i { font-size: 88px; line-height: 70px; color: #0067f4; } .features-eight .single-features .features-icon .shape { position: absolute; top: 0; left: 0; } .features-eight .single-features .features-content { margin-top: 24px; } .features-eight .single-features .features-content .features-title a { font-size: 28px; line-height: 35px; font-weight: 500; color: #121212; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .features-eight .single-features .features-content .features-title a { font-size: 22px; } } .features-eight .single-features .features-content .features-title a:hover { color: #0067f4; } .features-eight .single-features .features-content .text { font-size: 14px; line-height: 20px; color: #121212; margin-top: 16px; } .features-eight .single-features .features-content .features-btn { margin-top: 32px; } /*===== features Nine =====*/ .features-nine .features-title .sub-title { font-size: 24px; font-weight: 500; color: #a4a4a4; line-height: 30px; } @media (max-width: 767px) { .features-nine .features-title .sub-title { font-size: 18px; line-height: 28px; } } .features-nine .features-title .main-title { font-size: 36px; font-weight: 600; line-height: 45px; margin-top: 10px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .features-nine .features-title .main-title { font-size: 32px; line-height: 38px; } } @media (max-width: 767px) { .features-nine .features-title .main-title { font-size: 26px; line-height: 34px; } } .features-nine .features-title .text { margin-top: 19px; } .features-nine .features-image img { width: 100%; border-radius: 8px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .features-nine .features-image:hover img { -webkit-box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08); -moz-box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08); box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08); } /*=========================== 18.PORTFOLIO css ===========================*/ /*===== portfolio ONE =====*/ .portfolio-one .portfolio-menu ul li { font-size: 16px; font-weight: 700; color: #6c6c6c; line-height: 48px; padding: 0 30px; position: relative; border-radius: 50px; overflow: hidden; display: inline-block; z-index: 5; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; cursor: pointer; margin-right: 4px; text-transform: uppercase; } .portfolio-one .portfolio-menu ul li:last-child { margin-right: 0; } @media only screen and (min-width: 768px) and (max-width: 991px) { .portfolio-one .portfolio-menu ul li { font-size: 14px; padding: 0 26px; } } @media (max-width: 767px) { .portfolio-one .portfolio-menu ul li { font-size: 14px; padding: 0 22px; line-height: 42px; } } .portfolio-one .portfolio-menu ul li::before { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%); z-index: -1; opacity: 0; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .portfolio-one .portfolio-menu ul li:hover, .portfolio-one .portfolio-menu ul li.active { color: #fff; } .portfolio-one .portfolio-menu ul li:hover::before, .portfolio-one .portfolio-menu ul li.active::before { opacity: 1; } .portfolio-one .single-portfolio { position: relative; overflow: hidden; border-radius: 8px; } .portfolio-one .single-portfolio .portfolio-image img { width: 100%; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .portfolio-one .single-portfolio .portfolio-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; -webkit-transition: all 0.5s ease-out 0s; -moz-transition: all 0.5s ease-out 0s; -ms-transition: all 0.5s ease-out 0s; -o-transition: all 0.5s ease-out 0s; transition: all 0.5s ease-out 0s; } .portfolio-one .single-portfolio .portfolio-overlay .portfolio-content { padding: 16px; } .portfolio-one .single-portfolio .portfolio-overlay .portfolio-content .portfolio-icon { position: relative; display: inline-block; } .portfolio-one .single-portfolio .portfolio-overlay .portfolio-content .portfolio-icon a { font-size: 88px; color: #fff; position: relative; z-index: 5; line-height: 90px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .portfolio-one .single-portfolio .portfolio-overlay .portfolio-content .portfolio-icon a { font-size: 70px; line-height: 70px; } } @media (max-width: 767px) { .portfolio-one .single-portfolio .portfolio-overlay .portfolio-content .portfolio-icon a { font-size: 70px; line-height: 70px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .portfolio-one .single-portfolio .portfolio-overlay .portfolio-content .portfolio-icon a { font-size: 60px; line-height: 60px; } } .portfolio-one .single-portfolio .portfolio-overlay .portfolio-content .portfolio-icon .shape { position: absolute; top: 17px; left: 0; } .portfolio-one .single-portfolio .portfolio-overlay .portfolio-content .portfolio-text { padding-top: 24px; } @media (max-width: 767px) { .portfolio-one .single-portfolio .portfolio-overlay .portfolio-content .portfolio-text { padding-top: 10px; } } .portfolio-one .single-portfolio .portfolio-overlay .portfolio-content .portfolio-text .portfolio-title a { color: #fff; font-size: 24px; line-height: 30px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .portfolio-one .single-portfolio .portfolio-overlay .portfolio-content .portfolio-text .portfolio-title a { font-size: 20px; } } @media (max-width: 767px) { .portfolio-one .single-portfolio .portfolio-overlay .portfolio-content .portfolio-text .portfolio-title a { font-size: 20px; } } .portfolio-one .single-portfolio .portfolio-overlay .portfolio-content .portfolio-text .text { color: #fff; font-size: 14px; line-height: 20px; margin-top: 8px; opacity: 0.7; } .portfolio-one .single-portfolio:hover .portfolio-image img { -webkit-filter: blur(8px); -moz-filter: blur(8px); filter: blur(8px); } .portfolio-one .single-portfolio:hover .portfolio-overlay { opacity: 1; visibility: visible; } /*===== portfolio TWO =====*/ .portfolio-two .portfolio-menu-2 ul li { font-size: 16px; font-weight: 700; color: #6c6c6c; line-height: 48px; padding: 0 30px; position: relative; border-radius: 50px; overflow: hidden; display: inline-block; z-index: 5; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; cursor: pointer; margin: 0 2px; text-transform: uppercase; } @media only screen and (min-width: 768px) and (max-width: 991px) { .portfolio-two .portfolio-menu-2 ul li { font-size: 14px; padding: 0 26px; } } @media (max-width: 767px) { .portfolio-two .portfolio-menu-2 ul li { font-size: 14px; padding: 0 22px; line-height: 42px; } } .portfolio-two .portfolio-menu-2 ul li::before { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%); z-index: -1; opacity: 0; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .portfolio-two .portfolio-menu-2 ul li:hover, .portfolio-two .portfolio-menu-2 ul li.active { color: #fff; } .portfolio-two .portfolio-menu-2 ul li:hover::before, .portfolio-two .portfolio-menu-2 ul li.active::before { opacity: 1; } .portfolio-two .single-portfolio { position: relative; overflow: hidden; border-radius: 8px; } .portfolio-two .single-portfolio .portfolio-image img { width: 100%; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .portfolio-two .single-portfolio .portfolio-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; -webkit-transition: all 0.5s ease-out 0s; -moz-transition: all 0.5s ease-out 0s; -ms-transition: all 0.5s ease-out 0s; -o-transition: all 0.5s ease-out 0s; transition: all 0.5s ease-out 0s; background-color: rgba(255, 255, 255, 0.8); -webkit-transform: scale(0.95); -moz-transform: scale(0.95); -ms-transform: scale(0.95); -o-transform: scale(0.95); transform: scale(0.95); border-radius: 8px; } .portfolio-two .single-portfolio .portfolio-overlay .portfolio-content { padding: 16px; } .portfolio-two .single-portfolio .portfolio-overlay .portfolio-content .portfolio-icon { position: relative; display: inline-block; margin: 0 20px; } .portfolio-two .single-portfolio .portfolio-overlay .portfolio-content .portfolio-icon a { font-size: 48px; color: #0067f4; position: relative; z-index: 5; line-height: 50px; } .portfolio-two .single-portfolio .portfolio-overlay .portfolio-content .portfolio-icon .shape { position: absolute; top: 7px; left: 0; } .portfolio-two .single-portfolio .portfolio-overlay .portfolio-content .portfolio-text { padding-top: 24px; } @media (max-width: 767px) { .portfolio-two .single-portfolio .portfolio-overlay .portfolio-content .portfolio-text { padding-top: 10px; } } .portfolio-two .single-portfolio .portfolio-overlay .portfolio-content .portfolio-text .portfolio-title a { color: #121212; font-size: 24px; line-height: 30px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .portfolio-two .single-portfolio .portfolio-overlay .portfolio-content .portfolio-text .portfolio-title a { font-size: 20px; } } @media (max-width: 767px) { .portfolio-two .single-portfolio .portfolio-overlay .portfolio-content .portfolio-text .portfolio-title a { font-size: 20px; } } .portfolio-two .single-portfolio .portfolio-overlay .portfolio-content .portfolio-text .text { color: #121212; font-size: 14px; line-height: 20px; margin-top: 8px; } .portfolio-two .single-portfolio:hover .portfolio-overlay { opacity: 1; visibility: visible; } /*===== portfolio THREE =====*/ .portfolio-three .portfolio-menu-3 ul li { font-size: 16px; font-weight: 700; color: #6c6c6c; line-height: 48px; padding: 0 30px; position: relative; display: inline-block; z-index: 5; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; cursor: pointer; margin: 0 2px; text-transform: uppercase; } @media only screen and (min-width: 768px) and (max-width: 991px) { .portfolio-three .portfolio-menu-3 ul li { font-size: 14px; padding: 0 26px; } } @media (max-width: 767px) { .portfolio-three .portfolio-menu-3 ul li { font-size: 14px; padding: 0 22px; line-height: 42px; } } .portfolio-three .portfolio-menu-3 ul li::before { position: absolute; content: ''; bottom: 0; left: 0; width: 100%; height: 4px; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%); z-index: -1; opacity: 0; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; border-radius: 4px; } .portfolio-three .portfolio-menu-3 ul li:hover, .portfolio-three .portfolio-menu-3 ul li.active { color: #0067f4; } .portfolio-three .portfolio-menu-3 ul li:hover::before, .portfolio-three .portfolio-menu-3 ul li.active::before { opacity: 1; } .portfolio-three .single-portfolio .portfolio-image { position: relative; overflow: hidden; border-radius: 8px; } .portfolio-three .single-portfolio .portfolio-image img { width: 100%; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .portfolio-three .single-portfolio .portfolio-image .portfolio-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; -webkit-transition: all 0.5s ease-out 0s; -moz-transition: all 0.5s ease-out 0s; -ms-transition: all 0.5s ease-out 0s; -o-transition: all 0.5s ease-out 0s; transition: all 0.5s ease-out 0s; background-color: rgba(255, 255, 255, 0.8); -webkit-transform: scale(0.95); -moz-transform: scale(0.95); -ms-transform: scale(0.95); -o-transform: scale(0.95); transform: scale(0.95); border-radius: 8px; } .portfolio-three .single-portfolio .portfolio-image .portfolio-overlay .portfolio-content { padding: 16px; } .portfolio-three .single-portfolio .portfolio-image .portfolio-overlay .portfolio-content .portfolio-icon { position: relative; display: inline-block; margin: 0 20px; } .portfolio-three .single-portfolio .portfolio-image .portfolio-overlay .portfolio-content .portfolio-icon a { font-size: 48px; color: #0067f4; position: relative; z-index: 5; line-height: 50px; } .portfolio-three .single-portfolio .portfolio-image .portfolio-overlay .portfolio-content .portfolio-icon .shape { position: absolute; top: 7px; left: 0; } .portfolio-three .single-portfolio .portfolio-text { padding-top: 16px; } .portfolio-three .single-portfolio .portfolio-text .portfolio-title a { color: #121212; font-size: 24px; line-height: 30px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .portfolio-three .single-portfolio .portfolio-text .portfolio-title a { font-size: 20px; } } @media (max-width: 767px) { .portfolio-three .single-portfolio .portfolio-text .portfolio-title a { font-size: 20px; } } .portfolio-three .single-portfolio .portfolio-text .text { color: #121212; font-size: 14px; line-height: 20px; margin-top: 8px; } .portfolio-three .single-portfolio:hover .portfolio-overlay { opacity: 1; visibility: visible; } /*===== portfolio FOUR =====*/ .portfolio-four .portfolio-menu-4 ul li { font-size: 16px; font-weight: 700; color: #6c6c6c; line-height: 48px; padding: 0 30px; position: relative; z-index: 5; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; cursor: pointer; width: 100%; border-radius: 50px; overflow: hidden; margin-top: 4px; text-transform: uppercase; } .portfolio-four .portfolio-menu-4 ul li:last-child { margin-right: 0; } @media only screen and (min-width: 768px) and (max-width: 991px) { .portfolio-four .portfolio-menu-4 ul li { font-size: 14px; padding: 0 26px; } } @media (max-width: 767px) { .portfolio-four .portfolio-menu-4 ul li { font-size: 14px; padding: 0 22px; line-height: 42px; } } .portfolio-four .portfolio-menu-4 ul li::before { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%); z-index: -1; opacity: 0; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .portfolio-four .portfolio-menu-4 ul li:hover, .portfolio-four .portfolio-menu-4 ul li.active { color: #fff; } .portfolio-four .portfolio-menu-4 ul li:hover::before, .portfolio-four .portfolio-menu-4 ul li.active::before { opacity: 1; } .portfolio-four .single-portfolio .portfolio-image { position: relative; overflow: hidden; } .portfolio-four .single-portfolio .portfolio-image img { width: 100%; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .portfolio-four .single-portfolio .portfolio-image .portfolio-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; -webkit-transition: all 0.5s ease-out 0s; -moz-transition: all 0.5s ease-out 0s; -ms-transition: all 0.5s ease-out 0s; -o-transition: all 0.5s ease-out 0s; transition: all 0.5s ease-out 0s; background-color: rgba(255, 255, 255, 0.8); -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); border-radius: 8px; } .portfolio-four .single-portfolio .portfolio-image .portfolio-overlay .portfolio-content { padding: 16px; } .portfolio-four .single-portfolio .portfolio-image .portfolio-overlay .portfolio-content .portfolio-icon { position: relative; display: inline-block; margin: 0 20px; } .portfolio-four .single-portfolio .portfolio-image .portfolio-overlay .portfolio-content .portfolio-icon a { font-size: 48px; color: #0067f4; position: relative; z-index: 5; line-height: 50px; } .portfolio-four .single-portfolio .portfolio-image .portfolio-overlay .portfolio-content .portfolio-icon .shape { position: absolute; top: 7px; left: 0; } .portfolio-four .single-portfolio:hover .portfolio-overlay { opacity: 1; visibility: visible; } /*===== portfolio FIVE =====*/ .image-gallery-one .single-image-gallery { position: relative; } .image-gallery-one .single-image-gallery .image img { width: 100%; } .image-gallery-one .single-image-gallery .gallery-icon { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); background-color: #0066f4; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .image-gallery-one .single-image-gallery .gallery-icon a { color: #fff; font-size: 140px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .image-gallery-one .single-image-gallery .gallery-icon a { font-size: 100px; } } @media (max-width: 767px) { .image-gallery-one .single-image-gallery .gallery-icon a { font-size: 100px; } } .image-gallery-one .single-image-gallery:hover .gallery-icon { opacity: 1; visibility: visible; } /*=========================== 19.CONTACT css ===========================*/ .contact-area .section-title .title { font-size: 28px; font-weight: 600; line-height: 55px; } @media (max-width: 767px) { .contact-area .section-title .title { font-size: 24px; line-height: 35px; } } .contact-area .section-title-2 .title { font-size: 42px; font-weight: 600; line-height: 55px; } @media (max-width: 767px) { .contact-area .section-title-2 .title { font-size: 24px; line-height: 35px; } } .contact-form .single-form label { font-size: 12px; color: #a4a4a4; line-height: 18px; margin-left: 44px; } .contact-form .single-form .input-form { position: relative; } .contact-form .single-form .input-form i { font-size: 24px; position: absolute; top: 10px; left: 10px; color: #6c6c6c; } .contact-form .single-form .input-form textarea, .contact-form .single-form .input-form input { width: 100%; height: 44px; padding-left: 45px; padding-right: 30px; color: #6c6c6c; font-size: 16px; border: 0; border-bottom: 1px solid #a4a4a4; font-weight: 500; } .contact-form .single-form .input-form textarea::placeholder, .contact-form .single-form .input-form input::placeholder { opacity: 1; color: #6c6c6c; } .contact-form .single-form .input-form textarea::-moz-placeholder, .contact-form .single-form .input-form input::-moz-placeholder { opacity: 1; color: #6c6c6c; } .contact-form .single-form .input-form textarea::-moz-placeholder, .contact-form .single-form .input-form input::-moz-placeholder { opacity: 1; color: #6c6c6c; } .contact-form .single-form .input-form textarea::-webkit-input-placeholder, .contact-form .single-form .input-form input::-webkit-input-placeholder { opacity: 1; color: #6c6c6c; } .contact-form .single-form .input-form textarea { padding-top: 10px; } .contact-form .single-form .input-form .main-btn { border: 0; border-radius: 50px; } .contact-info ul li .single-info { position: relative; margin-top: 19px; } .contact-info ul li .single-info .info-icon { position: absolute; top: 0; left: 0; } .contact-info ul li .single-info .info-icon i { color: #6c6c6c; font-size: 18px; line-height: 24px; } .contact-info ul li .single-info .info-content { padding-left: 30px; } .contact-info ul li .single-info .info-content .text { font-size: 16px; line-height: 24px; color: #6c6c6c; font-weight: 500; } .contact-info .social li { display: inline-block; margin-right: 12px; } .contact-info .social li a { font-size: 32px; color: #6c6c6c; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .contact-info .social li a:hover { color: #0067f4; } /*===== CONTACT BOX STYLE =====*/ .contact-box { padding-top: 70px; padding-bottom: 120px; background-color: #f4f6f7; } .single-contact-box { background-color: #fff; border-radius: 8px; padding: 24px 35px; height: 255px; } @media (max-width: 767px) { .single-contact-box { padding: 24px 20px; } } .single-contact-box .box-icon { position: relative; display: inline-block; } .single-contact-box .box-icon i { font-size: 88px; position: relative; z-index: 5; color: #0067f4; } .single-contact-box .box-icon .shape { position: absolute; top: 0; left: 0; } .single-contact-box .box-content { margin-top: 24px; } .single-contact-box .box-content .box-title { font-size: 28px; line-height: 35px; color: #121212; } .single-contact-box .box-content .text { font-size: 14px; line-height: 20px; color: #121212; margin-top: 16px; } /*===== CONTACT TWO STYLE =====*/ .contact-area-two { background-color: #f4f6f7; } .contact-two .contact-title { font-size: 20px; font-weight: 600; color: #121212; } .contact-two .text { font-size: 16px; line-height: 24px; margin-top: 8px; color: #6c6c6c; } .contact-two .contact-info { margin-top: 40px; } .contact-two .contact-info li { color: #6c6c6c; margin-top: 8px; font-size: 16px; } .contact-two .contact-info li i { margin-right: 5px; color: #121212; } /*===== CONTACT THREE STYLE =====*/ .contact-area-three { background-color: #f4f6f7; } .contact-area-three .contact-map .gmap_canvas iframe { width: 100%; height: 400px; } /*===== CONTACT FOUR STYLE =====*/ .contact-area-four { background-color: #f4f6f7; padding-top: 120px; padding-bottom: 120px; } .contact-map-four iframe { width: 100%; height: 550px; } @media (max-width: 767px) { .contact-map-four iframe { height: 350px; } } .contact-info-four .single-contact-info .contact-info-icon i { width: 50px; height: 50px; line-height: 50px; text-align: center; font-size: 24px; color: #fff; border-radius: 50%; } .contact-info-four .single-contact-info .contact-info-content { padding-left: 20px; } .contact-info-four .single-contact-info .contact-info-content .text { color: #121212; } .contact-info-four .single-contact-info.contact-color-1 .contact-info-icon i { background-color: #121212; } .contact-info-four .single-contact-info.contact-color-2 .contact-info-icon i { background-color: #fc3832; } .contact-info-four .single-contact-info.contact-color-3 .contact-info-icon i { background-color: #005ad5; } .contact-wrapper-form .contact-title { font-size: 32px; font-weight: 700; color: #000; } @media (max-width: 767px) { .contact-wrapper-form .contact-title { font-size: 26px; } } .contact-wrapper-form .contact-title i { color: #121212; margin-right: 8px; } .contact-wrapper-form .contact-title span { font-weight: 400; } /*=========================== 20.BLOG css ===========================*/ /*===== BLOG STYLE ONE =====*/ .blog-style-one .blog-image img { width: 100%; border-radius: 8px; } .blog-style-one .blog-content { padding-top: 16px; } .blog-style-one .blog-content .blog-title a { font-size: 20px; font-weight: 600; line-height: 25px; color: #121212; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .blog-style-one .blog-content .blog-title a { font-size: 18px; } } @media (max-width: 767px) { .blog-style-one .blog-content .blog-title a { font-size: 18px; } } .blog-style-one .blog-content .blog-title a:hover { color: #0067f4; } .blog-style-one .blog-content span { font-size: 14px; line-height: 20px; color: #6c6c6c; margin-top: 8px; margin-right: 10px; } .blog-style-one .blog-content .text { font-size: 14px; line-height: 20px; color: #121212; margin-top: 16px; } .blog-style-one .blog-content .more { text-transform: uppercase; font-size: 16px; font-weight: 700; color: #0067f4; margin-top: 29px; } /*===== BLOG STYLE TWO =====*/ .blog-style-two .blog-image img { width: 100%; border-top-left-radius: 8px; border-top-right-radius: 8px; } .blog-style-two .blog-content { border: 1px solid #cbced1; border-top: 0; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; padding: 16px 16px 28px; } .blog-style-two .blog-content .blog-title a { font-size: 20px; font-weight: 600; line-height: 25px; color: #121212; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .blog-style-two .blog-content .blog-title a { font-size: 18px; } } @media (max-width: 767px) { .blog-style-two .blog-content .blog-title a { font-size: 18px; } } .blog-style-two .blog-content .blog-title a:hover { color: #0067f4; } .blog-style-two .blog-content span { font-size: 14px; line-height: 20px; color: #6c6c6c; margin-top: 8px; margin-right: 10px; } .blog-style-two .blog-content .text { font-size: 14px; line-height: 20px; color: #121212; margin-top: 16px; } .blog-style-two .blog-content .more { text-transform: uppercase; font-size: 16px; font-weight: 700; color: #0067f4; margin-top: 29px; } /*===== BLOG STYLE THREE =====*/ .blog-style-three .blog-image img { width: 100%; border-top-left-radius: 8px; border-top-right-radius: 8px; } .blog-style-three .blog-content { border: 1px solid #cbced1; border-top: 0; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; padding: 16px 16px 28px; } .blog-style-three .blog-content .blog-title a { font-size: 20px; font-weight: 600; line-height: 25px; color: #121212; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .blog-style-three .blog-content .blog-title a { font-size: 18px; } } @media (max-width: 767px) { .blog-style-three .blog-content .blog-title a { font-size: 18px; } } .blog-style-three .blog-content .blog-title a:hover { color: #0067f4; } .blog-style-three .blog-content span { font-size: 14px; line-height: 20px; color: #6c6c6c; margin-top: 8px; margin-right: 10px; } .blog-style-three .blog-content .text { font-size: 14px; line-height: 20px; color: #121212; margin-top: 16px; } .blog-style-three .blog-content .more { text-transform: uppercase; font-size: 16px; font-weight: 700; color: #0067f4; margin-top: 29px; padding: 0 39px; line-height: 48px; border-radius: 50px; border: 1px solid #0067f4; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .blog-style-three .blog-content .more:hover { background-color: #0067f4; color: #fff; } /*===== BLOG STYLE FOUR =====*/ .blog-style-four .blog-image img { width: 100%; border-radius: 8px; } .blog-style-four .blog-content { padding-top: 16px; } .blog-style-four .blog-content .blog-title a { font-size: 24px; font-weight: 500; line-height: 30px; color: #121212; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .blog-style-four .blog-content .blog-title a { font-size: 22px; } } @media (max-width: 767px) { .blog-style-four .blog-content .blog-title a { font-size: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .blog-style-four .blog-content .blog-title a { font-size: 22px; } } .blog-style-four .blog-content .blog-title a:hover { color: #0067f4; } .blog-style-four .blog-content span { font-size: 14px; line-height: 20px; color: #6c6c6c; margin-top: 8px; margin-right: 10px; } .blog-style-four .blog-content .text { font-size: 14px; line-height: 20px; color: #121212; margin-top: 16px; } .blog-style-four .blog-content .more { text-transform: uppercase; font-size: 16px; font-weight: 700; color: #0067f4; margin-top: 29px; padding: 0 39px; line-height: 48px; border-radius: 50px; border: 1px solid #0067f4; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .blog-style-four .blog-content .more:hover { background-color: #0067f4; color: #fff; } /*===== BLOG STYLE FIVE =====*/ .blog-style-five .blog-image { width: 240px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .blog-style-five .blog-image { width: 200px; } } @media (max-width: 767px) { .blog-style-five .blog-image { width: 100%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .blog-style-five .blog-image { width: 240px; } } .blog-style-five .blog-image img { width: 100%; border-radius: 8px; } .blog-style-five .blog-content { padding-left: 16px; } @media (max-width: 767px) { .blog-style-five .blog-content { padding-left: 0; padding-top: 16px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .blog-style-five .blog-content { padding-left: 16px; padding-top: 0; } } .blog-style-five .blog-content .blog-title a { font-size: 20px; font-weight: 600; line-height: 25px; color: #121212; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .blog-style-five .blog-content .blog-title a { font-size: 18px; } } .blog-style-five .blog-content .blog-title a:hover { color: #0067f4; } .blog-style-five .blog-content span { font-size: 14px; line-height: 20px; color: #6c6c6c; margin-top: 8px; margin-right: 10px; } .blog-style-five .blog-content .text { font-size: 14px; line-height: 20px; color: #121212; margin-top: 16px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .blog-style-five .blog-content .text { margin-top: 8px; } } .blog-style-five .blog-content .more { text-transform: uppercase; font-size: 16px; font-weight: 700; color: #0067f4; margin-top: 29px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .blog-style-five .blog-content .more { margin-top: 16px; } } /*===== BLOG STYLE SIX =====*/ .blog-style-six .blog-image { width: 240px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .blog-style-six .blog-image { width: 200px; } } @media (max-width: 767px) { .blog-style-six .blog-image { width: 100%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .blog-style-six .blog-image { width: 240px; } } .blog-style-six .blog-image img { width: 100%; border-radius: 8px; } .blog-style-six .blog-content { padding-left: 16px; } @media (max-width: 767px) { .blog-style-six .blog-content { padding-left: 0; padding-top: 16px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .blog-style-six .blog-content { padding-left: 16px; padding-top: 0; } } .blog-style-six .blog-content .blog-title a { font-size: 20px; font-weight: 600; line-height: 25px; color: #121212; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .blog-style-six .blog-content .blog-title a { font-size: 18px; } } .blog-style-six .blog-content .blog-title a:hover { color: #0067f4; } .blog-style-six .blog-content span { font-size: 14px; line-height: 20px; color: #6c6c6c; margin-top: 8px; margin-right: 10px; } .blog-style-six .blog-content .text { font-size: 14px; line-height: 20px; color: #121212; margin-top: 16px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .blog-style-six .blog-content .text { margin-top: 8px; } } .blog-style-six .blog-content .more { text-transform: uppercase; font-size: 16px; font-weight: 700; color: #0067f4; margin-top: 29px; padding: 0 39px; line-height: 48px; border-radius: 50px; border: 1px solid #0067f4; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .blog-style-six .blog-content .more { margin-top: 16px; } } .blog-style-six .blog-content .more:hover { background-color: #0067f4; color: #fff; } /*===== BLOG STYLE SAVEN =====*/ .blog-style-seven .blog-image img { width: 100%; border-top-left-radius: 8px; border-top-right-radius: 8px; } .blog-style-seven .blog-content { border: 1px solid #cbced1; border-top: 0; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; padding: 16px 16px 28px; } .blog-style-seven .blog-content .blog-title a { font-size: 24px; font-weight: 500; line-height: 30px; color: #121212; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .blog-style-seven .blog-content .blog-title a { font-size: 22px; } } @media (max-width: 767px) { .blog-style-seven .blog-content .blog-title a { font-size: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .blog-style-seven .blog-content .blog-title a { font-size: 22px; } } .blog-style-seven .blog-content .blog-title a:hover { color: #0067f4; } .blog-style-seven .blog-content .text { font-size: 14px; line-height: 20px; color: #121212; margin-top: 16px; } .blog-style-seven .blog-content span { font-size: 14px; line-height: 20px; color: #6c6c6c; margin-right: 10px; } .blog-style-seven .blog-content .more { text-transform: uppercase; font-size: 16px; font-weight: 700; color: #0067f4; padding: 0 39px; line-height: 48px; border-radius: 50px; border: 1px solid #0067f4; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .blog-style-seven .blog-content .more:hover { background-color: #0067f4; color: #fff; } /*===== BLOG STYLE EIGHT =====*/ .blog-style-eight .blog-image img { width: 100%; border-radius: 8px; } .blog-style-eight .blog-content { padding-top: 16px; } .blog-style-eight .blog-content .blog-title a { font-size: 36px; font-weight: 600; line-height: 45px; color: #121212; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .blog-style-eight .blog-content .blog-title a { font-size: 30px; line-height: 40px; } } @media (max-width: 767px) { .blog-style-eight .blog-content .blog-title a { font-size: 24px; line-height: 35px; } } .blog-style-eight .blog-content .blog-title a:hover { color: #0067f4; } .blog-style-eight .blog-content span { font-size: 14px; line-height: 20px; color: #6c6c6c; margin-top: 8px; margin-right: 10px; } .blog-style-eight .blog-content .text { font-size: 14px; line-height: 20px; color: #121212; margin-top: 16px; } .blog-style-eight .blog-content .more { text-transform: uppercase; font-size: 16px; font-weight: 700; color: #0067f4; margin-top: 29px; padding: 0 39px; line-height: 48px; border-radius: 50px; border: 1px solid #0067f4; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .blog-style-eight .blog-content .more:hover { background-color: #0067f4; color: #fff; } /*===== BLOG STYLE NINE =====*/ .blog-author-one .blog-image img { width: 100%; border-radius: 50%; } .blog-author-one .blog-content { padding-top: 20px; } .blog-author-one .blog-content .sub-title { font-size: 16px; font-weight: 700; line-height: 24px; text-transform: uppercase; } .blog-author-one .blog-content .blog-title a { font-size: 36px; font-weight: 300; line-height: 45px; color: #121212; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media (max-width: 767px) { .blog-author-one .blog-content .blog-title a { font-size: 24px; line-height: 35px; } } .blog-author-one .blog-content .blog-title a:hover { color: #0067f4; } .blog-author-one .blog-content .text { font-size: 14px; line-height: 20px; color: #121212; margin-top: 16px; } .blog-author-one .blog-content .more { text-transform: uppercase; font-size: 16px; font-weight: 700; color: #0067f4; margin-top: 29px; } /*===== BLOG STYLE TEN =====*/ .blog-author-two .blog-image img { width: 100%; border-radius: 8px; } .blog-author-two .blog-content { padding-top: 20px; } .blog-author-two .blog-content .sub-title { font-size: 16px; font-weight: 700; line-height: 24px; text-transform: uppercase; } .blog-author-two .blog-content .blog-title a { font-size: 36px; font-weight: 300; line-height: 45px; color: #121212; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media (max-width: 767px) { .blog-author-two .blog-content .blog-title a { font-size: 24px; line-height: 35px; } } .blog-author-two .blog-content .blog-title a:hover { color: #0067f4; } .blog-author-two .blog-content .text { font-size: 14px; line-height: 20px; color: #121212; margin-top: 16px; } .blog-author-two .blog-content .more { text-transform: uppercase; font-size: 16px; font-weight: 700; color: #0067f4; margin-top: 29px; } /*===== BLOG STYLE ELEVEN =====*/ .blog-style-nine .blog-image img { width: 100%; border-top-left-radius: 8px; border-top-right-radius: 8px; } .blog-style-nine .blog-content { border: 1px solid #cbced1; border-top: 0; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; padding: 16px 16px 28px; } .blog-style-nine .blog-content .blog-title a { font-size: 36px; font-weight: 600; line-height: 45px; color: #121212; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .blog-style-nine .blog-content .blog-title a { font-size: 30px; line-height: 40px; } } @media (max-width: 767px) { .blog-style-nine .blog-content .blog-title a { font-size: 24px; line-height: 35px; } } .blog-style-nine .blog-content .blog-title a:hover { color: #0067f4; } .blog-style-nine .blog-content .text { font-size: 14px; line-height: 20px; color: #121212; margin-top: 16px; } .blog-style-nine .blog-content span { font-size: 14px; line-height: 20px; color: #6c6c6c; margin-right: 10px; } .blog-style-nine .blog-content .more { text-transform: uppercase; font-size: 16px; font-weight: 700; color: #0067f4; padding: 0 39px; line-height: 48px; border-radius: 50px; border: 1px solid #0067f4; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .blog-style-nine .blog-content .more:hover { background-color: #0067f4; color: #fff; } /*===== BLOG MINI STYLE =====*/ .single-mini-blog .blog-image img { width: 80px; height: 80px; object-fit: cover; object-position: center; border-radius: 4px; } .single-mini-blog .blog-content { padding-left: 12px; } .single-mini-blog .blog-content .blog-tille a { font-size: 16px; font-weight: 700; line-height: 24px; color: #121212; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .single-mini-blog .blog-content .blog-tille a { font-size: 14px; line-height: 20px; } } @media (max-width: 767px) { .single-mini-blog .blog-content .blog-tille a { font-size: 14px; line-height: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .single-mini-blog .blog-content .blog-tille a { font-size: 16px; line-height: 24px; } } .single-mini-blog .blog-content .blog-tille a:hover { color: #0067f4; } .single-mini-blog .blog-content span { font-size: 13px; line-height: 18px; color: #6c6c6c; margin-top: 8px; margin-right: 8px; } .single-mini-blog.mini-style-two .blog-image img { border-radius: 50%; } /*=========================== 21.FOOTER css ===========================*/ /*===== FOOTER ONE =====*/ .footer-one { background-color: #f4f6f7; } .footer-one .footer-widget { padding-top: 90px; padding-bottom: 120px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .footer-one .footer-widget { padding-top: 70px; padding-bottom: 100px; } } @media (max-width: 767px) { .footer-one .footer-widget { padding-top: 50px; padding-bottom: 80px; } } .footer-one .footer-widget .footer-title { font-size: 14px; font-weight: 700; line-height: 18px; color: #6c6c6c; } .footer-one .footer-widget .footer-support { padding-top: 21px; } .footer-one .footer-widget .footer-support span { font-size: 16px; line-height: 24px; color: #121212; font-weight: 600; margin-top: 9px; display: block; } @media (max-width: 767px) { .footer-one .footer-widget .footer-support span { display: block; } } .footer-one .footer-widget .footer-app-store { padding-top: 27px; } .footer-one .footer-widget .footer-app-store ul li { display: inline-block; margin-right: 8px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .footer-one .footer-widget .footer-app-store ul li { margin-right: 6px; } } .footer-one .footer-widget .footer-app-store ul li:last-child { margin-right: 0; } @media (max-width: 767px) { .footer-one .footer-widget .footer-app-store ul li { width: 120px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .footer-one .footer-widget .footer-app-store ul li { width: auto; } } .footer-one .footer-widget .footer-link { margin-top: 32px; } .footer-one .footer-widget .footer-link ul { margin-top: 8px; } .footer-one .footer-widget .footer-link ul li a { font-size: 16px; line-height: 24px; color: #121212; margin-top: 16px; font-weight: 500; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .footer-one .footer-widget .footer-link ul li a:hover { color: #0067f4; } .footer-one .footer-copyright .copyright { padding-bottom: 23px; padding-top: 13px; } .footer-one .footer-copyright .copyright .text { color: #6c6c6c; margin-top: 10px; } .footer-one .footer-copyright .copyright .social { margin-top: 10px; } .footer-one .footer-copyright .copyright .social li { display: inline-block; margin-right: 10px; } .footer-one .footer-copyright .copyright .social li:last-child { margin-right: 0; } .footer-one .footer-copyright .copyright .social li a { font-size: 24px; color: #6c6c6c; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .footer-one .footer-copyright .copyright .social li a:hover { color: #0067f4; } .footer-one.footer-dark-one { background-color: #121212; } .footer-one.footer-dark-one .footer-widget .footer-title { color: #fff; } .footer-one.footer-dark-one .footer-widget .footer-support span { color: #fff; } .footer-one.footer-dark-one .footer-widget .footer-app-store ul li { color: #fff; } .footer-one.footer-dark-one .footer-widget .footer-link ul li a { color: #fff; } .footer-one.footer-dark-one .footer-copyright .copyright .text { color: #fff; } .footer-one.footer-dark-one .footer-copyright .copyright .social li a { color: #fff; } /*===== FOOTER TWO =====*/ .footer-two { background-color: #f4f6f7; } .footer-two .footer-widget { padding-top: 90px; padding-bottom: 120px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .footer-two .footer-widget { padding-top: 70px; padding-bottom: 100px; } } @media (max-width: 767px) { .footer-two .footer-widget { padding-top: 50px; padding-bottom: 80px; } } .footer-two .footer-widget .footer-title { font-size: 14px; font-weight: 700; line-height: 18px; color: #6c6c6c; } .footer-two .footer-widget .footer-support { padding-top: 21px; } .footer-two .footer-widget .footer-support span { font-size: 16px; line-height: 24px; color: #121212; font-weight: 600; margin-top: 9px; display: block; } @media (max-width: 767px) { .footer-two .footer-widget .footer-support span { display: block; } } .footer-two .footer-widget .social { padding-top: 27px; } .footer-two .footer-widget .social li { display: inline-block; margin-right: 10px; } .footer-two .footer-widget .social li:last-child { margin-right: 0; } .footer-two .footer-widget .social li a { font-size: 24px; color: #6c6c6c; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .footer-two .footer-widget .social li a:hover { color: #0067f4; } .footer-two .footer-widget .footer-link { margin-top: 32px; } .footer-two .footer-widget .footer-link ul { margin-top: 8px; } .footer-two .footer-widget .footer-link ul li a { font-size: 16px; line-height: 24px; color: #121212; margin-top: 16px; font-weight: 500; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .footer-two .footer-widget .footer-link ul li a:hover { color: #0067f4; } .footer-two .footer-copyright .copyright { padding-bottom: 23px; padding-top: 13px; } .footer-two .footer-copyright .copyright .text { color: #6c6c6c; margin-top: 10px; } .footer-two.footer-dark-two { background-color: #121212; } .footer-two.footer-dark-two .footer-widget .footer-title { color: #fff; } .footer-two.footer-dark-two .footer-widget .footer-support span { color: #fff; } .footer-two.footer-dark-two .footer-widget .social li a { color: #fff; } .footer-two.footer-dark-two .footer-widget .footer-link ul li a { color: #fff; } .footer-two.footer-dark-two .footer-copyright .copyright .text { color: #fff; } /*===== FOOTER THREE =====*/ .footer-three { background-color: #f4f6f7; } .footer-three .footer-widget { padding-top: 90px; padding-bottom: 120px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .footer-three .footer-widget { padding-top: 70px; padding-bottom: 100px; } } @media (max-width: 767px) { .footer-three .footer-widget { padding-top: 50px; padding-bottom: 80px; } } .footer-three .footer-widget .footer-logo-support .footer-logo .social { margin-left: 35px; } .footer-three .footer-widget .footer-logo-support .footer-logo .social li { display: inline-block; margin-right: 10px; } .footer-three .footer-widget .footer-logo-support .footer-logo .social li a { font-size: 24px; color: #6c6c6c; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .footer-three .footer-widget .footer-logo-support .footer-logo .social li a:hover { color: #0067f4; } .footer-three .footer-widget .footer-logo-support .footer-support span { font-size: 20px; line-height: 25px; color: #6c6c6c; font-weight: 600; } @media (max-width: 767px) { .footer-three .footer-widget .footer-logo-support .footer-support span { display: block; } } .footer-three .footer-widget .footer-logo-support .footer-support span.mail { margin-left: 32px; } @media (max-width: 767px) { .footer-three .footer-widget .footer-logo-support .footer-support span.mail { margin-left: 0; } } .footer-three .footer-widget .footer-title { font-size: 14px; font-weight: 700; line-height: 18px; color: #6c6c6c; } .footer-three .footer-widget .footer-link { margin-top: 32px; } .footer-three .footer-widget .footer-link ul { margin-top: 8px; } .footer-three .footer-widget .footer-link ul li a { font-size: 16px; line-height: 24px; color: #121212; margin-top: 16px; font-weight: 500; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .footer-three .footer-widget .footer-link ul li a:hover { color: #0067f4; } .footer-three .footer-widget .footer-newsletter { margin-top: 32px; } .footer-three .footer-widget .footer-newsletter .newsletter { margin-top: 24px; position: relative; } .footer-three .footer-widget .footer-newsletter .newsletter input { width: 100%; height: 44px; border-radius: 50px; padding: 0 24px; border: 0; background-color: rgba(33, 33, 33, 0.12); font-weight: 500; } .footer-three .footer-widget .footer-newsletter .newsletter input::placeholder { opacity: 1; color: #6c6c6c; } .footer-three .footer-widget .footer-newsletter .newsletter input::-moz-placeholder { opacity: 1; color: #6c6c6c; } .footer-three .footer-widget .footer-newsletter .newsletter input::-moz-placeholder { opacity: 1; color: #6c6c6c; } .footer-three .footer-widget .footer-newsletter .newsletter input::-webkit-input-placeholder { opacity: 1; color: #6c6c6c; } .footer-three .footer-widget .footer-newsletter .newsletter button { position: absolute; top: 0; right: 0; height: 44px; width: 44px; border-top-right-radius: 50px; border-bottom-right-radius: 50px; border: 0; font-size: 20px; color: #121212; cursor: pointer; background: none; } .footer-three .footer-widget .footer-newsletter .text { margin-top: 16px; } .footer-three .footer-copyright .copyright { padding: 23px 0; } .footer-three .footer-copyright .copyright .text { color: #121212; } .footer-three.footer-bark-three { background-color: #121212; } .footer-three.footer-bark-three .footer-widget .footer-logo-support .footer-logo .social li a { color: #fff; } .footer-three.footer-bark-three .footer-widget .footer-logo-support .footer-support span.number { color: #fff; } .footer-three.footer-bark-three .footer-widget .footer-logo-support .footer-support span.mail { color: #fff; } .footer-three.footer-bark-three .footer-widget .footer-title { color: #fff; } .footer-three.footer-bark-three .footer-widget .footer-link ul li a { color: #fff; } .footer-three.footer-bark-three .footer-widget .footer-newsletter .newsletter input { color: #fff; background-color: rgba(233, 236, 239, 0.12); } .footer-three.footer-bark-three .footer-widget .footer-newsletter .newsletter input::placeholder { opacity: 1; color: #fff; } .footer-three.footer-bark-three .footer-widget .footer-newsletter .newsletter input::-moz-placeholder { opacity: 1; color: #fff; } .footer-three.footer-bark-three .footer-widget .footer-newsletter .newsletter input::-moz-placeholder { opacity: 1; color: #fff; } .footer-three.footer-bark-three .footer-widget .footer-newsletter .newsletter input::-webkit-input-placeholder { opacity: 1; color: #fff; } .footer-three.footer-bark-three .footer-widget .footer-newsletter .newsletter button { color: #fff; } .footer-three.footer-bark-three .footer-widget .footer-newsletter .text { color: #fff; } .footer-three.footer-bark-three .footer-copyright .copyright { padding: 23px 0; } .footer-three.footer-bark-three .footer-copyright .copyright .text { color: #fff; } /*===== FOOTER FOUR =====*/ .footer-four { background-color: #f4f6f7; } .footer-four .footer-widget { padding-top: 90px; padding-bottom: 120px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .footer-four .footer-widget { padding-top: 70px; padding-bottom: 100px; } } @media (max-width: 767px) { .footer-four .footer-widget { padding-top: 50px; padding-bottom: 80px; } } .footer-four .footer-widget .footer-title { font-size: 14px; font-weight: 700; line-height: 18px; color: #6c6c6c; } .footer-four .footer-widget .footer-link { margin-top: 32px; } .footer-four .footer-widget .footer-link ul { margin-top: 8px; } .footer-four .footer-widget .footer-link ul li a { font-size: 16px; line-height: 24px; color: #121212; margin-top: 16px; font-weight: 500; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .footer-four .footer-widget .footer-link ul li a:hover { color: #0067f4; } .footer-four .footer-copyright { padding-top: 13px; padding-bottom: 23px; } .footer-four .footer-copyright .copyright .text { color: #121212; } .footer-four .footer-copyright .social li { display: inline-block; margin-right: 10px; } .footer-four .footer-copyright .social li:last-child { margin-right: 0; } .footer-four .footer-copyright .social li a { font-size: 24px; color: #6c6c6c; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .footer-four .footer-copyright .social li a:hover { color: #0067f4; } .footer-four.footer-bark-four { background-color: #121212; } .footer-four.footer-bark-four .footer-widget .footer-title { color: #fff; } .footer-four.footer-bark-four .footer-widget .footer-link ul li a { color: #fff; } .footer-four.footer-bark-four .footer-copyright .copyright .text { color: #fff; } .footer-four.footer-bark-four .footer-copyright .social li a { color: #fff; } /*===== FOOTER FIVE =====*/ .footer-five { background-color: #f4f6f7; padding-top: 90px; padding-bottom: 120px; } .footer-five .social li { display: inline-block; margin: 0 5px; } .footer-five .social li a { font-size: 24px; color: #6c6c6c; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .footer-five .social li a:hover { color: #0067f4; } .footer-five .footer-support { padding-top: 21px; } .footer-five .footer-support span { font-size: 16px; line-height: 24px; color: #121212; font-weight: 600; margin-top: 9px; display: block; } @media (max-width: 767px) { .footer-five .footer-support span { display: block; } } .footer-five .footer-app-store { padding-top: 27px; } .footer-five .footer-app-store ul li { display: inline-block; margin-right: 8px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .footer-five .footer-app-store ul li { margin-right: 6px; } } .footer-five .footer-app-store ul li:last-child { margin-right: 0; } @media (max-width: 767px) { .footer-five .footer-app-store ul li { width: 120px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .footer-five .footer-app-store ul li { width: auto; } } .footer-five .copyright .text { color: #121212; } .footer-five.footer-bark-five { background-color: #121212; } .footer-five.footer-bark-five .social li a { color: #fff; } .footer-five.footer-bark-five .footer-support { padding-top: 21px; } .footer-five.footer-bark-five .footer-support span { color: #fff; } .footer-five.footer-bark-five .footer-app-store { padding-top: 27px; } .footer-five.footer-bark-five .footer-app-store ul li { color: #fff; } .footer-five.footer-bark-five .copyright .text { color: #fff; } /*=========================== 22.HEADER css ===========================*/ /*===== HEADER ONE =====*/ .header-one { position: relative; } .header-one .navbar-transparent { background: transparent; position: absolute; top: 0; left: 0; width: 100%; z-index: 9; } .header-one .navbar-area .navbar .navbar-nav .nav-item .sub-menu { background-color: #fff; } .header-one .navbar-area .navbar .navbar-nav .nav-item .sub-menu li a { color: #0067f4; } .header-one .navbar-area .navbar .navbar-nav .nav-item .sub-menu li:hover > a { color: #fff; } .header-one .header-content-area { background-color: #005ad5; position: relative; height: 650px; } @media only screen and (min-width: 1400px) { .header-one .header-content-area { height: 900px; } } @media (max-width: 767px) { .header-one .header-content-area { height: 550px; } } .header-one .header-content-area .header-wrapper { position: relative; } .header-one .header-content-area .header-wrapper .header-content { padding-top: 95px; max-width: 540px; position: relative; z-index: 5; } .header-one .header-content-area .header-wrapper .header-content .header-title { font-size: 44px; line-height: 55px; font-weight: 600; color: #fff; } @media (max-width: 767px) { .header-one .header-content-area .header-wrapper .header-content .header-title { font-size: 30px; line-height: 35px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .header-one .header-content-area .header-wrapper .header-content .header-title { font-size: 36px; line-height: 45px; } } .header-one .header-content-area .header-wrapper .header-content .text { font-size: 20px; line-height: 32px; color: #fff; font-weight: 300; margin-top: 16px; } @media (max-width: 767px) { .header-one .header-content-area .header-wrapper .header-content .text { font-size: 16px; line-height: 24px; } } .header-one .header-content-area .header-wrapper .header-content .header-btn { margin-top: 40px; } .header-one .header-content-area .header-wrapper .header-content .header-btn .main-btn { background-color: #fff; color: #0067f4; border-color: #fff; } .header-one .header-content-area .header-wrapper .header-content .header-btn .main-btn:hover { background-color: transparent; color: #fff; } .header-one .header-content-area .header-wrapper .header-image { position: absolute; right: 0; top: 50px; z-index: 9; } .header-one .header-content-area .header-wrapper .header-image .image { max-width: 730px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .header-one .header-content-area .header-wrapper .header-image .image { max-width: 600px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .header-one .header-content-area .header-wrapper .header-image .image { max-width: 550px; } } .header-one .header-content-area .header-wrapper .header-image .image img { width: 100%; } .header-one .header-content-area .header-shape { position: absolute; bottom: -1px; left: 0; right: 0; width: 100%; } .header-one .header-content-area .header-shape img { width: 100%; } /*===== HEADER TWO =====*/ .header-two { position: relative; } .header-two .navbar-area { padding: 10px 0; position: absolute; top: 0; left: 0; width: 100%; z-index: 9; background-color: transparent; } @media only screen and (min-width: 768px) and (max-width: 991px) { .header-two .navbar-area { padding: 10px 0; } } @media (max-width: 767px) { .header-two .navbar-area { padding: 10px 0; } } .header-two .navbar-area .navbar { position: relative; padding: 0; } .header-two .navbar-area .navbar .navbar-toggler .toggler-icon { width: 30px; height: 2px; background-color: #121212; margin: 5px 0; display: block; position: relative; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .header-two .navbar-area .navbar .navbar-toggler.active .toggler-icon:nth-of-type(1) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); top: 7px; } .header-two .navbar-area .navbar .navbar-toggler.active .toggler-icon:nth-of-type(2) { opacity: 0; } .header-two .navbar-area .navbar .navbar-toggler.active .toggler-icon:nth-of-type(3) { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); top: -7px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .header-two .navbar-area .navbar .navbar-collapse { position: absolute; top: 116%; left: 0; width: 100%; background-color: #fff; z-index: 8; padding: 10px 16px; -webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.16); } } @media (max-width: 767px) { .header-two .navbar-area .navbar .navbar-collapse { position: absolute; top: 116%; left: 0; width: 100%; background-color: #fff; z-index: 8; padding: 10px 16px; -webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.16); } } .header-two .navbar-area .navbar .navbar-nav { margin-right: 24px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .header-two .navbar-area .navbar .navbar-nav { margin-right: 0; } } @media (max-width: 767px) { .header-two .navbar-area .navbar .navbar-nav { margin-right: 0; } } .header-two .navbar-area .navbar .navbar-nav .nav-item { position: relative; } .header-two .navbar-area .navbar .navbar-nav .nav-item a { font-size: 16px; line-height: 24px; font-weight: 700; padding: 11px 16px; color: #121212; text-transform: uppercase; position: relative; border-radius: 5px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; margin: 14px 0; opacity: 0.7; } .header-two .navbar-area .navbar .navbar-nav .nav-item a::before { position: absolute; content: ''; width: 32px; height: 4px; background: #0067f4; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%); left: 50%; margin: 0 2px; bottom: 0; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; -webkit-transform: translateX(-50%) scaleX(0); -moz-transform: translateX(-50%) scaleX(0); -ms-transform: translateX(-50%) scaleX(0); -o-transform: translateX(-50%) scaleX(0); transform: translateX(-50%) scaleX(0); } @media only screen and (min-width: 768px) and (max-width: 991px) { .header-two .navbar-area .navbar .navbar-nav .nav-item a::before { display: none; } } @media (max-width: 767px) { .header-two .navbar-area .navbar .navbar-nav .nav-item a::before { display: none; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .header-two .navbar-area .navbar .navbar-nav .nav-item a { padding: 10px 0; display: block; border: 0; margin: 0; } } @media (max-width: 767px) { .header-two .navbar-area .navbar .navbar-nav .nav-item a { padding: 10px 0; display: block; border: 0; margin: 0; } } .header-two .navbar-area .navbar .navbar-nav .nav-item a.active { opacity: 1; } .header-two .navbar-area .navbar .navbar-nav .nav-item a.active::before { -webkit-transform: translateX(-50%) scaleX(1); -moz-transform: translateX(-50%) scaleX(1); -ms-transform: translateX(-50%) scaleX(1); -o-transform: translateX(-50%) scaleX(1); transform: translateX(-50%) scaleX(1); } .header-two .navbar-area .navbar .navbar-nav .nav-item:hover > a { opacity: 1; } .header-two .navbar-area .navbar .navbar-nav .nav-item:hover > a::before { -webkit-transform: translateX(-50%) scaleX(1); -moz-transform: translateX(-50%) scaleX(1); -ms-transform: translateX(-50%) scaleX(1); -o-transform: translateX(-50%) scaleX(1); transform: translateX(-50%) scaleX(1); } .header-two .navbar-area .navbar .navbar-nav .nav-item .sub-menu { position: absolute; left: 0; top: 100%; width: 260px; background-color: #fff; border-radius: 5px; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; z-index: 99; -webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.16); } @media only screen and (min-width: 768px) and (max-width: 991px) { .header-two .navbar-area .navbar .navbar-nav .nav-item .sub-menu { position: relative !important; width: 100% !important; left: 0 !important; top: auto !important; opacity: 1 !important; visibility: visible !important; display: none; right: auto; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); -webkit-transition: all none ease-out 0s; -moz-transition: all none ease-out 0s; -ms-transition: all none ease-out 0s; -o-transition: all none ease-out 0s; transition: all none ease-out 0s; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; text-align: left; border-top: 0; } } @media (max-width: 767px) { .header-two .navbar-area .navbar .navbar-nav .nav-item .sub-menu { position: relative !important; width: 100% !important; left: 0 !important; top: auto !important; opacity: 1 !important; visibility: visible !important; display: none; right: auto; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); -webkit-transition: all none ease-out 0s; -moz-transition: all none ease-out 0s; -ms-transition: all none ease-out 0s; -o-transition: all none ease-out 0s; transition: all none ease-out 0s; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; text-align: left; border-top: 0; } } .header-two .navbar-area .navbar .navbar-nav .nav-item .sub-menu li { position: relative; } .header-two .navbar-area .navbar .navbar-nav .nav-item .sub-menu li .sub-nav-toggler { color: #121212; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .header-two .navbar-area .navbar .navbar-nav .nav-item .sub-menu li a { display: block; padding: 8px 24px; position: relative; color: #121212; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; border-radius: 0; margin: 0 0; border: 0; z-index: 5; } .header-two .navbar-area .navbar .navbar-nav .nav-item .sub-menu li a i { float: right; font-size: 14px; margin-top: 5px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .header-two .navbar-area .navbar .navbar-nav .nav-item .sub-menu li a i { display: none; } } @media (max-width: 767px) { .header-two .navbar-area .navbar .navbar-nav .nav-item .sub-menu li a i { display: none; } } .header-two .navbar-area .navbar .navbar-nav .nav-item .sub-menu li a .sub-nav-toggler i { display: inline-block; } .header-two .navbar-area .navbar .navbar-nav .nav-item .sub-menu li a::after { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; border-radius: 5px; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%); opacity: 0; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; z-index: -1; } .header-two .navbar-area .navbar .navbar-nav .nav-item .sub-menu li a::before { display: none; } .header-two .navbar-area .navbar .navbar-nav .nav-item .sub-menu li .sub-menu { right: auto; left: 100%; top: 0; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media only screen and (min-width: 768px) and (max-width: 991px) { .header-two .navbar-area .navbar .navbar-nav .nav-item .sub-menu li .sub-menu { padding-left: 30px; } } @media (max-width: 767px) { .header-two .navbar-area .navbar .navbar-nav .nav-item .sub-menu li .sub-menu { padding-left: 30px; } } .header-two .navbar-area .navbar .navbar-nav .nav-item .sub-menu li:hover .sub-menu { opacity: 1; visibility: visible; } .header-two .navbar-area .navbar .navbar-nav .nav-item .sub-menu li:hover .sub-nav-toggler { color: #fff; } .header-two .navbar-area .navbar .navbar-nav .nav-item .sub-menu li:hover > a { color: #fff; } .header-two .navbar-area .navbar .navbar-nav .nav-item .sub-menu li:hover > a::after { opacity: 1; } .header-two .navbar-area .navbar .navbar-nav .nav-item .sub-menu li:hover > a::before { opacity: 1; } .header-two .navbar-area .navbar .navbar-nav .nav-item:hover .sub-menu { opacity: 1; visibility: visible; } .header-two .navbar-area .navbar .navbar-nav .nav-item .sub-nav-toggler { display: none; } @media only screen and (min-width: 768px) and (max-width: 991px) { .header-two .navbar-area .navbar .navbar-nav .nav-item .sub-nav-toggler { display: inline-block; position: absolute; top: 0; right: 0; padding: 10px 14px; font-size: 16px; background: none; border: 0; color: #121212; } } @media (max-width: 767px) { .header-two .navbar-area .navbar .navbar-nav .nav-item .sub-nav-toggler { display: inline-block; position: absolute; top: 0; right: 0; padding: 10px 14px; font-size: 16px; background: none; border: 0; color: #121212; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .header-two .navbar-area .navbar .navbar-social { position: absolute; right: 70px; top: 7px; } } @media (max-width: 767px) { .header-two .navbar-area .navbar .navbar-social { position: absolute; right: 60px; top: 7px; } } .header-two .navbar-area .navbar .navbar-social span { font-size: 16px; line-height: 24px; color: #6c6c6c; text-transform: uppercase; font-weight: 700; margin-right: 14px; } .header-two .navbar-area .navbar .navbar-social ul li { display: inline-block; margin-right: 5px; } .header-two .navbar-area .navbar .navbar-social ul li a { font-size: 32px; color: #0067f4; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .header-two .header-content-area { height: 700px; background: -webkit-linear-gradient(#0067f4 0%, #2bdbdc 100%); background: -o-linear-gradient(#0067f4 0%, #2bdbdc 100%); background: linear-gradient(#0067f4 0%, #2bdbdc 100%); position: relative; } @media only screen and (min-width: 1400px) { .header-two .header-content-area { height: 900px; } } @media (max-width: 767px) { .header-two .header-content-area { height: 550px; } } .header-two .header-content-area::before { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 80%; background-color: #fff; border-bottom-left-radius: 25px; border-bottom-right-radius: 300px; -webkit-box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.16); } @media only screen and (min-width: 768px) and (max-width: 991px) { .header-two .header-content-area::before { height: 90%; } } @media (max-width: 767px) { .header-two .header-content-area::before { height: 90%; border-bottom-right-radius: 150px; } } .header-two .header-content-area .header-content { padding-top: 95px; } .header-two .header-content-area .header-content .header-title { font-size: 44px; line-height: 55px; color: #121212; } @media (max-width: 767px) { .header-two .header-content-area .header-content .header-title { font-size: 30px; line-height: 35px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .header-two .header-content-area .header-content .header-title { font-size: 36px; line-height: 45px; } } .header-two .header-content-area .header-content .text { font-size: 20px; line-height: 25px; color: #6c6c6c; font-weight: 300; margin-top: 16px; } @media (max-width: 767px) { .header-two .header-content-area .header-content .text { font-size: 16px; } } .header-two .header-content-area .header-content .header-btn { margin-top: 40px; } .header-two .header-content-area .header-image { position: absolute; top: 0; left: 0; width: 50%; height: 100%; } .header-two .header-content-area .header-image .image { max-width: 760px; margin-left: auto; padding-top: 130px; } .header-two .header-content-area .header-image .image img { width: 100%; } /*===== HEADER THREE =====*/ .header-three { position: relative; } .header-three .navbar-transparent { background: transparent; position: absolute; top: 0; left: 0; width: 100%; z-index: 9; } .header-three .header-content-area { background: -webkit-linear-gradient(#495aff 0%, #0acffe 100%); background: -o-linear-gradient(#495aff 0%, #0acffe 100%); background: linear-gradient(#495aff 0%, #0acffe 100%); } .header-three .header-content-area .header-content { padding-top: 220px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .header-three .header-content-area .header-content { padding-top: 150px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .header-three .header-content-area .header-content { padding-top: 150px; } } @media (max-width: 767px) { .header-three .header-content-area .header-content { padding-top: 120px; } } .header-three .header-content-area .header-content .header-title { font-size: 44px; line-height: 55px; color: #fff; font-weight: 600; } @media (max-width: 767px) { .header-three .header-content-area .header-content .header-title { font-size: 30px; line-height: 35px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .header-three .header-content-area .header-content .header-title { font-size: 36px; line-height: 45px; } } .header-three .header-content-area .header-content .text { font-size: 16px; line-height: 24px; color: #fff; margin-top: 8px; } .header-three .header-content-area .header-content .header-btn { margin-top: 40px; } .header-three .header-content-area .header-image { padding-top: 80px; } @media (max-width: 767px) { .header-three .header-content-area .header-image { padding-top: 30px; } } .header-three .header-content-area .header-image img { width: 100%; } @media (max-width: 767px) { .header-three .header-content-area .header-image img { height: 160px; object-fit: cover; object-position: center; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .header-three .header-content-area .header-image img { height: 200px; } } /*===== HEADER FOUR =====*/ .header-four { position: relative; } .header-four .navbar-transparent { background: transparent; position: absolute; top: 0; left: 0; width: 100%; z-index: 9; } .header-four .header-content-area { background: -webkit-linear-gradient(#deebfd 0%, rgba(255, 255, 255, 0) 100%); background: -o-linear-gradient(#deebfd 0%, rgba(255, 255, 255, 0) 100%); background: linear-gradient(#deebfd 0%, rgba(255, 255, 255, 0) 100%); } .header-four .header-content-area .header-content { padding-top: 220px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .header-four .header-content-area .header-content { padding-top: 150px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .header-four .header-content-area .header-content { padding-top: 150px; } } @media (max-width: 767px) { .header-four .header-content-area .header-content { padding-top: 120px; } } .header-four .header-content-area .header-content .header-title { font-size: 44px; line-height: 55px; color: #121212; font-weight: 600; } @media (max-width: 767px) { .header-four .header-content-area .header-content .header-title { font-size: 30px; line-height: 35px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .header-four .header-content-area .header-content .header-title { font-size: 36px; line-height: 45px; } } .header-four .header-content-area .header-content .text { font-size: 16px; line-height: 24px; color: #6c6c6c; margin-top: 8px; } .header-four .header-content-area .header-content .header-newslatter { max-width: 410px; position: relative; margin: 0 auto; margin-top: 40px; } .header-four .header-content-area .header-content .header-newslatter i { position: absolute; top: 12px; left: 20px; font-size: 24px; color: #0067f4; } .header-four .header-content-area .header-content .header-newslatter input { width: 100%; height: 48px; padding-left: 60px; padding-right: 30px; border-radius: 50px; border: 2px solid #cbced1; font-size: 16px; font-weight: 600; color: #6c6c6c; } .header-four .header-content-area .header-content .header-newslatter input:focus { border-color: #0067f4; } .header-four .header-content-area .header-content .header-newslatter .header-btn { position: absolute; top: 0; right: 0; } .header-four .header-content-area .header-content .header-newslatter .header-btn .main-btn { border: 0; line-height: 48px; border-radius: 50px; } @media (max-width: 767px) { .header-four .header-content-area .header-image { padding-top: 30px; } } .header-four .header-content-area .header-image img { width: 100%; } @media (max-width: 767px) { .header-four .header-content-area .header-image img { height: 160px; object-fit: cover; object-position: center; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .header-four .header-content-area .header-image img { height: 200px; } } /*===== HEADER FIVE =====*/ .header-five { position: relative; } .header-five .navgition { padding: 10px 0; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .header-five .navgition.navgition-transparent { background-color: transparent; position: absolute; top: 0; left: 0; width: 100%; z-index: 99; } .header-five .navgition .navbar { position: relative; padding: 0; } .header-five .navgition .navbar .navbar-toggler .toggler-icon { width: 30px; height: 2px; background-color: #121212; margin: 5px 0; display: block; position: relative; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .header-five .navgition .navbar .navbar-toggler.active .toggler-icon:nth-of-type(1) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); top: 7px; } .header-five .navgition .navbar .navbar-toggler.active .toggler-icon:nth-of-type(2) { opacity: 0; } .header-five .navgition .navbar .navbar-toggler.active .toggler-icon:nth-of-type(3) { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); top: -7px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .header-five .navgition .navbar .navbar-collapse { position: absolute; top: 116%; left: 0; width: 100%; background-color: #fff; z-index: 8; padding: 10px 0; -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16); } } @media (max-width: 767px) { .header-five .navgition .navbar .navbar-collapse { position: absolute; top: 116%; left: 0; width: 100%; background-color: #fff; z-index: 8; padding: 10px 0; -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16); } } .header-five .navgition .navbar .navbar-nav .nav-item { margin: 0 16px; position: relative; } .header-five .navgition .navbar .navbar-nav .nav-item a { font-size: 16px; line-height: 24px; font-weight: 700; padding: 26px 0; color: #121212; text-transform: uppercase; position: relative; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media only screen and (min-width: 768px) and (max-width: 991px) { .header-five .navgition .navbar .navbar-nav .nav-item a { padding: 10px 0; display: block; } } @media (max-width: 767px) { .header-five .navgition .navbar .navbar-nav .nav-item a { padding: 10px 0; display: block; } } .header-five .navgition .navbar .navbar-nav .nav-item a::before, .header-five .navgition .navbar .navbar-nav .nav-item a::after { position: absolute; content: ''; width: 8px; height: 4px; background-color: #0067f4; left: 50%; margin: 0 2px; bottom: 14px; opacity: 0; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media only screen and (min-width: 768px) and (max-width: 991px) { .header-five .navgition .navbar .navbar-nav .nav-item a::before, .header-five .navgition .navbar .navbar-nav .nav-item a::after { display: none; } } @media (max-width: 767px) { .header-five .navgition .navbar .navbar-nav .nav-item a::before, .header-five .navgition .navbar .navbar-nav .nav-item a::after { display: none; } } .header-five .navgition .navbar .navbar-nav .nav-item a::after { left: auto; right: 50%; } .header-five .navgition .navbar .navbar-nav .nav-item.active > a, .header-five .navgition .navbar .navbar-nav .nav-item:hover > a { color: #0067f4; } .header-five .navgition .navbar .navbar-nav .nav-item.active > a::before, .header-five .navgition .navbar .navbar-nav .nav-item.active > a::after, .header-five .navgition .navbar .navbar-nav .nav-item:hover > a::before, .header-five .navgition .navbar .navbar-nav .nav-item:hover > a::after { opacity: 1; } @media only screen and (min-width: 768px) and (max-width: 991px) { .header-five .navgition .navbar .navbar-social { position: absolute; right: 70px; top: 7px; } } @media (max-width: 767px) { .header-five .navgition .navbar .navbar-social { position: absolute; right: 60px; top: 7px; } } .header-five .navgition .navbar .navbar-social span { font-size: 16px; font-weight: 700; color: #6c6c6c; line-height: 24px; margin-right: 14px; } .header-five .navgition .navbar .navbar-social ul li { display: inline-block; margin-right: 5px; } .header-five .navgition .navbar .navbar-social ul li a { font-size: 32px; text-transform: uppercase; font-weight: 700; color: #0067f4; border-radius: 4px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .header-five .header-hero { height: 850px; position: relative; } @media only screen and (min-width: 768px) and (max-width: 991px) { .header-five .header-hero { height: 700px; } } @media (max-width: 767px) { .header-five .header-hero { height: 650px; } } .header-five .header-hero::before { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background: -webkit-linear-gradient(rgba(232, 237, 255, 0.9), rgba(239, 254, 255, 0.9) 50%, rgba(254, 255, 244, 0.3) 68%, rgba(255, 255, 255, 0.12)); background: -o-linear-gradient(rgba(232, 237, 255, 0.9), rgba(239, 254, 255, 0.9) 50%, rgba(254, 255, 244, 0.3) 68%, rgba(255, 255, 255, 0.12)); background: linear-gradient(rgba(232, 237, 255, 0.9), rgba(239, 254, 255, 0.9) 50%, rgba(254, 255, 244, 0.3) 68%, rgba(255, 255, 255, 0.12)); } .header-five .header-hero .header-content { padding-top: 195px; position: relative; z-index: 9; } @media only screen and (min-width: 768px) and (max-width: 991px) { .header-five .header-hero .header-content { padding-top: 130px; } } @media (max-width: 767px) { .header-five .header-hero .header-content { padding-top: 120px; } } .header-five .header-hero .header-content .header-title { font-size: 44px; line-height: 55px; color: #121212; font-weight: 600; } @media (max-width: 767px) { .header-five .header-hero .header-content .header-title { font-size: 30px; line-height: 40px; } } .header-five .header-hero .header-content .text { font-size: 20px; line-height: 32px; color: #6c6c6c; margin-top: 16px; } @media (max-width: 767px) { .header-five .header-hero .header-content .text { font-size: 16px; line-height: 24px; } } .header-five .header-hero .header-content .header-btn { margin-top: 22px; } .header-five .header-hero .header-content .header-btn li { display: inline-block; margin: 10px 10px 0; } .header-five .header-hero .header-content .header-btn li a.main-btn { border-radius: 50px; overflow: hidden; background-color: #fff; -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); border: 0; line-height: 50px; } .header-five .header-hero .header-content .header-btn li a.main-btn i { margin-left: 18px; } .header-five .header-hero .header-content .header-btn li a.main-btn.btn-two:hover { -webkit-box-shadow: 0 3px 25px 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 3px 25px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 3px 25px 0 rgba(0, 0, 0, 0.16); } .header-five .header-hero .header-shape { position: absolute; bottom: 0; left: 0; width: 100%; } .header-five .header-hero .header-shape img { width: 100%; } /*===== HEADER SIX =====*/ .header-six .header-content-area .header-image img { width: 100%; } .header-six .header-content-area .header-content { position: relative; z-index: 9; margin-top: -50px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .header-six .header-content-area .header-content { margin-top: 0; } } @media (max-width: 767px) { .header-six .header-content-area .header-content { margin-top: 0; } } .header-six .header-content-area .header-content .header-title { font-size: 64px; line-height: 80px; color: #121212; font-weight: 700; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .header-six .header-content-area .header-content .header-title { font-size: 52px; line-height: 70px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .header-six .header-content-area .header-content .header-title { font-size: 52px; line-height: 70px; } } @media (max-width: 767px) { .header-six .header-content-area .header-content .header-title { font-size: 30px; line-height: 40px; } } .header-six .header-content-area .header-content .header-btn { margin-top: 22px; } .header-six .header-content-area .header-content .header-btn li { display: inline-block; margin-top: 10px; margin-right: 10px; } .header-six .header-content-area .header-content .header-btn li:last-child { margin-right: 0; } .header-six .header-content-area .header-content .header-btn li a.main-btn { border-radius: 50px; overflow: hidden; background-color: #fff; -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); border: 0; line-height: 50px; } .header-six .header-content-area .header-content .header-btn li a.main-btn i { margin-left: 18px; } .header-six .header-content-area .header-content .header-btn li a.main-btn.btn-two:hover { -webkit-box-shadow: 0 3px 25px 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 3px 25px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 3px 25px 0 rgba(0, 0, 0, 0.16); } /*===== HEADER SAVEN =====*/ .header-saven .header-content-area { background-color: #f4f6f7; } .header-saven .header-content-area .header-content { position: relative; padding-top: 180px; padding-bottom: 180px; } @media (max-width: 767px) { .header-saven .header-content-area .header-content { padding-top: 130px; padding-bottom: 130px; } } .header-saven .header-content-area .header-content .header-image { position: absolute; } .header-saven .header-content-area .header-content .header-image.image-one { width: 348px; left: 0; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .header-saven .header-content-area .header-content .header-image.image-one { width: 300px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .header-saven .header-content-area .header-content .header-image.image-one { width: 120px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } } .header-saven .header-content-area .header-content .header-image.image-two { width: 280px; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); top: 58px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .header-saven .header-content-area .header-content .header-image.image-two { width: 220px; top: 84px; } } @media (max-width: 767px) { .header-saven .header-content-area .header-content .header-image.image-two { width: 180px; top: 52px; } } .header-saven .header-content-area .header-content .header-image.image-three { width: 332px; right: 0; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .header-saven .header-content-area .header-content .header-image.image-three { width: 290px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .header-saven .header-content-area .header-content .header-image.image-three { width: 120px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } } .header-saven .header-content-area .header-content .header-content-wrapper { max-width: 730px; margin: 0 auto; border: 1px solid #cbced1; border-radius: 16px; background-color: #fff; padding: 85px 140px; } @media (max-width: 767px) { .header-saven .header-content-area .header-content .header-content-wrapper { padding: 50px 30px; } } .header-saven .header-content-area .header-content .header-content-wrapper .header-title { font-size: 44px; line-height: 55px; color: #121212; } @media (max-width: 767px) { .header-saven .header-content-area .header-content .header-content-wrapper .header-title { font-size: 30px; line-height: 35px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .header-saven .header-content-area .header-content .header-content-wrapper .header-title { font-size: 36px; line-height: 45px; } } .header-saven .header-content-area .header-content .header-content-wrapper .text { font-size: 16px; line-height: 24px; color: #6c6c6c; margin-top: 8px; } .header-saven .header-content-area .header-content .header-content-wrapper .header-btn { margin-top: 40px; } /*=========================== 23.ERROR css ===========================*/ /*===== ERROR ONE Style =====*/ .error-content { padding-top: 120px; padding-bottom: 120px; } .error-content .erro-404 { font-size: 98px; font-weight: 600; color: #121212; line-height: 90px; } .error-content .sub-title { font-size: 24px; font-weight: 500; color: #121212; margin-top: 16px; } .error-content .text { font-size: 16px; line-height: 24px; color: #6c6c6c; margin-top: 8px; } .error-content .error-form { max-width: 410px; position: relative; margin: 0 auto; margin-top: 40px; position: relative; } .error-content .error-form i { position: absolute; top: 12px; left: 20px; font-size: 24px; color: #0067f4; } .error-content .error-form input { width: 100%; height: 48px; padding-left: 60px; padding-right: 30px; border-radius: 50px; border: 2px solid #cbced1; font-size: 16px; font-weight: 600; color: #6c6c6c; } .error-content .error-form input:focus { border-color: #0067f4; } .error-content .error-form .error-btn { position: absolute; top: 0; right: 0; } @media (max-width: 767px) { .error-content .error-form .error-btn { position: relative; width: 100%; margin-top: 8px; } } .error-content .error-form .error-btn .main-btn { border: 0; line-height: 48px; border-radius: 50px; } @media (max-width: 767px) { .error-content .error-form .error-btn .main-btn { width: 100%; } } /*===== ERROR TWO Style =====*/ .error-two { height: 750px; background-color: #e9ecef; } @media only screen and (min-width: 768px) and (max-width: 991px) { .error-two { height: 550px; } } @media (max-width: 767px) { .error-two { height: 450px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .error-content img { width: 450px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .error-content img { width: 350px; } } .error-content .text { font-size: 16px; text-transform: uppercase; margin-top: 55px; color: #a4a4a4; } .error-content .text span { color: #0067f4; } /*=========================== 24.CHECKOUT css ===========================*/ .checkout-area .section-title .title { font-size: 44px; font-weight: 500; color: #121212; line-height: 55px; } @media (max-width: 767px) { .checkout-area .section-title .title { font-size: 30px; line-height: 35px; } } .checkout-title .title { font-size: 20px; font-weight: 500; color: #121212; } .single-checkout-form label { font-size: 14px; color: #121212; margin-bottom: 8px !important; } .single-checkout-form .input-items .nice-select { width: 100%; height: 44px; border: 2px solid; border-color: #a4a4a4; color: #6c6c6c; } .single-checkout-form .input-items .nice-select::after { width: 8px; height: 8px; } .single-checkout-form .input-items .nice-select .current { font-size: 16px; } .single-checkout-form .input-items .nice-select .list { width: 100%; } .single-checkout-form .input-items .nice-select .list .option { min-height: 30px; line-height: 30px; } .checkout-checkbox { padding-top: 25px; padding-bottom: 25px; border-top: 1px solid #cbced1; } .checkout-checkbox .checkbox_common li label { color: #121212; font-size: 14px; cursor: pointer; font-weight: 400; margin-bottom: 0; } .checkout-checkbox .checkbox_common li input[type="checkbox"] { display: none; } .checkout-checkbox .checkbox_common li input[type="checkbox"] + label span { display: inline-block; width: 16px; height: 16px; margin: -1px 8px 0 0; vertical-align: middle; cursor: pointer; border-radius: 5px; position: relative; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; background-color: #cbced1; } .checkout-checkbox .checkbox_common li input[type="checkbox"] + label span::before { color: #fff; content: ""; font-size: 11px; position: absolute; text-align: center; left: 3px; top: -4px; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .checkout-checkbox .checkbox_common li input[type="checkbox"]:checked + label span { background-color: #0067f4; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .checkout-checkbox .checkbox_common li input[type="checkbox"]:checked + label span::before { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .checkout-payment { padding-top: 25px; padding-bottom: 25px; border-top: 1px solid #cbced1; } .checkout-radio .pay-top label { color: #121212; font-size: 14px; margin-bottom: 0; cursor: pointer; font-weight: 400; } .checkout-radio .pay-top input[type="radio"] { display: none; } .checkout-radio .pay-top input[type="radio"] + label span { display: inline-block; width: 14px; height: 14px; margin: -1px 8px 0 0; vertical-align: middle; cursor: pointer; border-radius: 50%; position: relative; border-radius: 50%; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; background-color: #cbced1; } .checkout-radio .pay-top input[type="radio"] + label span::before { background-color: #0067f4; border-radius: 100%; content: ""; position: absolute; height: 100%; width: 100%; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .checkout-radio .pay-top input[type="radio"]:checked + label span { -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .checkout-radio .pay-top input[type="radio"]:checked + label span::before { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .checkout-radio .payment-box { display: none; padding-bottom: 10px; } .checkout-btn { padding-top: 25px; padding-bottom: 25px; border-top: 1px solid #cbced1; } .checkout-btn .main-btn { width: 100%; border-radius: 5px; } .checkout-cart .checkout-cart-product { border: 2px solid #cbced1; border-radius: 5px; } .checkout-cart .checkout-cart-product ul li { border-bottom: 2px solid #cbced1; } .checkout-cart .checkout-cart-product ul li:last-child { border-bottom: 0; } .checkout-cart .checkout-cart-product ul li .single-product { padding: 12px 20px; } .checkout-cart .checkout-cart-product ul li .single-product .product-name .product { font-size: 20px; color: #121212; line-height: 24px; font-weight: 500; } .checkout-cart .checkout-cart-product ul li .single-product .product-name p { font-size: 16px; line-height: 24px; color: #a4a4a4; } .checkout-cart .checkout-cart-product ul li .single-product .product-price span { font-size: 18px; color: #a4a4a4; font-weight: 500; } .checkout-cart .checkout-cart-product ul li .single-product.promo .product-name .product { color: #4da422; } .checkout-cart .checkout-cart-product ul li .single-product.promo .product-name p { color: #4da422; } .checkout-cart .checkout-cart-product ul li .single-product.promo .product-price span { color: #4da422; } .checkout-promo-code { border: 2px solid #cbced1; border-radius: 5px; padding: 8px; } .checkout-promo-code .promo-code { position: relative; } .checkout-promo-code .promo-code input { width: 100%; } .checkout-promo-code .promo-code .main-btn { position: absolute; top: 0; right: 0; height: 44px; line-height: 42px; border-radius: 5px; padding: 0 16px; } /*=========================== 25.SING IN SING UP css ===========================*/ .signin-area { padding-top: 100px; padding-bottom: 100px; background-color: #f4f6f7; } /*===== SING IN ONE =====*/ .signin-one .form-input .main-btn, .signin-two .form-input .main-btn { width: 100%; } .signin-one .form-input .text, .signin-two .form-input .text { font-size: 16px; line-height: 24px; color: #a4a4a4; } .signin-one .form-input .text a, .signin-two .form-input .text a { color: #0067f4; } .signin-content .signin-title { font-size: 24px; line-height: 30px; color: #121212; } .signin-content .text { font-size: 16px; line-height: 24px; color: #a4a4a4; margin-top: 8px; } .signin-checkbox label { color: #121212; font-size: 14px; cursor: pointer; font-weight: 400; margin-bottom: 0; } .signin-checkbox input[type="checkbox"] { display: none; } .signin-checkbox input[type="checkbox"] + label { display: inline-block; width: 16px; height: 16px; margin: -1px 8px 0 0; vertical-align: middle; cursor: pointer; border-radius: 5px; position: relative; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; background-color: #cbced1; } .signin-checkbox input[type="checkbox"] + label::before { color: #fff; content: ""; font-size: 13px; position: absolute; text-align: center; left: 2px; top: -2px; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .signin-checkbox input[type="checkbox"]:checked + label { background-color: #0067f4; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .signin-checkbox input[type="checkbox"]:checked + label::before { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .signin-checkbox span a { color: #0067f4; } /*===== SING IN THREE =====*/ .signin-three { -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); background-color: #f4f6f7; border-radius: 8px; overflow: hidden; } .signin-three .signin-header { background-color: #fff; padding: 70px 30px; } @media (max-width: 767px) { .signin-three .signin-header { padding: 50px 15px; } } .signin-three .signin-header p { font-size: 16px; line-height: 24px; color: #a4a4a4; } .signin-three .signin-header .social-signin li { display: inline-block; margin: 16px 8px 0; } .signin-three .signin-header .social-signin li a { font-size: 16px; text-transform: uppercase; font-weight: 600; line-height: 48px; padding: 0 32px; -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); border-radius: 5px; color: #0067f4; background-color: #fff; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .signin-three .signin-header .social-signin li a i { padding-right: 8px; } .signin-three .signin-header .social-signin li a:hover { color: #fff; background-color: #0067f4; } .signin-three .signin-form { padding: 70px 30px; background-color: #f4f6f7; } @media (max-width: 767px) { .signin-three .signin-form { padding: 50px 15px; } } .signin-three .signin-form .text { font-size: 16px; line-height: 24px; color: #a4a4a4; } .signin-three .signin-form .password { font-size: 16px; line-height: 24px; color: #a4a4a4; font-style: italic; margin-top: 24px; } .signin-three .signin-form .password span { color: #4da422; font-weight: 700; } /*===== SING IN FOUR =====*/ .signin-area-four { position: relative; } .signin-area-four .sing-in-image { position: absolute; top: 0; right: 0; width: 50%; height: 100%; } @media only screen and (min-width: 768px) and (max-width: 991px) { .signin-area-four .sing-in-image { position: relative; width: 720px; margin: 0 auto; padding-top: 50px; padding-left: 15px; padding-right: 15px; } } @media (max-width: 767px) { .signin-area-four .sing-in-image { position: relative; width: 100%; margin: 0 auto; padding-top: 50px; padding-left: 15px; padding-right: 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .signin-area-four .sing-in-image { width: 540px; } } .signin-area-four .sing-in-image .image { padding-left: 70px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .signin-area-four .sing-in-image .image { padding-left: 0; } } @media (max-width: 767px) { .signin-area-four .sing-in-image .image { padding-left: 0; } } .signin-area-four .sing-in-title { font-size: 32px; font-weight: 600; color: #000; } .signin-area-four .sing-in-title i { color: #0067f4; margin-right: 8px; } .signin-area-four .sing-in-title span { font-weight: 400; } .signin-area-four .text { font-size: 16px; margin-top: 25px; } .signin-area-four .form-checkbox span { font-size: 18px; color: #a4a4a4; } .signin-area-four .form-checkbox input[type="checkbox"] { display: none; } .signin-area-four .form-checkbox input[type="checkbox"] + label { display: inline-block; width: 20px; height: 20px; margin: -1px 15px 0 0; vertical-align: middle; cursor: pointer; border-radius: 3px; border: 1px solid #121212; position: relative; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .signin-area-four .form-checkbox input[type="checkbox"] + label::before { color: #fff; content: ""; font-size: 16px; position: absolute; text-align: center; left: 2px; top: -4px; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .signin-area-four .form-checkbox input[type="checkbox"]:checked + label { background: #0067f4; border-color: #0067f4; } .signin-area-four .form-checkbox input[type="checkbox"]:checked + label::before { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .signin-area-four .form-forget a { font-size: 18px; color: #0067f4; } .signin-area-four .main-btn { width: 100%; } .signin-area-four .new-user { margin-top: 15px; } .signin-area-four .new-user .text { font-size: 18px; color: #121212; } .signin-area-four .new-user .text a { color: #a4a4a4; } /*===== SING IN FIVE =====*/ .signin-area-five { position: relative; } .signin-area-five .sing-in-image { position: absolute; top: 0; left: 0; width: 50%; height: 100%; } @media only screen and (min-width: 768px) and (max-width: 991px) { .signin-area-five .sing-in-image { position: relative; width: 720px; margin: 0 auto; padding-top: 50px; padding-left: 15px; padding-right: 15px; } } @media (max-width: 767px) { .signin-area-five .sing-in-image { position: relative; width: 100%; margin: 0 auto; padding-top: 50px; padding-left: 15px; padding-right: 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .signin-area-five .sing-in-image { width: 540px; } } .signin-area-five .sing-in-image .image { padding-left: 70px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .signin-area-five .sing-in-image .image { padding-left: 0; } } @media (max-width: 767px) { .signin-area-five .sing-in-image .image { padding-left: 0; } } .signin-area-five .sing-in-title { font-size: 32px; font-weight: 600; color: #000; } .signin-area-five .sing-in-title i { color: #0067f4; margin-right: 8px; } .signin-area-five .sing-in-title span { font-weight: 400; } .signin-area-five .text { font-size: 16px; margin-top: 25px; } .signin-area-five .facebook-sing-up a { width: 100%; height: 65px; line-height: 65px; text-align: center; border-radius: 7px; background-color: #164aa9; color: #fff; font-weight: 700; font-size: 18px; } .signin-area-five .gooogle-sing-up a { width: 100%; height: 65px; line-height: 65px; text-align: center; border-radius: 7px; background-color: #df3527; color: #fff; font-weight: 700; font-size: 18px; } .signin-area-five .form-checkbox span { font-size: 18px; color: #a4a4a4; } .signin-area-five .form-checkbox input[type="checkbox"] { display: none; } .signin-area-five .form-checkbox input[type="checkbox"] + label { display: inline-block; width: 20px; height: 20px; margin: -1px 15px 0 0; vertical-align: middle; cursor: pointer; border-radius: 3px; border: 1px solid #121212; position: relative; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .signin-area-five .form-checkbox input[type="checkbox"] + label::before { color: #fff; content: ""; font-size: 16px; position: absolute; text-align: center; left: 2px; top: -4px; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .signin-area-five .form-checkbox input[type="checkbox"]:checked + label { background: #0067f4; border-color: #0067f4; } .signin-area-five .form-checkbox input[type="checkbox"]:checked + label::before { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .signin-area-five .main-btn { width: 100%; } .signin-area-five .new-user { margin-top: 15px; } .signin-area-five .new-user .text { font-size: 18px; color: #121212; } .signin-area-five .new-user .text a { color: #a4a4a4; } /*=========================== 26.TESTIMONIAL css ===========================*/ /*===== TESTIMONIAL STYLE ONE =====*/ .testimonial-one { padding-top: 100px; padding-bottom: 100px; background-color: #f4f6f7; } .testimonial-one .section-title .title { font-size: 42px; font-weight: 600; line-height: 55px; } @media (max-width: 767px) { .testimonial-one .section-title .title { font-size: 24px; line-height: 35px; } } .testimonial-one .single-testimonial .testimonial-image img { width: 120px; border-radius: 50%; display: inline-block; } .testimonial-one .single-testimonial .testimonial-content { padding-top: 30px; } .testimonial-one .single-testimonial .testimonial-content .text { font-size: 14px; line-height: 24px; color: #121212; } .testimonial-one .single-testimonial .testimonial-content .author-name { font-size: 18px; font-weight: 600; color: #121212; margin-top: 24px; } .testimonial-one .single-testimonial .testimonial-content .sub-title { font-size: 14px; line-height: 24px; color: #a4a4a4; } .testimonial-one .testimonial-one-active .slick-dots { text-align: center; margin-top: 25px; } .testimonial-one .testimonial-one-active .slick-dots li { display: inline-block; margin: 0 3px; } .testimonial-one .testimonial-one-active .slick-dots li button { font-size: 0; width: 12px; height: 12px; border-radius: 50%; background-color: #cbced1; border: 0; cursor: pointer; } .testimonial-one .testimonial-one-active .slick-dots li.slick-active button { background-color: #0067f4; } /*===== TESTIMONIAL STYLE TWO =====*/ .testimonial-two { padding-top: 100px; padding-bottom: 100px; background-color: #f4f6f7; } .testimonial-two .single-testimonial { border: 1px solid #cbced1; padding: 25px 30px; border-radius: 8px; background-color: #fff; } .testimonial-two .single-testimonial .testimonial-author .author-image img { width: 80px; border-radius: 50%; } .testimonial-two .single-testimonial .testimonial-author .author-name { padding-left: 20px; } .testimonial-two .single-testimonial .testimonial-author .author-name .name { font-size: 18px; font-weight: 600; line-height: 24px; color: #121212; } .testimonial-two .single-testimonial .testimonial-author .author-name .sub-title { font-size: 14px; line-height: 24px; color: #a4a4a4; } .testimonial-two .single-testimonial .testimonial-text { margin-top: 25px; } .testimonial-two .single-testimonial .testimonial-text .text { font-size: 14px; line-height: 24px; color: #121212; } .testimonial-two .testimonial-two-active .slick-dots { text-align: center; margin-top: 25px; } .testimonial-two .testimonial-two-active .slick-dots li { display: inline-block; margin: 0 3px; } .testimonial-two .testimonial-two-active .slick-dots li button { font-size: 0; width: 12px; height: 12px; border-radius: 50%; background-color: #cbced1; border: 0; cursor: pointer; } .testimonial-two .testimonial-two-active .slick-dots li.slick-active button { background-color: #0067f4; } /*===== TESTIMONIAL STYLE THREE =====*/ .testimonial-three { padding-top: 100px; padding-bottom: 70px; background-color: #f4f6f7; } .testimonial-three .single-testimonial { background-color: #fff; padding: 30px; -webkit-box-shadow: 0 0px 20px 0 rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0px 20px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0px 20px 0 rgba(0, 0, 0, 0.1); } .testimonial-three .single-testimonial .testimonial-image img { width: 90px; border-radius: 50%; display: inline-block; } .testimonial-three .single-testimonial .testimonial-content { padding-top: 25px; } .testimonial-three .single-testimonial .testimonial-content .text { font-size: 16px; line-height: 24px; color: #121212; border-bottom: 1px solid #cbced1; padding-bottom: 24px; } .testimonial-three .single-testimonial .testimonial-content .author-name { font-size: 18px; font-weight: 600; color: #121212; margin-top: 24px; } .testimonial-three .single-testimonial .testimonial-content .sub-title { font-size: 14px; line-height: 24px; color: #a4a4a4; } .testimonial-three .testimonial-three-active .slick-dots { text-align: center; } .testimonial-three .testimonial-three-active .slick-dots li { display: inline-block; margin: 0 3px; } .testimonial-three .testimonial-three-active .slick-dots li button { font-size: 0; width: 12px; height: 12px; border-radius: 50%; background-color: #cbced1; border: 0; cursor: pointer; } .testimonial-three .testimonial-three-active .slick-dots li.slick-active button { background-color: #0067f4; } /*===== TESTIMONIAL STYLE THREE =====*/ .testimonial-four { padding-top: 100px; padding-bottom: 100px; } .testimonial-four .testimonial-left-content .sub-title { font-size: 18px; font-weight: 400; color: #0067f4; text-transform: uppercase; } @media (max-width: 767px) { .testimonial-four .testimonial-left-content .sub-title { font-size: 16px; } } .testimonial-four .testimonial-left-content .title { font-size: 32px; padding-top: 10px; color: #121212; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .testimonial-four .testimonial-left-content .title { font-size: 30px; } } @media (max-width: 767px) { .testimonial-four .testimonial-left-content .title { font-size: 24px; } } .testimonial-four .testimonial-left-content .testimonial-line { padding-top: 10px; } .testimonial-four .testimonial-left-content .testimonial-line li { height: 5px; background-color: #0067f4; opacity: 0.2; display: inline-block; border-radius: 50px; margin-right: 3px; } .testimonial-four .testimonial-left-content .testimonial-line li:nth-of-type(1) { width: 40px; } .testimonial-four .testimonial-left-content .testimonial-line li:nth-of-type(2) { width: 15px; } .testimonial-four .testimonial-left-content .testimonial-line li:nth-of-type(3) { width: 10px; } .testimonial-four .testimonial-left-content .testimonial-line li:nth-of-type(4) { width: 5px; } .testimonial-four .testimonial-left-content .text { padding-top: 15px; } .testimonial-four .testimonial-right-content { position: relative; background-color: #e9ecef; -webkit-box-shadow: 0px 30px 70px 0px rgba(0, 0, 0, 0.07); -moz-box-shadow: 0px 30px 70px 0px rgba(0, 0, 0, 0.07); box-shadow: 0px 30px 70px 0px rgba(0, 0, 0, 0.07); border-radius: 50px; max-width: 500px; padding-top: 50px; } .testimonial-four .testimonial-right-content .quota { position: absolute; top: 10px; left: 15px; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); opacity: 0.1; } .testimonial-four .testimonial-right-content .quota i { font-size: 130px; line-height: 95px; color: #0067f4; } .testimonial-four .testimonial-content-wrapper { position: relative; left: 70px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .testimonial-four .testimonial-content-wrapper { left: 0; } } @media (max-width: 767px) { .testimonial-four .testimonial-content-wrapper { left: 0; } } .testimonial-four .single-testimonial { background-color: #fff; padding: 40px 30px 50px; border-radius: 50px; } .testimonial-four .single-testimonial .testimonial-text .text { font-size: 24px; font-weight: 400; line-height: 36px; color: #121212; padding-bottom: 25px; } @media (max-width: 767px) { .testimonial-four .single-testimonial .testimonial-text .text { font-size: 18px; line-height: 32px; } } .testimonial-four .single-testimonial .testimonial-author { border-top: 1px solid #e9ecef; padding-top: 50px; } .testimonial-four .single-testimonial .testimonial-author .author-info .author-image img { border-radius: 50%; width: 70px; } .testimonial-four .single-testimonial .testimonial-author .author-info .author-name { padding-left: 30px; } .testimonial-four .single-testimonial .testimonial-author .author-info .author-name .name { font-size: 16px; font-weight: 700; color: #121212; } .testimonial-four .single-testimonial .testimonial-author .author-info .author-name .sub-title { font-size: 14px; color: #a4a4a4; margin-top: 5px; } @media (max-width: 767px) { .testimonial-four .single-testimonial .testimonial-author .author-review { padding-left: 100px; padding-top: 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .testimonial-four .single-testimonial .testimonial-author .author-review { padding-left: 0; padding-top: 15px; } } .testimonial-four .single-testimonial .testimonial-author .author-review .star li { display: inline-block; font-size: 14px; color: #ffb400; } .testimonial-four .single-testimonial .testimonial-author .author-review .review { font-size: 14px; color: #000; margin-top: 5px; } .testimonial-four .testimonial-four-active .slick-arrow { position: absolute; bottom: 0; left: -635px; font-size: 22px; cursor: pointer; color: #a4a4a4; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .testimonial-four .testimonial-four-active .slick-arrow { left: -480px; } } .testimonial-four .testimonial-four-active .slick-arrow:hover { color: #000; } .testimonial-four .testimonial-four-active .slick-arrow.next { left: -600px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .testimonial-four .testimonial-four-active .slick-arrow.next { left: -445px; } } /*=========================== 27.PRODUCT PAGE css ===========================*/ .product-page { padding-top: 50px; padding-bottom: 100px; } .product-details-image .product-image .single-product-image img { width: 100%; } .product-details-image .product-thumbs .single-thumbs img { opacity: 0.5; width: 100%; } .product-details-image .product-thumbs .slick-current .single-thumbs img { opacity: 1; } .product-details-content .product-title { font-size: 24px; color: #121212; font-weight: 600; line-height: 30px; } .product-details-content .product-rating .rating-star { color: #4da422; font-size: 15px; margin-top: 16px; margin-right: 16px; } .product-details-content .product-rating .rating-review { font-size: 14px; margin-top: 16px; color: #a4a4a4; } .product-details-content .product-price { margin-top: 16px; } .product-details-content .product-price .running-price { font-weight: 600; font-size: 24px; color: #121212; line-height: 30px; margin-right: 16px; } .product-details-content .product-price .discount-price { font-size: 18px; color: #a4a4a4; position: relative; } .product-details-content .product-price .discount-price::before { position: absolute; content: ''; top: 50%; left: 0; width: 100%; height: 2px; background-color: #a4a4a4; } .product-details-content .product-stock { margin-top: 16px; } .product-details-content .product-stock p { font-size: 15px; color: #121212; } .product-details-content .product-stock p span { color: #4da422; margin-left: 8px; } .product-details-content .product-overview { margin-top: 16px; } .product-details-content .product-overview .overview-title { font-size: 18px; font-weight: 600; color: #121212; } .product-details-content .product-overview .text { color: #a4a4a4; line-height: 27px; margin-top: 8px; } .product-details-content .product-quantity-addcart .product-quantity { margin-right: 16px; } .product-details-content .product-quantity-addcart .product-quantity button { width: 50px; height: 50px; padding: 0; border: 0; background-color: #0067f4; font-size: 18px; color: #fff; } @media (max-width: 767px) { .product-details-content .product-quantity-addcart .product-quantity button { width: 40px; height: 40px; } } .product-details-content .product-quantity-addcart .product-quantity input { width: 60px; height: 50px; border: 1px solid #0067f4; padding: 0 10px; text-align: center; } @media (max-width: 767px) { .product-details-content .product-quantity-addcart .product-quantity input { height: 40px; } } .product-details-content .product-share { margin-top: 16px; } .product-details-content .product-share span { font-size: 16px; font-weight: 600; color: #121212; } .product-details-content .product-share .social li { display: inline-block; margin-left: 10px; } .product-details-content .product-share .social li a { color: #a4a4a4; font-size: 16px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .product-details-content .product-share .social li a:hover { color: #0067f4; } .product-content { padding: 24px; } .product-content .product-title { font-size: 24px; color: #121212; line-height: 30px; font-weight: 600; } .product-content .text { font-size: 16px; color: #a4a4a4; line-height: 27px; margin-top: 16px; } .product-review { padding: 24px; padding-top: 0; } .product-review .single-product-review { padding-top: 24px; } .product-review .single-product-review .review-author img { width: 90px; border-radius: 50%; } .product-review .single-product-review .review-content { padding-left: 25px; } @media (max-width: 767px) { .product-review .single-product-review .review-content { padding-left: 0; padding-top: 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .product-review .single-product-review .review-content { padding-left: 15px; padding-top: 0; } } .product-review .single-product-review .review-content .author-name { font-size: 18px; color: #121212; font-weight: 600; line-height: 25px; } .product-review .single-product-review .review-content .reply-date { color: #a4a4a4; font-size: 14px; margin-top: 4px; } .product-review .single-product-review .review-content .text { margin-top: 8px; font-size: 16px; line-height: 27px; color: #121212; } .review-title { font-size: 24px; line-height: 30px; color: #121212; font-weight: 600; } .product-review-rating span { font-size: 16px; font-weight: 600; color: #121212; margin-right: 8px; } .product-review-rating ul li { display: inline-block; } .product-review-rating ul li a { font-size: 16px; color: #4da422; } /*===== order Style =====*/ .order-title .sub-title { font-size: 24px; font-weight: 500; color: #a4a4a4; line-height: 30px; } @media (max-width: 767px) { .order-title .sub-title { font-size: 18px; line-height: 28px; } } .order-title .main-title { font-size: 52px; font-weight: 600; line-height: 65px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .order-title .main-title { font-size: 32px; line-height: 38px; } } @media (max-width: 767px) { .order-title .main-title { font-size: 38px; line-height: 45px; } } .order-title .text { margin-top: 19px; } .order-area { background-color: #e9ecef; } .single-order { background-color: #fff; padding: 38px 16px; -webkit-box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08); -moz-box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08); box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08); border-radius: 4px; margin-top: 32px; } .single-order .order-title { font-weight: 600; font-size: 20px; line-height: 30px; } @media (max-width: 767px) { .single-order .order-title { font-size: 18px; } } .single-order .text { margin-top: 4px; font-size: 16px; line-height: 20px; color: #a4a4a4; } .single-order .main-btn { margin-top: 16px; } .order-link { padding-top: 22px; } .order-link a { font-size: 16px; font-weight: 500; color: #121212; text-transform: uppercase; line-height: 24px; padding: 8px 16px; background-color: rgba(255, 255, 255, 0.38); margin: 10px 3px 0; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04); -moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04); box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04); } .order-link a i { margin-right: 5px; } .order-link a:hover { color: #0067f4; } .order-image img { width: 100%; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .brand-area { margin-top: 50px; } } .bread-title .main-title { font-size: 36px; font-weight: 500; line-height: 45px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .bread-title .main-title { font-size: 32px; line-height: 38px; } } @media (max-width: 767px) { .bread-title .main-title { font-size: 26px; line-height: 34px; } } .bread-logo { margin-top: 15px; } /*=========================== 28.CLIENT css ===========================*/ .client-logo-area .client-title .title { font-size: 44px; line-height: 55px; color: #121212; } @media (max-width: 767px) { .client-logo-area .client-title .title { font-size: 28px; line-height: 35px; } } /*===== Client Logo One =====*/ .client-logo-one { padding-top: 100px; padding-bottom: 100px; } /*===== Client Logo Two =====*/ .client-logo-two { padding-top: 100px; padding-bottom: 100px; } /*===== Client Logo Three =====*/ .client-logo-three { padding-top: 100px; padding-bottom: 100px; } .client-logo-three .single-client img { -webkit-filter: grayscale(100%); filter: grayscale(100%); -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .client-logo-three .single-client:hover img { -webkit-filter: grayscale(0); filter: grayscale(0); } /*=========================== 29.CALL TO ACTION css ===========================*/ /*===== call action one =====*/ .call-action-one { background-color: #f4f6f7; } .call-action-one .call-action-content .call-action-text .action-title { font-size: 48px; font-weight: 600; line-height: 55px; color: #121212; } @media (max-width: 767px) { .call-action-one .call-action-content .call-action-text .action-title { font-size: 30px; line-height: 40px; } } .call-action-one .call-action-content .call-action-text .text { font-size: 20px; color: #121212; line-height: 30px; margin-top: 16px; } @media (max-width: 767px) { .call-action-one .call-action-content .call-action-text .text { font-size: 16px; line-height: 27px; } } /*===== call action two =====*/ .call-action-two { background-color: #f4f6f7; } .call-action-two .call-action-content .action-title { font-size: 32px; font-weight: 600; line-height: 40px; color: #121212; } @media (max-width: 767px) { .call-action-two .call-action-content .action-title { font-size: 24px; line-height: 35px; } } .call-action-two .call-action-content .text { font-size: 16px; color: #121212; line-height: 27px; margin-top: 16px; } .call-action-two .call-action-form { position: relative; } .call-action-two .call-action-form input { width: 100%; height: 60px; border: 1px solid #cbced1; background: none; padding: 0 25px; border-radius: 50px; } @media (max-width: 767px) { .call-action-two .call-action-form input { height: 50px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .call-action-two .call-action-form input { height: 60px; } } .call-action-two .call-action-form input::placeholder { opacity: 1; color: #a4a4a4; } .call-action-two .call-action-form input::-moz-placeholder { opacity: 1; color: #a4a4a4; } .call-action-two .call-action-form input::-moz-placeholder { opacity: 1; color: #a4a4a4; } .call-action-two .call-action-form input::-webkit-input-placeholder { opacity: 1; color: #a4a4a4; } .call-action-two .call-action-form input:focus { border-color: #0067f4; } .call-action-two .call-action-form .action-btn { position: absolute; top: 5px; right: 5px; } @media (max-width: 767px) { .call-action-two .call-action-form .action-btn .main-btn { width: 100%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .call-action-two .call-action-form .action-btn .main-btn { width: auto; } } @media (max-width: 767px) { .call-action-two .call-action-form .action-btn { position: relative; top: 0; right: 0; margin-top: 10px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .call-action-two .call-action-form .action-btn { position: absolute; top: 8px; right: 8px; margin-top: 0; } } /*===== call action three =====*/ .call-action-three { background-color: #f4f6f7; } .call-action-three .call-action-content .action-title { font-size: 48px; font-weight: 500; line-height: 55px; color: #121212; } @media (max-width: 767px) { .call-action-three .call-action-content .action-title { font-size: 30px; line-height: 40px; } } .call-action-three .call-action-content .main-btn { margin-top: 24px; } /*===== call action four =====*/ .call-action-four { background-color: #0067f4; } .call-action-four .call-action-content .action-title { font-size: 42px; font-weight: 600; line-height: 55px; color: #fff; } @media (max-width: 767px) { .call-action-four .call-action-content .action-title { font-size: 30px; line-height: 40px; } } .call-action-four .call-action-content .text { font-size: 16px; color: #fff; line-height: 27px; margin-top: 16px; } .call-action-four .call-action-form { position: relative; max-width: 480px; margin: 45px auto 0; } .call-action-four .call-action-form input { width: 100%; height: 60px; border: 1px solid #fff; background: none; padding: 0 25px; border-radius: 50px; color: #fff; } @media (max-width: 767px) { .call-action-four .call-action-form input { height: 50px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .call-action-four .call-action-form input { height: 60px; } } .call-action-four .call-action-form input::placeholder { opacity: 1; color: #fff; } .call-action-four .call-action-form input::-moz-placeholder { opacity: 1; color: #fff; } .call-action-four .call-action-form input::-moz-placeholder { opacity: 1; color: #fff; } .call-action-four .call-action-form input::-webkit-input-placeholder { opacity: 1; color: #fff; } .call-action-four .call-action-form .action-btn { position: absolute; top: 5px; right: 5px; } @media (max-width: 767px) { .call-action-four .call-action-form .action-btn { position: relative; top: 0; right: 0; margin-top: 10px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .call-action-four .call-action-form .action-btn { position: absolute; top: 8px; right: 8px; margin-top: 0; } } .call-action-four .call-action-form .action-btn .main-btn { background-color: #fff; color: #0067f4; border-color: #fff; } @media (max-width: 767px) { .call-action-four .call-action-form .action-btn .main-btn { width: 100%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .call-action-four .call-action-form .action-btn .main-btn { width: auto; } } .call-action-four .call-action-form .action-btn .main-btn:hover { background-color: #fff; border-color: #fff; color: #0067f4; -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); } /*===== call action four =====*/ .call-action-five { background-color: #121212; } .call-action-five .call-action-content .action-title { font-size: 20px; font-weight: 600; line-height: 30px; color: #fff; } .call-action-five .call-action-form { position: relative; max-width: 480px; margin: 45px auto 0; } .call-action-five .call-action-form input { width: 100%; height: 60px; border: 1px solid #fff; background: none; padding: 0 25px; border-radius: 50px; color: #fff; } @media (max-width: 767px) { .call-action-five .call-action-form input { height: 50px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .call-action-five .call-action-form input { height: 60px; } } .call-action-five .call-action-form input::placeholder { opacity: 1; color: #fff; } .call-action-five .call-action-form input::-moz-placeholder { opacity: 1; color: #fff; } .call-action-five .call-action-form input::-moz-placeholder { opacity: 1; color: #fff; } .call-action-five .call-action-form input::-webkit-input-placeholder { opacity: 1; color: #fff; } .call-action-five .call-action-form .action-btn { position: absolute; top: 5px; right: 5px; } @media (max-width: 767px) { .call-action-five .call-action-form .action-btn { position: relative; top: 0; right: 0; margin-top: 10px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .call-action-five .call-action-form .action-btn { position: absolute; top: 8px; right: 8px; margin-top: 0; } } .call-action-five .call-action-form .action-btn .main-btn { background-color: #fff; color: #0067f4; border-color: #fff; } @media (max-width: 767px) { .call-action-five .call-action-form .action-btn .main-btn { width: 100%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .call-action-five .call-action-form .action-btn .main-btn { width: auto; } } .call-action-five .call-action-form .action-btn .main-btn:hover { background-color: #fff; border-color: #fff; color: #0067f4; -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); } /*=========================== 30.COMING SOON css ===========================*/ /*===== COMING SOON ONE =====*/ .coming-soon-one { height: 700px; } .coming-soon-one .coming-soon-content .coming-soon-countdown .single-count-content { padding: 0 45px; text-align: center; } @media (max-width: 767px) { .coming-soon-one .coming-soon-content .coming-soon-countdown .single-count-content { padding: 0 10px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .coming-soon-one .coming-soon-content .coming-soon-countdown .single-count-content { padding: 0 15px; } } .coming-soon-one .coming-soon-content .coming-soon-countdown .single-count-content .count { font-size: 72px; font-weight: 600; line-height: 60px; color: #fff; } @media (max-width: 767px) { .coming-soon-one .coming-soon-content .coming-soon-countdown .single-count-content .count { font-size: 24px; line-height: 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .coming-soon-one .coming-soon-content .coming-soon-countdown .single-count-content .count { font-size: 36px; line-height: 40px; } } .coming-soon-one .coming-soon-content .coming-soon-countdown .single-count-content .text { font-size: 20px; font-weight: 600; margin-top: 10px; color: #fff; } @media (max-width: 767px) { .coming-soon-one .coming-soon-content .coming-soon-countdown .single-count-content .text { font-size: 14px; margin-top: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .coming-soon-one .coming-soon-content .coming-soon-countdown .single-count-content .text { font-size: 18px; margin-top: 0; } } .coming-soon-one .coming-soon-content .coming-soon-title { font-size: 72px; color: #fff; line-height: 85px; text-transform: uppercase; margin-top: 30px; } @media (max-width: 767px) { .coming-soon-one .coming-soon-content .coming-soon-title { font-size: 38px; line-height: 45px; } } @media (max-width: 767px) { .coming-soon-one .coming-soon-content .coming-soon-title { font-size: 60px; line-height: 70px; } } .coming-soon-one .coming-soon-content .coming-soon-btn { padding-top: 20px; } .coming-soon-one .coming-soon-content .coming-soon-btn .main-btn.rounded-one { background-color: #fff; border-color: #fff; } .coming-soon-one .coming-soon-content .coming-soon-btn .main-btn.rounded-one:hover { background-color: #0067f4; border-color: #0067f4; } /*===== COMING SOON TWO =====*/ .coming-soon-two { background-color: #f4f6f7; } .coming-soon-two .coming-soon-content { position: relative; padding-top: 180px; padding-bottom: 180px; } @media (max-width: 767px) { .coming-soon-two .coming-soon-content { padding-top: 130px; padding-bottom: 130px; } } .coming-soon-two .coming-soon-content .coming-soon-image { position: absolute; } .coming-soon-two .coming-soon-content .coming-soon-image.image-one { width: 348px; left: 0; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .coming-soon-two .coming-soon-content .coming-soon-image.image-one { width: 300px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .coming-soon-two .coming-soon-content .coming-soon-image.image-one { width: 120px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } } .coming-soon-two .coming-soon-content .coming-soon-image.image-two { width: 280px; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); top: 58px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .coming-soon-two .coming-soon-content .coming-soon-image.image-two { width: 220px; top: 84px; } } @media (max-width: 767px) { .coming-soon-two .coming-soon-content .coming-soon-image.image-two { width: 180px; top: 52px; } } .coming-soon-two .coming-soon-content .coming-soon-image.image-three { width: 332px; right: 0; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .coming-soon-two .coming-soon-content .coming-soon-image.image-three { width: 290px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .coming-soon-two .coming-soon-content .coming-soon-image.image-three { width: 120px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } } .coming-soon-two .coming-soon-content .coming-soon-content-wrapper { max-width: 730px; margin: 0 auto; border: 1px solid #cbced1; border-radius: 16px; background-color: #fff; padding: 30px 140px 55px; } @media (max-width: 767px) { .coming-soon-two .coming-soon-content .coming-soon-content-wrapper { padding: 50px 30px; } } .coming-soon-two .coming-soon-content .coming-soon-content-wrapper .coming-soon-title { font-size: 44px; line-height: 55px; color: #121212; margin: 16px; } @media (max-width: 767px) { .coming-soon-two .coming-soon-content .coming-soon-content-wrapper .coming-soon-title { font-size: 30px; line-height: 35px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .coming-soon-two .coming-soon-content .coming-soon-content-wrapper .coming-soon-title { font-size: 36px; line-height: 45px; } } .coming-soon-two .coming-soon-content .coming-soon-content-wrapper .text { font-size: 22px; line-height: 35px; color: #6c6c6c; margin-top: 8px; font-weight: 500; } @media (max-width: 767px) { .coming-soon-two .coming-soon-content .coming-soon-content-wrapper .text { font-size: 16px; line-height: 24px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .coming-soon-two .coming-soon-content .coming-soon-content-wrapper .text { font-size: 22px; line-height: 35px; } } .coming-soon-two .coming-soon-content .coming-soon-content-wrapper .coming-soon-newslatter { max-width: 410px; position: relative; margin: 0 auto; margin-top: 40px; } .coming-soon-two .coming-soon-content .coming-soon-content-wrapper .coming-soon-newslatter i { position: absolute; top: 12px; left: 20px; font-size: 24px; color: #0067f4; } .coming-soon-two .coming-soon-content .coming-soon-content-wrapper .coming-soon-newslatter input { width: 100%; height: 48px; padding-left: 60px; padding-right: 30px; border-radius: 50px; border: 2px solid #cbced1; font-size: 16px; font-weight: 600; color: #6c6c6c; } .coming-soon-two .coming-soon-content .coming-soon-content-wrapper .coming-soon-newslatter input:focus { border-color: #0067f4; } .coming-soon-two .coming-soon-content .coming-soon-content-wrapper .coming-soon-newslatter .coming-soon-btn { position: absolute; top: 0; right: 0; } @media (max-width: 767px) { .coming-soon-two .coming-soon-content .coming-soon-content-wrapper .coming-soon-newslatter .coming-soon-btn { position: relative; margin-top: 10px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .coming-soon-two .coming-soon-content .coming-soon-content-wrapper .coming-soon-newslatter .coming-soon-btn { position: absolute; margin-top: 0; } } .coming-soon-two .coming-soon-content .coming-soon-content-wrapper .coming-soon-newslatter .coming-soon-btn .main-btn { border: 0; line-height: 48px; border-radius: 50px; } @media (max-width: 767px) { .coming-soon-two .coming-soon-content .coming-soon-content-wrapper .coming-soon-newslatter .coming-soon-btn .main-btn { width: 100%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .coming-soon-two .coming-soon-content .coming-soon-content-wrapper .coming-soon-newslatter .coming-soon-btn .main-btn { width: auto; } } .coming-soon-two .coming-soon-content .coming-soon-content-wrapper .subscribe-text { font-size: 14px; color: #0067f4; line-height: 24px; margin-top: 8px; } /*=========================== 31.VIDEO css ===========================*/ /*===== VIDEO ONE =====*/ .video-one { background-color: #e9ecef; padding-top: 120px; } .video-one .video-title .sub-title { font-size: 24px; font-weight: 500; color: #a4a4a4; line-height: 30px; } @media (max-width: 767px) { .video-one .video-title .sub-title { font-size: 18px; line-height: 28px; } } .video-one .video-title .main-title { font-size: 36px; font-weight: 600; line-height: 45px; color: #121212; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .video-one .video-title .main-title { font-size: 32px; line-height: 38px; } } @media (max-width: 767px) { .video-one .video-title .main-title { font-size: 26px; line-height: 34px; } } .video-one .video-title .text { margin-top: 19px; color: #121212; } .video-one .video-content { position: relative; } .video-one .video-content a { width: 88px; height: 88px; line-height: 88px; text-align: center; border-radius: 50%; background-color: rgba(0, 0, 0, 0.6); color: #fff; font-size: 40px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media (max-width: 767px) { .video-one .video-content a { width: 68px; height: 68px; line-height: 68px; font-size: 46px; } } .video-one .video-content a:hover { background-color: rgba(51, 51, 51, 0.6); } /*===== VIDEO TWO =====*/ .video-two { background-color: #e9ecef; padding-top: 120px; padding-bottom: 120px; } .video-two .video-menu ul li { font-size: 16px; font-weight: 700; color: #6c6c6c; line-height: 48px; padding: 0 30px; position: relative; border-radius: 50px; overflow: hidden; display: inline-block; z-index: 5; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; cursor: pointer; margin-right: 4px; } .video-two .video-menu ul li:last-child { margin-right: 0; } @media only screen and (min-width: 768px) and (max-width: 991px) { .video-two .video-menu ul li { font-size: 14px; padding: 0 26px; } } @media (max-width: 767px) { .video-two .video-menu ul li { font-size: 13px; padding: 0 18px; line-height: 38px; } } .video-two .video-menu ul li::before { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%); z-index: -1; opacity: 0; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .video-two .video-menu ul li:hover, .video-two .video-menu ul li.active { color: #fff; } .video-two .video-menu ul li:hover::before, .video-two .video-menu ul li.active::before { opacity: 1; } .video-two .single-video-items { position: relative; } .video-two .single-video-items .video-image img { width: 100%; } .video-two .single-video-items .video-icon { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .video-two .single-video-items .video-icon::before { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background-color: #0067f4; opacity: 0; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .video-two .single-video-items .video-icon a { width: 50px; height: 50px; line-height: 50px; text-align: center; border: 3px solid #fff; font-size: 24px; color: #fff; border-radius: 50%; padding-left: 5px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .video-two .single-video-items:hover .video-icon::before { opacity: 0.4; } .video-two .single-video-items:hover .video-icon a { -webkit-transform: translate(-50%, -50%) scale(1.1); -moz-transform: translate(-50%, -50%) scale(1.1); -ms-transform: translate(-50%, -50%) scale(1.1); -o-transform: translate(-50%, -50%) scale(1.1); transform: translate(-50%, -50%) scale(1.1); } /*===== VIDEO THREE =====*/ .video-three { padding-top: 120px; padding-bottom: 120px; background-color: #e9ecef; } .video-three .single-video-items { position: relative; } .video-three .single-video-items .video-image img { width: 100%; } .video-three .single-video-items .video-icon { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .video-three .single-video-items .video-icon::before { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background-color: #0067f4; opacity: 0; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .video-three .single-video-items .video-icon a { width: 50px; height: 50px; line-height: 50px; text-align: center; border: 3px solid #fff; font-size: 24px; color: #fff; border-radius: 50%; padding-left: 5px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; opacity: 0; visibility: hidden; } @media (max-width: 767px) { .video-three .single-video-items .video-icon a { width: 45px; height: 45px; line-height: 45px; font-size: 20px; border: 2px solid #fff; } } .video-three .single-video-items:hover .video-icon::before { opacity: 0.4; } .video-three .single-video-items:hover .video-icon a { -webkit-transform: translate(-50%, -50%) scale(1.1); -moz-transform: translate(-50%, -50%) scale(1.1); -ms-transform: translate(-50%, -50%) scale(1.1); -o-transform: translate(-50%, -50%) scale(1.1); transform: translate(-50%, -50%) scale(1.1); opacity: 1; visibility: visible; } .video-three .video-active .slick-arrow { position: absolute; top: 50%; left: -40px; font-size: 40px; line-height: 30px; color: #121212; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); cursor: pointer; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media (max-width: 767px) { .video-three .video-active .slick-arrow { font-size: 24px; left: -24px; } } .video-three .video-active .slick-arrow:hover { color: #0067f4; } .video-three .video-active .slick-arrow.next { left: auto; right: -40px; } @media (max-width: 767px) { .video-three .video-active .slick-arrow.next { right: -24px; } } /*=========================== 32.PROFILE css ===========================*/ .profile-area { position: relative; height: 100vh; overflow: hidden; } .profile-area::before { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background: -webkit-linear-gradient(to right, rgba(0, 102, 244, 0.7) 0%, rgba(43, 219, 220, 0.7) 100%); background: -o-linear-gradient(to right, rgba(0, 102, 244, 0.7) 0%, rgba(43, 219, 220, 0.7) 100%); background: linear-gradient(to right, rgba(0, 102, 244, 0.7) 0%, rgba(43, 219, 220, 0.7) 100%); z-index: 99; } .profile-card { max-width: 560px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; z-index: 99; } @media only screen and (min-width: 768px) and (max-width: 991px) { .profile-card { max-width: 540px; } } @media (max-width: 767px) { .profile-card { max-width: 90%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .profile-card { max-width: 420px; } } .profile-card .profile-card-wrapper { background-color: #fff; z-index: 999; border-radius: 5px; overflow: hidden; } .profile-card .profile-card-wrapper .card-header { height: 170px; width: 100%; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .profile-card .profile-card-wrapper .card-header { height: 200px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .profile-card .profile-card-wrapper .card-header { height: 170px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .profile-card .profile-card-wrapper .card-header { height: 160px; } } @media (max-width: 767px) { .profile-card .profile-card-wrapper .card-header { height: 90px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .profile-card .profile-card-wrapper .card-header { height: 140px; } } .profile-card .profile-card-wrapper .card-profile { max-width: 150px; width: 100%; margin-left: auto; margin-right: auto; margin-top: -75px; position: relative; z-index: 9; } @media only screen and (min-width: 1400px) { .profile-card .profile-card-wrapper .card-profile { max-width: 170px; margin-top: -85px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .profile-card .profile-card-wrapper .card-profile { max-width: 150px; margin-top: -75px; } } @media (max-width: 767px) { .profile-card .profile-card-wrapper .card-profile { max-width: 100px; margin-top: -50px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .profile-card .profile-card-wrapper .card-profile { max-width: 140px; margin-top: -70px; } } .profile-card .profile-card-wrapper .card-profile img { border-radius: 50%; width: 100%; padding: 8px; background-color: #fff; } .profile-card .profile-card-wrapper .card-content { padding: 25px; } @media only screen and (min-width: 1400px) { .profile-card .profile-card-wrapper .card-content { padding: 30px; } } @media (max-width: 767px) { .profile-card .profile-card-wrapper .card-content { padding: 10px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .profile-card .profile-card-wrapper .card-content { padding: 20px; } } .profile-card .profile-card-wrapper .card-content .card-title { font-size: 48px; color: #121212; margin-bottom: 20px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .profile-card .profile-card-wrapper .card-content .card-title { font-size: 44px; } } @media (max-width: 767px) { .profile-card .profile-card-wrapper .card-content .card-title { font-size: 26px; margin-bottom: 10px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .profile-card .profile-card-wrapper .card-content .card-title { font-size: 36px; margin-bottom: 10px; } } .profile-card .profile-card-wrapper .card-content .text { font-size: 16px; padding-bottom: 20px; } @media (max-width: 767px) { .profile-card .profile-card-wrapper .card-content .text { font-size: 14px; line-height: 24px; padding-bottom: 10px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .profile-card .profile-card-wrapper .card-content .text { font-size: 15px; line-height: 26px; padding-bottom: 20px; } } .profile-card .profile-card-wrapper .card-social { padding-top: 10px; padding-bottom: 30px; } @media (max-width: 767px) { .profile-card .profile-card-wrapper .card-social { padding-top: 5px; padding-bottom: 10px; } } .profile-card .profile-card-wrapper .card-social ul li { display: inline-block; margin: 0px 9px; } @media (max-width: 767px) { .profile-card .profile-card-wrapper .card-social ul li { margin: 0 5px; } } .profile-card .profile-card-wrapper .card-social ul li a { width: 41px; height: 40px; line-height: 42px; border: 1px solid; border-radius: 50%; font-size: 18px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; position: relative; z-index: 5; } .profile-card .profile-card-wrapper .card-social ul li a.facebook { color: #3b5998; border-color: #3b5998; } .profile-card .profile-card-wrapper .card-social ul li a.facebook:hover { color: #fff; background-color: #3b5998; } .profile-card .profile-card-wrapper .card-social ul li a.twitter { color: #00acee; border-color: #00acee; } .profile-card .profile-card-wrapper .card-social ul li a.twitter:hover { color: #fff; background-color: #00acee; } .profile-card .profile-card-wrapper .card-social ul li a.instagram { color: #e1306c; border-color: #e1306c; } .profile-card .profile-card-wrapper .card-social ul li a.instagram:hover { color: #fff; background-color: #e1306c; } .profile-card .profile-card-wrapper .card-social ul li a.linkedin { color: #0077b5; border-color: #0077b5; } .profile-card .profile-card-wrapper .card-social ul li a.linkedin:hover { color: #fff; background-color: #0077b5; } /*# sourceMappingURL=style.css.map */