// Fonts @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600); @import url(http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700); @import url(http://fonts.googleapis.com/css?family=Volkhov:400italic); /* var text-decoration */ @open-sans:'Open Sans', sans-serif; @roboto: 'Roboto', sans-serif; @Volkhov:'Volkhov', serif; /*-- Common Css --*/ body { font-family: @open-sans; -webkit-font-smoothing: antialiased; } h1,h2,h3,h4,h5,h6 { font-family: @roboto; } h2 { font-size: 30px; font-weight: 400; } h3 { font-size: 28px; font-weight: 300; } p { font-size: 15px; line-height: 28px; } ul { padding: 0; margin: 0; list-style: none; } a, a:active, a:focus, a:active { text-decoration:none !important; } .section-title { margin-bottom: 70px; h2 { text-transform: uppercase; font-size: 28px; font-weight: 600; } p { font-family: @Volkhov; font-style: italic; color: #666; } } /*-- Header Start --*/ header{ background: #fff; padding: 20px 0; .navbar{ margin-bottom: 0px; border: 0px; } .navbar-brand { padding-top: 5px; } .navbar-default{ background: none; border: 0px; .navbar-nav{ padding-top: 10px; li{ a{ color: #333333; padding: 10px 26px; font-size: 15px; font &:hover{ color: #000; } } } } } } /*--------------------------------------------- Index Start -----------------------------------------------*/ /*-- Slider Start --*/ #slider{ background: url("../img/slider-bg2.jpg") no-repeat; background-size: cover; background-attachment: fixed; background-position: 10% 0%; padding:200px 0 280px 0; position: relative; &:before{ content: ""; position: absolute; left: 0; top: 0; bottom: 0; right: 0; width: 100%; height: 100%; background: linear-gradient(to left,#8b86a3, #322e40); opacity: 0.8; } .block{ color: #E3E3E4; h1{ font-family: @roboto; font-weight: 100; font-size: 45px; line-height: 60px; letter-spacing: 10px; padding-bottom: 45px; } p{ font-size: 23px; line-height: 40px; font-family: @roboto; font-weight: 300; letter-spacing: 3px; } } } /*-- wrapper Start --*/ #intro{ padding:100px 0; .block{ h2{ padding-top: 35px; line-height: 27px; margin:0; } p{ color: #7B7B7B; padding-top: 20px; } img{ padding-left: 40px; width: 100%; } } .section-title { margin-bottom: 0px; h2 { } p { padding-top: 20px; } } } /*-- service Start --*/ #service{ text-align: center; padding: 90px 0; .service-item{ padding-bottom:30px; i { font-size: 60px; color: #4A4656; } h4{ padding-top: 20px; margin:0; color: #666; } p{ color: #888; padding-top: 10px; margin:0; font-size: 14px; line-height: 1.8; } } } /*-- call-to-action Start --*/ #call-to-action{ background: url("../img/call-to-action-bg.jpg") no-repeat; background-size: cover; background-attachment: fixed; padding: 70px 0px; position: relative; text-align: center; color: #fff; &:before{ content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; background: #1d192c; opacity: 0.8; } h2{ padding-bottom: 20px; line-height: 33px; margin:0; font-size: 30px; } p{ font-size: 14px; line-height: 1.6; } .btn-call-to-action{ padding: 15px 35px; border:none; background-color: #fff; font-size: 15px; color: #333333; margin-top: 30px; } } /*-- Feature Start --*/ #feature { background: url("../img/featue-bg.jpg"); background-position: 50% 94px; width: 100%; display: block; position: relative; overflow: visible; background-attachment: fixed; background-repeat: no-repeat; background-position: center center; background-color: #fff; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-backface-visibility: hidden; backface-visibility: hidden; padding: 100px 0; h2 { font-size: 28px; font-weight: 600; margin-bottom: 30px; } p{ color: #8d8f92; margin-bottom: 20px; } .btn-view-works { background:#655E7A; color: #fff; padding:10px 20px; } } /*-- content Start --*/ #testimonial{ padding: 100px 0; .block{ h2{ line-height: 27px; color: #5C5C5C; padding-top: 110px; } p{ padding-top: 50px; color: #7B7B7B; } } .counter-box { li { width: 50%; float: left; text-align: center; margin: 30px 0 30px; i { font-size: 35px; } h4 { font-size: 30px; font-weight: bold; } span { color: #555; } } } .testimonial-carousel{ text-align: center; width: 75%; border: 1px solid #DEDEDE; padding: 24px; margin: 0 auto; img{ padding-bottom: 38px; } p{ line-height: 28px; font-weight: 300; padding-bottom: 20px; } .user{ img{ padding-bottom: 0px; border-radius: 500px; } p{ padding-bottom: 0; font-size: 12px; line-height: 20px; color: #353241; span{ display: block; color: #353241; font-weight: 600; } } } .owl-carousel .owl-pagination div{ border: 1px solid #1D1D1D; border-radius: 500px; display: inline-block; height: 10px; margin-right: 15px; width: 10px; } .owl-carousel .owl-pagination div.active{ background: #5C5C5C; font-size: 30px; display: inline-block; border: 0px; } } } /*-- features Start --*/ #clients-logo-section{ padding-top: 30px; padding-bottom: 75px; .clients-logo-img{ padding: 0px 50px; } } /*--------------------------------------------- Work Start -----------------------------------------------*/ /*-- Slider-work Start --*/ #global-header{ background: url("../img/slider-bg2.jpg") no-repeat; background-size: cover; padding-top: 150px; padding-bottom: 107px; position: relative; background-attachment: fixed; &:before{ content: ""; position: absolute; left: 0; top: 0; bottom: 0; right: 0; width: 100%; height: 100%; background: linear-gradient(to left,#928dab, #1f1c2c 70%); opacity: 0.8; } .block{ color: #E3E3E4; margin: 0 auto; padding-left: 90px; text-align: center; h1{ font-weight: 100; font-size: 45px; letter-spacing: 6px; padding-bottom: 15px; margin-top: 0; text-transform: capitalize; } p{ font-size: 16px; font-weight: 300; letter-spacing: 1px; word-spacing: 3px; } } } /*-- portfolio-work Start --*/ #portfolio-work{ overflow: hidden; padding: 80px 0; .block{ .portfolio-menu{ padding-bottom: 30px; text-align: center; ul{ border: 1px solid #999999; display: inline-block; margin-bottom: 40px; li{ display: inline-block; padding: 0px 25px; cursor: pointer; font-size: 15px; line-height: 40px; font-weight: 600; color: #333333; text-transform: capitalize; position: relative; } .active { color: #655E7A; position: relative; &:before { content: "\f0d7"; position: absolute; font-family: 'FontAwesome'; bottom: -18px; font-size: 30px; width: 20px; left: 0px; right: 0px; top: 23px; margin: 0 auto; color: #fff; text-shadow: 0 1px 0px rgba(0,0,0,0.9); -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } } } ul li:hover:before{ content: "\f0d7"; position: absolute; font-family: 'FontAwesome'; bottom: -18px; font-size: 30px; width: 20px; left: 0px; right: 0px; top: 24px; margin: 0 auto; color: #fff; text-shadow: 0 1px 0px rgba(0,0,0,0.9); -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } } .portfolio-contant{ ul{ li{ float: left; width: 32.22%; overflow: hidden; position: relative; margin:6px; position: relative; &:hover .overly { opacity: 1; } &:hover .position-center { position: absolute; top: 50%; -webkit-transform: translate(0%, -50%); -moz-transform: translate(0%, -50%); -ms-transform: translate(0%, -50%); transform: translate(0%, -50%); } a{ display: block; color: #fff; h2{ font-size: 22px; text-transform: uppercase; letter-spacing: 1px; } p{ font-size: 15px; } span { font-style: italic; font-size: 13px; color: #655E7A; } } } img{ width: 100%; height: auto; } } .overly { position: absolute; top: 0; bottom: 0; right: 0; left: 0; background: rgba(0,0,0,0.9); opacity: 0; -webkit-transition: .3s all; -o-transition: .3s all; transition: .3s all; text-align: center; } .position-center { position: absolute; top: 50%; left: 10%; -webkit-transform: translate(0%, 50%); -moz-transform: translate(0%, 50%); -ms-transform: translate(0%, 50%); transform: translate(0%, 50%); -webkit-transition: .5s all; -o-transition: .5s all; transition: .5s all; } } .mix{ display: none; } } } /*-- wrapper-work Start --*/ #wrapper-work{ overflow: hidden; padding-top: 100px; ul{ li{ width: 50%; float: left; position: relative; img{ width: 100%; height: 100%; } .items-text{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; color: #fff; background: rgba(0, 0, 0, 0.60); padding-left: 44px; padding-top: 140px; h2{ padding-bottom: 28px; padding-top: 75px; position: relative; &:before{ content: ""; position: absolute; left: 0; bottom: 0; width: 75px; height: 3px; background: #fff; } } p{ padding-top: 30px; font-size: 16px; line-height: 27px; font-weight: 300; padding-right: 80px; } } } } } /*-- features-work Start --*/ #features-work{ padding-top: 50px; padding-bottom: 75px; .block{ ul{ li{ width: 19%; text-align: center; display: inline-block; padding: 40px 0px; } } } } /*--------------------------------------------- Work Close -----------------------------------------------*/ /*=============================================*/ /*--------------------------------------------- Contact Start -----------------------------------------------*/ /*-- slider-contact Start --*/ #slider-contact{ background: url("../img/slider-bg2.jpg") no-repeat; background-size: cover; padding-top: 150px; padding-bottom: 107px; position: relative; &:before{ content: ""; position: absolute; left: 0; top: 0; bottom: 0; right: 0; width: 100%; height: 100%; background: linear-gradient(to left,#928dab, #1f1c2c 70%); opacity: 0.8; } .block{ color: #E3E3E4; margin: 0 auto; padding-left: 90px; h1{ font-family: @roboto; font-weight: 100; font-size: 45px; line-height: 60px; letter-spacing: 6px; padding-bottom: 15px; } p{ font-size: 23px; line-height: 40px; font-family: @roboto; font-weight: 300; letter-spacing: 1px; word-spacing: 3px; } } } /*-- contact-form Start --*/ #contact-form{ padding-top: 70px; padding-bottom: 35px; .block{ form{ .form-group{ padding-bottom: 15px; margin: 0px; .form-control{ background: #F6F8FA; height: 60px; border: 1px solid #EEF2F6; box-shadow: none; width: 100%; } } .form-group-2{ padding-bottom: 15px; margin: 0px; textarea{ background: #F6F8FA; height: 135px; border: 1px solid #EEF2F6; box-shadow: none; width: 100%; } } } button{ width: 100%; height: 60px; background: #47424C; border: none; color: #fff; font-family: @open-sans; font-size: 18px; } } } /*-- wrapper-contact Start --*/ .address-block { li { margin-bottom:20px; i { margin-right: 15px; font-size: 20px; width: 20px; } } } .social-icons { margin-top: 40px; li { display: inline-block; margin:0 6px; } a { display: inline-block; } i{ color: #2C2C2C; margin-right: 25px; font-size: 25px; } } .google-map { position: relative; } .google-map #map { width: 100%; height: 300px; background-color: #ff432e; } #contact-box{ padding-top: 35px; padding-bottom: 58px; .block{ img{ width: 100%; } h2{ font-family: @open-sans; font-weight: 300; color: #000; font-size: 28px; padding-bottom: 30px; } p{ color: #5C5C5C; display: block; } } } /*-- features-contact Start --*/ #features-contact{ padding-top: 50px; padding-bottom: 75px; .block{ ul{ li{ width: 19%; text-align: center; display: inline-block; padding: 40px 0px; } } } } /*--------------------------------------------- Contact Close -----------------------------------------------*/ /*--------- Heading------------*/ .heading{ padding-bottom: 60px; text-align: center; h2{ color: #000; font-size: 30px; line-height: 40px; font-weight: 400; } p{ font-size: 18px; line-height: 40px; color: #292929; font-weight: 300; } } /*---------------------------*/ /*-- footer Start --*/ footer{ background: #F5F5F5; text-align: center; padding-top: 48px; padding-bottom: 55px; p{ font-size: 13px; line-height: 25px; color: #919191; } a{ color: #595959; } .footer-manu{ padding-bottom: 25px; ul{ margin: 0px; padding: 0px; li{ display: inline-block; padding: 0px 20px; a{ display: inline-block; color: #494949; &:hover{ color: #000; } } } } } }