/*----------------------------------------------------------------------------------- Template Name: Smart - Muultipurpose Landing Page Template Template URL: uideck.com/templates/smart Description: Smart - Muultipurpose Landing Page Template Author: UIdeck Author URL: https://uideck.com/ Support: https://uideck.com/support/ Version: 1.0 ----------------------------------------------------------------------------------- CSS INDEX =================== 01. Theme default CSS 02. Header 03. Hero 04. Footer -----------------------------------------------------------------------------------*/ /*=========================== 1. 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; overflow-x: hidden; } * { 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%; } /*==== Section Title =====*/ .section-title .title { font-size: 44px; font-weight: 500; 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: #38f9d7 #38f9d7 #cbced1; border-radius: 50%; border-width: 6px; } .preloader .loader .ytp-spinner-left .ytp-spinner-circle { left: 0; right: -100%; border-right-color: #cbced1; -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: #cbced1; -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); } } /*=========================== 2.BUTTON css ===========================*/ .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: #666; 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; } } /*===== 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: #38f9d7; color: #38f9d7; } .rounded-buttons .rounded-one:hover { background-color: rgba(56, 249, 215, 0.4); } .rounded-buttons .rounded-two { color: #fff; background-color: #38f9d7; border-color: #38f9d7; } .rounded-buttons .rounded-two:hover { background-color: rgba(56, 249, 215, 0.4); border-color: rgba(56, 249, 215, 0.4); } .rounded-buttons .rounded-three { overflow: hidden; line-height: 52px; background: -webkit-linear-gradient(left, #43cae9 0%, #38f9d7 50%, #43cae9 100%); background: -o-linear-gradient(left, #43cae9 0%, #38f9d7 50%, #43cae9 100%); background: linear-gradient(to right, #43cae9 0%, #38f9d7 50%, #43cae9 100%); background-size: 200% auto; color: #fff; border: 0; -webkit-transition: all 0.1s ease-out 0s; -moz-transition: all 0.1s ease-out 0s; -ms-transition: all 0.1s ease-out 0s; -o-transition: all 0.1s ease-out 0s; transition: all 0.1s ease-out 0s; } @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: #38f9d7; 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: #fff; background-color: #38f9d7; } .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: #38f9d7; border-color: #38f9d7; 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: #38f9d7; 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, #43cae9 0%, #38f9d7 50%, #43cae9 100%); background: -o-linear-gradient(left, #43cae9 0%, #38f9d7 50%, #43cae9 100%); background: linear-gradient(to right, #43cae9 0%, #38f9d7 50%, #43cae9 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; } @-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; } } /*=========================== 3.HEADER css ===========================*/ /*===== NAVBAR EIGHT =====*/ .navbar-area { background: -webkit-linear-gradient(left, #43cae9 0%, #38f9d7 100%); background: -o-linear-gradient(left, #43cae9 0%, #38f9d7 100%); background: linear-gradient(to right, #43cae9 0%, #38f9d7 100%); padding: 10px 0; position: absolute; top: 0; left: 0; width: 100%; z-index: 999; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 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-brand img { max-width: 150px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area { padding: 10px 0; } } @media (max-width: 767px) { .navbar-area { padding: 10px 0; } } .navbar-area .navbar { position: relative; padding: 0; } .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; } .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: 108%; left: 0; width: 100%; background-color: #f4f6f7; z-index: 8; padding: 10px 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); } } @media (max-width: 767px) { .navbar-area .navbar .navbar-collapse { position: absolute; top: 108%; left: 0; width: 100%; background-color: #f4f6f7; z-index: 8; padding: 10px 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); } } .navbar-area .navbar .navbar-nav { margin-right: 24px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area .navbar .navbar-nav { margin-right: 0; } } @media (max-width: 767px) { .navbar-area .navbar .navbar-nav { margin-right: 0; } } .navbar-area .navbar .navbar-nav .nav-item { position: relative; } .navbar-area .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 .navbar-nav .nav-item a { padding: 10px 0; display: block; border: 0; margin: 0; } } @media (max-width: 767px) { .navbar-area .navbar .navbar-nav .nav-item a { padding: 10px 0; display: block; border: 0; margin: 0; } } .navbar-area .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 .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::before, .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); } .navbar-area .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 .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 .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 .navbar-nav .nav-item .sub-menu li { position: relative; } .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; } .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; } .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) { .navbar-area .navbar .navbar-nav .nav-item .sub-menu li a i { display: none; } } @media (max-width: 767px) { .navbar-area .navbar .navbar-nav .nav-item .sub-menu li a i { display: none; } } .navbar-area .navbar .navbar-nav .nav-item .sub-menu li a .sub-nav-toggler i { display: inline-block; } .navbar-area .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 .navbar-nav .nav-item .sub-menu li a::before { display: none; } .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) { .navbar-area .navbar .navbar-nav .nav-item .sub-menu li .sub-menu { padding-left: 30px; } } @media (max-width: 767px) { .navbar-area .navbar .navbar-nav .nav-item .sub-menu li .sub-menu { padding-left: 30px; } } .navbar-area .navbar .navbar-nav .nav-item .sub-menu li:hover .sub-menu { opacity: 1; visibility: visible; } .navbar-area .navbar .navbar-nav .nav-item .sub-menu li:hover .sub-nav-toggler { color: #fff; } .navbar-area .navbar .navbar-nav .nav-item .sub-menu li:hover > a { color: #fff; } .navbar-area .navbar .navbar-nav .nav-item .sub-menu li:hover > a::after { opacity: 1; } .navbar-area .navbar .navbar-nav .nav-item .sub-menu li:hover > a::before { opacity: 1; } .navbar-area .navbar .navbar-nav .nav-item:hover .sub-menu { opacity: 1; visibility: visible; } .navbar-area .navbar .navbar-nav .nav-item .sub-nav-toggler { display: none; } @media only screen and (min-width: 768px) and (max-width: 991px) { .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: #fff; } } @media (max-width: 767px) { .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: #fff; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area .navbar .navbar-btn { position: absolute; right: 70px; top: 11px; } } @media (max-width: 767px) { .navbar-area .navbar .navbar-btn { position: absolute; right: 60px; top: 11px; } } .navbar-area .navbar .navbar-btn .menu-bar { font-size: 32px; position: relative; overflow: hidden; 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-area.navbar-transparent { background: transparent; } .navbar-area.navbar-transparent .navbar .navbar-toggler .toggler-icon { background-color: #fff; } .navbar-area.navbar-transparent .navbar .navbar-nav .nav-item a { color: #fff; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-transparent .navbar .navbar-nav .nav-item a { color: #121212; } } @media (max-width: 767px) { .navbar-area.navbar-transparent .navbar .navbar-nav .nav-item a { color: #121212; } } .navbar-area.navbar-transparent .navbar .navbar-nav .nav-item a::before { background-color: #38f9d7; } .navbar-area.navbar-transparent .navbar .navbar-nav .nav-item.active a, .navbar-area.navbar-transparent .navbar .navbar-nav .nav-item:hover a { color: #38f9d7; } .navbar-area.navbar-transparent .navbar .navbar-btn .menu-bar { color: #fff; } .navbar-area.navbar-transparent .navbar .navbar-btn .menu-bar:hover { color: #38f9d7; } .navbar-area.navbar-transparent.sticky { background-color: #fff; } .navbar-area.navbar-transparent.sticky .navbar .navbar-toggler .toggler-icon { background-color: #121212; } .navbar-area.navbar-transparent.sticky .navbar .navbar-nav .nav-item a { color: #121212; } .navbar-area.navbar-transparent.sticky .navbar .navbar-nav .nav-item.active a, .navbar-area.navbar-transparent.sticky .navbar .navbar-nav .nav-item:hover a { color: #38f9d7; } .navbar-area.navbar-transparent.sticky .navbar .navbar-btn .menu-bar { color: #121212; } .navbar-area.navbar-transparent.sticky .navbar .navbar-btn .menu-bar:hover { color: #38f9d7; } .navbar-area.navbar-transparent-2 { background: transparent; } .navbar-area.navbar-transparent-2 .navbar .navbar-toggler .toggler-icon { background-color: #fff; } .navbar-area.navbar-transparent-2 .navbar .navbar-nav .nav-item a { color: #121212; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-transparent-2 .navbar .navbar-nav .nav-item a { color: #121212; } } @media (max-width: 767px) { .navbar-area.navbar-transparent-2 .navbar .navbar-nav .nav-item a { color: #121212; } } .navbar-area.navbar-transparent-2 .navbar .navbar-nav .nav-item a::before { background-color: #38f9d7; } .navbar-area.navbar-transparent-2 .navbar .navbar-nav .nav-item.active a, .navbar-area.navbar-transparent-2 .navbar .navbar-nav .nav-item:hover a { color: #38f9d7; } .navbar-area.navbar-transparent-2 .navbar .navbar-btn .menu-bar { color: #fff; } .navbar-area.navbar-transparent-2 .navbar .navbar-btn .menu-bar:hover { color: #38f9d7; } .navbar-area.navbar-transparent-2.sticky { background-color: #fff; } .navbar-area.sticky { position: fixed; -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: 5px 0; } .sidebar-right { position: fixed; top: 0; right: 0; background-color: #f4f6f7; height: 100%; width: 300px; padding-top: 80px; z-index: 9999; -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-content .sidebar-logo img{width: 50%;} .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: #38f9d7; } .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: #38f9d7; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 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-right { position: fixed; background-color: rgba(0, 0, 0, 0.6); top: 0; left: 0; width: 100%; height: 100%; display: none; z-index: 999; } .overlay-right.open { display: block; } /*===== SLIDER ONE =====*/ .slider-area { padding-top: 94px; } .slider-area .bd-example .carousel .carousel-inner { background-color: #38f9d7; } .slider-area .bd-example .carousel .carousel-inner .carousel-item { height: 700px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .slider-area .bd-example .carousel .carousel-inner .carousel-item { height: 600px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider-area .bd-example .carousel .carousel-inner .carousel-item { height: 600px; } } @media (max-width: 767px) { .slider-area .bd-example .carousel .carousel-inner .carousel-item { height: 400px; } } .slider-area .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-area .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-area .bd-example .carousel .carousel-inner .carousel-item .carousel-caption .carousel-title { font-size: 24px; line-height: 32px; } } .slider-area .bd-example .carousel .carousel-inner .carousel-item .carousel-caption .carousel-btn li { display: inline-block; margin: 16px 8px 0; } @media (max-width: 767px) { .slider-area .bd-example .carousel .carousel-inner .carousel-item .carousel-caption .carousel-btn li { margin: 16px 3px 0; } } .slider-area .bd-example .carousel .carousel-inner .carousel-item .carousel-caption .carousel-btn li a.rounded-three { border: 0; } .slider-area .bd-example .carousel .carousel-inner .carousel-item .carousel-caption .carousel-btn li a.rounded-one { border-color: #fff; color: #fff; } .slider-area .bd-example .carousel .carousel-inner .carousel-item .carousel-caption .carousel-btn li a.rounded-one:hover { background-color: rgba(255, 255, 255, 0.3); } .slider-area .bd-example .carousel .carousel-control-prev, .slider-area .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: 0px; opacity: 0; 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-area .bd-example .carousel .carousel-control-prev, .slider-area .bd-example .carousel .carousel-control-next { left: 30px; font-size: 50px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider-area .bd-example .carousel .carousel-control-prev, .slider-area .bd-example .carousel .carousel-control-next { left: 30px; font-size: 50px; } } @media (max-width: 767px) { .slider-area .bd-example .carousel .carousel-control-prev, .slider-area .bd-example .carousel .carousel-control-next { left: 20px; font-size: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider-area .bd-example .carousel .carousel-control-prev, .slider-area .bd-example .carousel .carousel-control-next { font-size: 34px; } } .slider-area .bd-example .carousel .carousel-control-next { right: 0px; left: auto; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .slider-area .bd-example .carousel .carousel-control-next { right: 40px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider-area .bd-example .carousel .carousel-control-next { right: 40px; } } @media (max-width: 767px) { .slider-area .bd-example .carousel .carousel-control-next { right: 20px; } } .slider-area .bd-example .carousel .carousel-indicators { margin-bottom: 20px; } .slider-area .bd-example .carousel .carousel-indicators li { width: 8px; height: 8px; background-color: rgba(255, 255, 255, 0.3); border-radius: 50px; border: 0; } .slider-area .bd-example .carousel .carousel-indicators li.active { width: 16px; background-color: #fff; border-radius: 5px; } .slider-area .bd-example .carousel:hover .carousel-control-prev { left: 70px; opacity: 1; } .slider-area .bd-example .carousel:hover .carousel-control-next { right: 70px; opacity: 1; } .slider-3 { padding-top: 0px; } .slider-3 .bd-example .carousel .carousel-inner .carousel-item { height: 850px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider-3 .bd-example .carousel .carousel-inner .carousel-item { height: 650px; } } @media (max-width: 767px) { .slider-3 .bd-example .carousel .carousel-inner .carousel-item { height: 550px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider-3 .bd-example .carousel .carousel-inner .carousel-item { height: 650px; } } /*===== HEADER TOW =====*/ .header-hero { height: 850px; position: relative; } @media only screen and (min-width: 768px) and (max-width: 991px) { .header-hero { height: 700px; } } @media (max-width: 767px) { .header-hero { height: 650px; } } .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-hero .header-content { padding-top: 195px; position: relative; z-index: 9; } @media only screen and (min-width: 768px) and (max-width: 991px) { .header-hero .header-content { padding-top: 130px; } } @media (max-width: 767px) { .header-hero .header-content { padding-top: 120px; } } .header-hero .header-content .header-title { font-size: 44px; line-height: 55px; color: #121212; font-weight: 600; } @media (max-width: 767px) { .header-hero .header-content .header-title { font-size: 30px; line-height: 40px; } } .header-hero .header-content .text { font-size: 20px; line-height: 32px; color: #6c6c6c; margin-top: 16px; } @media (max-width: 767px) { .header-hero .header-content .text { font-size: 16px; line-height: 24px; } } .header-hero .header-content .header-btn { margin-top: 22px; } .header-hero .header-content .header-btn li { display: inline-block; margin: 10px 10px 0; } .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-hero .header-content .header-btn li a.main-btn i { margin-left: 18px; } .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); color: #38f9d7; } .header-hero .header-shape { position: absolute; bottom: 0; left: -6px; width: 102%; } .header-hero .header-shape img { width: 100%; } /*=========================== 4.ABOUT css ===========================*/ .about-area { position: relative; background-color: #f4f6f7; padding-top: 100px; padding-bottom: 100px; } .about-area .section-title .title { font-size: 44px; font-weight: 600; line-height: 55px; color: #121212; } @media (max-width: 767px) { .about-area .section-title .title { font-size: 22px; line-height: 32px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .about-area .section-title .title { font-size: 28px; line-height: 38px; } } .about-area .section-title .text { font-size: 20px; line-height: 25px; color: #121212; margin-top: 8px; } @media (max-width: 767px) { .about-area .section-title .text { font-size: 16px; } } .single-about .about-icon img { width: 120px; } @media (max-width: 767px) { .single-about .about-icon img { width: 100px; } } .single-about .about-content { padding-left: 30px; } @media (max-width: 767px) { .single-about .about-content { padding-left: 0; padding-top: 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .single-about .about-content { padding-left: 30px; padding-top: 0; } } .single-about .about-content .about-title { font-size: 20px; font-weight: 600; line-height: 25px; color: #121212; } .single-about .about-content .text { font-size: 16px; color: #121212; margin-top: 16px; } /*===== ABOUT 2 =====*/ .about-area-2 { position: relative; padding-top: 120px; padding-bottom: 120px; } .about-area-2 .about-image { position: absolute; width: 40%; height: 100%; top: 0; right: 0; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about-area-2 .about-image { width: 34%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .about-area-2 .about-image { position: relative; width: 720px; margin: 0 auto; } } @media (max-width: 767px) { .about-area-2 .about-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) { .about-area-2 .about-image { position: relative; width: 540px; margin: 0 auto; } } .about-area-2 .about-image .image { max-width: 580px; width: 100%; } @media only screen and (min-width: 768px) and (max-width: 991px) { .about-area-2 .about-image .image { margin: 0 auto; padding-top: 50px; } } @media (max-width: 767px) { .about-area-2 .about-image .image { margin: 0 auto; padding-top: 50px; } } .about-area-2 .about-image .image img { width: 100%; } .about-content-2 { position: relative; z-index: 9; } .about-content-2 .about-icon i { font-size: 64px; color: #38f9d7; } .about-content-2 .about-content { padding-left: 15px; } @media (max-width: 767px) { .about-content-2 .about-content { padding-left: 0; padding-top: 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .about-content-2 .about-content { padding-left: 15px; padding-top: 0; } } .about-content-2 .about-content .about-title { font-size: 24px; font-weight: 500; line-height: 30px; color: #121212; } .about-content-2 .about-content .text { font-size: 14px; line-height: 20px; color: #121212; margin-top: 8px; } /*===== ABOUT 3 =====*/ .about-area-3 { background-color: #f4f6f7; padding-top: 50px; padding-bottom: 100px; } .about-area-3 .image { width: 100%; } .about-area-3 .about-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) { .about-area-3 .about-content .sub-title { font-size: 20px; } } @media (max-width: 767px) { .about-area-3 .about-content .sub-title { font-size: 20px; } } .about-area-3 .about-content .about-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) { .about-area-3 .about-content .about-title { font-size: 38px; line-height: 45px; } } @media (max-width: 767px) { .about-area-3 .about-content .about-title { font-size: 32px; line-height: 35px; } } .about-area-3 .about-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) { .about-area-3 .about-content .text { font-size: 18px; } } @media (max-width: 767px) { .about-area-3 .about-content .text { font-size: 16px; line-height: 24px; } } .about-area-3.about-area-bg-3 { background-color: #fff; } /*=========================== 19.portfolio css ===========================*/ .portfolio-area { padding-top: 90px; padding-bottom: 100px; } .portfolio-menu 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; } @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: ''; bottom: 0; left: 0; width: 100%; height: 4px; background: -webkit-linear-gradient(left, #43cae9 0%, #38f9d7 100%); background: -o-linear-gradient(left, #43cae9 0%, #38f9d7 100%); background: linear-gradient(to right, #43cae9 0%, #38f9d7 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-menu ul li:hover, .portfolio-menu ul li.active { color: #38f9d7; } .portfolio-menu ul li:hover::before, .portfolio-menu ul li.active::before { opacity: 1; } .single-portfolio .portfolio-image { position: relative; overflow: hidden; border-radius: 8px; } .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(0, 0, 0, 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; } .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: #38f9d7; 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 .portfolio-text { padding-top: 16px; } .single-portfolio .portfolio-text .portfolio-title a { color: #121212; font-size: 24px; line-height: 30px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 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-portfolio .portfolio-text .portfolio-title a { font-size: 20px; } } @media (max-width: 767px) { .single-portfolio .portfolio-text .portfolio-title a { font-size: 20px; } } .single-portfolio .portfolio-text .portfolio-title a:hover { color: #38f9d7; } .single-portfolio .portfolio-text .text { color: #121212; font-size: 14px; line-height: 20px; margin-top: 8px; } .single-portfolio:hover .portfolio-overlay { opacity: 1; visibility: visible; } .portfolio-2 { background-color: #f4f6f7; } /*=========================== 25.SERVICES css ===========================*/ .services-area { background-color: #f4f6f7; padding-top: 115px; padding-bottom: 120px; } .single-services { background-color: #fff; padding: 50px 30px; 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; } .single-services .services-icon i { font-size: 34px; color: #38f9d7; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 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-services .services-content .services-title a { font-size: 18px; color: #121212; margin-top: 25px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 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-services .services-content .text { margin-top: 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; } .single-services:hover { background-color: #38f9d7; -webkit-box-shadow: 0px 5px 30px 0px rgba(254, 81, 150, 0.3); -moz-box-shadow: 0px 5px 30px 0px rgba(254, 81, 150, 0.3); box-shadow: 0px 5px 30px 0px rgba(254, 81, 150, 0.3); } .single-services:hover .services-icon i { color: #fff; } .single-services:hover .services-content .services-title a { color: #fff; } .single-services:hover .services-content .text { color: #fff; } /*=========================== 16.PRICING css ===========================*/ .pricing-area { background-color: #f4f6f7; padding-top: 90px; padding-bottom: 100px; } .pricing-2 { background-color: #fff; } .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 38px; border-radius: 8px; position: relative; overflow: hidden; background-color: #fff; } .pricing-style-one .pricing-icon img { width: 200px; } .pricing-style-one .pricing-header .sub-title { font-size: 20px; font-weight: 600; line-height: 25px; color: #121212; position: relative; margin-top: 24px; } .pricing-style-one .pricing-header .month { font-size: 20px; font-weight: 300; line-height: 25px; color: #6c6c6c; margin-top: 3px; } .pricing-style-one .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-one .pricing-header .month .price { font-size: 24px; margin-top: 32px; line-height: 30px; } } .pricing-style-one .pricing-list { margin-top: 24px; } .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: #38f9d7; margin-right: 8px; } .pricing-style-one .pricing-btn { margin-top: 31px; } .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; border-radius: 8px; position: relative; overflow: hidden; background-color: #fff; } .pricing-style-two .pricing-icon img { width: 112px; } .pricing-style-two .pricing-header { margin-top: 24px; } .pricing-style-two .pricing-header .sub-title { font-size: 20px; font-weight: 600; line-height: 25px; color: #121212; } .pricing-style-two .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-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: -10px; } .pricing-style-two .pricing-list { margin-top: 33px; } .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: #38f9d7; margin-right: 8px; } .pricing-style-two .pricing-btn { margin-top: 26px; } /*=========================== 25.ERROR css ===========================*/ .call-action-area { padding-top: 50px; padding-bottom: 100px; } .call-action-area .call-action-content .action-title { font-size: 32px; font-weight: 600; line-height: 40px; color: #121212; } @media (max-width: 767px) { .call-action-area .call-action-content .action-title { font-size: 24px; line-height: 35px; } } .call-action-area .call-action-content .text { font-size: 16px; color: #121212; line-height: 27px; margin-top: 16px; } .call-action-area .call-action-form { position: relative; } .call-action-area .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-area .call-action-form input { height: 50px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .call-action-area .call-action-form input { height: 60px; } } .call-action-area .call-action-form input::placeholder { opacity: 1; color: #a4a4a4; } .call-action-area .call-action-form input::-moz-placeholder { opacity: 1; color: #a4a4a4; } .call-action-area .call-action-form input::-moz-placeholder { opacity: 1; color: #a4a4a4; } .call-action-area .call-action-form input::-webkit-input-placeholder { opacity: 1; color: #a4a4a4; } .call-action-area .call-action-form input:focus { border-color: #38f9d7; } .call-action-area .call-action-form .action-btn { position: absolute; top: 5px; right: 5px; } @media (max-width: 767px) { .call-action-area .call-action-form .action-btn .main-btn { width: 100%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .call-action-area .call-action-form .action-btn .main-btn { width: auto; } } @media (max-width: 767px) { .call-action-area .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-area .call-action-form .action-btn { position: absolute; top: 8px; right: 8px; margin-top: 0; } } .call-action-2 { background-color: #f4f6f7; } .call-action-3 { background: -webkit-linear-gradient(left, #43cae9 0%, #38f9d7 50%, #43cae9 100%); background: -o-linear-gradient(left, #43cae9 0%, #38f9d7 50%, #43cae9 100%); background: linear-gradient(to right, #43cae9 0%, #38f9d7 50%, #43cae9 100%); } .call-action-3 .call-action-content .action-title { color: #fff; } .call-action-3 .call-action-content .text { color: #fff; } .call-action-3 .call-action-form input { color: #fff; border-color: #fff; } .call-action-3 .call-action-form input::placeholder { opacity: 1; color: #fff; } .call-action-3 .call-action-form input::-moz-placeholder { opacity: 1; color: #fff; } .call-action-3 .call-action-form input::-moz-placeholder { opacity: 1; color: #fff; } .call-action-3 .call-action-form input::-webkit-input-placeholder { opacity: 1; color: #fff; } .call-action-3 .call-action-form input:focus { border-color: #fff; } .call-action-3 .call-action-form .action-btn .main-btn { background-color: #fff; color: #38f9d7; border-color: #fff; } .call-action-3 .call-action-form .action-btn .main-btn:hover { background-color: rgba(255, 255, 255, 0.3); color: #fff; } /*=========================== 28.ERROR css ===========================*/ .testimonial-area { padding-top: 100px; padding-bottom: 70px; background-color: #f4f6f7; } .testimonial-2 { background-color: #fff; } .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); } .single-testimonial .testimonial-image img { width: 90px; border-radius: 50%; display: inline-block; } .single-testimonial .testimonial-content { padding-top: 25px; } .single-testimonial .testimonial-content .text { font-size: 16px; line-height: 24px; color: #121212; border-bottom: 1px solid #cbced1; padding-bottom: 24px; } .single-testimonial .testimonial-content .author-name { font-size: 18px; font-weight: 600; color: #121212; margin-top: 24px; } .single-testimonial .testimonial-content .sub-title { font-size: 14px; line-height: 24px; color: #a4a4a4; } .testimonial-active-2 .slick-dots, .testimonial-active .slick-dots { text-align: center; } .testimonial-active-2 .slick-dots li, .testimonial-active .slick-dots li { display: inline-block; margin: 0 3px; } .testimonial-active-2 .slick-dots li button, .testimonial-active .slick-dots li button { font-size: 0; width: 12px; height: 12px; border-radius: 50%; background-color: #cbced1; border: 0; cursor: pointer; } .testimonial-active-2 .slick-dots li.slick-active button, .testimonial-active .slick-dots li.slick-active button { background-color: #38f9d7; } .single-testimonial-4 { border: 2px solid #cbced1; padding: 25px 30px; border-radius: 8px; background-color: #fff; } .single-testimonial-4 .testimonial-author .author-image img { width: 80px; border-radius: 50%; } .single-testimonial-4 .testimonial-author .author-name { padding-left: 20px; } @media (max-width: 767px) { .single-testimonial-4 .testimonial-author .author-name { padding-left: 0; padding-top: 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .single-testimonial-4 .testimonial-author .author-name { padding-left: 20px; padding-top: 0; } } .single-testimonial-4 .testimonial-author .author-name .name { font-size: 18px; font-weight: 600; line-height: 24px; color: #121212; } .single-testimonial-4 .testimonial-author .author-name .sub-title { font-size: 14px; line-height: 24px; color: #a4a4a4; } .single-testimonial-4 .testimonial-text { margin-top: 25px; } .single-testimonial-4 .testimonial-text .text { font-size: 14px; line-height: 24px; color: #121212; } .testimonial-active-4 .slick-dots { text-align: center; margin-top: 25px; } .testimonial-active-4 .slick-dots li { display: inline-block; margin: 0 3px; } .testimonial-active-4 .slick-dots li button { font-size: 0; width: 12px; height: 12px; border-radius: 50%; background-color: #cbced1; border: 0; cursor: pointer; } .testimonial-active-4 .slick-dots li.slick-active button { background-color: #38f9d7; } /*=========================== 25.CLIENT css ===========================*/ /*===== Client Logo Two =====*/ .client-logo-area { padding-top: 80px; padding-bottom: 80px; } .client-logo-2 { background-color: #f4f6f7; } /*=========================== 21.BLOG css ===========================*/ .blog-area { padding-top: 115px; padding-bottom: 120px; } .single-blog .blog-image img { width: 100%; border-radius: 8px; } .single-blog .blog-content { padding-top: 16px; } .single-blog .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) { .single-blog .blog-content .blog-title a { font-size: 18px; } } @media (max-width: 767px) { .single-blog .blog-content .blog-title a { font-size: 18px; } } .single-blog .blog-content .blog-title a:hover { color: #38f9d7; } .single-blog .blog-content span { font-size: 14px; line-height: 20px; color: #6c6c6c; margin-top: 8px; margin-right: 10px; } .single-blog .blog-content .text { font-size: 14px; line-height: 20px; color: #121212; margin-top: 16px; } .single-blog .blog-content .more { text-transform: uppercase; font-size: 16px; font-weight: 700; color: #38f9d7; margin-top: 29px; } /*=========================== 20.CONTACT css ===========================*/ .contact-area { padding-top: 95px; padding-bottom: 100px; background-color: #f4f6f7; } .form-message.error, .form-message.success { font-size: 16px; color: #121212; padding: 10px 15px; margin-top: 15px; background-color: #e9ecef; } .form-message.error { color: #fc3832; } .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: #38f9d7; } .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 .contact-title { font-size: 24px; font-weight: 600; color: #121212; } .contact-two .text { font-size: 16px; line-height: 24px; margin-top: 16px; 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-map .gmap_canvas iframe { width: 100%; height: 400px; } .form-group { margin-bottom: 0; } .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 #a4a4a4; padding-left: 44px; padding-right: 12px; position: relative; font-size: 16px; color: #6c6c6c; } .form-input .input-items input:focus, .form-input .input-items textarea:focus { border-color: #38f9d7; } .form-input .input-items input::placeholder, .form-input .input-items textarea::placeholder { color: #6c6c6c; opacity: 1; } .form-input .input-items input::-moz-placeholder, .form-input .input-items textarea::-moz-placeholder { color: #6c6c6c; opacity: 1; } .form-input .input-items input::-moz-placeholder, .form-input .input-items textarea::-moz-placeholder { color: #6c6c6c; opacity: 1; } .form-input .input-items input::-webkit-input-placeholder, .form-input .input-items textarea::-webkit-input-placeholder { color: #6c6c6c; opacity: 1; } .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; color: #6c6c6c; } /*=========================== 22.HEADER css ===========================*/ .footer-area .footer-widget { padding-top: 90px; padding-bottom: 120px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .footer-area .footer-widget { padding-top: 70px; padding-bottom: 100px; } } @media (max-width: 767px) { .footer-area .footer-widget { padding-top: 50px; padding-bottom: 80px; } } .footer-area .footer-widget .footer-title { font-size: 14px; font-weight: 700; line-height: 18px; color: #6c6c6c; } .footer-area .footer-widget .footer-link { margin-top: 32px; } .footer-area .footer-widget .footer-link ul { margin-top: 8px; } .footer-area .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-area .footer-widget .footer-link ul li a:hover { color: #38f9d7; } .footer-area .footer-copyright { padding-top: 13px; padding-bottom: 23px; } .footer-area .footer-copyright .copyright .text { color: #121212; } .footer-area .footer-copyright .social li { display: inline-block; margin-right: 10px; } .footer-area .footer-copyright .social li:last-child { margin-right: 0; } .footer-area .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-area .footer-copyright .social li a:hover { color: #38f9d7; } .footer-area.footer-dark { background-color: #121212; } .footer-area.footer-dark .footer-widget .footer-title { color: #fff; } .footer-area.footer-dark .footer-widget .footer-link ul li a { color: #fff; } .footer-area.footer-dark .footer-widget .footer-link ul li a:hover { color: #38f9d7; } .footer-area.footer-dark .footer-copyright .copyright .text { color: #fff; } .footer-area.footer-dark .footer-copyright .social li a { color: #fff; } .footer-area.footer-dark .footer-copyright .social li a:hover { color: #38f9d7; } /*===== BACK TO TOP =====*/ .back-to-top { font-size: 20px; color: #121212; position: fixed; right: 20px; bottom: 20px; width: 45px; height: 45px; line-height: 45px; border-radius: 50%; background-color: #38f9d7; 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: #121212; background-color: #38f9d7; } .slider-area, .bgvid, .bgvidsource { position:relative; width: 100vw; height: 100vh; displaY: flex; align-items: center; justify-content: center; overflow: hidden; opacity: 0.9; } .slider-area h1 { text-align: center; font-size: 2.8rem; font-family: 'Spinnaker', sans-serif; font-weight: bold; padding: 20px; margin: 20px; z-index: 1; opacity: 0.9; text-transform: uppercase; position: relative; top: -100px; color: white; text-shadow: 2px 2px 4px #000000; } .slider-area div { display: block !important; } .slider-area div .video-button { display: inline-block !important; text-align: center; font-size: 1rem; font-family: 'Didact Gothic', sans-serif; border: black 1px solid; padding: 20px; margin: 15px; z-index: 1; opacity: 0.9; text-transform: uppercase; } .video-container { position: absolute; top: 0; bottom: 0; width: 100%; height: 100%; overflow: hidden; } .color-overlay { position: absolute; top: 0; left: 0; background-color: lightblue; width: 100%; height: 100vh; opacity: 0.5; } .color-overlay-mobile { position: absolute; top: 0; left: 0; background-color: lightblue; width: 100%; height: 100vh; opacity: 0.7; } .video-container video { /* Make video to at least 100% wide and tall */ min-width: 100%; min-height: 100%; /* Setting width & height to auto prevents the browser from stretching or squishing the video */ width: auto; height: auto; /* Center the video */ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }