/*----------------------------------------------------------------------------------- Template Name: Pezion - Startup & agency HTML Template Template URI: http://rockstheme.com Description: This is html5 template Author: Rocks_theme Author URI: http://rockstheme.com Version: 1.0 -----------------------------------------------------------------------------------*/ /*----------------------------------------------------------------------------------- CSS INDEX =================== 1. Theme Default CSS (body, link color, section etc) 2. Header Top Area 2.1 Header Bottom Area 2.2. Sticky Header Area 2.3. Mobile Menu Area 3. Intro Area 4.About Area 5.Welcome Services Area 6.Feature Area 7.Counter Area Css 8. Pricing area css 9. banner Area 10.Reviews Area Css 11. Blog Area 12. Footer Area 13. Home-2 area 14. Home-3 Area 15. Breadcumbs Area 16 .Why choose Area 17. Team Area 18. FAQ Area 19.Contact CSS 20. Blog Sidebar Area 21. Blog Details 22.Animation CSS -----------------------------------------------------------------------------------*/ /*----------------------------------------*/ /* Google Fonts /*----------------------------------------*/ @import url('https://fonts.googleapis.com/css?family=PT+Sans:400,700|Titillium+Web:300,400,600,700&display=swap'); /*----------------------------------------*/ /* 1. Theme default CSS /*----------------------------------------*/ html, body { height: 100%; } .floatleft { float:left; } .floatright { float:right; } .alignleft { float:left; margin-right:15px; margin-bottom: 15px; } .alignright { float:right; margin-left:15px; margin-bottom: 15px; } .aligncenter { display:block; margin:0 auto 15px; } a:focus { outline:0px solid; } img {max-width:100%; height:auto; } .fix { overflow:hidden; } p { margin:0 0 15px; color: #6a7d91; letter-spacing: 0.60px; } h1, h2, h3, h4, h5, h6 { font-family: 'Titillium Web', sans-serif; margin: 0 0 15px; color: #3d5368; font-weight: 500; } h1{ font-size: 48px; line-height: 50px; } h2{ font-size: 38px; line-height: 46px; } h3{ font-size: 30px; line-height: 38px; } h4{ font-size: 24px; line-height: 34px; } h5{ font-size: 20px; line-height: 30px; } h6{ font-size: 16px; line-height: 28px; } a { transition: all 0.3s ease 0s; text-decoration:none; } a:hover { color: #0062cc; text-decoration: none; } a:active, a:hover { outline: 0 none; } a:hover, a:focus { color: #3d5368; text-decoration: none; } body { background: #fff none repeat scroll 0 0; color: #6a7d91; font-family: 'PT Sans', sans-serif; font-size: 15px; text-align: left; overflow-x: hidden; line-height: 26px; } #scrollUp { bottom: 110px; font-size: 12px; line-height: 22px; right: 30px; width: 100px; background-color: transparent; color: #fff; text-align: center; height: 20px; -webkit-transition-duration: 500ms; transition-duration: 500ms; text-transform: uppercase; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } #scrollUp:before { position: absolute; width: 30%; height: 2px; background-color: #fff; content: ""; top: 10px; right: 100%; z-index: -200 !important; } #scrollUp:hover { bottom: 130px; transition-duration: 500ms; } .clear{ clear:both; } ul{ list-style: outside none none; margin: 0; padding: 0; } input, select, textarea, input[type="text"], input[type="date"], input[type="url"], input[type="email"], input[type="password"], input[type="tel"], button, button[type="submit"] { -moz-appearance: none; box-shadow: none !important; } input:focus, textarea:focus, select:focus { outline: none; } div#preloader { position: fixed; left: 0; top: 0; z-index: 99999; width: 100%; height: 100%; overflow: visible; background: #fff url('img/logo/preloader.gif') no-repeat center center; } .navbar-collapse { padding-left: 0px; } ::-moz-selection { background: #0062cc; text-shadow: none; } ::selection { background: #0062cc; text-shadow: none; } .bg-color{ background:#fdfcfc; } .browserupgrade { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; } .area-padding{ padding: 110px 0px; } .area-padding-2{ padding: 70px 0px 50px; } .padding-2{ padding-bottom: 100px; } .area-90{ padding: 90px 0px; } .section-headline { padding-bottom: 40px; position: relative; } .section-headline.review-head { padding-bottom: 20px; } .section-headline h3 { font-size: 32px; letter-spacing: 1px; max-width: 350px; margin: 0px auto; line-height: 40px; } .white-headline h2{ color:#fff; } .section-headline h4 .color { color: #0062cc; font-weight: 600; } .mar-row{ margin-top: 50px; } .load-more-btn { text-transform: uppercase; background: #0062cc; display: inline-block; padding: 15px 30px; color: #fff; font-weight: 600; margin-top: 30px; border-radius: 3px; width: 200px; transition: 0.4s; border:2px solid #0062cc; } .load-more-btn:hover{ background: #fff; border:2px solid #0062cc; color: #0062cc; transition: 0.4s; } .simple-text{ font-weight: 400; } .big-btn { width: 160px !important; font-size: 18px !important; padding: 15px 20px !important; } .big-btn:hover { border: 1px solid #fff; background: transparent; color: #fff; } .radius-btn{ border-radius: 30px !important; padding: 10px 30px !important; width: 170px !important; } .bg-background{ position: relative; background: url(img/background/bgp3.png); background-repeat: no-repeat; background-position: center center; background-size: cover; } .bg-white{ background: #fff; } .color-text{ color: #0062cc } /*----------------------------------------*/ /* 2.1 Header Bottom Area /*----------------------------------------*/ .header-one { position: absolute; top: 0; left: 0; width: 100%; height: auto; z-index: 999; } .header-area{ background:transparent; } .logo { display: block; } .logo a { display: inline-block; height: auto; padding: 20px 0; } .center-bg { display: block; background: #fff; padding: 0px 20px 0px 0px; } .main-menu ul.navbar-nav li { float: left; position: relative; } .main-menu ul.navbar-nav li a { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; color: #3d5368; font-size: 16px; font-weight: 500; padding: 33px 15px; text-transform: capitalize; position: relative; } .main-menu > ul.navbar-nav >li >a::before { position: absolute; content: ""; left: 16px; bottom: 25px; border: 1px solid #0062cc; width:0; transition: 0.4s; opacity: 0; } .header-area.stick .main-menu > ul.navbar-nav >li >a::before { left: 16px; bottom: 27px; } .main-menu > ul.navbar-nav >li >a:hover::before { width:50%; transition: 0.4s; opacity: 1; } .main-menu ul.navbar-nav li a:hover{ color: #0062cc; } .main-menu ul.navbar-nav li.active a:focus { color: #fff; } .main-menu ul.navbar-nav li.active a { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; color: #0062cc; position: relative; z-index: 9999999; } .navbar { border: medium none; margin-bottom: 0; } .navbar-default { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; } .main-menu ul.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { background: none; color:#fff; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { background-color: transparent; color: #fff; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background: none; } .main-menu ul.nav li ul.sub-menu { background: #fff; left: 0; opacity: 0; position: absolute; top: 115%; transition: all 0.3s ease 0s; box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1); visibility: hidden; width: 200px; z-index: -99; padding: 10px 0px; border-radius: 3px; } .pagess { position: relative; } .navbar.navbar-default { float: right; } .main-menu ul.nav li ul.sub-menu li { padding: 0; position: relative; width: 100%; } .main-menu ul.nav li:hover ul.sub-menu{ top:100%; opacity:1; z-index:999; visibility:visible; } .main-menu ul.nav li ul.sub-menu li a { color: #3d5368; display: block; font-size: 15px; padding: 5px 20px; } .main-menu ul.nav li ul.sub-menu li a span{ color: #0062cc; } .main-menu ul.nav li:hover ul.sub-menu li a:hover{ color:#0062cc; } .header-right-link { float: right; width: 180px; padding: 30px 0px; margin-left: 70px; text-align: right; } .slice-btn { display: inline-block; padding: 0px 15px; } .slice-btn span { font-size: 20px; font-weight: 500; color: #3d5368; cursor: pointer; line-height: 28px; } .search-inner { display: inline-block; } .search-option { background: #f5f5f5; bottom: -84px; color: #3d5368; display: none; position: absolute; right: 20px; width: 300px; z-index: 99999; padding: 20px; } .search-option input { background: #fff none repeat scroll 0 0; border: medium none; color: #3d5368; display: block; float: left; font-size: 14px; font-style: italic; padding: 8px 10px; width: 214px; height: 44px; } .search-option button.button { background: #0062cc; border: medium none; color: #fff; display: inline-block; float: right; font-size: 17px; line-height: 35px; padding: 5px 15px; text-align: center; } .header-right-link a.main-search { color: #3d5368; display: inline-block; font-size: 18px; position: relative; } .header-right-link a.main-search:hover{ color: #0062cc; } .s-menu { padding: 7px 30px; border: 1px solid #0062cc; background: #0062cc; color: #fff; transition: 0.4s; font-size: 15px; font-weight: 500; border-radius: 3px; } .s-menu:hover { border: 1px solid #0062cc; background: transparent; color:#0062cc; transition: 0.4s; } .header-area.stick .header-right-link { padding: 27px 0px; } /*--------------------------------*/ /* 2.2. Sticky Header Area /*--------------------------------*/ .header-area.stick { left: 0; position: fixed; top: 0; width: 100%; z-index: 999999; box-shadow: 0px 0px 3px #ddd, -2px -2px 3px #ddd; background: #fff; } .header-area.stick .logo a { display: inline-block; height: auto; padding: 17px 0; } .header-area.stick .main-menu ul.navbar-nav li a { padding: 30px 15px; color: #3d5368; } .header-area.stick .main-menu ul.nav li ul.sub-menu li a { color: #3d5368; display: block; padding: 5px 15px; } .header-area.stick .main-menu ul.nav li ul.sub-menu li a:hover{ color: #0062cc; } /*----------------------------------------*/ /* 2.3. Mobile Menu Area /*----------------------------------------*/ .mobile-menu-area { background: #fdfcfc none repeat scroll 0 0; padding: 10px 0px ; } .mean-container .mean-bar::after { content: ""; font-size: 21px; left: 5%; position: absolute; top: 12px; text-transform: uppercase; font-weight: 500; } .mean-container a.meanmenu-reveal:hover { color:#0062cc } .mean-container .mean-nav ul { list-style-type: none; margin: 20px 0px; padding: 0; width: 100%; } .mean-container .mean-nav ul li a { background: #fdfcfc none repeat scroll 0 0; color: #3d5368; display: block; float: left; font-size: 14px; font-weight: 400; margin: 0; padding: 13px 10px; text-align: left; text-decoration: none; text-transform: capitalize; width: 90%; } .mean-nav ul li.mean-last { margin-bottom: 20px; } .mean-container .mean-nav ul li a.mean-expand { color: #3d5368; line-height: 17px; } .mean-container .mean-nav ul li { width: 99.7%; } /*----------------------------------------*/ /* 3. Intro Area /*----------------------------------------*/ .intro-area{ position: relative; overflow: hidden; } .intro-area .bg-wrapper{ position: relative; } .bg-wrapper img, .intro-bg img{ max-width: 100%; height: auto; } .intro-bg img{ opacity: 1; } .intro-area .intro-bg{ position: absolute; top: 0px; min-height: 500px; z-index: 2; } .display-table{ width: 100%; height: 100%; display: table; } .display-table-cell{ width: 100%; height: 100%; display: table-cell; vertical-align: middle; } .intro-content { position: absolute; z-index: 2; top: 50%; left: 0; width: 100%; height: auto; margin-top: -145px; } .slider-content { position: relative; } .best-title { font-size: 17px; font-weight: 400; color: #0062cc; } .slide-icon { margin-right: 10px; font-size: 26px; width: 50px; height: 50px; line-height: 48px; border: 1px solid #0062cc; color: #0062cc; text-align: center; display: inline-block; border-radius: 3px; } .layer-2 p { font-size: 18px; line-height: 30px; max-width: 460px; } .layer-1 h2 { color: #1d2730; font-size: 50px; font-weight: 500; line-height: 54px; max-width: 540px; margin-bottom: 20px; letter-spacing: 1px; } .ready-btn { border: 1px solid #0062cc; color: #fff; cursor: pointer; display: inline-block; font-size: 16px; font-weight: 500; margin-top: 20px; padding: 8px 30px; text-align: center; text-transform: capitalize; transition: all 0.4s ease 0s; background: #0062cc; border-radius: 3px; } .ready-btn:hover{ color: #fff; background: #0062cc; border: 1px solid #0062cc; text-decoration: none; transition: all 0.4s ease 0s; } .ready-btn.right-btn { margin-left: 15px; background: #fff; border: 1px solid #0062cc; color:#0062cc; } .ready-btn.right-btn:hover{ background: #0062cc; border: 1px solid #0062cc; color:#fff; } .ready-btn.left-btn:hover{ border: 1px solid #0062cc; background: #fff; color:#0062cc; } .layer-1 .color { color: #0062cc; } .video-content { display: inline-block; margin-left: 40px; position: relative; top: 5px; } .video-play.vid-zone { border-radius: 100px; display: inline-block; border: 1px solid #0062cc; text-align: center; height: 60px; width: 60px; line-height: 57px; position: relative; font-size: 30px; background: transparent; } .video-play::before { -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-name: popcircle; animation-name: popcircle; border: 1px solid #0062cc; border-radius: 100px; content: ""; height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .video-play.vid-zone i { color: #0062cc; margin-left: 5px; } .video-play.vid-zone:hover i { color: #0062cc; } .video-play.vid-zone:hover { background: #fff; color: #0062cc; transition: 0.4s; } /*--------------------------------*/ /* 5.Welcome Services Area /*--------------------------------*/ .welcome-area{ position: relative; padding: 110px 0px 140px; } .services-list { padding-right: 80px; } .all-services{ margin-top:-30px; } .well-services { background: #fff; text-align: center; position: relative; margin-top: 30px; box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1); z-index: 1; padding: 40px 20px; overflow: hidden; border-radius: 3px; transition: 0.4s; z-index: 1; } .well-services::after{ position: absolute; content:""; left: 0px; top: 0; width: 100%; height: 100%; background: #0062cc; transition: 0.4s; opacity: 0; z-index: -1; } .big-icon { font-size: 30px; display: inline-block; line-height: 76px; color: #fff; position: relative; z-index: 1; width: 80px; height: 80px; background: #0062cc; border: 1px solid #0062cc; border-radius: 50%; } .main-wel { padding: 20px 0px 0px; } .wel-content p { margin-bottom: 0px; } .wel-content h4 { display: inline-block; font-size: 19px; margin-bottom: 0; padding: 0 0 10px; font-weight: 400; } .well-services:hover .big-icon { transition: 0.4s; color: #0062cc; border: 1px solid #fff; background: #fff; } .well-services.first-item, .well-services.thired-item{ position: relative; top: 30px; } .well-services:hover::after{ transition: 0.4s; opacity:1; } .well-services:hover .wel-content h4, .well-services:hover .wel-content p { color:#fff; } .services-carousel.owl-carousel.owl-theme .owl-controls .owl-dots div.owl-dot > span { background: #3d5368 none repeat scroll 0 0; display: inline-block; height: 8px; width: 8px; -moz-transition:0.4s; -webkit-transition:0.4s; -o-transition:0.4s; -ms-transition:0.4s; transition:0.4s; border-radius: 50%; } .services-carousel.owl-carousel.owl-theme .owl-controls .owl-dots { bottom: -20px; display: block; left: 50%; margin-left: -40px; position: absolute; } .services-carousel.owl-carousel.owl-theme .owl-controls .owl-dots div.owl-dot { display: inline-block; margin: 0 3px; } .services-carousel.owl-carousel.owl-theme .owl-controls .owl-dots div.owl-dot.active span { background: #0062cc; width: 30px; border-radius: 3px; } /*--------------------------------*/ /* 4.About Area /*--------------------------------*/ .about-area { position: relative; } .about-image { border-radius: 10px; position: relative; overflow: hidden; } .about-content { display: block; text-align: center; } .about-image img { border-radius: 10px; } .support-all.left-item { padding-right: 70px; } .support-all.right-item { padding-left: 70px; } .support-services { padding-top: 40px; } .support-images { float: left; font-size: 34px; color: #0062cc; line-height: 36px; text-align: center; transition: 0.4s; font-weight: 400; } .support-content { padding-left: 70px; } .support-services .support-content h4 { font-size: 20px; text-transform: capitalize; font-weight: 500; padding-bottom: 0px; letter-spacing: 1px; } .support-services .support-content h4 a { color: #3d5368; } .support-services .support-content p { margin-bottom: 0px; } .ab-btn { display: inline-block; font-size: 16px; color: #0062cc; font-weight: 500; text-decoration: underline; margin-top: 10px; } .about-btn{ padding-left: 70px; } /*--------------------------------*/ /* 6.Feature Area /*--------------------------------*/ .feature-area, .feature-area-3{ position: relative; } .top-head { width: 50px; display: inline-block; height: 50px; font-size: 26px; color: #0062cc; text-align: center; line-height: 48px; margin-bottom: 20px; border: 1px solid #0062cc; border-radius: 3px; margin-right: 10px; } .feature-text h3 { font-size: 32px; line-height: 40px; letter-spacing: 1px; } .feature-text p { font-size: 16px; line-height: 28px; letter-spacing: 1px; } .feature-list { padding: 20px 15px 20px 20px; box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1); margin-top: 30px; border-radius: 3px; } .feature-list a { float: left; width: 54px; height: 54px; border: 1px solid #0062cc; background: #0062cc; color: #fff; text-align: center; line-height: 52px; font-size: 28px; } .left-headline p { font-size: 16px; letter-spacing: 1px; } .list-single { padding-left: 80px; } .list-single h5 { margin-bottom: 5px; line-height: 20px; } .list-single p { margin-bottom: 0px; } /*---------------------------------------- 7.Counter Area Css ----------------------------------------*/ .counter-area{ position: relative; } .fun_text { text-align: center; border: 1px solid #0062cc; padding: 110px 0px; position:relative; z-index: 1; } .fun_text::after { background: url(img/about/shape.png); background-repeat: no-repeat; position: absolute; content: ""; top: 50%; width: 100px; height: 100px; left: 0; z-index: -1; right: 0; margin: auto; margin-top: -90px; opacity: 0.3; } .fun_text span { color: #0062cc; display: block; font-size: 50px; padding-bottom: 20px; line-height: 50px; font-weight: 700; } .fun_text > h4 { color: #3d5368; font-size: 17px; text-transform: capitalize; margin-bottom: 0px; } /*----------------------------------------*/ /* 8. Pricing area css /*----------------------------------------*/ .pricing-area{ position: relative; } .title-icon { background: #fff; width: 50px; height: 50px; line-height: 48px; font-size: 24px; display: inline-block; border: 1px solid #0062cc; color: #0062cc; border-radius: 3px; margin-bottom: 20px; } .table-list { text-align: center; transition: all 0.4s ease 0s; background: #fff; border-radius: 5px; position: relative; overflow: hidden; border: 1px solid #f5f5f5; padding-bottom: 30px; } .top-price-inner { text-align: center; padding: 40px 30px 0px; margin-bottom: 30px; z-index: 1; transition: all 0.4s ease 0s; } .top-price-inner h4 { color: #fff; font-size: 24px; text-transform: capitalize; margin-bottom: 30px; letter-spacing: 1px; background: #0062cc; padding: 10px 20px; display: inline-block; border-radius: 4px; max-width: 140px; width: 100%; } span.users { color: #0062cc; text-transform: uppercase; font-size: 13px; font-weight: 700; } span.dolar { font-size: 24px; margin-right: 5px; position: relative; top: -17px; color: #6a7d91; } .prices { font-size: 40px; font-weight: 600; color: #3d5368; padding-right: 30px; } .table-list:hover{ box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1); transition: all 0.4s ease 0s; } .table-list ol li { color: #6a7d91; padding: 8px 0px; position: relative; text-align: center; letter-spacing: 0.70px; } .table-list li.check.cross{ position: relative; } .pricing-content { margin-top: -30px; } .table-list { margin-top: 30px; } .table-list li.check.cross::after { content: ""; position: absolute; top: 21px; left: 0; background: #ccc; width: 100px; height: 2px; margin: 0 auto; right: 0; } .price-btn { padding: 30px 20px; } .price-btn a { color: #fff; text-transform: uppercase; transition: all 0.4s ease 0s; border-radius: 2px; font-weight: 700; font-size: 14px; padding: 12px 34px; background: #0062cc; border: 1px solid #0062cc; } .table-list ol { list-style: outside none none; margin: 0; padding: 0; } .price-btn a:hover { background: #fff; color: #0062cc; border: 1px solid #0062cc; } .table-list ol { margin-top: 10px ; } /*----------------------------------------*/ /* 9. banner Area /*----------------------------------------*/ .banner-area { background: #0062cc; display: block; overflow: hidden; border-radius: 3px; } .banner-content { overflow: hidden; padding: 0px 40px; text-align: center; } .banner-btn { border: 1px solid #fff; display: inline-block; padding: 8px 30px; color: #0F2350; font-weight: 500; font-size: 18px; background: #fff; border-radius: 3px; } .banner-btn:hover{ background: transparent; border: 1px solid #fff; color:#fff; } .banner-content h3 { margin: 0 auto 40px; color: #fff; font-size: 28px; max-width: 800px; line-height: 36px; letter-spacing: 1px; } .mail-btn { color: #fff; font-weight: 500; font-size: 18px; margin-right: 30px; position: relative; transition: 0.4s; } .mail-btn:hover{ color: #fff; transition: 0.4s; } .mail-btn::after{ position: absolute; content: ""; left: 0; bottom: 0; width: 0%; height: 1px; background: #fff; transition: 0.4s; } .mail-btn:hover::after{ transition: 0.4s; width: 100%; } /*---------------------------------------- 10.Reviews Area Css ----------------------------------------*/ .reviews-area{ position: relative; } .reviews-area{ position: relative; } .single-testi { margin: 20px 0px 50px; } .clients-text { padding: 40px 30px; position: relative; background-color: #fff; box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1); border-radius: 4px; } .Reviews-content .clients-text::after { position: absolute; left: 40px; bottom: -28px; content: ""; border-top: 30px solid #fff; border-left: 20px solid transparent; border-right: 20px solid transparent; } .testi-img { position: relative; margin-top: 50px; } .testi-img img { width: 100%; display: inline-block !important; max-width: 80px; height: auto; border-radius: 50px; border: 2px solid #0062cc; margin-right: 20px; } .guest-details { display: inline-block; text-align: left; top: 15px; position: relative; } .Reviews-content { margin-bottom: 15px; } .testi-text h4 { font-weight: 500; text-transform: uppercase; font-size: 15px; margin-bottom: 0px; } .testi-text p { margin-bottom: 0px; } .client-rating { margin-top: 15px; } .testi-text span a{ color:#0062cc; } .testi-text h5 { color: #6a7d91; font-size: 20px; } .client-rating a { display: inline-block; color: #fec731; font-size: 20px; padding: 0px 5px 0px 0px; } .testimonial-carousel.owl-carousel.owl-theme .owl-controls .owl-dots div.owl-dot > span { background: #3d5368 none repeat scroll 0 0; display: inline-block; height: 8px; width: 8px; -moz-transition:0.4s; -webkit-transition:0.4s; -o-transition:0.4s; -ms-transition:0.4s; transition:0.4s; border-radius: 50%; } .testimonial-carousel.owl-carousel.owl-theme .owl-controls .owl-dots { bottom: -20px; display: block; left: 50%; margin-left: -40px; position: absolute; } .testimonial-content { margin-bottom: 15px; } .testimonial-carousel.owl-carousel.owl-theme .owl-controls .owl-dots div.owl-dot { display: inline-block; margin: 0 3px; } .testimonial-carousel.owl-carousel.owl-theme .owl-controls .owl-dots div.owl-dot.active span { background: #0062cc; width: 30px; border-radius: 3px; } /*----------------------------------------*/ /* 11. Blog Area /*----------------------------------------*/ .blog-grid { margin-top: -30px; } .blog-content { padding: 40px 20px 40px 30px; position: relative; z-index: 1; transition: 0.5s; overflow: hidden; border-radius: 4px; } .blog-content::after{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background:#0062cc; z-index: -1; opacity: 0; transition: 0.4s; content:""; } .blog-content a h4 { font-size: 22px; color: #3d5368; line-height: 30px; transition: 0.4s; } .admin-type img { width: 50px; height: 50px; border-radius: 50px; border: 2px solid #0062cc; margin-right: 10px; } .date-type i, .comments-type i{ color: #0062cc; margin-right: 5px; } .single-blog:hover .blog-content::after { transition: 0.4s; opacity: 1; } .blog-content p { line-height: 28px; transition: 0.4s; } .blog-content a h4:hover{ color:#0062cc; transition: 0.4s; } .blog-meta span { color: #6c6d6d; font-size: 14px; font-weight: 400; padding-right: 10px; } .single-blog { margin-top: 30px; position: relative; box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1); } .blog-1 .blog-meta { position: relative; } .blog-1 .blog-meta::before { position: absolute; left: -30px; top: 10px; content: ""; width: 3px; background: #0062cc; height: 30px; } .blog-meta { margin-bottom: 15px; } .blog-btn { color: #fff; display: inline-block; font-size: 16px; font-weight: 400; transition: all 0.4s ease 0s; border: 1px solid #0062cc; background: #0062cc; padding: 7px 24px; margin-top: 10px; border-radius: 3px; } .blog-btn:hover{ background: #fff; color:#0062cc; border: 1px solid #0062cc; transition: all 0.4s ease 0s; } .blog-grid .single-blog:hover .blog-btn{ background: #fff; color:#0062cc; border: 1px solid #fff; } .blog-grid .single-blog:hover .blog-btn:hover{ color: #fff; background: #0062cc; transition: all 0.4s ease 0s; } .blog-grid .single-blog:hover .comments-type i, .blog-grid .single-blog:hover .blog-meta span, .blog-grid .single-blog:hover .blog-content a h4, .blog-grid .single-blog:hover .blog-content p{ color:#fff; } /*----------------------------------------*/ /* 12. Footer Area /*----------------------------------------*/ .footer-1 { background: #07213C; } .footer-area{ padding: 90px 0px; } .footer-logo { margin-bottom: 20px; } .footer-head p { color: #c6d4e4; } .footer-head h4 { color: #fff; font-size: 20px; margin-bottom: 30px; text-transform: capitalize; font-weight: 500; } .footer-icons ul li { display: inline-block; } .footer-icons ul li a { color: #fff; display: block; font-size: 15px; line-height: 28px; text-align: center; margin-right: 3px; width: 30px; height: 30px; border: 1px solid #0062cc; border-radius: 2px; background: #0062cc; transition: 0.4s; } .footer-tags li a:hover{ color:#fff; } .footer-icons ul li a:hover{ color: #0062cc; background: #fff; transition: 0.4s; } .footer-tags { display: block; overflow: hidden; } .footer-tags li { float: left; } .footer-tags li a { color: #c6d4e4; display: block; font-size: 15px; font-weight: 500; padding: 3px 5px; } .footer-icons { margin-top: 30px; } .footer-list { width: 50%; float: left; } .footer-contacts p span { color: #fff; font-weight: 700; } .footer-list li a { color: #c6d4e4; padding: 7px 0px 7px 25px; display: block; position: relative; font-weight: 400; } .footer-list li a:first-child{ padding-top: 0px; } .footer-list li a::after { position: absolute; content: "\e88a"; right: auto; font-family: pezion; top: 1px; left: 0; font-size: 14px; } .footer-list li a:hover, .footer-list li a:hover::after{ color: #fff; } .footer-list li a:hover::after{ color: #fff; } .footer-area-bottom { background:#051e37; padding: 25px 0; } .copyright-text a:hover{ text-decoration: underline; color:#fff; } .copyright-text a { color: #0062cc; } .copyright > p { margin-bottom: 0; color: #c6d4e4; } .copyright a { color: #0062cc; } /*----------------------------------------*/ /* 13. Home-2 area /*----------------------------------------*/ .header-area-2 .center-bg{ background: #0062cc; padding: 0px 20px 0px 20px; } .header-area-2 .main-menu ul.navbar-nav li a{ color: #fff; } .header-area-2.stick{ background: #0062cc; } .header-area.stick .center-bg{ padding:0px; } .header-area-2 .s-menu{ background: #fff; color: #0062cc; } .header-area-2.stick .main-menu ul.navbar-nav li a{ color:#fff; } .intro-area-2 .slider-content { text-align: center; } .intro-area-2 .intro-content { margin-top: -100px; } .intro-area-2 .layer-1 h2 { margin: 0 auto 20px; color: #fff; max-width: 650px; } .intro-area-2 .layer-2 p { margin: 0px auto 15px; color: #ddd; max-width: 530px; font-size: 18px; } .intro-area-2 .bg-wrapper{ position: relative; z-index: 1; } .intro-area-2 .bg-wrapper::after{ position: absolute; content:""; left: 0px; top: 0; width: 100%; height: 100%; background: rgba(7,33,60,0.75); transition: 0.4s; } .intro-area-2 .video-play::before { border: 1px solid #fff; } /*----------------------------------------*/ /* 14. Home-3 Area /*----------------------------------------*/ .intro-area-3 .layer-1 h2 { color: #fff; font-size: 46px; max-width: 430px; } .intro-area-3 .layer-2 p{ color:#ddd; } .intro-area-3 .ready-btn{ background: #fff; color:#0062cc; } .intro-area-3 .video-play.vid-zone{ background: #fff; } .intro-area-3 .video-play::before{ border:1px solid #fff; } .header-area-3 .center-bg{ padding: 0px 15px 0px; } .slide-images { float: right; position: relative; top: -30px; } /*----------------------------------------*/ /* 15. Breadcumbs Area /*----------------------------------------*/ .center-page { padding: 0px 20px 0px 20px; } .page-area { position: relative; } .page-area { background: url(img/background/bread-bg.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center; } .breadcumb-overlay { position: absolute; background: rgba(0,98,204,0.90); top: 0; width: 100%; left: 0; height: 100%; } .page-area .section-headline::after { display: none; } .breadcrumb { background-color: transparent; margin-bottom: 0; padding: 250px 0px 180px; } .breadcrumb h3 { color: #fff; text-transform: capitalize; font-size: 34px; font-weight: 600; line-height: 42px; position: relative; } .breadcrumb h3::after { bottom: -25px; position: absolute; content: ""; right: 0; background: #fff; width: 70px; height: 2px; left: 0; margin: auto; } .breadcrumb .section-headline { margin-bottom: 0px; padding-bottom: 45px; text-align: center; } .breadcrumb ul li { display: inline-block; color: #fff; padding: 0px 10px 0px 20px; position: relative; font-size: 16px; } .breadcrumb ul li.home-bread{ padding-left: 0px; } .breadcrumb ul li.home-bread::after { position: absolute; content: "\f105"; font-family: fontAwesome; right: -10px; top: 0; } .pages-header { background: #fff; } .pages-header .logo a { padding: 17px 0; } .pages-header .main-menu ul.navbar-nav li a { padding: 30px 15px; } .pages-header .header-right-link { padding: 27px 0px; } .pages-header .main-menu > ul.navbar-nav >li >a::before { bottom: 25px; } .review-page-area .single-testi { margin:50px 0px 0px; } .review-page-area .Reviews-content { margin-bottom: 15px; margin-top: -50px; } /*--------------------------------*/ /* 16 .Why choose Area /*--------------------------------*/ .choose-area{ position: relative; } .choose-image { position: relative; border-radius: 5px; padding-left: 30px; } .choose-image img{ border-radius: 5px; box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1); } .choose-text { margin-left: 100px; margin-top: 40px; } .choose-area-2 .choose-text { margin-left: 0px; margin-right: 100px; margin-top: 40px; } /*----------------------------------------*/ /* 17. Team Area /*----------------------------------------*/ .team-area { background: #fff; } .single-member .team-img { display: inline-block; position: relative; overflow: hidden; max-height: 180px; max-width: 180px; width: 100%; height: 100%; border-radius: 50%; border: 1px solid #0062cc; } .team-hover li { display: inline-block; margin-right: 5px; } .team-hover li a { color: #fff; border: 1px solid #0062cc; background: #0062cc; display: block; width: 34px; height: 34px; line-height: 32px; border-radius:50%; } .team-hover li a:hover { color: #fff; border: 1px solid #0062cc; background: #0062cc; } .team-hover { padding: 15px 0; text-align: center; transition: all 0.4s ease 0s; } .single-member .team-img a { display: block; } .single-member { box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1); padding: 40px 30px 20px; } .team-content { padding: 10px; } .team-content h5 a { color: #666; } .team-content p { margin-bottom: 0; } .team-content h5 { font-size: 18px; margin: 10px 0px; text-transform: capitalize; font-weight: 600; } .team-page-area .team-member{ margin-top: -30px; } .team-page-area .single-member{ margin-top: 30px; } /*----------------------------------------*/ /* 18. FAQ Area /*----------------------------------------*/ .faq-area{ position: relative; } .company-faq { display: block; overflow: hidden; } .left-faq { display: block; overflow: hidden; padding-right: 40px; } .right-faq { display: block; overflow: hidden; padding-left: 40px; } .single-faq .number { color: #0062cc; font-weight: 600; padding-right: 10px; float: left; } .single-faq h4 { font-size: 22px; letter-spacing: 1px; } .single-faq p { padding-left: 40px; letter-spacing: 0.60px; } span.q-text { padding-left: 40px; display: inherit; } /*----------------------------------------*/ /* 19.Contact CSS /*----------------------------------------*/ .contact-area { height: auto; width: 100%; } .contact-content { padding: 100px; background: #000 none repeat scroll 0 0; } .contact-content-right { padding:100px; } .contact-form input[type="text"], .contact-form input[type="email"] { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; border: 1px solid #ccc; border-radius: 0; color: #3d5368; height: 46px; margin-bottom: 25px; padding-left: 20px; width: 100%; } .contact-form textarea#message { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; border: 1px solid #ccc; border-radius: 0; color: #3d5368; height: 140px; padding: 20px; width: 100%; } .contact-form button[type="submit"] { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; border: 1px solid #0062cc; color: #fff; display: block; font-size: 18px; margin-top: 16px; padding: 13px 24px; border-radius: 2px; transition: all 0.3s ease 0s; background: #0062cc; } .contact-form button[type=submit]:hover{ color:#0062cc; border: 1px solid #0062cc; background: #fff; transition: all 0.3s ease 0s; } .single-icon i { font-size: 34px; width: 80px; height: 80px; border: 1px solid #0062cc; background: #0062cc; line-height: 77px; border-radius: 50%; margin-bottom: 20px; color:#fff; } .single-icon p { font-size: 16px; line-height: 30px; } .contact-icon { margin-bottom: 80px; box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1); padding: 50px 30px 30px; } /*----------------------------------------*/ /* 20. Blog Sidebar Area /*----------------------------------------*/ .blog-page-area .single-blog { padding: 5px; background: #fff; } .blog-page-area .blog-content{ padding: 10px 15px 20px; } .blog-search-option input { padding: 5px 15px; width: 80%; border: none; height: 56px; background: transparent; } .blog-search-option { margin-bottom: 30px; display: block; background: #fff; border: 1px solid #0062cc; border-radius: 3px; } .blog-search-option button { background: transparent; border: none; } .blog-search-option button i { line-height: 16px; font-size: 18px; padding: 0px 10px; } .blog-search-option button i:hover { color: #0062cc; } .left-blog h4 { position: relative; color: #3d5368; font-size: 20px; font-weight: 500; margin-bottom: 5px; padding: 15px 0px; text-transform: capitalize; } .left-blog h4::after { position: absolute; content: ""; left: 0; bottom: 0; width: 70px; height: 1px; background: #0062cc; } .blog-left-content .blog-content::after{ display: none; } .left-side { padding-right: 40px; } .right-side{ padding-left: 40px; } .left-blog { overflow: hidden; padding-bottom: 20px; } .left-blog li { display: block; } .left-blog ul li a { color: #6a7d91; display: inline-block; font-size: 15px; padding: 7px 0px 7px 25px; text-transform: capitalize; position: relative; } .left-blog ul li span { float: right; border: 1px solid #0062cc; width: 24px; height: 24px; text-align: center; border-radius: 50px; font-size: 13px; color: #0062cc; line-height: 24px; } .pst-content .date-type{ font-size: 14px; } .left-blog ul li a:before { position: absolute; content: ""; left: 5px; top: 20px; background: #0062cc; width: 12px; height: 2px; border-radius: 2px; } .popular-tag.left-blog ul li a:before { display: none; } .recent-single-post { display: block; overflow: hidden; padding: 15px 0px; } .recent-single-post:last-child { border-bottom: none; } .post-img { display: inline-block; float: left; padding-right:10px; } .left-blog .post-img a { display: block; border:1px solid #fafafa; } .left-blog .post-img a img { border-radius: 4px; } .pst-content { padding-left: 100px; } .pst-content p{ margin-bottom: 0px; } .pst-content p a:hover,.left-blog ul li a:hover { color: #0062cc; } .blog-page-area .blog-content { background: #f9f9f9; } .pst-content p a { color: #3d5368; font-size: 15px; } .blog-tags { padding: 1px 0; } .recent-single-post img { width: 100%; max-width: 80px; height: 80px; object-fit: cover; border-radius: 2px; } .left-blog li:last-child { border-bottom: 0 ; } .popular-tag.left-side-tags.left-blog ul { padding:0px; } .left-tags .left-side-tags ul li { border-bottom: 0; display: inline-block; margin: 5px 3px; } .left-tags .left-side-tags ul li a { padding: 5px 10px; width: auto; background: #f4f5f4; color: #6a7d91; border-radius: 3px; font-weight: 400; font-size: 14px; } .left-tags .left-side-tags ul li a:hover { color:#fff; background:#0062cc; } .left-side-tags h4 { margin-bottom: 15px; } .blog-side-area .blog-right-column{ margin-top: -30px; } .pagination { display: inline-block; padding-left: 0; margin: 50px 0 0px; border-radius: 4px; } .pagination>li>a, .pagination>li>span { position: relative; float: left; padding: 6px 12px; line-height: 1.42857143; text-decoration: none; color: #6a7d91; background-color: #f4f5f5; border: none; margin-left: -1px; border-radius: 2px; } .pagination>li { display: inline-block; margin: 0px 3px 0px 0px; } .pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus{ z-index: 3; color: #fff; background-color: #0062cc; cursor: default; border-radius: 2px; } .pagination>li>a:hover, .pagination>li>span:hover, .pagination>li>a:focus, .pagination>li>span:focus { z-index: 2; color: #fff; background-color: #0062cc; border-color: #0062cc; border-radius: 2px; } .blog-left-content{ margin-top: -30px; } .adver-img { margin-top: 20px; } /*----------------------------------------*/ /* 21. Blog Details /*----------------------------------------*/ .comments-heading h3, h3.comment-reply-title { border-bottom: 1px solid #ddd; color: #3d5368; font-size: 18px; margin: 0 0 40px; padding: 0 0 5px; text-transform: capitalize; } .comments-list ul li{ margin-bottom: 25px; } .comments-list-img{ float: left; margin-right: 15px; border-radius: 50%; } .comments-list-img img { border-radius: 50px; border: 1px solid #0062cc; } .comments-content-wrap { color: #6a7d91; font-size: 14px; margin: 0 0 15px 80px; padding: 10px; position: relative; } blockquote { padding: 20px 40px 40px 80px; margin: 0 0 20px; font-size: 15px; border-left: none; font-style: italic; position: relative; background: #f5f5f5; } blockquote::before { position: absolute; top: 20px; left: 30px; content: "\f10d "; font-family: fontawesome; font-size: 34px; color: #6a7d91; } blockquote p { font-size: 16px !important; line-height: 28px; } .author-avatar { display: inline-block; float: left; width: 10%; } .author-description h2 { color: #3d5368; font-size: 20px; text-transform: uppercase; } .author-description h2 a { color: #3d5368; } .comments-content-wrap span b{margin-right:5px} .comments-content-wrap span a:hover{} span.post-time{margin-right:5px} .comments-content-wrap p { color: #6a7d91; margin-top: 10px; } .threaded-comments{ margin-left:50px } .comment-respond { margin-top: 20px; } span.email-notes{ color: #6a7d91; display: block; font-size: 12px; margin-bottom: 10px; } .comment-respond p { color: #6a7d91; margin-bottom: 5px; } .comment-respond input[type=text], .comment-respond input[type=email]{ border: 1px solid #ccc; border-radius: 0; height: 32px; margin-bottom: 15px; padding: 0 0 0 10px; width: 100%; background: transparent; } .comment-respond textarea#message-box{ border: 1px solid #ccc; border-radius: 0; max-width: 100%; padding: 10px; height: 160px; width: 100%; background: transparent; } .comments-content-wrap span a { color: #0062cc; } .comments-content-wrap span a:hover { color: #0062cc; } .comment-respond .add-btn.contact-btn { background: #0062cc; color: #fff; display: block; font-size: 16px; margin-top: 5px; padding: 10px 20px; transition: 0.4s; border-radius: 2px; width: auto !important; margin-top: 20px; border: 1px solid #0062cc; text-transform: capitalize; font-weight: 600; } .comment-respond .add-btn.contact-btn:hover{ background: #fff; color: #0062cc; border:1px solid #0062cc; } .blog-page-details .left-blog-page { margin-top:0px; margin-bottom:30px; } .single-post-comments, .related-post{ margin-top: 30px; } .left-head-blog .pst-content p{ margin-bottom: 5px; } .blog-details .blog-content h4 { font-size: 22px; line-height: 34px; margin-top: 10px; font-weight: 400; } .blog-details .blog-content h5 { font-size: 20px; } .blog-details .blog-content { border: 1px solid #f5f5f5; } .blog-details .blog-images img { width: 100%; height: 100%; max-height: 450px; object-fit: cover; } .blog-details .img-blog { margin: 30px 0px; width: 100%; height: 100%; max-height: 350px; overflow: hidden; } .related-post-list .recent-single-post { width: 50%; float: left; padding: 0px 20px 0px 0px; } .related-post-list .recent-single-post:last-child{ padding: 0px 0px 0px 20px; } /*----------------------------------------*/ /* 22. Animation CSS /*----------------------------------------*/ .item-bounce { -webkit-animation: bounce 3s infinite ease-in-out; animation: bounce 3s infinite ease-in-out; } @-webkit-keyframes bounce { 0% { -webkit-transform: translateY(-5px); transform: translateY(-5px); } 50% { -webkit-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform: translateY(-5px); transform: translateY(-5px); } } @keyframes bounce { 0% { -webkit-transform: translateY(-5px); transform: translateY(-5px); } 50% { -webkit-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform: translateY(-5px); transform: translateY(-5px); } } @-webkit-keyframes popcircle { 0% { -webkit-transform: scale(1); transform: scale(1); } 99% { -webkit-transform: scale(1.5); transform: scale(1.5); } 100% { opacity: 0; } } @keyframes popcircle { 0% { -webkit-transform: scale(1); transform: scale(1); } 99% { -webkit-transform: scale(1.5); transform: scale(1.5); } 100% { opacity: 0; } } /*--------------------------------*/ /* .End CSS /*--------------------------------*/