/* ===================================== Template Name: Appmela Author Name: Themelamp Author URL: http://themelamp.com Description: Appmela is a modern & powerfull html5 template for any app landing page showcase. Version: 1.0 ========================================*/ /*====================================== [ CSS Table of contents ] 01. Global CSS 02. Header CSS + Logo + Main Menu + Button 03. Hero Area CSS 04. Countdown CSS 05. App Features CSS 06. video Showcase CSS 07. App Screenshot CSS 08. Testimonials CSS 09. News/Blog CSS 10. App Available CSS 11. Brands CSS 12. Breadcrumb CSS 13. Blog CSS 14. Footer CSS ========================================*/ /*=========================== 01. Global CSS =============================*/ * { margin: 0; padding: 0; } html,body { height: 100%; margin: 0; } body { font-family: 'Poppins', sans-serif; position:relative; font-size: 14px; font-weight: 400; line-height:25px; color: #2E303C; } h1,h2,h3,h4,h5,h6{ margin:0; font-weight:700; } p { margin: 0; color:#555; } a,button{ cursor:pointer; } ul { list-style: none; margin-bottom: 0; } a,button{ -webkit-transition: all 0.3s linear; -moz-transition: all 0.3 linear; transition: all 0.3 linear; font-weight:500; } button,a, a:hover, a:focus, a:active { text-decoration: none; border: none; outline: none; } img { max-width: 100%; } select:focus, select:active { box-shadow: 0; border: 0; outline: 0 } #scrollUp { border-radius: 100%; bottom: 30px; color: #ffffff; height: 45px; font-size: 22px; line-height: 3; right: 30px; line-height: 45px; text-decoration: none; text-align: center; width: 45px; background: #f26798; background: -webkit-linear-gradient(to right, #f26798 0%, #7873f5 100%); background: linear-gradient(to right, #f26798 0%, #7873f5 100%); -webkit-transition: all 0.3s linear; -moz-transition: all 0.3 linear; transition: all 0.3 linear; } #scrollUp:hover{ background: linear-gradient(to bottom, #ccc 0%, #7873f5 100%); transition:all 0.4s ease; } .overlay{ position:relative; } .overlay:before{ position:absolute; left:0; top:0; width:100%; height:100%; background:#2E303C; opacity:0.9; content:""; -webkit-transition:all 0.2s linear; -moz-transition:all 0.2s linear; transition:all 0.2s linear; } .table { display: table; width: 100%; height: 100%; } .table-cell { display: table-cell; vertical-align: middle; } .nav > li > a:focus, .nav > li > a:hover { background-color: transparent; text-decoration: none; } .mobile-menu{ display:none; } .navbar { margin-bottom: 0; border: 0; } .section { padding: 100px 0; position: relative; } .section-title { margin-bottom:30px; } .section-title h2 { font-size: 28px; margin-bottom: 20px; padding-bottom: 20px; position: relative; text-transform: capitalize; } .section-title h2::before { position: absolute; width: 70px; height: 4px; content: ""; left: 0; bottom: -2px; background: #f26798; background: -webkit-linear-gradient(to right, #f26798 0%, #7873f5 100%); background: linear-gradient(to right, #f26798 0%, #7873f5 100%); } /* Text Left */ .section-title.text-center h2:before{ left: 50%; margin-left: -35px; } .button .btn { color: #fff; padding: 15px 40px; display: inline-block; text-align: center; font-weight: 500; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3 linear; transition: all 0.3 linear; border-radius: 3px; border: none; font-size: 14px; text-transform: capitalize; position: relative; background: #f26798; background: -webkit-linear-gradient(to right, #f26798 0%, #7873f5 100%); background: linear-gradient(to right, #f26798 0%, #7873f5 100%); -webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3); box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3); } .btn:not([disabled]):not(.disabled).active, .btn:not([disabled]):not(.disabled):active{ background:linear-gradient(to right, #f26798 0%, #7873f5 100%); } .button .btn:hover{ box-shadow:none; } .button .btn.bordered{ background: transparent; z-index: 50; color: #333; } .button .btn.bordered:hover{ color:#fff; } .button .btn.bordered::before { background: #f26798; background: -webkit-linear-gradient(to right, #f26798 0%, #7873f5 100%); background: linear-gradient(to right, #f26798 0%, #7873f5 100%); border-radius: 3px; content: ""; height: calc(100% + 4px); left: -2px; position: absolute; top: -2px; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3 linear; transition: all 0.3 linear; width: calc(100% + 4px); z-index: -2; } .button .btn.bordered:after { background: #fff none repeat scroll 0 0; border-radius: 3px; content: ""; height: 100%; left: 0; position: absolute; top: 0; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3 linear; transition: all 0.3 linear; width: 100%; z-index: -1; } .button .btn.bordered:hover:after{ opacity:0; } .button .btn.radius{ border-radius:50px; } .button .btn.radius.bordered:before, .button .btn.radius.bordered:after{ border-radius:100px; } select{ -webkit-appearance: none; -moz-appearance: none; appearance: none; } /* Remove Chrome Input Field's Unwanted Yellow Background Color */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0px 1000px white inset !important; } /*Remove bootstrap tab css*/ .nav-tabs > li > a { border: 0 } .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover { border: 0; outline: 0 } .nav-tabs { border: 0 } .nav-tabs > li > a:hover { border: 0 } /* Form Control */ .form-control:focus { border-color: #ccc; box-shadow: 0 0 0 ; outline: 0 none; } /* Preloader */ .preloader { height: 100%; left: 0; position: fixed; top: 0; width: 100%; background: #f26798; background: -webkit-linear-gradient(to right, #f26798 0%, #7873f5 100%); background: linear-gradient(to right, #f26798 0%, #7873f5 100%); z-index: 9999999; } .preloader .spinner { width: 60px; height: 60px; position: absolute; top: 50%; left: 50%; margin-top: -30px; margin-left: -30px; background-color: #fff; border-radius: 100%; -webkit-animation: sk-scaleout 1.0s infinite ease-in-out; animation: sk-scaleout 1.0s infinite ease-in-out; } @-webkit-keyframes sk-scaleout { 0% { -webkit-transform: scale(0); } 100% { -webkit-transform: scale(1); opacity: 0; } } @keyframes sk-scaleout { 0% { -webkit-transform: scale(0); transform: scale(0); } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; } } /*=========================== End Global CSS =============================*/ /*=========================== 02. Header CSS =============================*/ .header { position: absolute; width: 100%; z-index: 999; top: 0; padding: 10px 0; background: #fff; -webkit-box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.22); -moz-box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.22); box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.22); } /* Logo */ .header .logo { margin-top: 16px; display: inline-block; } .header .logo .text-logo { text-align: center; } .header .text-logo a { color: #fff; text-transform: capitalize; font-size: 24px; font-weight: 700; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent; display: block; position:relative; z-index:1; } .header .text-logo a::before { position: absolute; left: -4px; top: 12px; width: 12px; height: 12px; line-height: 12px; content: ""; border-radius: 100%; opacity: 0.4; z-index: -1; } .header .text-logo a span{ font-weight:500; } /* Main Menu */ .header .main-menu { position: relative; float: right; } .header .navbar { float: left; padding: 0; margin-right: 120px; } .header .nav { display: block; } .header .nav li { position: relative; margin-right: 20px; display: inline-block; } .header .nav li:last-child{ margin:0; } .header .nav li a { text-transform: capitalize; color: #666; font-size: 14px; position: relative; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; display: block; background: transparent; padding: 15px 0; } .header .nav li a i { text-align: center; display: inline-block; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; opacity: 0; visibility: hidden; position: absolute; top: 0; left: 50%; margin-left: -7px; } .header .nav li.active a i, .header .nav li:hover a i{ opacity:1; visibility:visible; } /* Dropdown Menu */ .header .nav .dropdown { position: absolute; left: 0; width: 220px; z-index: 150; background: #fff; top: 55px; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); transform: translateY(30px); -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; opacity: 0; visibility: hidden; padding: 10px 0; -webkit-box-shadow: 0 10px 32px 1px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 10px 32px 1px rgba(0, 0, 0, 0.3); box-shadow: 0 10px 32px 1px rgba(0, 0, 0, 0.3); border-top: 2px solid; } .header .nav li:hover .dropdown{ -webkit-transform: translateY(0px); -moz-transform: translateY(0px); transform: translateY(0px); opacity:1; visibility:visible; } .header .nav .dropdown li { display: block; width: 100%; margin: 0; float: none; } .header .nav li .dropdown li a { color: #555; padding: 5px 15px; font-weight: 400; text-transform: capitalize; position: relative; } .header .nav li .dropdown a::before{ display:none; } .header .nav li .dropdown li:hover a { color: #fff; } /* Download Button */ .header .download { right: 0; top: 14px; position: absolute; } .header .download a { border-radius: 100%; width: 30px; height: 30px; line-height: 30px; padding: 0; color: #fff; font-size: 14px; border: 1px solid transparent; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; transition:all 0.3s ease; } .header .download a:hover{ border-color:#bbb; } .header .download a.android{ background:#65AE43; } .header .download a.android:hover{ background:transparent; color:#65AE43; } .header .download a.windows{ background:#259AD2; } .header .download a.windows:hover{ background:transparent; color:#259AD2; } .header .download a.apple { background: #bbb; } .header .download a.apple:hover{ background:transparent; color:#bbb; } /* Style 2 */ .header.style2 { box-shadow: none; background: transparent; } .header.style2 .text-logo a { color: #fff; background:none; -webkit-background-clip: initial !important; -webkit-text-fill-color: initial; } .header.style2 .text-logo a::before{ background:#fff; } .header.style2 .nav { display: block; margin-right: 30px; } .header.style2 .nav li a { color: #eee; } .header.style2 .nav li.active a, .header.style2 .nav li:hover a{ color:#fff; } .header.style2 .nav li a:before{ display:none; } .header.style2 .nav li .dropdown li a { background: transparent; color: #777; } .header.style2 .nav li .dropdown li a:hover{ color:#fff; } .header.style2 .button { position: absolute; top: 9px; right: 0; } .header.style2 .button .btn { background: transparent; border: 2px solid #fff; color: #fff; padding: 7px 18px; font-size: 13px; } .header.style2 .button .btn i{ margin-right:5px; } .header.style2 .button .btn:hover{ background:#fff; } /* Header Style 3 */ .header.style3 .nav { display: block; margin-right: 40px; } .header.style3 .social { position: absolute; right: 0; top: 14px; padding-left: 20px; border-left: 1px solid #ebebeb; } .header.style3 .social ul {} .header.style3 .social ul li { display: inline-block; } .header.style3 .social ul li a { color: #666; border: 1px solid #ebebeb; width: 26px; height: 26px; line-height: 26px; display: block; text-align: center; border-radius: 100%; } .header.style3 .social ul li:hover a{ color:#fff; border-color:transparent; } /* Header Sticky */ .header.sticky.active { position: fixed; padding: 5px 0; width: 100%; -webkit-transition: all 0.3s ease -moz-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.22); -moz-box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.22); box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.22); } .header.sticky.active .text-logo a { -webkit-text-fill-color: initial; color: #fff !important; } .header.sticky.active .text-logo a::before{ background:#fff; } .header.sticky.active .nav li a { color: #eee; background: initial; -webkit-text-fill-color: initial; } .header.sticky.active .nav li.active a, .header.sticky.active .nav li:hover a{ color:#fff; } .header.sticky.active .nav li .dropdown li a { color: #555; } .header.sticky.active .nav li .dropdown li:hover a{ color:#fff; } .header.sticky.active .nav li .dropdown { top: 60px; background: #fff; } .header.sticky.active .download a{ border-color:#fff; color:#fff; background:transparent; } .header.sticky.active .download a:hover{ background:#fff; } .header.sticky.active .download a.android:hover{ color:#65AE43; } .header.sticky.active .download a.windows:hover{ color:#259AD2; } .header.sticky.active .download a.apple:hover{ color:#bbb; } .header.style3.sticky.active .social ul li a{ color:#fff; } .header.style3.sticky.active .social ul li:hover a{ background:#fff; } /*=========================== End Header CSS =============================*/ /*=========================== 03. App Hero CSS =============================*/ .app-hero { position: relative; height: 680px; background: #fff; overflow: hidden; } .app-hero::before, .app-hero::after { -webkit-clip-path: circle(50% at 89.53% 0.85%); clip-path: circle(50% at 89.53% 0.85%); content: ""; top: 0; left: 0; position: absolute; width: 100%; height: 100%; } .app-hero::before { opacity: 0.95; z-index: 5; background: #f26798; background: -webkit-linear-gradient(to right, #f26798 0%, #6c5ce7 100%); background: linear-gradient(to right, #f26798 0%, #6c5ce7 100%); } .app-hero::after { background-image: url('images/promo-video.jpg'); background-size: cover; background-position: center center; } .app-hero .app-hero-block { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; background: transparent; height: 680px; position: relative; z-index: 10; } .app-hero .app-hero-content{ margin-top:75px; } .app-hero .app-hero-content h1 { font-size: 42px; line-height: 52px; text-transform: capitalize; color: #2E303C; } .app-hero .app-hero-content h1:before{ position:absolute; left:0; bottom:0; } .app-hero .app-hero-content h1 span { font-weight: 400; display: block; font-size: 20px; color: #555; padding: 0; margin-bottom:5px; } .app-hero h1 .cd-words-wrapper { display: block; font-size: 20px; text-transform: uppercase; font-weight:400; line-height:30px; background:transparent !important; color:#666; } .app-hero h1 .cd-words-wrapper b{ font-weight: 400; } .app-hero h1 .cd-words-wrapper::after { content: ''; position: absolute; top: 0; right: 0; width: 2px; height: 100%; } .app-hero .app-hero-content p { color: #777; margin-top: 20px; } .app-hero .app-hero-content .button { margin-top: 30px; } .app-hero .app-hero-content .btn { background: #fff; color: #2E303C; border: 2px solid transparent; } .app-hero .app-hero-content .btn:last-child{ margin:0; } .app-hero .app-hero-content .btn:hover{ background:transparent; border-color:#fff; color:#fff; } .app-hero .app-hero-content .btn.tp{ background:transparent; color:#fff; border-color:#fff; } .app-hero .app-hero-content .btn.tp:hover{ border-color:transparent; background:#fff; color:#2E303C; } .app-hero .app-hero-content .inline.middle { margin: 0 15px; color: #2E303C; font-size: 16px; text-transform: uppercase; } .app-hero .app-hero-content .video i{ margin-right:5px; } .app-hero .app-image { margin-top: 120px; margin-left: 70px; } .app-hero .play-btn { z-index: 9; width: 55px; height: 55px; font-size: 25px; line-height: 55px; color: #fff; border-radius: 50%; padding-left: 5px; text-align: center; position: absolute; top: 284px; left: 183px; } /* Animate Shapes */ .a-shapes span { display: block; position: absolute; } .a-shapes span i { display: inline-block; max-width: 100%; font-size:22px; height: auto; opacity:0.5; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; transition:all 0.3s ease; } .a-shapes:hover span i{ opacity:1; } .a-shapes span:nth-child(1) { left: 0; top: 30%; } .a-shapes span:nth-child(1) i { color:#F26798; } .a-shapes span:nth-child(2) { left: 30.6%; top: 30.2%; } .a-shapes span:nth-child(2) i { color:#ed6ea0; } .a-shapes span:nth-child(3) { top: 34%; left: 64%; } .a-shapes span:nth-child(3) i { color:#50c9c3; } .a-shapes span:nth-child(4) { right: 0; top: 39%; } .a-shapes span:nth-child(4) i { color:#667eea; } .a-shapes span:nth-child(5) { left: 45%; bottom: 20.6%; } .a-shapes span:nth-child(5) i { color:#C7BF51; } .a-shapes span:nth-child(6) { right: 10%; bottom: 30%; } .a-shapes span:nth-child(6) i { color:#691CFF; } .a-shapes span:nth-child(7) { left: 0; top: 62%; } .a-shapes span:nth-child(7) i { color:#C7BF51; } /* Hero Slider */ .app-hero .hero-slider { position: relative; background: rgba(0, 0, 0, 0) url("../images/phone-frame.png") no-repeat scroll center center; padding: 99px 68px 96px 66px; margin-top: 75px; } .app-hero .slider-image { text-align: center; } .app-hero .slider-image img { width: auto; display: inline-block; cursor: pointer; } /* Slider Meta */ .app-hero .owl-dots { position: absolute; bottom: 58px; left: 50%; margin-left: -31.5px; } .app-hero .owl-dots .owl-dot { margin-right: 5px; display: inline-block; } .app-hero .owl-dots .owl-dot:last-child{ margin:0; } .app-hero .owl-dots .owl-dot span { width: 8px; height: 8px; position: relative; background: transparent; margin: 0; background: #bbb; display: block; border-radius: 100%; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; } .app-hero .owl-dots .owl-dot.active span { background: #f26798; } .app-hero .owl-dots .owl-dot span::before { position: absolute; left: -2px; bottom: -2px; content: ""; background: transparent; width: 12px; height: 12px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; border-radius: 100%; border: 1px solid #F26798; line-height: 12px; opacity:0; visibility:hidden; } .app-hero .owl-dots .owl-dot.active span::before, .app-hero .owl-dots .owl-dot:hover span::before{ opacity:1; visibility:visible; } /* App animation */ .app-hero .waves-block .waves { position: absolute; width: 450px; height: 450px; background: rgba(0, 0, 0, 0.15); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; border-radius: 100%; -webkit-animation: waves 3s ease-in-out infinite; animation: waves 3s ease-in-out infinite; top: 50%; margin-top: -225px; left: 50%; margin-left: -225px; } .app-hero .waves-block .wave-1 { -webkit-animation-delay: 0s; animation-delay: 0s; } .app-hero .waves-block .wave-2 { -webkit-animation-delay: 1s; animation-delay: 1s; } .app-hero .waves-block .wave-3 { -webkit-animation-delay: 2s; animation-delay: 2s; } /* Theme Animations */ @-webkit-keyframes waves { 0% { -webkit-transform: scale(0.2, 0.2); transform: scale(0.2, 0.2); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } 50% { opacity: 0.9; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; } 100% { -webkit-transform: scale(0.9, 0.9); transform: scale(0.9, 0.9); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } } @keyframes waves { 0% { -webkit-transform: scale(0.2, 0.2); transform: scale(0.2, 0.2); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } 50% { opacity: 0.9; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; } 100% { -webkit-transform: scale(0.9, 0.9); transform: scale(0.9, 0.9); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } } /* App Hero style 2*/ .app-hero.style2 { background: #fff; } .app-hero.style2 .app-hero-content{ margin:0; } .app-hero.style2 h1 { color: #2E303C; } .app-hero.style2 h1 span { display: block; font-size: 20px; text-transform: uppercase; line-height:30px; color:#555; } .app-hero.style2 h1 span b{ font-weight: 600; } .app-hero.style2 h1 .cd-words-wrapper::after { content: ''; position: absolute; top: 0; right: 0; width: 2px; height: 100%; background: #f26798; background: -webkit-linear-gradient(to right, #f26798 0%, #7873f5 100%); background: linear-gradient(to right, #f26798 0%, #7873f5 100%); } .app-hero.style2 p { color: #555; } .app-hero.style2 .button .btn{ background:transparent; color:#fff; margin-right:15px; background: #ec77ab; background: -webkit-linear-gradient(to right, #ec77ab 0%, #7873f5 100%); background: linear-gradient(to right, #ed6ea0 0%, #7873f5 100%); } .app-hero.style2 .button .btn:last-child{ margin:0; } .app-hero.style2 .button .btn.bordered{ color: #2E303C; } .app-hero.style2 .app-hero-block{ margin:0; } /* Animate Shapes */ .app-hero.style2 .a-shapes span { display: block; position: absolute; } .app-hero.style2 .a-shapes span img { display: block; max-width: 100%; height: auto; } .app-hero.style2 .a-shapes span:nth-child(1) { left: 15.8%; top: 11.5%; } .app-hero.style2 .a-shapes span:nth-child(2) { left: 4.6%; top: 24.2%; } .app-hero.style2 .a-shapes span:nth-child(3) { left: 4.8%; bottom: 20%; } .app-hero.style2 .a-shapes span:nth-child(4) { left: 31%; bottom: 21%; } .app-hero.style2 .a-shapes span:nth-child(5) { left: 45%; top: 23.6%; } .app-hero.style2 .a-shapes span:nth-child(6) { right: 6px; bottom: 30%; } .app-hero.style2 .a-shapes span:nth-child(7) { left: 71%; top: 55%; } .app-hero.style2 .a-shapes span:nth-child(8) { right: 17.8%; top: 28%; } .app-hero.style2 .a-shapes span:nth-child(9) { right: 23%; top: 15%; } /* App Hero style 3*/ .app-hero.style3{} .app-hero.style3 #particles-js{ position:absolute; top:0; left:0; width:100%; height:100%; z-index:4; } .app-hero.style3{ overflow:hidden; background: -webkit-linear-gradient(to right, #ec77ab 0%, #7873f5 100%); background: linear-gradient(to right, #ed6ea0 0%, #7873f5 100%); z-index:1; } .app-hero.style3::before{ content: ''; position: absolute; width: 100%; height: 100%; bottom: -; bottom: 0; background: url(../images/shape1.png) no-repeat scroll center bottom; background-size: contain; z-index:3; } .app-hero.style3 .app-hero-block{ z-index:4; position:relative; } .app-hero.style3 h1{ font-weight:400; } .app-hero.style3 h1 span{ font-weight:700; } .app-hero.style3 .button .btn { margin-right: 15px; } .app-hero.style3 .button .btn:last-child{ margin:0; } .app-hero.style3 .button .btn.icon { background: transparent; padding: 0; box-shadow: none; color: #fff; font-size: 40px; } .app-hero.style3 .signle-mockup { position: absolute; top: 170px; left: 0; width: 100%; height: 100%; } .app-hero.style3 .signle-mockup img { width: 70%; } .app-hero.style3 .signle-mockup.two { left: 250px; } /*=========================== End App Hero CSS =============================*/ /*=========================== 04. Countdown CSS =============================*/ .countdown .count-inner { border-bottom: 1px solid #ebebeb; padding: 30px 0 60px; } .countdown .single-count { position: relative; text-align: center; margin-top: 30px; } .countdown .single-count i { margin-right: 15px; border-radius: 100%; color: #fff; display: inline-block; font-size: 22px; width: 50px; height: 50px; line-height: 50px; position: relative; top: -14px; text-align: center; background: #f26798; background: -webkit-linear-gradient(to right, #f26798 0%, #7873f5 100%); background: linear-gradient(to right, #f26798 0%, #7873f5 100%); -webkit-transition:all 0.3s linear; -moz-transition:all 0.3s linear; transition:all 0.3s linear; } .countdown .single-count:hover i{ -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); transform:rotate(360deg); } .countdown .info { display: inline-block; text-align: left; } .countdown .info h3 { font-size: 25px; } .countdown .info p { font-size: 15px; } /* Countdown Style 2*/ .countdown.style2 { background: #f26798; background: -webkit-linear-gradient(to right, #f26798 0%, #7873f5 100%); background: linear-gradient(to right, #f26798 0%, #7873f5 100%); padding: 30px 0 60px; } .countdown.style2 .count-inner { border: none; padding: 0; } .countdown.style2 .single-count i{ background:transparent; border:2px solid #fff; } .countdown.style2 h3 { color: #fff; } .countdown.style2 p{ color:#eee; } /*=========================== End Countdown CSS =============================*/ /*=========================== 05. About App CSS =============================*/ .about-app { background: #fff; position:relative; } .about-app .section-title { margin: 0px 0 20px; } .about-app .section-title h2{ font-size:24px; } .about-app .about-list li { font-weight: 400; } .about-app .about-list li i{ color:#ed6ea0; margin-right:10px; } .about-app .button{ margin-top:30px; } .about-app .button .btn { margin-right: 20px; } .about-app .button .btn:last-child{ margin:0; } /* App Image */ .about-app .app-img{ position:relative; } .about-app .app-img .single-img { position: absolute; top: 0; } .about-app .app-img .single-img.one { left: 0; width: 190px; } .about-app .app-img .single-img.two { left: 50%; margin-left: -25%; top: 30px; z-index: 98; } .about-app .app-img .single-img.three { left: inherit; right: 0; top: 60px; width: 190px; } .about-app .app-img .single-img img { -webkit-box-shadow: 0px 4px 5px #0003; -moz-box-shadow: 0px 4px 5px #0003; box-shadow: 0px 4px 5px #0003; } /*=========================== End About App CSS =============================*/ /*=========================== 06. App Features CSS =============================*/ .app-features { background: #f6f6f6; } .app-features .app-single-feature { position:relative; margin-top: 40px; text-align: center; padding: 60px 20px; background: #fff; -webkit-box-shadow: 0px 0px 30px 5px rgba(0, 0, 0, 0.07); -moz-box-shadow: 0px 0px 30px 5px rgba(0, 0, 0, 0.07); box-shadow: 0px 0px 30px 5px rgba(0, 0, 0, 0.07); -webkit-transition:all 0.2s linear; -moz-transition:all 0.2s linear; transition:all 0.2s linear; } .app-features .app-single-feature:hover{ box-shadow:none; } .app-features .app-single-feature:before{ position: absolute; top: 0; left: 45%; right: 45%; background: #f26798; background: -webkit-linear-gradient(to right, #f26798 0%, #7873f5 100%); background: linear-gradient(to right, #f26798 0%, #7873f5 100%); content: ""; height: 3px; visibility:hidden; -webkit-transition: all 0.4s linear; -moz-transition: all 0.4s linear; transition: all 0.4s linear; } .app-features .app-single-feature:hover:before{ visibility:visible; left:0; right:0; } .app-features .app-single-feature i { text-align: center; border-radius: 100%; background: #f26798; background: -webkit-linear-gradient(to right, #f26798 0%, #7873f5 100%); background: linear-gradient(to right, #f26798 0%, #7873f5 100%); color: #fff; width: 60px; height: 60px; display: inline-block; line-height: 60px; font-size: 30px; } .app-features .app-single-feature h4 { font-size: 18px; margin: 15px 0; } /*=========================== End App Features CSS =============================*/ /*=========================== 07. Video Showcase CSS =============================*/ .video-showcase { background: #fff; } .video-showcase .section-title h2{ font-size:24px; } .video-showcase::before, .video-showcase::after{ -webkit-clip-path: circle(56.5% at 91% 34%); clip-path: circle(56.5% at 91% 34%); content:""; top: 0; right: 0; position:absolute; width:100%; height:100%; } .video-showcase::before { opacity: 0.9; z-index: 33; background: #f26798; background: -webkit-linear-gradient(to right, #f26798 0%, #7873f5 100%); background: linear-gradient(to right, #f26798 0%, #7873f5 100%); } .video-showcase::after { background-image: url('../images/promo-video.jpg'); background-size: cover; background-position: center center; } .video-showcase .video-area { z-index: 600; } .video-showcase .video-area::before { background:#fff; opacity:0; } .video-showcase .video-area:hover:before{ opacity:0.8; visibility:visible; } .video-showcase .video-area a { width: 80px; height: 80px; line-height: 80px; border-radius: 100%; color: #fff; font-size: 30px; position: absolute; display: inline-block; z-index: 22; left: 50%; top: 50%; margin: -40px 0 0 -40px; background: #f26798; background: -webkit-linear-gradient(to right, #f26798 0%, #7873f5 100%); background: linear-gradient(to right, #f26798 0%, #7873f5 100%); text-align: center; opacity: 0; visibility: hidden; -webkit-transform: scale(0); -moz-transform: scale(0); transform: scale(0); color: #fff !important; } .video-showcase .video-area:hover a{ opacity:1; visibility:visible; transform:scale(1); } .video-showcase .video-img img { display: inline-block; width: 100%; } /*=========================== End Video Showcase CSS =============================*/ /*=========================== 08. App Screenshot CSS =============================*/ .app-screenshot { background: #f6f6f6; } .app-screenshot .gallery-main { padding-top: 80px; } .app-screenshot .mobile-mockup { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .app-screenshot .mobile-mockup img { max-width: 270px; } .app-screenshot .slider-button { text-align: center; width: 100%; margin-top: 80px; } .app-screenshot .slider-button .btn { margin-right: 10px; width: 44px; height: 44px; line-height: 44px; padding: 0; font-size: 20px; border-radius: 100%; background-image:linear-gradient(to right, #f26798 0%, #7873f5 100%); } .app-screenshot .slider-button .btn:last-child{ margin:0; } .swiper-3d-gallery { width: 100%; } .swiper-3d-gallery .swiper-slide img { width: 100%; height: 100%; } /*=========================== End App Screenshot CSS =============================*/ /*=========================== 09. Testimonials CSS =============================*/ .testimonials { position: relative; padding: 0; } .testimonials .test-nav { position: absolute; width: 43%; height: 100%; top: 0; left: 0; background: #fff; } .testimonials .test-nav a.pager-item { position: absolute; top: 0; left: 0; z-index: 299; transition:all 0.3s ease; } .testimonials .test-nav a.pager-item img { width: 80px; height: 80px; padding: 5px; border-radius: 100%; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; transition: all 0.3s linear; } .testimonials .test-nav a.pager-item:hover img, .testimonials .test-nav a.pager-item.active img { width: 90px; height: 90px; -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.21); -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.21); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.21); background: #f26798; background: -webkit-linear-gradient(to right, #f26798 0%, #7873f5 100%); background: linear-gradient(to right, #f26798 0%, #7873f5 100%); } .testimonials .test-nav a.pager-item:nth-child(1) { top: 40%; left: 45%; } .testimonials .test-nav a.pager-item:nth-child(2) { top: 19%; left: 15%; } .testimonials .test-nav a.pager-item:nth-child(3) { top: 19%; left: auto; right: 20%; } .testimonials .test-nav a.pager-item:nth-child(4) { top: auto; left: 15%; bottom: 19%; } .testimonials .test-nav a.pager-item:nth-child(5) { top: auto; left: 49%; bottom: 10%; } .testimonials .test-nav a.pager-item:nth-child(6) { top: 50%; right: 10%; left: auto; } .testimonials .testimonials-slider { padding: 100px 0px; } .testimonials .single-testimonial { padding-top: 10px; } .testimonials .testimonial-text i { font-size: 50px; margin-bottom: 14px; display: inline-block; background: #f26798; background: -webkit-linear-gradient(to right, #f26798 0%, #7873f5 100%); background: linear-gradient(to right, #f26798 0%, #7873f5 100%); -webkit-background-clip: text !important; -webkit-text-fill-color: transparent; } .testimonials .testimonial-text p { font-size: 15px; } .testimonials .testimonial-text h4 { margin: 15px 0 0; font-size: 20px; font-weight: 600; } .testimonials .testimonial-text h4 span { color: #555; display: block; font-size: 15px; margin-top: 5px; font-weight: 400; } .testimonials .testimonial-text h4 span a { color: #EC77AB; } /* Slider Meta */ .testimonials-slider .bx-wrapper { border: none; -webkit-box-shadow: none; box-shadow: none; background-color: transparent; margin-bottom: 0; } .testimonials-slider .bx-controls-direction { margin-top: 15px; overflow: hidden; } .testimonials-slider .bx-wrapper .bx-controls-direction a { text-indent: 0; background-image: none; color: #6B40BF; position: relative; margin: 0; width: auto !important; height: auto !important; border: 1px solid #ebebeb; } .testimonials-slider .bx-wrapper .bx-controls-direction a { text-indent: 0; background-image: none; position: relative; margin: 0; width: 40px !important; height: 40px !important; border: 1px solid #ebebeb; float: left; margin-right: 10px; border-radius: 100%; text-align: center; } .testimonials-slider .bx-wrapper .bx-controls-direction a:hover { color: #d43297; } .testimonials-slider .bx-wrapper .bx-controls-direction a i { display: block; background: #f26798; background: -webkit-linear-gradient(to right, #f26798 0%, #7873f5 100%); background: linear-gradient(to right, #f26798 0%, #7873f5 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; width: 100%; height: 100%; line-height: 40px; font-size: 30px; } .testimonials-slider .bx-wrapper .bx-controls-direction a.bx-prev { left: initial; } .testimonials-slider .bx-wrapper .bx-controls-direction a.bx-next{ margin: 0; right: initial; } /*=========================== End Testimonials CSS =============================*/ /*=========================== 10. App Pricing CSS =============================*/ .app-pricing { background: #f6f6f6; } .app-pricing .single-price { background: #fff; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; transition: all 0.3s linear; border-radius: 5px; text-align: center; position: relative; margin-top: 40px; border-radius: 0px; overflow: hidden; } /* Price Head */ .app-pricing .price-head { position: relative; background: #fff; } .app-pricing .title { position: relative; display: block; font-size: 20px; padding: 20px 0; } .app-pricing .title i{ margin-right:5px; background: #f26798; background: -webkit-linear-gradient(to right, #f26798 0%, #7873f5 100%); background: linear-gradient(to right, #f26798 0%, #7873f5 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .app-pricing .price { padding: 25px 0; background: #f26798; background: -webkit-linear-gradient(to right, #f26798 0%, #7873f5 100%); background: linear-gradient(to right, #f26798 0%, #7873f5 100%); } .app-pricing .amount { line-height: 40px; font-size: 40px; font-weight: 700; color: #fff; } .app-pricing .single-price .price span { font-size:15px; font-weight:500; } /* Price List */ .app-pricing .price-list { text-align: center; position: relative; padding: 20px 0; } .app-pricing .price-list li { color: #555; position: relative; text-transform: capitalize; line-height: 40px; } .app-pricing .price-list li:last-child{ margin:0; } .app-pricing .price-list i { font-size: 13px; text-align: center; margin-right: 10px; } /* Price Bottom */ .app-pricing .price-bottom { padding: 25px 0; position: relative; } .app-pricing .price-bottom:before { background: linear-gradient(to right, #ec77ab 0%, #7873f5 100%); content: ""; height: 1px; left: 0; position: absolute; right: 0; top: 0; width: 100%; } /*=========================== End App Pricing CSS =============================*/ /*=========================== 11. Faqs CSS =============================*/ .app-faq { background-image:url('../images/app-video.jpg'); background-size:cover; background-position:center; background-repeat:no-repeat; overflow:hidden; } .app-faq:before{ background: #f26798; background: -webkit-linear-gradient(to right, #f26798 0%, #7873f5 100%); background: linear-gradient(to right, #f26798 0%, #7873f5 100%); opacity:0.95; } .app-faq .section-title h2{ color:#fff; } .app-faq .section-title p{ color:#fff; } .app-faq .section-title h2:before{ background:#fff; } .app-faq .faq-area { margin-top: 30px; } .app-faq .single-faq { margin-top: 10px; position:relative; background:#fff; -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.21); -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.21); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.21); } .app-faq .faq-title { font-size: 14px; padding: 20px 15px; color: #2E303C; display: block; border-radius: 5px; position: relative; } .app-faq .single-faq .faq-title a { color:inherit; } .app-faq .faq-title a i { margin-right: 5px; font-size: 14px; background: #f26798; background: -webkit-linear-gradient(to right, #f26798 0%, #7873f5 100%); background: linear-gradient(to right, #f26798 0%, #7873f5 100%); background-clip: border-box; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .app-faq .faq-body { padding: 20px 15px; background: transparent; border-radius: 0; border-top: 1px solid #ebebeb; } .app-faq .faq-body p { font-size: 14px; } /*=========================== End Faqs CSS =============================*/ /*=========================== 12. Tab Features CSS =============================*/ .tab-features { background: #fff; } .tab-features .tab-main{ margin-top:30px; } /* Tab Menu */ .tab-features .nav-main { margin-bottom: 40px; text-align: center; } .tab-features .nav-main .nav-tabs { display: inline-block; text-align: center; background: #fff; -webkit-box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.07); -moz-box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.07); box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.07); } .tab-features .nav-main .nav-tabs li{ display:inline-block; } .tab-features .nav-main .nav-tabs li a { background: transparent; position: relative; text-transform: capitalize; font-weight: 600; padding: 15px 20px; border: none; border-radius: 0px; color: #2E303C; } .tab-features .nav-main .nav-tabs li a.active { background: #f26798; background: -webkit-linear-gradient(to right, #f26798 0%, #7873f5 100%); background: linear-gradient(to right, #f26798 0%, #7873f5 100%); color: #fff; } .tab-features .nav-main .nav-tabs li a i { margin-right: 10px; line-height: 30px; display: inline-block; font-size: 15px; -webkit-transition:all 0.2s linear; -moz-transition:all 0.2s linear; transition:all 0.2s linear; } .tab-features .text-content h2 { font-size: 20px; margin-bottom: 10px; text-transform: capitalize; line-height: 32px; } .tab-features .text-content p { margin-bottom: 15px; } .tab-features .text-content p:last-child{ margin-bottom:0px; } .tab-features .button { margin-top: 25px; } .tab-features .btn{ margin-right:10px; } .tab-features .btn:last-child{ margin:0; } .tab-features .btn:hover{ color:#fff; } .tab-features .btn.primary:hover{ background:#333; } /*=========================== End Tab Features CSS =============================*/ /*====================================== News/Blog CSS ========================================*/ .news-blog { background: #f6f6f6; } .news-blog .single-blog { -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15); box-shadow: 0 10px 10px 2px rgba(61, 61, 61, 0.07); background: #fff; margin-bottom: 25px; } .news-blog .blog-slider{ margin-top:30px; } .news-blog .blog-head { position: relative; } .news-blog .blog-head img { display: block; width: 100%; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; z-index:3; } .news-blog .blog-bottom { position: relative; padding: 25px 20px 50px 20px; } .news-blog .blog-inner h4 { font-size: 18px; line-height: 26px; position: relative; margin-bottom: 10px; } .news-blog .blog-inner h4 a { color: inherit; cursor: pointer; text-transform: inherit; font-weight: 600; } .news-blog .meta { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #ebebeb; } .news-blog .meta span{ display:inline-block; margin-right:10px; } .news-blog .meta span:last-child{ margin-right:0px; } .news-blog .meta span, .news-blog .meta span a { color: #555; font-weight: 400; font-size: 13px; } .news-blog .meta span i{ margin-right:5px; color:#ed6ea0; } .news-blog .blog-bottom .btn { position: absolute; bottom: -25px; left: 50%; width: 50px; height: 50px; line-height: 50px; border-radius: 100%; z-index: 333; padding: 0; color: #fff; font-size: 25px; margin-left: -25px; background: #f26798; background: -webkit-linear-gradient(to right, #f26798 0%, #7873f5 100%); background: linear-gradient(to right, #f26798 0%, #7873f5 100%); visibility: ; border: none; } .news-blog .owl-controls .owl-dots { margin-top: 40px; text-align: center; } .news-blog .owl-controls .owl-dots .owl-dot { margin-right: 5px; display: inline-block; } .news-blog .owl-controls .owl-dots .owl-dot:last-child{ margin:0; } .news-blog .owl-controls .owl-dots .owl-dot span { width: 12px; height: 12px; position:relative; background: transparent; margin: 0; transition: all 0.2s linear; background: #333; display: block; border-radius: 100%; opacity: 0.3; } .news-blog .owl-controls .owl-dots .owl-dot.active span, .news-blog .owl-controls .owl-dots .owl-dot:hover span { opacity: 1; background:#f26798; } .news-blog .owl-controls .owl-dots .owl-dot span::before { position: absolute; left: 0; bottom: 0px; content: ""; background: #fff; width: 12px; height: 0px; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; transition: all 0.3s linear; border-radius: 100%; } .news-blog .owl-dots .owl-dot:hover span::before, .news-blog .owl-dots .owl-dot.active span::before { height: 12px; opacity: 1; visibility: visible; background:#f26798; } /* Blog Archive */ .news-blog.archive{ padding:50px 0 100px; } .news-blog.archive .single-blog{ margin-top:50px; } /* Pagination */ .news-blog.archive .pagination { display: block; padding-left: 0; margin: 50px 0 0; border-radius: 4px; overflow: hidden; } .news-blog.archive .pagination li { display: inline-block; margin-right: 5px; } .news-blog.archive .pagination li:last-child{ margin:0; } .news-blog.archive .pagination li a , .news-blog.archive .pagination .page-item span{ background: #fff; display: block; width: 45px; height: 45px; line-height: 45px; color: #2E303C; border: 1px solid #e7e7e7; text-align: center; -webkit-transition:all 0.2s linear; -moz-transition:all 0.2s linear; transition:all 0.2s linear; } .news-blog.archive .pagination li.prev a, .news-blog.archive .pagination li.next a { font-size: 15px; } .news-blog.archive .pagination li.active a, .news-blog.archive .pagination li:hover a , .news-blog.archive .pagination span.page-numbers.current{ background: #f26798; background: -webkit-linear-gradient(to right, #f26798 0%, #7873f5 100%); background: linear-gradient(to bottom, #f26798 0%, #7873f5 100%); color: #fff; border: none; } /* Blog Single */ .news-blog.single{} .news-blog.single .blog-info{ padding:20px; } .news-blog.single .blog-info h1 { font-size: 28px; font-weight: 700; margin-bottom: 10px; } .news-blog.single .blog-info h1 a{ color:inherit; font-weight:inherit; } .news-blog.single .blog-info p{ margin-bottom:20px; } .news-blog.single .blog-info blockquote { background: #f6f6f6; padding: 35px; border-left: 20px solid #ed6ea0; font-size: 16px; color: #666; font-weight: 500; letter-spacing: 0.5px; } .news-blog.single .image-gallery{ margin-bottom:20px; } .news-blog.single .single-image{} .news-blog.single .single-image img{ border:5px solid #f6f6f6; } /* Share Post Arrow */ .news-blog.single .share-p-arrow { overflow: hidden; padding: 20px; border-top: 1px solid #ebebeb; } .news-blog.single .s-share { float: left; } .news-blog.single .s-share li { position: relative; margin-right: 5px; display: inline-block; } .news-blog.single .s-share li a { width: 26px; height: 26px; line-height: 26px; border-radius: 100%; background: linear-gradient(to right, #f26798 0%, #7873f5 100%); color: #fff; text-align: center; display: block; } .news-blog.single .prev-next { float: right; } .news-blog.single .prev-next li{ display:inline-block; margin-right:15px; } .news-blog.single .prev-next li:last-child{ margin:0; } .news-blog.single .prev-next li a { text-align: center; color: #f26798; } .news-blog.single .prev-next li a i { margin-right: 5px; background: -webkit-gradient(linear, left top, right top, from(#6541c1), color-stop(98%, #d43396), to(#d43396)); background: linear-gradient(to right, #6541c1 0%, #d43396 98%, #d43396 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 20px; position: relative; top: 2px; } /* Author Details */ .news-blog.single .author-info { background: #fff; padding: 40px 20px; overflow: hidden; -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15); box-shadow: 0 10px 10px 2px rgba(61, 61, 61, 0.07); border-top: 1px solid #ebebeb; } .news-blog.single .author-left { float: left; text-align: center; border-right: 1px solid #e7e7e7; padding-right: 25px; margin-right: 25px; width: 22%; } .news-blog.single .author-left h4 span.name { background: -webkit-gradient(linear, left top, right top, from(#6541c1), color-stop(98%, #d43396), to(#d43396)); background: linear-gradient(to right, #6541c1 0%, #d43396 98%, #d43396 100%); background-clip: border-box; background-clip: border-box; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 18px; font-weight: 700; } .news-blog.single .author-left img { width: 100px; height: 100px; border-radius: 100%; display: inline-block; } .news-blog.single .author-left h4{ font-size:18px; margin-bottom:5px; } .news-blog.single .author-left h4 span { display: block; font-size: 14px; color: #666; font-weight: 500; } .news-blog.single .author-left p a{ color:#333; } .news-blog.single .author-left p i{ width:25px; height:25px; line-height:25px; font-size:13px; border-radius:100%; border:1px solid #e7e7e7; margin-right:5px; } .news-blog.single .author-content { float: left; width: 70%; } .news-blog.single .author-content .button { margin-top: 10px; } .news-blog.single .author-content .button .btn { font-size: 13px; padding: 12px 24px; } /* Comments */ .comments-area{ margin-top:50px; } .news-blog.single .comment-reply-title { position: relative; text-align: left; font-size: 18px; color: #2C2D3F; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #ebebeb; } .news-blog.single .comment-reply-title:before{ position: absolute; width: 70px; height: 4px; content: ""; left: 0; bottom: -2px; background: #ec77ab; background: -webkit-linear-gradient(to right, #ec77ab 0%, #7873f5 100%); background: linear-gradient(to right, #ed6ea0 0%, #7873f5 100%); } .news-blog.single .comments { background: #fff; padding: 20px; margin-top: 30px; } .news-blog.single .comments .single-comment { position: relative; padding: 0; border-bottom: 1px solid #ebebeb; padding-bottom: 30px; margin-bottom: 30px; } .news-blog.single .comments .single-comment:last-child{ margin:0; padding:0; border:none; } .news-blog.single .comments .single-comment img{ height:70px; width:70px; border-radius:100%; position:absolute; left:0; } .news-blog.single .single-comment .content { padding-left: 95px; } .news-blog.single .single-comment .content h4 { color: #2E303C; font-size: 16px; font-weight: 600; margin-bottom: 10px; } .news-blog.single .single-comment .content span { display: block; font-size: 12px; color: #666; margin: 0; margin-bottom: 5px; } .news-blog.single .single-comment .content p { color: #666; font-weight: 300; } .news-blog.single .single-comment .content .button { margin-top: 15px; } .news-blog.single .single-comment .content .button a { background: #fff; color: #fff; padding: 5px 22px; border-radius: 2px; margin-right: 10px; text-transform: capitalize; font-weight: 400; box-shadow: none; background: #f26798; background: -webkit-linear-gradient(to right, #f26798 0%, #7873f5 100%); background: linear-gradient(to right, #f26798 0%, #7873f5 100%); border-radius: 30px; } .news-blog.single .single-comment.reply{ margin-left:100px; } /* Comments Form */ .nav-links a { border: 1px solid #bebeeb; padding: 10px; color: #333; } .nav-links a:hover{ background:#EC679B; color:#fff; border-color:transparent; } .nav-links { padding: 20px 0; margin-top: 20px; } .comment-body { margin-top: 60px; } .news-blog.single .form { margin-top: 30px; } .comment-form input { width: 100%; height: 50px; border: 1px solid #e7e7e7 !important; padding: 15px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; font-weight: 400; outline: none; border-radius: 0px !important; } .comment-form input:hover, .comment-form textarea:hover{ padding-left:20px; } .comment-form textarea { border: 1px solid #e7e7e7 !important; padding: 15px !important; width: 100%; padding-left: 10px; resize: none; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; box-shadow: none; border-radius: 3px; outline: none; border: none; border-radius: 0px !important; } .comment-form input:hover, .comment-form input:focus, .comment-form textarea:hover{ outline:none; } .comment-form p { margin-bottom: 20px; } .comment-form p:last-child{ margin-bottom:0; } .comment-form .form-submit { margin: 0; text-align: center; display:inline-block; } .comment-form .submit { font-size: 14px; color: #fff; margin-top: 0; border-radius: 3px; width: 100%; position: relative; background: #f26798; background: -webkit-linear-gradient(to right, #f26798 0%, #6c5ce7 100%); background: linear-gradient(to right, #f26798 0%, #6c5ce7 100%); display:inline-block; } /* Blog Sidebar */ .blog-sidebar { margin-top: 50px; } .blog-sidebar .single-sidebar { margin-bottom: 30px; background: #fff; padding: 20px; } .blog-sidebar .single-sidebar:last-child{ margin:0px; border:none; } .blog-sidebar .single-sidebar h2 { text-transform: capitalize; font-size: 16px; margin-bottom: 20px; display: block; position: relative; border-bottom: 1px solid #ebebeb; padding-bottom: 20px; font-weight: 600; } .blog-sidebar .single-sidebar h2::before { position: absolute; width: 70px; height: 4px; content: ""; left: 0; bottom: -2px; background: #ec77ab; background: -webkit-linear-gradient(to right, #ec77ab 0%, #7873f5 100%); background: linear-gradient(to right, #ed6ea0 0%, #7873f5 100%); } .blog-sidebar .single-sidebar ul li a { color: #333; } .blog-sidebar .single-sidebar ul li a i { margin-right: 10px; color: #d43396; } /* Post Tabs */ .blog-sidebar .post-tab .nav { margin-bottom: 20px; border-bottom: 1px solid #ebebeb; text-align: center; text-align: center; display: ine-block; } .blog-sidebar .post-tab .nav li { margin-right: 30px; display: inline-block; text-align: center; } .blog-sidebar .post-tab .nav li:last-child{ margin:0; } .blog-sidebar .post-tab .nav li a { position: relative; color: #2E303C; border-radius: 0px; font-weight: 600; padding: 0 0 12px; text-transform: capitalize; border: none; margin: 0; } .blog-sidebar .post-tab a:before{ content: ""; position: absolute; width:100%; height: 4px; left: 0; bottom: -2px; background: #ec77ab; background: -webkit-linear-gradient(to right, #ec77ab 0%, #7873f5 100%); background: linear-gradient(to right, #ed6ea0 0%, #7873f5 100%); opacity:0; visibility:hidden; -webkit-transition:all 0.2s linear; -moz-transition:all 0.2s linear; transition:all 0.2s linear; } .blog-sidebar .post-tab a:hover:before, .blog-sidebar .post-tab a.active:before{ opacity:1; visibility:visible; } .blog-sidebar .post-tab .nav li a:hover, .blog-sidebar .post-tab .nav li a.active{ border-color:#ebebeb; } .blog-sidebar .post-tab .nav li a i{ margin-right:10px; } .blog-sidebar .post-tab .single-post { overflow: hidden; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #e7e7e7; } .blog-sidebar .post-tab .single-post:last-child { margin-bottom: 0px; border: none; padding: 0; } .blog-sidebar .post-tab .single-post .post-img { float: left; margin-right: 15px; } .blog-sidebar .post-tab .single-post img { width: 65px; height: 65px; border-radius: 3px; } .blog-sidebar .post-tab .post-info { overflow: hidden; } .blog-sidebar .post-tab .post-info h4 { font-size: 14px; margin: 0; line-height: 22px; font-weight: 600; } .blog-sidebar .post-tab .post-info a { color: #333; } .blog-sidebar .post-tab .post-info p { margin: 0; font-size: 13px; } .blog-sidebar .post-tab .post-info p i{ margin-right:5px; font-size:13px; } .blog-sidebar .category ul li { font-size: 15px; margin-bottom: 15px; } .blog-sidebar .category ul li span { width: 24px; height: 24px; display: inline-block; text-align: center; margin-left: 5px; line-height: 24px; float: right; } .blog-sidebar .category ul li:last-child{ margin-bottom:0px; padding-bottom: 0px; } .blog-sidebar .tags h2 { margin-bottom: 5px; } .blog-sidebar .tags ul li { display: inline-block; margin-top: 10px; } .blog-sidebar .tags ul li a { color: #555; border: 1px solid #ebebeb; padding: 5px 15px; display: block; border-radius: 3px; } /*=========================== End Blog CSS =============================*/ /*=========================== 14. Download App CSS =============================*/ .download-app { background: #f6f6f6; padding: 150px 0; } .download-app .download-inner{ position:relative; z-index:3; } .download-app::before { content: ""; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 2; background: -webkit-linear-gradient(to right, #ec77ab 0%, #7873f5 100%); background: linear-gradient(to right, #ed6ea0 0%, #7873f5 100%); -webkit-clip-path: polygon(0 15%, 100% 0, 100% 85%, 0 100%); clip-path: polygon(0 15%, 100% 0, 100% 85%, 0 100%); opacity:0.95; } .download-app::after { content: ""; background-image:url('../images/promo-video.jpg'); background-size:cover; background-position:center; background-repeat:no-repeat; position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; -webkit-clip-path: polygon(0 15%, 100% 0, 100% 85%, 0 100%); clip-path: polygon(0 15%, 100% 0, 100% 85%, 0 100%); } .download-app .section-title h2 { color: #fff; } .download-app .section-title h2:before{ background:#fff; } .download-app .section-title p{ color:#fff; } .download-app .button .btn { margin-right: 15px; text-align: left; padding: 15px 15px 15px 70px; color: #fff; background: #fff; box-shadow: none; color: #212529; -webkit-box-shadow: 0 10px 32px 1px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 10px 32px 1px rgba(0, 0, 0, 0.3); box-shadow: 0 10px 32px 1px rgba(0, 0, 0, 0.3); } .download-app .button .btn:last-child{ margin:0; } .download-app .button .btn span { display: block; font-weight: 700; background: #f26798; background: -webkit-linear-gradient(to right, #f26798 0%, #7873f5 100%); background: linear-gradient(to right, #f26798 0%, #7873f5 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 20px; } .download-app .button .btn i { position: absolute; left: 15px; top: 15px; background: linear-gradient(to right, #ed6ea0 0%, #7873f5 100%); color: #fff; font-size: 20px; width: 40px; height: 40px; line-height: 40px; text-align: center; border-radius: 100%; display: block; } .download-app .button .btn.icon { background: transparent; box-shadow: none; padding: 0; font-size: 40px; text-align: right; padding: 0; } .download-app .button .btn.icon i { background: transparent; position: initial; width: auto; top: auto; height: auto; line-height: initial; font-size: inherit; text-align: inherit; text-align: center; } .download-app .app-mockup { position: absolute; right: 0; top: 0; } .download-app .app-mockup img { width: 100%; } /*=========================== End available CSS =============================*/ /*=========================== 15. Contact CSS =============================*/ .contact { background: #f6f6f6; padding: 70px 0 100px; } .contact .section-title h2{ font-size:24px; } /* Contact Form */ .contact .form,.section-title{ margin-top:30px; } .contact .form .form-group input { height: 45px; line-height: 45px; width: 100%; border: 1px solid #ebebeb; padding: 0px 20px; /*color: #2E303C;*/ border-radius: 0px; /*background: #fff;*/ text-transform: capitalize; } .contact .form .form-group textarea { height: 190px; width: 100%; border: 1px solid #ebebeb; padding: 15px 20px; color: #2C2D3F; border-radius: 0px; resize: none; background: #fff; text-transform: capitalize; } .contact .form .button { margin:0; } .contact .form .button i{ margin-right:10px; } /* Contact info */ .contact .contact-info i { font-size: 25px; display: inline-block; background: -webkit-gradient(linear, left top, right top, from(#6541c1), color-stop(98%, #d43396), to(#d43396)); background: linear-gradient(to right, #6541c1 0%, #d43396 98%, #d43396 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .contact .contact-info p { line-height: 22px; } .contact .contact-info p a{ color:#666; } .contact .contact-info p a:hover{ color:#27AE60; } .contact .contact-info .title { font-weight: 600; color: #2c2d3f; font-size: 16px; margin: 10px 0; } /* Mail Success */ .mail-success .mail-inner{ text-align:center; } .mail-success .mail-inner p{ font-size:15px; } .mail-success .mail-inner h2 { font-size: 45px; margin: 10px 0 20px; } .mail-success .mail-inner h2 span{ color:#27AE60; } .mail-success .mail-inner .btn { background: #27AE60; color: #fff; } .mail-success .mail-inner .btn i{ margin-right:5px; } /*=========================== End Contact CSS =============================*/ /*=========================== 16. Brands CSS =============================*/ .brands { background: #F6F6F6; padding: 50px 0; } .brands .single-brand{ text-align:center; } .brands .single-brand a{ display:inline-block; } .brands .single-brand img { cursor: pointer; width: 100%; opacity: 1; } .brands .single-brand:hover img{ opacity:1; } .brands .single-brand img { cursor: move; } /*=========================== End Brands CSS =============================*/ /* Banner Title */ .banner-title { text-align: center; position: relative; background-repeat: no-repeat; overflow: hidden; background-size: cover; background-position: center; margin: 0; padding: 170px 0 100px; } .banner-title::before { opacity: 0.95; background: #f26798; background: -webkit-linear-gradient(to right, #f26798 0%, #7873f5 100%); background: linear-gradient(to right, #f26798 0%, #7873f5 100%); } .banner-title h1 { color: #fff; text-transform: initial; font-weight: 700; font-size: 40px; position: relative; line-height: 50px; } /*=========================== End Breadcrumb CSS =============================*/ /*=========================== 17. Breadcrumb CSS =============================*/ .breadcrumb { text-align: center; position: relative; background-repeat: no-repeat; overflow: hidden; background-size: cover; background-position: center; margin: 0; padding: 170px 0 100px; border-radius: 0px; } .breadcrumb::before { opacity: 0.95; background: #f26798; background: -webkit-linear-gradient(to right, #f26798 0%, #7873f5 100%); background: linear-gradient(to right, #f26798 0%, #7873f5 100%); } .breadcrumb ul{ margin-bottom:15px; } .breadcrumb ul li{ display:inline-block; } .breadcrumb ul li a { color: #fff; font-size: 16px; text-transform: capitalize; font-weight: 400; } .breadcrumb li + li::before { color: #fff; content: "/"; padding:0 5px; font-family: 'FontAwesome'; content: "\f105"; font-size:15px; } .breadcrumb ul li.active a { color: #fff; border-radius: 5px; } .breadcrumb h1 { color: #fff; text-transform: capitalize; font-weight: 700; font-size: 45px; position: relative; } /*=========================== End Breadcrumb CSS =============================*/ /*=========================== 13. Blog CSS =============================*/ .widget ul li { line-height: 40px; } .widget select { width: 100%; height: 50px; line-height: 50px; padding: 0 20px; border: 1px solid #e5e5e5; } .widget .calendar_wrap table caption { color: #ED679B; } .widget .calendar_wrap table tr th, .widget .calendar_wrap table tr td { border: 1px solid #ebebeb; text-align: center; padding: 5px; } .widget .calendar_wrap table tr td a { color: #ED679B; } .widget ul li ul { padding-left: 20px; } .widget ul li ul li ul { padding-left: 10px; } .search-form input[type="search"] { width: 100%; padding: 0; max-width: 100%; display: block; margin: 0; border: 1px solid #ebebeb; border-radius: 0px; height: 50px; line-height: 50px; padding: ; padding: 0 20px; } .search-form label { display: block; } .search-form input[type="submit"] { background: #EA669D; border: none; padding: 14px 18px; color: #fff; border-radius: 0px; background: linear-gradient(to right, #f26798 0%, #7873f5 100%); position: absolute; right: 0; top: 0px; height: 50px; font-size: 14px; } .widget .tagcloud a { color: #555; width: 50%; padding: 5px 10px; font-size: 13px !important; border: 1px solid #ebebeb; display: inline-block; width: 29%; margin-bottom: 10px; margin-left: 10px; text-align: center; font-size: 12px !important; } .widget .tagcloud { margin-left: -10px; } .widget ul li ul li ul ul { padding-left: 7px; } .widget ul li a:hover { color: #E8669E; } .search-form { position: relative; } .widget .tagcloud a:hover { background: #ED679B; color: #fff; } /* Comment Area */ .comments-area { margin-top: 30px; background: #fff; padding: 20px; } .comments-area .comments-title { font-size: 25px; margin-bottom: 25px; } .comment-list { margin: 0; padding: 0; list-style: none; } .comment-meta { margin-bottom: 20px; } .comment-meta a { color: #333; } .comment-author.vcard { position: relative; padding-left: 50px; } .comment-author.vcard img { position: absolute; left: 0; top: 5px; } .comment-metadata { margin-left: 50px; font-size: 80%; } .comments-area table { border-left: 1px solid #ddd; border-bottom: 1px solid #ddd; margin-bottom: 20px; } .comments-area .table td,.comments-area .table th { border-right: 1px solid #ddd; border-top: 1px solid #ddd; } .comments-area table td,.comments-area table th { border: ; border-right: 1px solid #ddd; border-top: 1px solid #ddd; padding: 10px; } .comments-area th { background: #2B8EC7; color: #fff; } .comments-area dd { margin-bottom: 20px; } .comments-area .comment-content ul, .comments-area.comment-content ol { padding-left: 10px; } .comment-reply-link { display: inline-block; color: #fff; padding: 2px 15px; border-radius: 5px; margin-top: 10px; background: linear-gradient(to right, #f26798 0%, #7873f5 100%); font-size: 13px; } .comment-reply-link:hover{ color:#fff; opacity:0.8; } .comment-list li.comment { margin-bottom: 32px; border-bottom: 1px solid #bbb; padding-bottom: 32px; } .comment-list li ol.children { padding-left: 50px; margin: 0; list-style: none; margin-top: 25px; } .comment-list li ol.children ol.children { padding-left: 20px; } .comment-list li.comment:last-child { border-bottom: 0px solid; padding-bottom: 0px; margin-bottom: 0px; } .comment-respond { margin-top: 50px; } .comment-notes { font-size: 90%; margin-bottom: 40px; } /* Default Settings */ .page-header { margin-top: 50px; } .no-results .search-form { margin-top: 20px; } /*=========================== 14. Footer CSS =============================*/ .footer { background: #2E303C; } /* Newslatter */ .footer .newslatter { padding-bottom: 30px; position: relative; padding: 30px; position: relative; border-radius: 3px; background: #f26798; background: -webkit-linear-gradient(to right, #f26798 0%, #7873f5 100%); background: linear-gradient(to right, #f26798 0%, #7873f5 100%); top: -55px; margin-bottom: -55px; } .footer .newslatter-content h2 { color: #fff; font-size: 20px; font-weight: 600; line-height: 25px; } .footer .newslatter-content h2 span { font-size: 16px; display: block; font-weight: 500; } /* Newslatter Form */ .footer .form { position: relative; } .footer .newslatter-form{ text-align:right; } .footer .newslatter-form .form input { height: 50px; width: 100%; line-height: 50px; padding: 0px 70px 0 20px; color: #fff; border: none; border-radius: 0px; background: transparent; border-bottom: 1px solid rgba(255, 255, 255, 0.58); } .footer .newslatter input::-webkit-input-placeholder { opacity: 1; color: #fff !important; } .footer .newslatter input::-moz-placeholder { opacity: 1; color: #fff !important; } .footer .newslatter input::-ms-input-placeholder { opacity: 1; color: #fff !important; } .footer .newslatter-form .form button { line-height: 40px; background: #fff; color: #2E303C; top: 2px; position: absolute; right: 20px; width: 40px; height: 40px; font-size: 20px; border-radius: 100%; cursor: pointer; } .footer .single-footer { margin-top: 30px; } .footer .single-footer h3 { color: #fff; font-size: 18px; font-weight: 600; position:relative; margin-bottom:20px; } .footer .footer-widget{ padding:50px 0 80px; } /* About */ .footer .f-about .logo { margin-bottom: 20px; } .footer .f-about .logo a { color: #fff; font-size: 30px; } .footer .f-about .text { color: #ccc; margin-bottom: 15px; line-height: 24px; } .footer .f-about a { color: #ec77ab; } .footer .f-about a:hover{ color:#fff; text-decoration:underline; } /* Footer Links */ .footer .f-link ul li { margin-bottom: 10px; color: #fff; } .footer .f-link ul li:last-child{ margin-bottom:0px; } .footer .f-link ul li a { display: inline-block; color: #ccc; } .footer .f-link ul li a:hover{ color:#f26798; } /* Twitter Widget */ .footer .footer-top .single-tweet:last-child{ margin:0; } .footer .footer-top .single-tweet i { font-size: 22px; color:#1692F8 } .footer .footer-top .single-tweet p{ color:#ccc; } .footer .footer-top .single-tweet p a { color:#ec77ab; font-weight: 500; } .footer .footer-top .single-tweet span { color: #ec77ab; font-weight: 500; font-size: 13px; } /* Slider Meta */ .footer .owl-controls .owl-nav { text-align: left; overflow: hidden; margin-top: 10px; } .footer .owl-controls .owl-nav div{ margin-right: 10px; float: left; } .footer .owl-controls .owl-nav div:last-child{ margin:0; } .footer .owl-controls .owl-nav div i { border: 1px solid #ebebeb; font-size: 18px; width: 28px; height: 28px; line-height: 28px; text-align: center; color: #fff; border-radius: 100%; display: block; } /* Copyright */ .footer .copyright { position: relative; text-align: center; } .footer .copyright-inner{ border-top:1px dashed #fff6; padding:25px 0px 25px 0px; text-align:center; } .copyright-content { padding: 15px; border-top: 1px solid #ebebeb33; } .footer .copyright-content p { color: #ccc; } .footer .copyright-content p i{ margin-right:5px; } .footer .copyright-content p a{ font-weight:400; color:#ccc; -webkit-transition:all 0.4s ease-in-out; -moz-transition:all 0.4s ease-in-out; transition:all 0.4s ease-in-out; } .footer .copyright-content p a:hover{ color:#fff; } .footer .widget .textwidget p{ color: #ccc; } .breadcrumb span{ color: #fff; } .newslatter { color: #fff; font-size: 15px; } /*=========================== End Footer CSS =============================*/ #scrollUp,.app-hero::before,.app-hero h1 .cd-words-wrapper::after,.app-hero.style3 h1 span,.app-hero.style3 .button .btn.icon,.about-app .single-list i,.section-title h2::before,.button .btn,.button .btn.bordered::before,.breadcrumb::before,.banner-title::before,.spinner-wrapper,.header.style2 .nav li a:before,.app-hero.style2 h1 .cd-words-wrapper::after,.countdown.style2,.app-features .app-single-feature i,.video-showcase::before,.video-showcase .video-area a:before,.testimonials .test-nav a.pager-item:hover img,.testimonials .test-nav a.pager-item.active img,.testimonials-slider .bx-wrapper .bx-controls-direction a::before,.app-pricing .price,.app-pricing .price-bottom:before,.tab-features .nav-main .nav-tabs li a:before,.news-blog.archive .pagination li a::before,.news-blog.single .s-share li a:before,.news-blog.single .comments .comment-title:before,.news-blog.single .comments-form h2::before,.news-blog.single .form .form-group::before,.news-blog.single .form .form-group::before,.blog-sidebar .single-sidebar h2::before,.blog-sidebar .post-tab a:before,.download-app::before,.download-app .button .btn i,.contact .form .form-group::before,.contact .form .form-group::before,.footer .newslatter,.contact .form .form-group::before,.contact .form .form-group::before,.contact .contact-info i,.countdown::before{ background: #f26798; background: -webkit-linear-gradient(to right, #f26798 0%, #6c5ce7 100%); background: linear-gradient(to right, #f26798 0%, #6c5ce7 100%); } .app-hero.style2 .button .btn i,.header .text-logo a::before,.video-showcase .video-area::after,.footer .text-logo a::before,.header .text-logo a,.demo-option .icon i,.app-hero.style2 h1 .cd-words-wrapper { background: -webkit-linear-gradient(to right, #f26798 0%, #6c5ce7 100%); background: linear-gradient(to right, #f26798 0%, #6c5ce7 100%); } .header.sticky.active { background: linear-gradient(to right, #f26798 0%, #6c5ce7 100%); } .testimonials .testimonial-text i { background: #f26798; background: -webkit-linear-gradient(to right, #f26798 0%, #6c5ce7 100%); background: linear-gradient(to right, #f26798 0%, #6c5ce7 100%); } .app-pricing .title i{ background: #f26798; background: -webkit-linear-gradient(to right, #f26798 0%, #6c5ce7 100%); background: linear-gradient(to right, #f26798 0%, #6c5ce7 100%); } .news-blog.single .author-left h4 span.name{ background: -webkit-linear-gradient(to right, #f26798 0%, #6c5ce7 100%); background: linear-gradient(to right, #f26798 0%, #6c5ce7 100%); } .header .nav li .dropdown li:hover a,.header.style2 .nav li .dropdown li a:hover,.app-hero .play-btn,.header .slicknav_nav a:hover,.header .slicknav_nav a:active,.header.style2.sticky.active .slicknav_nav a:hover,.app-hero .owl-dots .owl-dot.active span,.app-hero .owl-dots .owl-dot:hover span,.header.style3 .social ul li:hover a,.header.style2.sticky.active .slicknav_nav a:active,.news-blog .owl-dots .owl-dot.active span,.news-blog .owl-dots .owl-dot:hover span{ background: #f26798; } .video-showcase .video-area a,.tab-features .features-list li i,.news-blog .blog-inner h4:hover a,.news-blog .meta span a:hover,.news-blog .meta span i,.news-blog.single .prev-next li a,.about-app .single-list:hover h4,.blog-sidebar .post-tab .post-info a:hover,.blog-sidebar .category ul li:hover a,.blog-sidebar .tags ul li:hover a,.contact .contact-info p a:hover,.footer .f-about .social li:hover a,.footer .f-about .social li.active a,.footer .f-link ul li a:hover,.footer .owl-controls .owl-nav div i:hover,.footer .copyright-content p a,.about-app .about-list li i,.app-features .app-single-feature:hover h4,#scrollUp:hover,.app-hero .scroll-down a:hover,.countdown.style2 .single-count:hover i,.footer .single-tweet p a,.app-hero.style2 .button .btn:hover i,.app-features .app-single-feature:hover .bg-number,.header .nav li.active a,.header .nav li:hover a,.footer .single-tweet span,.testimonials .testimonial-text h4 span a,.blog-sidebar .single-sidebar ul li a i,.header.style2 .button .btn:hover,.header.style3.sticky.active .social ul li:hover a{ color:#f26798; } .news-blog.single .blog-info blockquote{ border-left-color:#f26798; } .header .nav .dropdown{ border-top-color:#F26798; } .app-hero .owl-dots .owl-dot span::before,.news-blog .owl-dots .owl-dot span::before { border-color:#f26798; }