/* Template Name: Businece Description: This is a Business and Agency HTML5 Template; Version: 1.0 Authot: Md. Mushahidul islam Website: ======== TABLE CONTENTS======== 1. GLOBAL STYLES 2. HEADER AREA STYLES 3. SLIDER STYLES 4. Section title 5. About Area 6. Service Area 7. Project Area 8. Testimonial 9. Home Blog 10. Footer Area 11. project Style 12. Funfacts Area 13. Pricing Table Style 14. Contact 15. Team /* /* Google Fonts */ @import url('css.css'); /*==== CSS Custom Properties ====*/ :root { --primary-color : #0F4C81; --primary-color-rgb : 15, 76, 129; --accent-color : #fbd258; --dark-bg : #252525; --text-color : #666666; --heading-color : #333333; --white-color : #ffffff; --white-color-rgb : 255, 255, 255; --light-bg : #f9f9f9; --border-color : #dddddd; } /*==== 1. GLOBAL STYLES ====*//* === 1.1 Body === */ html { font-size: 100%; /*overflow-x: hidden; */} body { background-color: var(--white-color); color: var(--text-color); font-family: 'Lato', sans-serif; font-size: 14px; font-weight: normal; line-height: 24px; margin: 0; padding: 0; position:relative;}/* ======================================== 2. Typography =========================================== *//* === 1.2 Hyperlink === */ a { color: #303030; /*transition*/ -webkit-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; text-decoration:none; font-family: 'Roboto', sans-serif;} a, a >* { cursor: pointer; outline: medium none; text-decoration: none;} a:focus, a:hover { outline: medium none; text-decoration: none; color:inherit;} h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit ;}/* === 2.1 Headings === */ h1, h2, h3, h4, h5, h6 { color: var(--heading-color); margin: 0 0 15px; padding: 0; -webkit-transition: 0.3s ; -o-transition: 0.3s ; transition: 0.3s ; font-family: 'Roboto', sans-serif;} h1 { font-size: 36px; line-height: 52px; font-weight: 700;} h2 { font-size: 30px; line-height: 45px; font-weight: 700;} h3 { font-size: 28px; line-height: 32px;} h4 { font-size: 24px; line-height: 38px;} h5 { font-size: 20px; line-height: 30px;} h6 { font-size: 18px;}/* === PARAGRAPH === */ p { margin: 0 0 10px;} b, strong { font-weight: 600;}/* === Basic Margins Paddings ===*//*Padding Bottom*/ .pb-60{ padding-bottom:60px;} .pb-70{ padding-bottom:70px;} .pb-80{ padding-bottom:80px;} .pb-90{ padding-bottom:90px;} .pb-110{ padding-bottom: 110px;} .pt-110{ padding-top: 110px;} .pt-80{ padding-top: 80px;}/*=== Padding Top Bottom ===*/ .ptb-80{ padding: 80px 0;} .ptb-105{ padding:105px 0;} .ptb-100{ padding:100px 0;} .ptb-108{ padding:108px 0;} .ptb-110{ padding:110px 0;}/* Miscellaneous Paddings */ .pt110-pb180 { padding: 110px 0 180px;}.pt125-pb45 { padding: 125px 0 45px;}.pt135-pb45 { padding: 135px 0 45px;} .pt110-pb105 { padding: 110px 0 105px;} .pt110-pb50{ padding: 110px 0 50px;} .pt110-pb45{ padding: 110px 0 45px;} .pt110-pb65{ padding:110px 0 65px;} .pt110-pb70{ padding:110px 0 70px;} .pt110-pb80{ padding: 110px 0 80px;} .pt110-pb85{ padding: 110px 0 85px;} .pt110-pb95{ padding: 110px 0 95px;} .pt107-pb75{ padding:107px 0 75px;} .pt100-pb75{ padding:100px 0 75px;} .pt110-pb95{ padding: 110px 0 95px;} .pt110-pb105{ padding: 110px 0 105px;} .pt90-pb100{ padding: 90px 0 100px;} .pt95-pb55 { padding: 95px 0 55px;} .pt65-pb180 { padding: 65px 0 180px;}/*Margin Bottom*/ .mb-30{ margin-bottom: 30px;} .mb-40{ margin-bottom: 40px;} .mb-50{ margin-bottom: 50px;} .mb-55{ margin-bottom: 55px;} .mb-60{ margin-bottom: 60px;} .mb-65{ margin-bottom: 65px;} .mb-70{ margin-bottom: 70px;}/*Margin Left*/ .ml-35 { margin-left: 35px;}/* === 1.5 OTHER FIXES === */ *, *:before, *:after{ -webkit-box-sizing:border-box; box-sizing:border-box;} .browserupgrade { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0;} .uppercase{ text-transform:uppercase;} .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 } img { max-width: 100%; height: auto;}.border-10 { border: 10px solid var(--white-color);}/* === Background Color === */ .bg-theme{ background-color: var(--primary-color);} .bg-gray{ background-color: var(--light-bg);} .bg-white { background-color: var(--white-color);}/*=== Background Overlay === */ .overlay-bg, .overlay-bg-2, .overlay-bg-3, .overlay-bg-4, .overlay-bg-5 { position: relative; overflow:hidden;} .overlay-bg::before, .overlay-bg-2::before, .overlay-bg-3::before, .overlay-bg-4::before, .overlay-bg-5::before{ content: ""; display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%;} .overlay-bg::before{ background: rgba(0, 0, 0, 0.75) none repeat scroll 0 0;} .overlay-bg-2::before{ background-color: rgba(0, 0, 0, 0.4);} .overlay-bg-3::before{ background-color: rgba(var(--primary-color-rgb), 0.8);} .overlay-bg-4::before { background: rgba(0, 0, 0, 0.70) none repeat scroll 0 0;} .overlay-bg-5::before { background-color: rgba(0, 0, 0, 0.5) }/* no-gutters Class Rules */ .row.no-gutters { margin-right: 0; margin-left: 0;} .row.no-gutters >[class^="col-"], .row.no-gutters >[class*=" col-"] { padding-right: 0; padding-left: 0;}/*=== Buttons css ===*/ a.btn, button.btn { overflow: hidden; float: left; display: block; padding: 10px 30px; border: none; background: none; color: inherit; vertical-align: middle; position: relative; z-index: 1; -webkit-backface-visibility: hidden; -moz-osx-font-smoothing: grayscale;} .btn.btn-business { /* overflow: hidden; */ -webkit-transition: color 0.3s; -o-transition: color 0.3s; transition: color 0.3s; color: var(--white-color); margin-right: 10px;} .btn.btn-business.color-1 { background: var(--primary-color);} .btn.btn-business.color-2 { background: var(--accent-color); color: var(--heading-color);} .btn-round { border-radius: 40px;} .btn-business::before, .btn-business::after { content: ''; position: absolute; height: 100%; width: 100%; bottom: 100%; left: 0; z-index: -1; -webkit-transition: -webkit-transform 0.3s; transition: -webkit-transform 0.3s; -o-transition: transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); -o-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);} .btn-business.color-1::before { background: #f3e2af;} .btn-business.color-1::after { background: var(--accent-color);} .btn-business.color-2::before { background: #88ecbb;} .btn-business.color-2::after { background: var(--primary-color);} .btn-business:hover { color: var(--white-color);} .btn-business:hover::before, .btn-business:hover::after { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0);} .btn-business:hover::after { -webkit-transition-delay: 0.175s; -o-transition-delay: 0.175s; transition-delay: 0.175s;} .btn.btn-business:hover.color-1 { background: transparent; color: var(--heading-color);} .btn.btn-business:hover.color-2 { color: var(--white-color); background: transparent;}/*=== Header Top Style ===*/.header-area { position: relative; z-index: 2;} .header-top-area { background-color: var(--dark-bg);} .header-border .header-top-area { border-bottom: 1px solid #20342b;} .header-top-contact i { color: var(--primary-color); padding-right: 8px; font-size: 18px; position: relative; top: 2px;} .header-top-contact a { color: var(--white-color); margin-right: 45px;} .header-top-contact { padding: 27px 0;} .header-top-contact a:last-child { margin-right: 0;} .quote-top { float: right; padding: 27px 0;} .quote-top a { background-color: var(--primary-color); color: var(--white-color); padding: 13px 30px; border-radius: 20px; font-size: 15px;} .quote-top a:hover { background-color: var(--accent-color); color: var(--heading-color);} .donation-div { position: relative;} .donation-plz { position: relative; padding: 50px; background: var(--white-color); border-radius: 2px; -webkit-box-shadow: 0 0 32px #838383; box-shadow: 0 0 32px #838383; border: 10px solid #f1f1f1;} .donation-plz h3 { font-size: 28px; font-weight: 700; margin-bottom: 30px;} .donation-plz h4 { font-size: 24px; font-weight: 700; margin-bottom: 30px; text-transform: uppercase; line-height: 30px;} .donation-plz hr { margin-bottom: 40px; border-color: #e0e0e0;} .donation-plz .form-group { position: relative; margin-bottom: 15px;} .donation-plz .form-group.other-amount { top: 5px;} .donation-plz input[type="text"], .donation-plz input[type="email"], .donation-plz input[type="tel"], .donation-plz input[type="url"], .donation-plz input[type="password"], .donation-plz select, .donation-plz textarea { position: relative; display: block; width: 100%; line-height: 34px; padding: 8px 20px; background: var(--white-color); border: 1px solid #e0e0e0; height: 40px;} .donation-plz select { cursor: pointer;} .donation-plz .field-label { position: relative; display: block; font-weight: 600; font-size: 18px; color: var(--dark-bg); line-height: 28px; margin-bottom: 10px;} .donation-plz .field-label .required { color: #ff0000; font-size: 14px;} .donation-plz .radio-select { position: relative; float: left; margin-right: 10px; margin-bottom: 5px; line-height: 30px;} .donation-plz .radio-select label { position: relative; display: block; height: 56px; padding: 13px 15px; text-align: center; color: var(--white-color); font-size: 24px; font-weight: 600; text-transform: uppercase; background: #878787; border-radius: 0px; cursor: pointer;} .donation-plz .radio-select input[type="radio"] { display: none;} .donation-plz .radio-select input[type="radio"]:checked+label { color: var(--white-color); background: #ffa211;} .donation-plz button { padding: 12px 35px; background: #f63a07; color: var(--white-color); border: none; font-weight: 600; letter-spacing:1px; cursor: pointer; border-radius: 5px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s;} .donation-plz button:hover { padding: 12px 35px; background: var(--primary-color); color: var(--white-color); border: none;}.modal-backdrop.fade.show { z-index: inherit;}/*Site Branding*/ .site-branding{ padding: 15px 0; text-align: center;}.widget-site-brand { text-align: center;}.site-branding img, .widget-site-brand img { height: 80px; width: auto;}/*Absulate header*/ header.header-area.absolute-header { position: absolute; width: 100%; z-index: 2;} header.header-area.absolute-header .navigation-area { background: transparent;} header.header-area.absolute-header.sticky .navigation-area { background-color: rgba(0, 0, 0, .7);}/*=== Naviagaion ===*/ nav.business-nav { float: left; width: 100%;} .business-nav ul.menu { float: right; margin-top: 39px;} .business-nav ul{ list-style:none; display:block; margin:0; padding:0;} .business-nav .menu li { position: relative; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; list-style: none;} .business-nav .menu li a { color: #666; display:block;} .business-nav .menu >li { float:left; padding: 0;} .business-nav .menu >li:hover>a { background: var(--white-color); color: var(--primary-color);} .business-nav ul.menu >li >a { color: var(--heading-color); font-size: 15px; font-weight: 400; opacity: 1; padding: 5px 30px 42px 15px; text-transform: capitalize; border-radius: 3px;} .navigation-area.dark .business-nav ul.menu >li >a, .absolute-header .navigation-area .business-nav ul.menu >li >a { color: var(--white-color);} .navigation-area.dark .business-nav .menu >li:hover>a, .absolute-header .navigation-area .business-nav ul.menu >li:hover >a { background: transparent; color: var(--primary-color);} .business-nav .menu >li:last-child >ul ul { left: auto; right: 100%;} .business-nav .menu >li ul { background-color: var(--white-color); border-top: 2px solid var(--primary-color); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; padding: 15px 0; position: absolute; -webkit-transform: translate3d(0px, 10px, 0px); -ms-transform: translate3d(0px, 10px, 0px); transform: translate3d(0px, 10px, 0px); -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; visibility: hidden; width: 210px; z-index: 99; -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.12); box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.12);} .business-nav .menu >li >ul li a { padding: 5px 12px;} .business-nav .menu >li >ul li a:hover { background-color: #efefef; border-radius: 2px; color: var(--primary-color);} .business-nav .menu >li >ul >li >ul { left: 100%; padding: 10px; top: 0;} .business-nav .menu >li:hover >ul { opacity: 1; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -webkit-transform: translate3d(0px, 0px, 0px); -ms-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px); visibility: visible;} .business-nav .menu >li >ul >li:hover >ul, .business-nav .menu >li:hover .mega-menu ul { opacity: 1; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -webkit-transform: translate3d(0px, 0px, 0px); -ms-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px); visibility: visible;}/* Mega Menu */ .business-nav .menu .mega-menu { padding: 20px; width: 400px;} .business-nav .menu .mega-menu.three-column { width: 600px ;} .business-nav .mega-menu.mega-center { left: 50%; margin-left: -200px;} .business-nav .mega-menu.mega-center.three-column { margin-left: -332px;} .business-nav .mega-menu.mega-right{ right:0;} .business-nav .menu .mega-menu >li.mega-col { float:left; padding: 0 10px; overflow: hidden; width: 50%;} .business-nav .menu .mega-menu.three-column >li.mega-col { width: 33.33%;} .business-nav .menu .mega-menu ul { background-color: rgba(0, 0, 0, 0); border-top: none; left: auto; -webkit-transform: translate3d(0px, 0px, 0px); -ms-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px); padding: 0; position: relative; -webkit-box-shadow: none; box-shadow: none;} .business-nav .menu li.mega-col li { display: block; width: 100%; padding: 0;} .business-nav .menu li.mega-col li a { padding: 5px 0;} .business-nav .menu li.mega-col li a:hover { background-color:transparent;} .business-nav >ul.menu >li:last-child{ padding-right:0;}/* Meag Menu Title */ .mega-menu .title { color: #404040; display: block; font-size: 15px; font-weight: 600; margin-bottom: 5px; padding: 0 0 6px; position: relative; text-transform: capitalize;} .business-nav .mega-menu .title::before { bottom: 0; content: ""; height: 2px; left: 0; position: absolute; width: 30px;} .business-nav .menu li.has-dropdown >a::after { content: "\ea99"; font-family: icofont; font-size: 16px; margin-top: -30px; position: absolute; right: 6px; top: 50%;} .business-nav .menu li ul li.has-dropdown >a::after { content: "\eaa0"; right: 18px; top: 35px;} .business-nav .menu >li >ul.mega-menu::before { left: 57%; margin-left: -4px;}/* Mobile Menu */ .navigation-area .col-2.col-md-7 { position:static;} .mean-container .mean-bar { margin-top: 36px; position: inherit; margin-bottom: 14px; margin-left: -60px;} .mobile-menu-area .mean-nav { left: 0; position: absolute; top: 110px; z-index: 2;} .mean-nav .mega-menu .title { margin-bottom: 0; padding: 12px 20px;} .navigation-area { background: var(--white-color); position: relative; height: 110px;} .navigation-area.dark { background-color: var(--dark-bg);}/*Header search*/ .header-search input[type=submit] { margin-bottom: 0 !important; color: transparent; position: absolute; right: 0; top: 0; background: transparent; cursor: pointer;} .header-search { position: absolute; right: 0; top: 30px; margin-top: 7px;} .header-search .search-form label input { height: 35px;} .header-search .search-form label input::-webkit-input-placeholder { color: #718a9e; font-size: 15px;} .header-search .search-form label input:-ms-input-placeholder { color: #718a9e; font-size: 15px;} .header-search .search-form label input::-ms-input-placeholder { color: #718a9e; font-size: 15px;} .header-search .search-form label input::placeholder { color: #718a9e; font-size: 15px;} .header-search .search-form input[type="submit"]{ display: none;} .header-search .search-form input[type="submit"] { opacity: 0; visibility: hidden;} .header-search input[type="search"] { background: transparent url("../image/search.png") no-repeat scroll right; border: 2px solid var(--border-color); border-radius: 22px; cursor: pointer; padding-bottom: 5px; padding-left: 5px; padding-top: 5px; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; width: 160px; margin-right: 15px; background-position: 85%; text-indent: 5px;} .header-search input[type="search"]:focus { background: var(--white-color) url(../image/search.png) no-repeat scroll 135px center; cursor: inherit; padding: 5px; width: 165px; text-indent: 10px;} .header-search label:before { display: none;}/*Sticky*/.header-area.sticky.navbar-fixed-top{ position: fixed;}.header-area.sticky.navbar-fixed-top .header-top-area{ display: none;}.header-area.sticky { position: relative; z-index: 999; width: 100%;}/*=== 3. SLIDER STYLES ===*/ .tbl { display: table; height: 100%; position: absolute; width: 100%; z-index: 2;} .tbl-cell { display: table-cell; vertical-align: middle;} .single-slide { background-repeat: no-repeat; background-size: cover; min-height: 100vh; position: relative; background-position: center center;} .slide-content { position: absolute; top: 50%; width: 100%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);} .single-slide-content { display: block; margin-bottom: 1px;} .single-slide-content h1 { color: var(--white-color); font-size: 55px; margin-bottom: 18px; font-weight: 700; text-transform: uppercase;} .single-slide-content h4 { font-size: 20px; font-weight: 500; color: var(--white-color); margin-bottom: 3px; letter-spacing: 2px; text-transform: uppercase;} .single-slide-content >p { color: var(--white-color); font-size: 15px; margin-bottom: 47px; line-height: 23px; font-weight: 400;} .slide-content-area.text-center .btn.btn-business { float: none; display: inline-block;}/*slider nav*/ .slide-controls .owl-nav div { font-size: 25px; height: 60px; left: 0; line-height: 60px; opacity: 0; position: absolute; text-align: center; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; visibility: hidden; width: 60px; z-index: 1;} .slide-controls .owl-nav div.owl-next { left: auto; right: 0;} .slide-controls .owl-nav div i { border:2px solid var(--primary-color); border-radius: 50%; display: block; height: 50px; line-height: 50px; margin: 5px; width: 50px; color: var(--primary-color);} .slide-controls .owl-nav div i:hover { background-color:var(--primary-color); color:var(--white-color);} .slide-controls:hover .owl-nav div { opacity: 1; visibility: visible;}/*Default owl dots style*/ .owl-dots { bottom: 0; position: absolute; text-align: center; width: 100%;} .slider-area .owl-dots { bottom: 75px;} .logo-wrap .owl-dots { bottom: -54px;} .testimonial-area .owl-dots { bottom: -60px;} .owl-dot { display: inline-block;} .owl-dots .owl-dot span { background: transparent none repeat scroll 0 0; display: inline-block; -webkit-backface-visibility: visible; backface-visibility: visible; border-radius: 30px; height: 10px; margin: 5px 7px; -webkit-transition: opacity 0.2s ease 0s; -o-transition: opacity 0.2s ease 0s; transition: opacity 0.2s ease 0s; width: 10px;}/*business Style dots*/ .slide-controls .owl-dots .owl-dot, .owl-dots .owl-dot{ border-radius: 50%; -webkit-transition: -webkit-box-shadow 0.3s ease 0s; transition: -webkit-box-shadow 0.3s ease 0s; -o-transition: box-shadow 0.3s ease 0s; transition: box-shadow 0.3s ease 0s; transition: box-shadow 0.3s ease 0s, -webkit-box-shadow 0.3s ease 0s; height: 12px; margin: 0 5px; position: relative; width: 12px;} .slide-controls .owl-dots .owl-dot span, .owl-dots .owl-dot span { background-color: var(--accent-color); height: 10px; left: -5px; position: absolute; top: -3px; width: 10px; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s;} .slide-controls .owl-dots .owl-dot.active span, .owl-dots .owl-dot.active span { padding: 20px 0;}/* Default Slider Animations */ .owl-item.active .single-slide-content h3{ -webkit-animation: fadeInUp 3000ms ease-in-out; animation: fadeInUp 3000ms ease-in-out;}.owl-item.active .single-slide-content h1{ -webkit-animation: fadeInUp 2500ms ease-in-out; animation: fadeInUp 2500ms ease-in-out;}.owl-item.active .single-slide-content h4{ -webkit-animation: fadeInUp 2500ms ease-in-out; animation: fadeInUp 2500ms ease-in-out;}.owl-item.active .single-slide-content p{ -webkit-animation: fadeInUp 2000ms ease-in-out; animation: fadeInUp 2000ms ease-in-out;}.owl-item.active .single-slide-content a.btn{ -webkit-animation: fadeInUp 3000ms ease-in-out; animation: fadeInUp 3000ms ease-in-out;} /*=== Section Title ===*/ .section-title h5 { font-size: 15px; font-weight: 500; margin-bottom: 0; line-height: 15px; color: var(--text-color);} .section-title.white h5, .section-title.white h2 { color: var(--white-color);}/*=== About us ===*/ .about-left-content >p { margin-bottom: 42px;} .about-us-area .btn.btn-business { margin-bottom: 30px;}.about-img { margin-bottom: 25px;}/*style 2*/ .about-area-style-2 { width: 100%; height: auto;} .about-bg { width: 60%; display: inline-block; padding: 58px 30px 30px 60px; height: 425px;} .about-right-img { width: 40%; float: right;} .single-about-img { height: 425px; overflow: hidden; background-size: cover;} .about-area-style-2 p { color: #eeeeee; margin-bottom: 35px;}/*About owl navigation*/ .about-area-style-2 .owl-nav div { position: absolute; top: 50%; width: 40px; height: 45px; border: 1px solid var(--accent-color); color: var(--white-color); line-height: 42px; text-align: center; margin-top: -23px;} .about-area-style-2 .owl-nav .owl-next { right: 0;}/*About video*/ .video { background: rgba(0, 0, 0, 0) url("../picture/blog-1.png") no-repeat scroll center center / cover; height: 385px; margin-bottom: 45px; position: relative;} .video a { border-radius: 50%; color: var(--primary-color); left: 50%; position: absolute; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); background-color: var(--white-color); width: 63px; height: 62px;} .video a::before { border: 15px solid rgba(var(--white-color-rgb), 0.4); border-radius: 50%; content: ""; height: 80px; left: -8px; position: absolute; top: -9px; width: 80px;} .video a i { font-size: 28px; margin-left: 18px; margin-top: 18px; display: block;}/*=== Accordian ===*/ a.collapsed .rotate-icon { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); display: inline-block; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; position: absolute; right: 24px;} .rotate-icon { -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; position: absolute; right: 20px; margin-top: 15px;} div.card { border: none;} div.card-header { background-color: var(--light-bg); padding: 10px 30px; margin-bottom: 9px; -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2); border: none; border-radius: 5px !important;} div.card-header .collapsed { background-color: ;} div.card-header h5 { font-size: 15px; font-weight: 500; color: #444444;} div.card-body p { padding-left: 20px; display: flex;} div.card-header span i { font-size: 18px; color: #404040; font-weight: 500; right: 24px;} span.icon-left { padding-right: 15px; position: relative; top: 2px;} div.card-body { padding: 18px 35px 8px; margin-top: -7px; float: left; background-color: var(--light-bg); -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2); margin-bottom: 10px;}div.card-body img { float: left; margin-right: 20px;} span.ico-rote { width: 72px; height: 52px; display: block; position: absolute; right: 0; top: 0;} .card.active .card-header { background-color: var(--primary-color);} .card.active .card-header h5, .card.active .card-header i { color: var(--white-color);}/* ProgressBar */ .progresbar-title h3 { font-size: 18px; font-weight: 600; line-height: 22px;} .progresbar-title { margin-bottom: 40px;} .secondery-title >h5 { font-weight: 600; text-transform: uppercase;} .progress-title { color: var(--white-color); font-size: 14px; margin: 0; font-weight: 500; position: absolute; z-index: 1; text-transform: uppercase; padding-left: 25px;} .progress { background: transparent; -webkit-box-shadow: none; box-shadow: none; height: 30px; margin-bottom: 15px; overflow: visible; border: 1px solid var(--primary-color); border-radius: 0;} .progress .progress-bar{ position: relative; -webkit-animation: animate-positive 2s; animation: animate-positive 2s;} .progress .progress-bar:after{ /* content: "\ea67"; */} .progress .progress-value { font-size: 14px; font-weight: 400; position: absolute; right: 25px; color: var(--white-color);} @-webkit-keyframes animate-positive{ 0% { width: 0%; }} @keyframes animate-positive{ 0% { width: 0%; }} .about-right-content { margin-bottom: 30px;} .about-right-content h2 { font-size: 35px;}/*=== Service ===*/ .service-wrap { margin-bottom: 60px;} .single-service.style-1 .service-icon { display: inline-block; width: 80px; height: 80px; line-height: 80px; font-size: 30px; color: var(--white-color); position: relative; margin-bottom: 38px;} .single-service.style-1 .service-icon:before, .single-service.style-2 .service-icon:before, .single-service.style-3 .service-icon:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; background-color: var(--primary-color); z-index: -1; border-radius: 3px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; z-index: 1;} .single-service.style-1 .service-icon:before {} .service-icon i { position: relative; z-index: 2; -webkit-transition: .7s; -o-transition: .7s; transition: .7s;} .single-service.style-1 { width: 80%; margin: auto;} .single-service.style-1.width { width: 100%;} .service-title h5 { font-size: 18px; color: #444444;} .single-service.style-1:hover .service-icon:before, .single-service.style-2:hover .service-icon:before, .single-service.style-3:hover .service-icon:before { background-color: var(--accent-color);} .single-service.style-1:hover .service-title h5, .single-service.style-2:hover .service-title h5, .single-service.style-3:hover .service-title h5, .single-service.style-2:hover .service-content a { color: var(--primary-color);} .single-service.style-1:hover .service-icon, .single-service.style-2:hover .service-icon, .single-service.style-3:hover .service-icon { color: #444444;}/*Service style 2*/ .single-service.style-2 .service-content, .single-service.style-2 .service-title { padding-left: 80px;} .single-service.style-2 .service-icon, .single-service.style-3 .service-icon { position: relative; font-size: 20px; width: 40px; height: 40px; display: inline-block; text-align: center; color: var(--white-color); line-height: 34px; left: 10px;} .single-service.style-2 .service-icon { top: 55px;} .single-service.style-3 .service-icon { top: -20px;} .service-content a { color: #444444; font-weight: 500;}/*=== Sinlge Service ===*/ .service-content h5 { font-weight: 700; margin-bottom: 20px;} .service-content p { margin-bottom: 20px;} .service-content { margin-bottom: 55px;} .more-service { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; margin-bottom: 40px;} .more-service-icon { font-size: 25px; padding-right: 25px; margin-top: -3px;} .single-service-img { margin-bottom: 55px;} .more-service-content { padding-right: 35px;} .single-service-menu { background-color: var(--light-bg); margin-bottom: 55px;} .single-service-menu ul { margin: 0; padding: 0; list-style: none;} .single-service-menu ul li { border-bottom: 1px solid #ededed; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s;} .single-service-menu ul li:last-child { border-bottom: none;} .single-service-menu ul li a { padding: 15px 0 12px 30px; display: block; color: #555555; font-size: 15px; font-weight: 500; text-transform: capitalize;} .single-service-menu ul li:hover a, .single-service-menu ul li.active a { background-color: var(--primary-color); color: var(--white-color);}/*=== Call to Action*/ .cta-area.parallax { background: url(../image/image53.png) repeat scroll 0 0; background-size: contain; background-attachment: fixed;} .cta-area { background: url(../image/image53.png) repeat scroll 0 0; background-size: cover; padding: 98px 0; background-position: center center;} .cta-content h5 { color: var(--white-color); font-weight: 500; margin-bottom: 5px; margin-bottom: 10px;} .cta-content p { color: var(--border-color); margin-bottom: 35px;} .cta-content a.btn { margin: auto; float: none; display: inline-block;}/*=== Style 2 ===*/ .cta-area.style-2.parallax { background: url(../image/image53.png) repeat scroll 0 0; background-size: cover; background-attachment: fixed;} .cta-area.style-2 { position: relative; padding: 96px 0 62px;} .cta-area.style-2 a.btn.btn-business { position: absolute; right: 60px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); padding: 10px 45px;} .cta-area.style-2 .cta-content h5 { font-size: 25px;} .cta-area.style-2 .cta-content { padding-left: 80px; max-width: calc(100% - 420px);} .cta-area.style-2 .cta-content p { color: var(--white-color);}/*============== 11. project Style ==============*/ .filter-menu{ display: block; margin-bottom: 43px; padding: 0;} .filter-menu button { background: transparent none repeat scroll 0 0; border: medium none; color: #404040; font-size: 15px; margin: 0 10px 20px; padding: 5px 15px; cursor: pointer; border-radius:20px; -webkit-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; text-transform: uppercase;} .filter-menu button.active, .filter-menu button:hover { background-color: var(--primary-color); border: medium none; border-radius: 20px; color: var(--white-color);} .filter-menu button:last-child { margin-right: 0;} .project-wrap, .single-project img { width: 100%;} .single-project { position: relative; opacity: 0.999; text-align: center; -o-transition: 0.3s; -webkit-transition: 0.3s; transition: 0.3s; overflow: hidden;} .single-project:after { content: ""; width: 0; height: 0; position: absolute; background-color: rgba(var(--primary-color-rgb), 0.8); right: 0; top: 0; transition: 0.4s; -webkit-transition: 0.4s; -moz-transition: 0.4s; -ms-transition: 0.4s; -o-transition: 0.4s; border-bottom-left-radius: 70px;} .single-project:hover:after { width: 100%; height: 100%;} .single-project:hover .project-info { opacity: 1; visibility: visible; -webkit-transform: rotateX(0deg); transform: rotateX(0deg);} .project-info { position: absolute; z-index: 1; bottom: 0; background-color: var(--white-color); width: 100%; opacity: 0; visibility: hidden; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; -webkit-transform: rotateX(50deg); transform: rotateX(50deg); padding-top: 12px; padding-bottom: 2px;} .project-link i { position: absolute; z-index: 2; left: 50%; top: 50%; font-size: 18px; color: #444444; background-color: var(--white-color); padding: 10px; border-radius: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); opacity: 0; visibility: hidden; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; margin-top: -40px;} .single-project:hover .project-link i { opacity: 1; visibility: visible; color: var(--primary-color);} .project-info a h6 { margin-bottom: 0; color: #555555; font-size: 16px; font-weight: 500;} .single-project .project-info a h6:hover { color: var(--primary-color);} .load-more a.btn.btn-business { float: none; display: inline-block;}/*Sinlge project style*/ .project-single-area img { margin-bottom: 30px;} .single-project-content { margin-bottom: 50px;} .single-project-content h4 { font-size: 25px; font-weight: 700;} .single-project-content p { margin-bottom: 22px;} .project-details h4 { font-size: 18px; color: #444444; margin-bottom: 12px;} .project-details p { color: var(--text-color);} .project-details span { padding-right: 10px;} .project-head p { margin-bottom: 0; color: var(--text-color); font-weight: 600;} .project-head { margin-bottom: 60px;} .project-head h2 { font-size: 35px;}/*=== Funfact Style ===*/ .funfact-area { background-image: url(../image/11.jpg); background-size: cover; padding: 110px 0; background-position: center center;} .fact-info span.counter { font-size: 35px; color: #fefefe; display: block; position: relative; margin-bottom: 33px; font-weight: 700;} .fact-info span.counter:before { position: absolute; width: 50px; height: 1px; content: ""; bottom: -15px; left: 50%; background-color: var(--primary-color); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);} .fact-info span { color: #fefefe; font-size: 15px;}.fact-info i { font-size: 24px; color: var(--white-color); margin-bottom: 20px; display: inline-block;}/*=== Get a Quote ===*/ .get-quote-area { background-image: url(../image/bg-cta.png); background-size: cover; background-position: center; padding-top: 30px;} .single-field { height: auto; margin: 0 0 15px; padding: 0; width: 100%;} .single-field >input { border: 1px solid var(--white-color); border-radius: 5px; -webkit-box-shadow: none; box-shadow: none; height: 40px; margin-bottom: 15px; padding: 0 15px; width: 100%; background-color: transparent; border-radius: 5px;} .half-field, .half-field-last { float: left; width: 48%;} .half-field-last { float: right;} .single-field >textarea { border: 1px solid var(--white-color); height: auto; padding: 10px 15px; width: 100%; margin-bottom: 17px; background-color: rgba(var(--white-color-rgb), 0.149);} .contact-us-form .single-field .form-control:focus { outline: 0 none; background-color: rgba(var(--white-color-rgb), 0.149); border: 1px solid var(--white-color); -webkit-box-shadow: none; box-shadow: none;} .get-quote-area .contact-us-form .single-field input::-webkit-input-placeholder, .get-quote-area .contact-us-form .single-field textarea::-webkit-input-placeholder{ color: var(--white-color);} .get-quote-area .contact-us-form .single-field input:-ms-input-placeholder, .get-quote-area .contact-us-form .single-field textarea:-ms-input-placeholder{ color: var(--white-color);} .get-quote-area .contact-us-form .single-field input::-ms-input-placeholder, .get-quote-area .contact-us-form .single-field textarea::-ms-input-placeholder{ color: var(--white-color);} .get-quote-area .contact-us-form .single-field input::placeholder, .get-quote-area .contact-us-form .single-field textarea::placeholder{ color: var(--white-color);} .get-quote-area .contact-us-form .single-field >textarea { background-color: transparent;} button.btn.btn-contact { display: block; width: 100%; background-color: var(--accent-color); color: #444444; font-size: 15px; padding: 9px 0; text-transform: capitalize;} button.btn.btn-contact:hover { color: var(--white-color); opacity: .95;}/*=== Home Blog Style ===*/ .single-post-block { margin-bottom: 40px;} a.sin-post-link { height: 300px; display: block; position: relative; margin-bottom: 20px;} a.sin-post-link:before, a.sin-post-link:after { content: ""; width: 0; height: 0; position: absolute; background-color: rgba(var(--primary-color-rgb), 0.8); transition: 0.4s; -webkit-transition: 0.4s; -moz-transition: 0.4s; -ms-transition: 0.4s; -o-transition: 0.4s; z-index: 1;} a.sin-post-link:before { left: 0; bottom: 0;} a.sin-post-link:after { right: 0; top: 0;} .single-post-block:hover a.sin-post-link:after, .single-post-block:hover a.sin-post-link:before { width: 50%; height: 100%;} .post-comment { position: absolute; top: 30%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%) scale(.5); -ms-transform: translateX(-50%) translateY(-50%) scale(.5); transform: translateX(-50%) translateY(-50%) scale(.5); background-color: var(--white-color); padding: 20px; border-radius: 50%; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; opacity: 0; visibility: hidden; transition: 0.3s;} .post-comment:hover { background-color: var(--accent-color); color: var(--white-color);} .single-post-block:hover .post-comment { opacity: 1; visibility: visible; -webkit-transform: scale(1) translateX(-50%) translateY(-50%); -ms-transform: scale(1) translateX(-50%) translateY(-50%); transform: scale(1) translateX(-50%) translateY(-50%); z-index: 1;} .post-block-content h5 { color: #555555; font-size: 18px; margin-bottom: 5px;} span.post-block-author { margin-right: 35px; position: relative; color: var(--text-color); margin-bottom: 25px; display: inline-block;} span.post-block-author:before { position: absolute; top: 7px; right: -20px; width: 1px; height: 12px; background-color: var(--text-color); content: "";} .post-block-excerpt { margin-bottom: 20px;} .single-post-block a.more { font-weight: 500; color: #555555; text-transform: capitalize;} .single-post-block:hover a.more { color: var(--primary-color);} .post-block-content a:hover { color: var(--primary-color);}/*=== Testimonial Style ===*/ .testimonial-area.style-1 { background-image: url(../image/testimonial-bg.png); background-size: cover; background-position: center center;} .testimonial-area.style-1 .owl-stage { display: -webkit-box; display: -ms-flexbox; display: flex;}.testimonial-area.style-1 .owl-item { height: auto;}.testimonial-area.style-1 .single-testimonial { height: 100%; background-color: var(--white-color); border-radius: 5px; position: relative; padding: 30px 60px 20px 0;} .testimonial-area.style-1 .testimonial-content, .testimonial-area.style-1 .testimonial-title { padding-left: 140px;} .testimonial-area.style-1 .testimonial-img { position: absolute; top: 30px; display: inline-block; left: 25px; width: 100px; height: 100px;} .testimonial-area.style-1 .testimonial-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%;} .testimonial-area.style-1 .testimonial-title h6, .testimonial-area.style-2 .testimonial-title h6 { color: #444444; font-size: 16px; margin-bottom: 0; font-weight: 500;} .testimonial-content p, .testimonial-area.style-2 .testimonial-title p { color: var(--text-color); line-height: 22px;} .testimonial-title span { color: var(--text-color); font-family: 'Roboto', sans-serif; margin-bottom: 15px; display: block;}/*Style 2*/ .testimonial-area.style-2 .single-testimonial { background-color: var(--light-bg); position: relative; padding: 40px 50px 135px 35px; border-radius: 5px; -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2); margin-bottom: 3px;} .testimonial-area.style-2 .single-testimonial:before { position: absolute; right: 35px; bottom: 70px; content: "\efce"; font-size: 50px; font-family: icofont; color: var(--border-color);} .testimonial-area.style-2 .testimonial-img { position: absolute; bottom: 35px;} .testimonial-area.style-2 .testimonial-title { position: absolute; bottom: 55px; left: 141px;}/*parallax*/.testimonial-area.style-1.parallax { background-image: url(../image/testimonial-bg.png) repeat scroll 0 0; background-size: contain; background-attachment: fixed;}/*=== Team Style ===*/ .team-img{ position: relative; overflow: hidden;} .team-img img { width: 100%;} .team-social ul { margin: 0; padding: 0; list-style: none;} .team-social ul li { display: inline-block;} .team-social ul li a { color: var(--white-color); padding: 10px 6px; display: block;} .team-wrap.style-1 .team-social { text-align: center; background-color: rgba(var(--primary-color-rgb), 0.8); -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; position: absolute; width: 100%; bottom: -44px; opacity: 0; visibility: visible;} .team-bio { padding: 22px 0 15px; -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto;} .team-bio h6 { margin-bottom: 0; color: #444; font-size: 16px;} .single-team { -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2); margin-bottom: 40px; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;} .team-wrap.style-1 .single-team:hover .team-social { bottom: 0; opacity: 1; visibility: visible;}.team-wrap.style-1 { position: relative; height: 100%;}.team-wrap.style-1:before { position: absolute; bottom: 0; left: 0; width: 0; height: 2px; content: ""; background-color: var(--primary-color); transition: 0.3s;}.team-wrap.style-1:hover:before { width: 100%;}/*Style 2*/ .team-wrap.style-2 .team-bio { position: relative; padding-left: 53px; overflow: hidden; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s;} .team-wrap.style-2 .team-social { position: absolute; left: -35px; background-color: var(--primary-color); top: 0; width: 35px; text-align: center; padding: 15px 0; opacity: 0; visibility: hidden; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s;} .team-wrap.style-2 .team-social ul li { display: block;} .team-wrap.style-2 .single-team { -webkit-box-shadow: none; box-shadow: none;} .team-wrap.style-2 .team-social ul li a { padding: 5px 0;} .team-wrap.style-2 .team-bio span { margin-bottom: 10px; display: block;} .team-wrap.style-2 .single-team:hover .team-social { opacity: 1; visibility: visible; left: 0;}/*=== Pricing Table Style ===*/ .pricing-wrap { -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2); margin-bottom: 40px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s;} .pricing-head { background-color: var(--primary-color); position: relative; padding: 40px 0; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s;} .pricing-head h1 { font-size: 50px; font-weight: 500; color: var(--white-color); margin-bottom: 0;} .pricing-head:before { position: absolute; bottom: -3px; left: 50%; -webkit-transform: translateX(-50%) rotate(45deg); -ms-transform: translateX(-50%) rotate(45deg); transform: translateX(-50%) rotate(45deg); width: 15px; height: 15px; content: ""; background-color: var(--primary-color); -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s;} .pricing-plan { background-color: var(--light-bg); padding: 15px 0;} .pricing-plan h2 { font-size: 25px; color: #444444; margin-bottom: 0; line-height: 30px;} .pricing-plan span { color: var(--text-color); font-size: 15px;} .pricing-body { padding: 32px 0;} .pricing-body ul { margin: 0; padding: 0; list-style: none;} .pricing-body ul li { padding-bottom: 18px; color: #606060;} .pricing-body ul li:last-child { padding-bottom: 0;} .pricing-footer .btn.btn-business { float: none; display: inline-block;} .pricing-footer { padding-bottom: 45px;} .pricing-wrap:hover .pricing-head, .pricing-wrap:hover .pricing-head:before { background-color: var(--accent-color);}/*=== Banner Style ===*/ .banner-area { background-image: url(../image/banner-about.png); background-size: cover; background-position: center; padding: 62px 0;} .banner-content h2 { color: var(--white-color); font-size: 35px; text-transform: uppercase; margin-bottom: 3px;} .banner-content ul { margin: 0; padding: 0; list-style: none;} .banner-content ul li { display: inline; color: var(--white-color); padding-left: 5px;} .banner-content ul li a { color: var(--accent-color); font-weight: 500; font-size: 15px; padding-right: 10px;}/*=== Footer Style ===*/ footer.footer-area { background-color: var(--dark-bg); color: var(--border-color);} .widget.widget-about { margin-bottom: 30px;} .widget.widget-site-brand { margin-bottom: 40px;} .widget.widget-contact a { font-size: 15px; margin-bottom: 10px; display: block; color: var(--white-color);} .widget.widget-contact a i { padding-right: 10px;} .widget.widget-contact a:hover, a.title:hover, .footer-area .widget-post .post-content a:hover { color: var(--primary-color) } h4.widget-title { color: var(--white-color); font-size: 18px; font-weight: 700; margin-bottom: 32px;} .widget.widget-links ul { margin: 0; padding: 0; list-style: none;} .widget.widget-links ul li a { color: var(--border-color);} .widget.widget-links ul li a i { padding-right: 14px;} .border-widget { border-bottom: 1px solid #3c3c3c; padding: 12px 0 12px;} .widget.widget-links { margin-right: 40px;} .widget.widget-links ul li a:hover { color: var(--primary-color);} .border-widget:first-child { padding-top: 0;} .border-widget:last-child { border: none;} .widget-post { display: block; overflow: hidden;} .widget-post img { float: left; width: 70px; height: 60px;} .footer-area .widget-post .post-content { padding-left: 90px;} .footer-area .post-content .title { color: var(--border-color); line-height: 20px; font-weight: 500; display: block;} .footer-area .post-content p { color: var(--border-color);} .widget-post.post-border { border-bottom: 1px solid #3c3c3c; margin-bottom: 12px;} .subscribe-footer p { margin-bottom: 30px;} form.subscribe-form { margin-bottom: 15px;} input.widget-input { width: calc(100% - 53px); background-color: transparent; border: 1px solid var(--primary-color); padding-left: 15px; height: 40px; border-top-left-radius: 20px; border-bottom-left-radius: 20px;} button.widget-sbtn { background-color: var(--primary-color); border: none; color: var(--white-color); height: 40px; width: 50px; margin-left: -5px; border-top-right-radius: 20px; border-bottom-right-radius: 19px; cursor: pointer; font-size: 17px; margin-top: -1px;} form.subscribe-form input::-webkit-input-placeholder { color: var(--border-color);} form.subscribe-form input:-ms-input-placeholder { color: var(--border-color);} form.subscribe-form input::-ms-input-placeholder { color: var(--border-color);} form.subscribe-form input::placeholder { color: var(--border-color);} ul.social-links-footer { margin: 0; padding: 0; list-style: none;} ul.social-links-footer li { display: inline-block;} ul.social-links-footer li a { border: 1px solid var(--primary-color); color: #cccccc; border-radius: 50%; width: 35px; height: 35px; display: inline-block; text-align: center; line-height: 33px; margin-right: 10px;} ul.social-links-footer li a:hover { color: var(--white-color); background-color: var(--primary-color);} .copy-right { border-top: 1px solid #20342b; padding: 35px 0 30px;}/*=== Blog Style URL: ===*//*blog list*/ .search-form input { border: 1px solid #cccccc; border-radius: 35px; height: 45px; padding-left: 20px; width: 100%; cursor: pointer;} .widget-area .widget-search { margin: 10px 0 60px;} .search-form button { position: absolute; right: 20px; top: 0; height: 45px; border: none; background-color: transparent;} .widget.widget-search .search-form { position: relative;} .widget.widget-search .search-form:before { position: absolute; right: 60px; width: 1px; height: 35px; content: ""; background-color: #cccccc; top: 5px;}/*Category*/ h4.blog-title { font-size: 20px; text-transform: capitalize; font-weight: 700; border-bottom: 1px solid #cccccc; margin-bottom: 30px;} .widget.widget-category ul { margin: 0; padding: 0; list-style: none;} .widget.widget-category ul li a { color: #444444; font-size: 15px; padding: 6px 0; display: block;} .widget.widget-category ul li a i { padding-right: 12px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s;} .widget.widget-category ul li a:hover { color: var(--primary-color);} .widget.widget-category { margin-bottom: 43px;} .post-content { padding-left: 100px;} .post-content a { font-weight: 500;}/*Widget post*/ .site-content .widget-post { margin-bottom: 15px;} .widget.widget-archives ul { margin: 0; padding: 0; list-style: none;} .widget.widget-archives { margin: 45px 0;} .widget.widget-archives ul li a { font-size: 15px; color: #444444; font-weight: 500; display: block; padding: 4px 0;} .widget.widget-archives ul li a:hover { color: var(--primary-color);} .widget.widget-tags { margin-bottom: 30px;} .widget.widget-tags ul { margin: 0; padding: 0; list-style: none;} .widget.widget-tags ul li { display: inline-block;} .widget.widget-tags ul li a { background-color: var(--text-color); color: var(--white-color); padding: 9px 20px; margin-bottom: 8px; display: inline-block; border-radius: 28px;} .widget.widget-tags ul li a:hover { background-color: var(--primary-color);} h4.entry-title { font-size: 20px; font-weight: 700; margin-bottom: 0;} .single-news-wrap { overflow: hidden;} h4.entry-title:hover { color: var(--primary-color);} .entry-meta { margin-bottom: 35px;} .entry-meta .entry-date { padding-right: 30px; position: relative;} .entry-meta b { font-weight: 500; padding-right: 5px;} .entry-meta .entry-date:before { position: absolute; right: 13px; top: 3px; width: 1px; height: 14px; background-color: #cccccc; content: "";} .post-thumbnail { margin-bottom: 30px; position: relative; overflow: hidden;} .post-thumbnail img { -webkit-transition: all .4s linear; -o-transition: all .4s linear; transition: all .4s linear; width: 100%;} .post-thumbnail img:hover { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1);} .single-news-wrap .entry-content p { margin-bottom: 25px;} .entry-content a.btn.btn-business { margin-bottom: 75px;}/*Pagination*/ .blog-pagination ul { margin: 0; padding: 0; list-style: none;} .blog-pagination ul li { display: inline-block;} .blog-pagination ul li a { border: 1px solid #cccccc; width: 35px; height: 35px; display: block; line-height: 19px; margin-right: 10px; border-radius: 3px; color: var(--text-color); font-size: 15px; font-weight: 500;} .blog-pagination ul li a:hover { background-color: var(--primary-color); color: var(--white-color);} .blog-pagination ul li a i { line-height: 35px;} .blog-pagination ul li a.active { background-color: var(--primary-color); color: var(--white-color);}/*Blog social share*/ .blog-social { margin-bottom: 75px;} .blog-social h5 { font-weight: 700;} .blog-social ul { margin: 0; padding: 0; list-style: none;} .blog-social ul li { display: inline-block;} .blog-social ul li a { color: #cccccc; border: 1px solid #cccccc; border-radius: 50%; width: 35px; height: 35px; display: inline-block; text-align: center; line-height: 34px; margin-right: 7px;} .blog-social ul li a:hover { background-color: var(--primary-color); color: var(--white-color);} .author-area { margin-bottom: 30px;} .author-area h5 { font-weight: 700; margin-bottom: 40px;} .single-author { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;} .author-thumb img { border-radius: 5px;} .author-text { padding-left: 25px; padding-right: 30px;} .author-text p.author-name { font-weight: 600; color: var(--heading-color);} .author-text span { font-weight: 400; padding-left: 25px;} a.reply { color: var(--primary-color); font-weight: 500;} .comment-form-area {} .comment-form-area h5 { font-weight: 700; margin-bottom: 35px;}/*Comment form*/ .comment-form-area .single-field >textarea, .comment-form-area .single-field >input, form.contact-us-form .single-field >textarea, form.contact-us-form .single-field >input { border: 1px solid #cccccc;} .comment-form-area .single-field input::-webkit-input-placeholder, .comment-form-area .single-field textarea::-webkit-input-placeholder, form.contact-us-form .single-field textarea::-webkit-input-placeholder, form.contact-us-form .single-field input::-webkit-input-placeholder { color: var(--text-color);} .comment-form-area .single-field input:-ms-input-placeholder, .comment-form-area .single-field textarea:-ms-input-placeholder, form.contact-us-form .single-field textarea:-ms-input-placeholder, form.contact-us-form .single-field input:-ms-input-placeholder { color: var(--text-color);} .comment-form-area .single-field input::-ms-input-placeholder, .comment-form-area .single-field textarea::-ms-input-placeholder, form.contact-us-form .single-field textarea::-ms-input-placeholder, form.contact-us-form .single-field input::-ms-input-placeholder { color: var(--text-color);} .comment-form-area .single-field input::placeholder, .comment-form-area .single-field textarea::placeholder, form.contact-us-form .single-field textarea::placeholder, form.contact-us-form .single-field input::placeholder { color: var(--text-color);} .comment-form-area .contact-us-form .single-field .form-control:focus, form.contact-us-form .single-field .form-control:focus { outline: 0 none; background-color: rgba(var(--white-color-rgb), 0.149); border: 1px solid var(--primary-color); -webkit-box-shadow: none; box-shadow: none;} .single-field.one-third { width: 31.7%; float: left; margin-right: 20px;} .single-field.one-third:nth-child(3) { margin-right: 0;}/*=== Contact us Page style ===*/ .contact-info-wrap { padding: 0 65px;} .contact-info { margin-bottom: 65px;} .contact-info a { color: var(--text-color); display: block; font-size: 15px; margin-bottom: 10px;} .contact-info a i { padding-right: 20px;} .contact-info-wrap form.contact-us-form input, .contact-info-wrap form.contact-us-form textarea { border-radius: 10px;}/*=== 404 Page ===*/.error-content img { margin-bottom: 35px;}.error-content h4 { color: #555555; margin-bottom: 10px;}.error-content p { font-size: 15px; margin-bottom: 20px;}.error-content a.btn.btn-business { float: none; display: inline-block;}/*Scroll Up URL: */ #scrollUp { background: var(--primary-color); border-radius: 5%; bottom: 75px; color: var(--white-color); font-size: 32px; height: 60px; line-height: 60px; right: 8px; text-align: center; width: 40px;}/*Preloader URL: */.preloader-wrap { width: 100%; height: 100%; z-index: 9999; background: var(--primary-color); background: -webkit-linear-gradient(to left, #00c6ff, #0072ff); background: linear-gradient(to left, #00c6ff, #0072ff); position: absolute;}.cube-folding { width: 50px; height: 50px; display: inline-block; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); font-size: 0;}.cube-folding span { position: relative; width: 25px; height: 25px; -moz-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); display: inline-block;}.cube-folding span::before { content: ''; background-color: var(--white-color); position: absolute; left: 0; top: 0; display: block; width: 25px; height: 25px; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; -moz-animation: folding 2.5s infinite linear both; -webkit-animation: folding 2.5s infinite linear both; animation: folding 2.5s infinite linear both;}.cube-folding .leaf2 { -moz-transform: rotateZ(90deg) scale(1.1); -ms-transform: rotateZ(90deg) scale(1.1); -webkit-transform: rotateZ(90deg) scale(1.1); transform: rotateZ(90deg) scale(1.1);}.cube-folding .leaf2::before { -moz-animation-delay: 0.3s; -webkit-animation-delay: 0.3s; animation-delay: 0.3s; background-color: #f2f2f2;}.cube-folding .leaf3 { -moz-transform: rotateZ(270deg) scale(1.1); -ms-transform: rotateZ(270deg) scale(1.1); -webkit-transform: rotateZ(270deg) scale(1.1); transform: rotateZ(270deg) scale(1.1);}.cube-folding .leaf3::before { -moz-animation-delay: 0.9s; -webkit-animation-delay: 0.9s; animation-delay: 0.9s; background-color: #f2f2f2;}.cube-folding .leaf4 { -moz-transform: rotateZ(180deg) scale(1.1); -ms-transform: rotateZ(180deg) scale(1.1); -webkit-transform: rotateZ(180deg) scale(1.1); transform: rotateZ(180deg) scale(1.1);}.cube-folding .leaf4::before { -moz-animation-delay: 0.6s; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; background-color: #e6e6e6;}@-moz-keyframes folding { 0%, 10% { -moz-transform: perspective(140px) rotateX(-180deg); transform: perspective(140px) rotateX(-180deg); opacity: 0; } 25%, 75% { -moz-transform: perspective(140px) rotateX(0deg); transform: perspective(140px) rotateX(0deg); opacity: 1; } 90%, 100% { -moz-transform: perspective(140px) rotateY(180deg); transform: perspective(140px) rotateY(180deg); opacity: 0; }}@-webkit-keyframes folding { 0%, 10% { -webkit-transform: perspective(140px) rotateX(-180deg); transform: perspective(140px) rotateX(-180deg); opacity: 0; } 25%, 75% { -webkit-transform: perspective(140px) rotateX(0deg); transform: perspective(140px) rotateX(0deg); opacity: 1; } 90%, 100% { -webkit-transform: perspective(140px) rotateY(180deg); transform: perspective(140px) rotateY(180deg); opacity: 0; }}@keyframes folding { 0%, 10% { -moz-transform: perspective(140px) rotateX(-180deg); -ms-transform: perspective(140px) rotateX(-180deg); -webkit-transform: perspective(140px) rotateX(-180deg); transform: perspective(140px) rotateX(-180deg); opacity: 0; } 25%, 75% { -moz-transform: perspective(140px) rotateX(0deg); -ms-transform: perspective(140px) rotateX(0deg); -webkit-transform: perspective(140px) rotateX(0deg); transform: perspective(140px) rotateX(0deg); opacity: 1; } 90%, 100% { -moz-transform: perspective(140px) rotateY(180deg); -ms-transform: perspective(140px) rotateY(180deg); -webkit-transform: perspective(140px) rotateY(180deg); transform: perspective(140px) rotateY(180deg); opacity: 0; }}.cube-wrapper { position: fixed; left: 50%; top: 50%; margin-top: -50px; margin-left: -50px; width: 100px; height: 100px; text-align: center;}.cube-wrapper:after { content: ''; position: absolute; left: 0; right: 0; bottom: -20px; margin: auto; width: 90px; height: 6px; background-color: rgba(0, 0, 0, 0.1); -webkit-filter: blur(2px); filter: blur(2px); -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; z-index: 1; -moz-animation: shadow 0.5s ease infinite alternate; -webkit-animation: shadow 0.5s ease infinite alternate; animation: shadow 0.5s ease infinite alternate;}.cube-wrapper .loading { font-size: 14px; letter-spacing: 1px; display: block; color: var(--white-color); position: relative; top: 25px; z-index: 2; -moz-animation: text 0.5s ease infinite alternate; -webkit-animation: text 0.5s ease infinite alternate; animation: text 0.5s ease infinite alternate;}@-moz-keyframes text { 100% { top: 35px; }}@-webkit-keyframes text { 100% { top: 35px; }}@keyframes text { 100% { top: 35px; }}@-moz-keyframes shadow { 100% { bottom: -18px; width: 100px; }}@-webkit-keyframes shadow { 100% { bottom: -18px; width: 100px; }}@keyframes shadow { 100% { bottom: -18px; width: 100px; }}/*==================== End ======================*/