/*----------------------------------------------------------------------------------- Template Name: SmaztechXP, Template URI: smaztech.com Description: AI Automation & Intelligent Web and Mobile Solutions for Modern Businesses Version: 1.0 -----------------------------------------------------------------------------------*/ /*=========================== 01.COMMON css ===========================*/ @import url("https://fonts.googleapis.com/css?family=Poppins:400,700|Lato:300,400,700&display=swap"); body { font-family: "Lato", sans-serif; font-weight: normal; font-style: normal; color: #6A6972; 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%; } .calendly-btn{ color: #87251a; 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; padding:10px 20px; background: #ffffff ; border-radius:36px; } .sticky .calendly-btn{ color: #ffffff; background: #c64331 ; } a:focus, input:focus, textarea:focus, button:focus { text-decoration: none; outline: none; } .clear{ clear: both; } a:focus, a:hover { text-decoration: none; } i, span, a { display: inline-block; } audio, canvas, iframe, img, svg, video { vertical-align: middle; } h1, h2, h3, h4, h5, h6 { font-family: "Poppins", sans-serif; font-weight: 700; color: #2E2E2E; 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: 26px; color: #6A6972; 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; } .projects h3 { margin-bottom: 20px; } .projects a { position: relative; overflow: hidden; display: block; } .projects a .plus-icon, .projects a .overlay { visibility: hidden; opacity: 0; z-index: 20; position: absolute; } .projects a img, .projects a .overlay, .projects a .plus-icon, .projects a:hover .overlay, .projects a:hover .plus-icon, .projects a .overlay-content { -webkit-transition: all 0.32s; transition: all 0.32s; } .projects a .overlay { position: absolute; top: 0; width: 100%; height: 100%; display: block; } .projects a:after, .projects a .overlay:after { position: absolute; content: ""; display: inline-block; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; } .projects a .overlay:after { background-color: #666; opacity: 0.9; } .projects a:hover .overlay { visibility: visible; opacity: 1; } .projects a img { -webkit-backface-visibility: hidden; backface-visibility: hidden; } .projects a.unclickable:hover img, .projects a img { /* -webkit-transform: translateX(-4%) scale(1.08); */ /* transform: translateX(-4%) scale(1.08); */ } .projects a:hover img { -webkit-transform: translateX(4%) scale(1.08); transform: translateX(4%) scale(1.08); } .projects a:hover:before { opacity: 1; } .projects a:after { /*background-color: #222;*/ opacity: 0.1; } .projects.basic-filter a.unclickable { cursor: default; } .projects.basic-filter a:before { content: ""; position: absolute; top: 0; width: 100%; height: 100%; display: block; background-color: #f8f8f8; z-index: 20; opacity: 0; -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .projects.basic-filter a:hover:before { opacity: 0; } .projects.basic-filter a.unclickable:before, .projects.basic-filter a.unclickable:hover:before { opacity: 0.7; z-index: 999; } .projects a img { opacity: 0.98; -webkit-opacity: 1; z-index: 10; position: relative; width: 100%; zoom: 1; } .projects.basic-filter a.unclickable:hover .plus-icon, .projects.basic-filter a.unclickable:hover .overlay { visibility: hidden; opacity: 0; } .projects.basic-filter a.unclickable img { -webkit-filter: grayscale(50%); filter: grayscale(50%); } .clickable .grid-item-image { transition: all 0.25s; } .unclickable .grid-item-image { filter: grayscale(100%); opacity: 0.3; transition: all 0.25s; } body .projects.style-4 .unclickable a .overlay-content:after { background-color: #242424; } .projects.style-4 .unclickable a:hover img { -webkit-transform: translate(0, 4%) scale(1.08); transform: translate(0, 4%) scale(1.08); } .projects a .plus-icon { bottom: 0; left: 0; z-index: 99; background-color: #282828; color: #fff; width: 45px; height: 45px; -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); text-align: center; display: none; } .projects a:hover .plus-icon { visibility: visible; opacity: 1; -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } .projects a .plus-icon:before { content: "\f067"; font-family: "FontAwesome"; color: #fff; font-size: 16px; line-height: 45px; } .projects a .overlay-content { text-align: center; top: 50%; position: relative; left: 0; right: 0; color: #fff; -ms-transform: translateY(-25%); -webkit-transform: translateY(-25%); transform: translateY(-25%); opacity: 0; z-index: 99; padding: 0 30px; } .projects a:hover .overlay-content { -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); -moz-transform: translateY(-50%); opacity: 1; } .projects a .overlay-content h4 { color: #fff; text-transform: none; font-weight: 600; line-height: 27px; margin: 0; letter-spacing: 0px; position: relative; z-index: 11; font-size: 21px; } .projects a .overlay-content span { font-weight: 300; position: relative; z-index: 11; font-size: 18px; opacity: 0.8; } .full-width.projects a { width: 25%; display: inline-block; box-sizing: border-box; float: left; margin-bottom: 0; backface-visibility: hidden; padding:1px; } .gallery-wrap, #gallery { overflow: hidden; } #filters { margin: 1%; padding: 0; list-style: none; overflow: hidden; } /* #filters li { float: left; text-align: center; display: inline-block; } */ #filters li span { display: block; padding: 5px 20px; text-decoration: none; color: #666; cursor: pointer; text-transform: uppercase; transition: all ease-in-out 0.25s; } .hidden { display: none; } #filter { text-align: center; /* padding: 15px; */ /* border-bottom: 1px solid #333; */ } #filter button { color: #000; text-transform: uppercase; border: none; background-color: transparent; margin-right: 24px; margin-bottom: 30px; } #filter button.active { border-bottom: 2px solid #87251a; } #filter button:focus { outline: 0; } #portfolio{ padding: 110px 0px 50px 0px; } /*===== All Button Style =====*/ .main-btn { display: inline-block; font-weight: bold; text-align: center; white-space: nowrap; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; padding: 0 25px; font-size: 16px; line-height: 48px; border-radius: 35px; border: 0; color: #87251a; 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; background: -webkit-linear-gradient(left, #ffffff 0%, #eeeeee 50%, #ffffff 100%); background: -o-linear-gradient(left, #ffffff 0%, #eeeeee 50%, #ffffff 100%); background: linear-gradient(to right, #ffffff 0%, #eeeeee 50%, #ffffff 100%); background-size: 200%; } .main-btn:hover { color: #87251a; background-position: right center; } /*===== All SECTION TITLE Style =====*/ .section-title .line { background: -webkit-linear-gradient(#c64331 0%, #c64331 100%); background: -o-linear-gradient(#c64331 0%, #c64331 100%); background: linear-gradient(#c64331 0%, #c64331 100%); width: 150px; height: 5px; margin-bottom: 10px !important; } .section-title .title { font-size: 38px; font-weight: 700; line-height: 42px; } .section-title .des { font-weight: 300; padding-top: 10px; } .services-area .section-title p { font-weight: 400; padding: 5px 0px 0px 0px; font-size:16px; line-height:22px; color:#6A6972; max-width:70%; margin:0px auto; } .footer-location{ display:flex; gap:2.5rem; color:#fff; font-size: 15px; margin-top: 20px; } @media (max-width: 767px) { .section-title .title { font-size: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .section-title .title { font-size: 30px; } } .section-title .title span { font-weight: 400; display: contents; } /*===== All Section Title Style =====*/ .section-title .sub-title { font-size: 18px; font-weight: 400; color: #361CC1; text-transform: uppercase; } @media (max-width: 767px) { .section-title .sub-title { font-size: 16px; } } .section-title .title { font-size: 46px; padding-top: 10px; } .section-title .title h5{ } @media only screen and (min-width: 992px) and (max-width: 1199px) { .section-title .title { font-size: 30px; } } @media (max-width: 767px) { .section-title .title { font-size: 26px; line-height: 32px; } .header-hero-content .text { font-size: 16px !important;line-height: 24px !IMPORTANT; } } .section-title .title span { font-weight: 400; display: contents; } /*===== All Slick Slide Outline Style =====*/ .slick-slide { outline: 0; } /*===== 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: #c64331 #c64331 #E1E1E1; border-radius: 50%; border-width: 6px; } .preloader .loader .ytp-spinner-left .ytp-spinner-circle { left: 0; right: -100%; border-right-color: #E1E1E1; -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: #E1E1E1; -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); } } /*=========================== 02.HEADER css ===========================*/ /*===== NAVBAR =====*/ .navbar-area { position: absolute; top: 0; left: 0; width: 100%; 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; } .navbar-brand img{ width: 160px; } .sticky { position: fixed; z-index: 99; background-color: #fff; -webkit-box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.05); -moz-box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.05); box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.05); -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .sticky .navbar { padding: 10px 0; } .navbar { padding: 25px 0; 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; } .navbar-brand { padding: 0; } .navbar-toggler { padding: 0; } .navbar-toggler .toggler-icon { width: 30px; height: 2px; background-color: #fff; display: block; margin: 5px 0; 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-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-toggler.active .toggler-icon:nth-of-type(2) { opacity: 0; } .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-collapse { position: absolute; top: 100%; left: 0; width: 100%; background-color: #fff; z-index: 9; -webkit-box-shadow: 0px 15px 20px 0px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0px 15px 20px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 15px 20px 0px rgba(0, 0, 0, 0.1); padding: 5px 12px; } } @media (max-width: 767px) { .navbar-collapse { position: absolute; top: 100%; left: 0; width: 100%; background-color: #fff; z-index: 9; -webkit-box-shadow: 0px 15px 20px 0px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0px 15px 20px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 15px 20px 0px rgba(0, 0, 0, 0.1); padding: 15px 25px; } } .navbar-nav .nav-item { margin-right: 35px; position: relative; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .navbar-nav .nav-item { margin-right: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-nav .nav-item { margin: 0; } } @media (max-width: 767px) { .navbar-nav .nav-item { margin: 0; } } .navbar-nav .nav-item a { font-size: 15px; font-weight: 400; 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; padding: 10px 0; position: relative; font-family: "Poppins", sans-serif; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-nav .nav-item a { display: block; padding: 4px 0; color: #2E2E2E; } } @media (max-width: 767px) { .navbar-nav .nav-item a { display: block; padding: 4px 0; color: #2E2E2E; } } .navbar-nav .nav-item:hover .sub-menu { top: 100%; opacity: 1; visibility: visible; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-nav .nav-item:hover .sub-menu { top: 0; } } @media (max-width: 767px) { .navbar-nav .nav-item:hover .sub-menu { top: 0; } } .navbar-nav .nav-item .sub-menu { width: 200px; background-color: #fff; -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1); position: absolute; top: 110%; left: 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-nav .nav-item .sub-menu { position: relative; width: 100%; top: 0; display: none; opacity: 1; visibility: visible; } } @media (max-width: 767px) { .navbar-nav .nav-item .sub-menu { position: relative; width: 100%; top: 0; display: none; opacity: 1; visibility: visible; } } .navbar-nav .nav-item .sub-menu li { display: block; } .navbar-nav .nav-item .sub-menu li a { display: block; padding: 8px 20px; color: #2E2E2E; } .navbar-nav .nav-item .sub-menu li a.active, .navbar-nav .nav-item .sub-menu li a:hover { padding-left: 25px; color: #361CC1; } .navbar-nav .sub-nav-toggler { display: none; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-nav .sub-nav-toggler { display: block; position: absolute; right: 0; top: 0; background: none; color: #2E2E2E; font-size: 18px; border: 0; width: 30px; height: 30px; } } @media (max-width: 767px) { .navbar-nav .sub-nav-toggler { display: block; position: absolute; right: 0; top: 0; background: none; color: #2E2E2E; font-size: 18px; border: 0; width: 30px; height: 30px; } } .navbar-nav .sub-nav-toggler span { width: 8px; height: 8px; border-left: 1px solid #2E2E2E; border-bottom: 1px solid #2E2E2E; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); position: relative; top: -5px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-btn { position: absolute; top: 50%; right: 50px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } } @media (max-width: 767px) { .navbar-btn { position: absolute; top: 50%; right: 50px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .logged-in .navbar-btn { right: 65px; } } .navbar-btn .main-btn { height: 45px; line-height: 45px; background: -webkit-linear-gradient(left, #fe8464 0%, #fe6e9a 50%, #fe8464 100%); background: -o-linear-gradient(left, #fe8464 0%, #fe6e9a 50%, #fe8464 100%); background: linear-gradient(to right, #fe8464 0%, #fe6e9a 50%, #fe8464 100%); background-size: 200%; } .navbar-btn .main-btn:hover { color: #fff; background-position: right center; } .sticky .navbar-toggler .toggler-icon { background-color: #2E2E2E; } .sticky .navbar-nav .nav-item a { color: #2E2E2E; } .sticky .navbar-nav .nav-item.active > a, .sticky .navbar-nav .nav-item:hover > a { color: #87251a; } /*===== HEADER HERO =====*/ .header-hero { position: relative; z-index: 5; background-position: bottom center; } #particles-1 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .header-hero-content { padding-top: 180px; } @media (max-width: 767px) { .header-hero-content { padding-top: 100px; } } .header-hero-content .header-sub-title { font-size: 46px; font-weight: 700; color: #fff; } @media (max-width: 767px) { .header-hero-content .header-sub-title { font-size: 24px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .header-hero-content .header-sub-title { font-size: 30px; } } .header-hero-content .header-title { font-size: 38px; font-weight: 700; color: #fff; } @media (max-width: 767px) { .header-hero-content .header-title { font-size: 24px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .header-hero-content .header-title { font-size: 30px; } } .header-hero-content .text { color: #fff; margin-top: 30px; font-size: 20px; } .header-hero-content .main-btn { margin-top: 40px; } .header-hero-image { padding-top: 45px; } .header-hero-image img { max-width: 550px; } @media (max-width: 767px) { .header-hero-image img { max-width: 100%; } } @media (max-width: 767px) { .header-hero-image { padding-top: 30px; } } /*=========================== 03.BRAND css ===========================*/ @media (max-width: 767px) { .brand-logo { -ms-flex-wrap: wrap; flex-wrap: wrap; } } .single-logo { padding: 0 30px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .single-logo { padding: 0 15px; } } @media (max-width: 767px) { .single-logo { padding: 0 15px; } } @media (max-width: 767px) { .single-logo { width: 50%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .single-logo { width: 33.33%; } } .single-logo img { width: 100%; opacity: 0.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; } .single-logo:hover img { opacity: 1; } /*=========================== 04.SERVICES css ===========================*/ .single-services { background-color: #fff; /*-webkit-box-shadow: 0px 5px 30px 0px rgba(167, 167, 167, 0.16); -moz-box-shadow: 0px 5px 30px 0px rgba(167, 167, 167, 0.16); box-shadow: 0px 5px 30px 0px rgba(167, 167, 167, 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; padding: 20px; border: 1px solid rgba(197, 197, 197, 0.53); border-radius: 8px; min-height:320px; } @media (max-width: 767px) { .single-services { padding: 20px 20px 30px; } } .single-services .services-icon { display: inline-block; width: 65px; border-radius: 14px; height: 65px; background: rgba(198, 67, 49,0.05); position: relative; } .single-services .services-icon img { -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; } .single-services .services-icon .shape-1 { 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%); } .single-services .services-icon i { 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%); font-size: 34px; color: #c64331; } .single-services .services-content .services-title a { font-size: 18px; font-weight: 700; color: #2E2E2E; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 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-services .services-content .services-title a { font-size: 24px; } } @media (max-width: 767px) { .single-services .services-content .services-title a { font-size: 20px; } } .single-services .services-content .services-title a:hover { color: #89251b; } .single-services .services-content .text { margin-top: 15px; } @media (max-width: 767px) { .single-services .services-content .text { margin-top: 20px; } } .single-services .services-content .more { margin-top: 30px; font-size: 16px; font-weight: 400; color: #2E2E2E; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 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 .more i { margin-left: 10px; } .single-services .services-content .more:hover { color: #361CC1; } .single-services:hover { border-color: #FE7A7B; } .single-services:hover .services-icon .shape { -webkit-transform: rotate(25deg); -moz-transform: rotate(25deg); -ms-transform: rotate(25deg); -o-transform: rotate(25deg); transform: rotate(25deg); } /*=========================== 05.ABOUT css ===========================*/ .about-area { position: relative; z-index: 5; } .about-shape-1 { position: absolute; top: 0; right: 0; width: 35%; height: 100%; z-index: -1; } .about-shape-1 img { width: 100%; } @media (max-width: 767px) { .about-shape-1 { display: none; } } .about-shape-2 { position: absolute; top: 0; left: 0; width: 35%; height: 100%; z-index: -1; } .about-shape-2 img { width: 100%; } @media (max-width: 767px) { .about-shape-2 { display: none; } } .about-content { max-width: 480px; } .about-content .text { margin-top: 15px; font-size: 18px; line-height: 28px; } .about-content .main-btn { background: -webkit-linear-gradient(left, #87251a 0%, #b13728 50%, #87251a 100%); background: -o-linear-gradient(left, #87251a 0%, #b13728 50%, #87251a 100%); background: linear-gradient(to right, #87251a 0%, #b13728 50%, #87251a 100%); background-size: 200%; height: 50px; line-height: 50px; padding: 0 35px; margin-top: 40px; color:#fff; } .about-content .main-btn:hover { background-position: right center; } /*=========================== 06.VIDEO COUNTER css ===========================*/ .video-content { position: relative; padding-bottom: 30px; } .video-content .dots { position: absolute; left: -30px; bottom: 0; } .video-wrapper { margin-right: 15px; position: relative; -webkit-box-shadow: 0px 13px 46px 0px rgba(113, 113, 113, 0.33); -moz-box-shadow: 0px 13px 46px 0px rgba(113, 113, 113, 0.33); box-shadow: 0px 13px 46px 0px rgba(113, 113, 113, 0.33); border-radius: 10px; overflow: hidden; } @media (max-width: 767px) { .video-wrapper { margin-right: 0; } } .video-wrapper .video-image img { width: 100%; } .video-wrapper .video-icon { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: -webkit-linear-gradient(left, rgba(54, 28, 193, 0.2) 0%, rgba(46, 130, 239, 0.2) 100%); background: -o-linear-gradient(left, rgba(54, 28, 193, 0.2) 0%, rgba(46, 130, 239, 0.2) 100%); background: linear-gradient(to right, rgba(54, 28, 193, 0.2) 0%, rgba(46, 130, 239, 0.2) 100%); } .video-wrapper .video-icon a { width: 55px; height: 55px; line-height: 55px; text-align: center; border-radius: 50%; background-color: #fff; color: #FE8464; 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%); } .counter-wrapper { padding-left: 70px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .counter-wrapper { padding-left: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .counter-wrapper { padding-left: 0; } } @media (max-width: 767px) { .counter-wrapper { padding-left: 0; } } .counter-wrapper .counter-content .text { margin-top: 35px; } .counter-wrapper .single-counter { max-width: 155px; height: 120px; border-radius: 60px; position: relative; z-index: 5; margin-top: 60px; } @media (max-width: 767px) { .counter-wrapper .single-counter { max-width: 100px; height: 80px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .counter-wrapper .single-counter { max-width: 155px; height: 120px; } } .counter-wrapper .single-counter::before { position: absolute; content: ''; width: 155px; height: 120px; border-radius: 60px; top: 0; left: 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); z-index: -1; } @media (max-width: 767px) { .counter-wrapper .single-counter::before { max-width: 100px; height: 80px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .counter-wrapper .single-counter::before { max-width: 155px; height: 120px; } } .counter-wrapper .single-counter.counter-color-1::before { background: -webkit-linear-gradient(#33c8c1 0%, #119bd2 100%); background: -o-linear-gradient(#33c8c1 0%, #119bd2 100%); background: linear-gradient(#33c8c1 0%, #119bd2 100%); } .counter-wrapper .single-counter.counter-color-2::before { background: -webkit-linear-gradient(#fe8464 0%, #fe6e9a 100%); background: -o-linear-gradient(#fe8464 0%, #fe6e9a 100%); background: linear-gradient(#fe8464 0%, #fe6e9a 100%); } .counter-wrapper .single-counter.counter-color-3::before { background: -webkit-linear-gradient(#361cc1 0%, #2e82ef 100%); background: -o-linear-gradient(#361cc1 0%, #2e82ef 100%); background: linear-gradient(#361cc1 0%, #2e82ef 100%); } .counter-wrapper .single-counter .count { font-size: 22px; font-weight: 700; color: #fff; } @media (max-width: 767px) { .counter-wrapper .single-counter .count { font-size: 18px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .counter-wrapper .single-counter .count { font-size: 22px; } } .counter-wrapper .single-counter .text { font-size: 16px; color: #fff; } @media (max-width: 767px) { .counter-wrapper .single-counter .text { font-size: 14px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .counter-wrapper .single-counter .text { font-size: 16px; } } /*=========================== 07.TEAM css ===========================*/ .single-team { -webkit-box-shadow: 0px 0px 30px 0px rgba(167, 167, 167, 0.16); -moz-box-shadow: 0px 0px 30px 0px rgba(167, 167, 167, 0.16); box-shadow: 0px 0px 30px 0px rgba(167, 167, 167, 0.16); overflow: hidden; border-radius: 10px; } .single-team .team-image { position: relative; } .single-team .team-image img { width: 100%; } .single-team .team-image .social { position: absolute; left: 0; right: 0; bottom: 25px; } .single-team .team-image .social ul { background-color: rgba(255, 255, 255, 0.23); display: inline-block; border-radius: 50px; padding: 0 13px; position: relative; z-index: 5; overflow: hidden; } .single-team .team-image .social ul::before { position: absolute; content: ''; width: 100%; height: 100%; z-index: -1; top: 0; left: 0; background: -webkit-linear-gradient(#fe8464 0%, #fe6e9a 100%); background: -o-linear-gradient(#fe8464 0%, #fe6e9a 100%); background: linear-gradient(#fe8464 0%, #fe6e9a 100%); 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; } .single-team .team-image .social ul li { display: inline-block; } .single-team .team-image .social ul li a { padding: 15px 13px; color: #fff; } .single-team .team-content { padding: 30px; } .single-team .team-content .holder-name a { font-size: 20px; font-weight: 700; color: #2E2E2E; } .single-team .team-content .text { margin-top: 5px; } .single-team:hover .team-image .social ul::before { opacity: 1; visibility: visible; } /*=========================== 08.TESTIMONIAL css ===========================*/ .single-testimonial { background-color: #fff; /*-webkit-box-shadow: 0px 0px 30px 0px rgba(167, 167, 167, 0.16); -moz-box-shadow: 0px 0px 30px 0px rgba(167, 167, 167, 0.16); box-shadow: 0px 0px 30px 0px rgba(167, 167, 167, 0.16);*/ overflow: hidden; border-radius: 10px; padding: 25px 30px 35px; border-radius: 10px; border: 2px solid transparent; margin: 30px 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 (max-width: 767px) { .single-testimonial { padding: 20px 20px 5px; } } .testimonial-active{ max-width: 800px; margin:0 auto; } .single-testimonial .testimonial-review .quota i { font-size: 36px; color: #bbb; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 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-testimonial .testimonial-review .star ul li { display: inline-block; font-size: 16px; color: #FE806D; } .single-testimonial .testimonial-text { margin-top: 25px; /*min-height: 390px;*/ } .single-testimonial .testimonial-text a { color:#87251a; } .single-testimonial .testimonial-author { margin-top: 30px; } .single-testimonial .testimonial-author .author-image { position: relative; } .single-testimonial .testimonial-author .author-image .author { position: absolute; top: 17px; left: 17px; width: 80px; height: 80px; } .single-testimonial .testimonial-author .author-content .holder-name { font-size: 18px; font-weight: 700; color: #2E2E2E; } .single-testimonial .testimonial-author .author-content .text { font-size: 15px; } .single-testimonial:hover { border-color: #FE7A7B; } .single-testimonial:hover .testimonial-review .quota i { color: #FE7A7B; } .slick-center .single-testimonial { border-color: #FE7A7B; } .slick-center .single-testimonial .testimonial-review .quota i { color: #FE7A7B; } .testimonial-active .slick-dots { margin: 0 auto; } .testimonial-active .slick-dots li { display: inline-block; margin: 0 4px; } .testimonial-active .slick-dots li button { width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(180deg, #fe8464 0%, #fe6e9a 100%); border: 0; font-size: 0; opacity: 0.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; } .testimonial-active .slick-dots li.slick-active button { opacity: 1; width: 15px; height: 15px; } /*=========================== 09.BLOG css ===========================*/ .single-blog .blog-image img { border-radius: 10px; width: 100%; } .single-blog .blog-content { padding-top: 25px; } .single-blog .blog-content .meta li { font-size: 16px; color: #6A6972; display: inline-block; margin-left: 50px; } .single-blog .blog-content .meta li:first-child { margin-left: 0; } .single-blog .blog-content .meta li a { color: #6A6972; } .single-blog .blog-content .text { font-size: 23px; font-weight: 400; line-height: 30px; color: #2E2E2E; margin-top: 15px; } @media (max-width: 767px) { .single-blog .blog-content .text { font-size: 20px; line-height: 30px; } } .single-blog .blog-content .more { font-size: 16px; color: #FE7E71; margin-top: 30px; } .single-blog .blog-content .more i { margin-left: 5px; } /*=========================== 10.SUBSCRIBE css ===========================*/ .subscribe-area { padding: 40px 50px 90px; -webkit-box-shadow: 0px 0px 18px 0px rgba(50, 77, 215, 0.14); -moz-box-shadow: 0px 0px 18px 0px rgba(50, 77, 215, 0.14); box-shadow: 0px 0px 18px 0px rgba(50, 77, 215, 0.14); border-radius: 10px; background-color: #fff; } @media (max-width: 767px) { .subscribe-area { padding: 10px 30px 60px; } } .subscribe-content .subscribe-title { font-size: 35px; font-weight: 700; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .subscribe-content .subscribe-title { font-size: 30px; } } @media (max-width: 767px) { .subscribe-content .subscribe-title { font-size: 24px; } } .subscribe-content .subscribe-title span { font-weight: 400; } .subscribe-form { position: relative; } .subscribe-form input { border: 2px solid #E1E1E1; height: 65px; padding: 0 30px; border-radius: 5px; width: 100%; color: #2E2E2E; } .subscribe-form input::placeholder { opacity: 1; color: #B9B9B9; } .subscribe-form input::-moz-placeholder { opacity: 1; color: #B9B9B9; } .subscribe-form input::-moz-placeholder { opacity: 1; color: #B9B9B9; } .subscribe-form input::-webkit-input-placeholder { opacity: 1; color: #B9B9B9; } .subscribe-form input:focus { border-color: #361CC1; } .subscribe-form button { position: absolute; top: 0; right: 0; border-radius: 0; border-top-right-radius: 5px; border-bottom-right-radius: 5px; height: 65px; line-height: 65px; background: -webkit-linear-gradient(left, #fe8464 0%, #fe6e9a 50%, #fe8464 100%); background: -o-linear-gradient(left, #fe8464 0%, #fe6e9a 50%, #fe8464 100%); background: linear-gradient(to right, #fe8464 0%, #fe6e9a 50%, #fe8464 100%); background-size: 200%; } @media (max-width: 767px) { .subscribe-form button { position: relative; width: 100%; margin-top: 10px; border-radius: 5px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .subscribe-form button { position: absolute; width: auto; margin-top: 0; border-radius: 0; border-top-right-radius: 5px; border-bottom-right-radius: 5px; } } .subscribe-form button:hover { color: #fff; background-position: right center; } /*=========================== 11.FOOTER css ===========================*/ .footer-area { background-position: top center; position: relative; background: #c64331; z-index: 5; } .footer-area::before { position: absolute; content: ''; bottom: 0; left: 0; height: 100%; width: 100%; background-image: url(../images/footer-bg.png); background-position: top center; z-index: -1; background-size: cover; display:none; } @media only screen and (min-width: 1921px) { .footer-area::before { height: 1120px; } } #particles-2 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .footer-widget { /*padding-top: 270px;*/ padding-top: 40px; padding-bottom:50px; } .footer-about .logo img { width: 160px; } .footer-about .text { color: #fff; line-height: 30px; margin-top: 30px; } .footer-about .social { margin-top: 40px; } .footer-about .social li { display: inline-block; margin-right: 30px; } .footer-about .social li a { font-size: 22px; 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; } .footer-about .social li a:hover { color: #FE8464; } .footer-title .title { font-size: 24px; font-weight: 700; color: #fff; } .link-wrapper { padding: 0 35px; } @media (max-width: 992px) { .full-width.projects a { width: 33.33%; } } @media (max-width: 767px) { .full-width.projects a { width: 50%; } .link-wrapper { padding: 0; padding-right: 50px; } } .link-wrapper .link { padding-top: 20px; } .link-wrapper .link li { margin-top: 20px; } .link-wrapper .link li a { font-size: 16px; 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; } .link-wrapper .link li a:hover { color: #FE8464; } .footer-contact .contact { padding-top: 20px; } .footer-contact .contact li { margin-top: 20px; font-size: 16px; color: #fff; } .footer-contact .contact a, .footer-contact .contact li a{ color:#fff; } .footer-copyright { border-top: 1px solid rgba(255, 255, 255, 0.3); padding-top: 15px; padding-bottom: 30px; } .copyright-content { padding-top: 15px; text-align: center; } .copyright-content p { color: #fff; } .copyright-content a { font-size: 16px; 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; } .copyright-content a:hover { color: #FE8464; } /*===== BACK TO TOP =====*/ .back-to-top { font-size: 20px; color: #fff; position: fixed; right: 20px; bottom: 20px; width: 40px; height: 40px; line-height: 40px; border-radius: 5px; background: -webkit-linear-gradient(left, #c94739 0%, #c94739 100%); background: -o-linear-gradient(left, #c94739 0%, #c94739 100%); background: linear-gradient(to right, #c94739 0%, #c94739 100%); 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; } .pricing-table{ display: flex; flex-wrap: wrap; justify-content: space-around; width: min(1600px, 100%); margin: auto; } .pricing-card{ flex: 1; max-width: 300px; background-color: #fff; margin: 20px 10px; text-align: center; cursor: pointer; overflow: hidden; color: #2d2d2d; transition: .3s linear; border: #f2f2f2 solid 1px; padding: 15px; border-radius: 10px; } .pricing-card-header{ background-color: #0fbcf9; display: inline-block; color: #fff; padding: 12px 30px; border-radius: 0 0 160px 160px; font-size: 16px; text-transform: uppercase; font-weight: 600; transition: .4s linear; } .pricing-card:hover .pricing-card-header{ box-shadow: 0 0 0 10em #0fbcf9; } .price{ font-size: 70px; color: #0fbcf9; margin: 40px 0; transition: .2s linear; } .price sup, .price span{ font-size: 22px; font-weight: 700; } .pricing-card:hover .price{ color: white; } .pricing-card ul{ min-height: 630px; } .pricing-card li{ font-size: 14px; padding: 10px 0; line-height: 19px; border-bottom: #f2f2f2 solid 1px; } /*.pricing-card .des-text{ // lines background-color: #000; content: ""; display: inline-block; height: 1px; padding: 0%; }*/ .order-btn{ display: inline-block; margin-bottom: 20px; margin-top: 20px; border: 2px solid #0fbcf9; color: #0fbcf9; padding: 18px 40px; border-radius: 8px; text-transform: uppercase; font-weight: 500; transition: .3s linear; } .order-btn:hover{ background-color: #0fbcf9; color: #fff; } @media screen and (max-width:1100px){ .pricing-card{ flex: 50%; } } .box{ margin-top: 50px; } .form-control{ width: 350px; border:none; outline: none; border-bottom: 1px solid white; font-size: 16px; margin-bottom: 10px; } input{ height: 45px; } form .form-control-btn { background-color: #fff; border-color: transparent; color: #87251a; font-size: 14px; font-weight:bold; letter-spacing: 0px; transition: 0.4s ease; border-radius:35px; padding:10px 15px; margin-top:7px; text-transform:uppercase; } form .submit:hover{ background-color: #f44336; } .img-box-inner{ background: #fff; padding: 5px; border: #e8e6e6 solid 1px; -webkit-box-shadow: 0px 0px 22px -6px rgb(0 0 0 / 25%); -moz-box-shadow: 0px 0px 22px -6px rgba(0,0,0,0.25); box-shadow: 0px 0px 22px -6px rgb(0 0 0 / 25%); min-height: 00px; } .img-box{ margin-bottom: -27px; } .logout-btn{ position:fixed; right:20px; } .logout-btn img{ width: 28px; filter:invert(); } .sticky .logout-btn img{ filter:invert(0); } @media only screen and (max-width: 992px){ .pricing-card ul { min-height: 500px; } } @media only screen and (max-width: 650px){ .logout-btn { position: fixed; right: 8px; top: 26px; } .sticky .logout-btn { top: 12px; } .logout-btn img{ width: 22px; } .logged-in .navbar-toggler{ margin-right:18px; } .calendly-btn { padding: 5px 15px; font-size: 13px; } .footer-widget .calendly-btn { margin-top:25px !important; } .mt-50.footer-contact { margin-top: 0px !important; } .footer-location{ flex-direction: column; gap:1rem; } .navbar-brand img { width: 100px; } .pricing-card ul{ min-height: inherit; } .single-services { min-height: inherit; } .single-testimonial { padding: 20px 20px 35px; } .single-testimonial .testimonial-text { margin-top: 25px; min-height: 100%; } .navbar-nav .nav-item a { padding: 10px 0; } }