/*************************************************************************************************************** |||||||||||||||||||||||||| MASTER STYLESHEET FOR RinBuild |||||||||||||||||||||||||||||||||||| **************************************************************************************************************** |||||||||||||||||||||||||| TABLE OF CONTENT ||||||||||||||||||||||||||||||||||||||| **************************************************************************************************************** **************************************************************************************************************** 01. Imported styles 02. Flaticon reset styles 03. Header styles 04. Mainmenu styles 05. Rev_slider_wrapper styles 66. Call to action area Style 07. Categories area style 08. Fact counter area style 09. Latest Blog area style 10. Latest blog area style 11. Testimonial area style 12. Brand area style 13. Single service style 14. Pricing table area style 15. About page style 16. Account page style 17. 404 page style style 18. Blog page style 19. Blog single style 20. Contact page style **************************************************************************************************************** |||||||||||||||||||||||||||| End TABLE OF CONTENT |||||||||||||||||||||||||||||||||||| ****************************************************************************************************************/ @import url('https://fonts.googleapis.com/css?family=Poppins:300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap'); @import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&display=swap'); @import url(animate.css); @import url(bootstrap-select.min.css); @import url(icomoon.css); @import url(jquery.bootstrap-touchspin.css); @import url(jquery.fancybox.min.css); @import url(jquery.mCustomScrollbar.min.css); @import url(nouislider.css); @import url(nouislider.pips.css); @import url(polyglot-language-switcher.css); @import url(timePicker.css); @import url(slick.css); @import url(jquery.bxslider.css); /*============================================== Base Css ===============================================*/ *{ margin:0px; padding:0px; border: none; outline: none; font-size: 100%; } html, body { height: 100%; } body { color: #000000; font-size: 16px; line-height: 28px; font-weight: 300; font-family: 'Open Sans', sans-serif; } button:focus{ outline: none; } button { cursor: pointer; border: none; background: transparent; padding: 0; } h1, h2, h3, h4, h5, h6 { color: #000000; font-weight: 700; font-family: 'Poppins', sans-serif; margin: 0; } h3 { font-size: 18px; line-height: 30px; font-weight: 500; } h4 { } a, a:hover, a:active, a:focus { text-decoration: none; outline: none; border: none; } img.lazy-image{ background:url(../images/icon/image-bg.svg) center center no-repeat; } img.lazy-image.loaded{ background-image:none; } .owl-theme img.lazy-image.loaded{ height: auto; opacity: 1; } @media (min-width: 1200px) { .container { max-width: 1200px; } } .product-background{ background-image: url(assets/images/banner-bg1.jpg); width: 100%; height: 100%; overflow-y: scroll; overflow-x: hidden; } .fix{ position: relative; display: block; overflow: hidden; } img { max-width: 100%; height: auto; transition-delay: .1s; transition-timing-function: ease-in-out; transition-duration: .7s; transition-property: all; } .map-data { text-align: center; font-size: 14px; font-weight: 400; line-height: 1.8em; padding: 5px 10px 5px; } .map-data a{ color: #0b59d9; display: block; } .map-data h6{ font-size:16px; font-weight:700; text-align:center; margin-bottom:5px; color:#121212; } i { font-style: normal; } ul, li { list-style: none; margin: 0; padding: 0; } ol, li{ margin: 0; padding: 0; } .clr1{ color: #f36727; } .bgclr1{ background: #f36727; } .auto-container { position: static; max-width: 1200px; padding: 0px 15px; margin: 0 auto; } .btn-one { position: relative; display: inline-block; padding: 0 35px; background: #ffffff; font-size: 16px; line-height: 56px; font-weight: 400; text-transform: uppercase; font-family: 'Poppins', sans-serif; transition: all 0.3s ease-in-out 0.1s; } .btn-one span:before{ position: relative; display: inline-block; padding-left: 10px; } .btn-one:hover, .btn-one:focus{ color: #ffffff; } .shop-btn{ position: relative; display: inline-block; padding: 24px 45px 22px; background: #0b59d9; color: #ffffff; font-size: 14px; line-height: 14px; font-weight: 500; text-transform: uppercase; border-radius: 5px; font-family: 'Rubik', sans-serif; transition: all 200ms linear; transition-delay: 0.1s; } .shop-btn:hover{ color: #f8f8f8; background: #1d2633; } .sec-title { position: relative; top: -5px; display: block; padding-bottom: 56px; } .sec-title p{ font-size: 14px; line-height: 20px; font-weight: 300; text-transform: uppercase; margin: 0; } .sec-title .big-title{ position: relative; display: block; padding: 7px 0 0; } .sec-title .big-title h1{ color: #ffffff; font-size: 32px; line-height: 40px; font-weight: 700; text-transform: uppercase; } .sec-title .big-title.black-clr h1{ color: #000000; } .parallax-bg-one { background-attachment: fixed; background-position: center top; background-repeat: no-repeat; background-size: cover; position: relative; z-index: 1; } .parallax-bg-one::before { background: rgba(18, 32, 0, 0.90) none repeat scroll 0 0; content: ""; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: -1; } .parallax-bg-two { background-attachment: fixed; background-position: center top; background-repeat: no-repeat; background-size: cover; position: relative; z-index: 1; } .parallax-bg-two::before { background: rgba(9, 23, 33, 0.90) none repeat scroll 0 0; content: ""; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: -1; } .flex-box { display: flex; justify-content: center; flex-direction: row; flex-wrap: wrap; } .flex-box-two { display: flex; justify-content: space-between; flex-direction: row; flex-wrap: wrap; align-items: center; } .flex-box-three { display: flex; justify-content: space-between; flex-direction: row; flex-wrap: wrap; align-items: center; } .flex-box-four { display: flex; justify-content: center; flex-direction: row; flex-wrap: wrap; align-items: center; } .flex-box-five { display: flex; justify-content: space-between; flex-direction: row; flex-wrap: wrap; align-items: center; } /*___ owl Nav Dot Style _____*/ .owl-nav-style-one{} .owl-nav-style-one .owl-controls { } .owl-nav-style-one.owl-theme .owl-stage-outer { position: relative; display: block; padding-top: 0px; padding-bottom: 0px; } .owl-nav-style-one.owl-theme .owl-nav { position: absolute; top: -130px; right: 0; margin: 0; } .owl-nav-style-one.owl-theme .owl-nav [class*="owl-"] { position: relative; display: inline-block; width: 60px; height: 50px; background: #798795; border: 0px solid #f9f6f0; border-radius: 5px; color: #ffffff; font-size: 40px; font-weight: 100; line-height: 50px; margin: 0 0 0 0px; padding: 0; transition: all 700ms ease 0s; } .owl-nav-style-one.owl-theme .owl-nav [class*="owl-"] span { position: relative; top: -5px; display: inline-block; line-height: 30px; } .owl-nav-style-one.owl-theme .owl-nav .owl-prev { transform: rotate(0deg); } .owl-nav-style-one.owl-theme .owl-nav .owl-next { margin-left: 10px; } .owl-nav-style-one.owl-theme .owl-nav [class*="owl-"]:hover{ color: #ffffff; } .owl-nav-style-two{} .owl-nav-style-two .owl-controls { } .owl-nav-style-two.owl-theme .owl-nav [class*="owl-"] { background: #fff none repeat scroll 0 0; border-radius: 0%; color: #3740b0; font-size: 24px; font-weight: 700; height: 50px; line-height: 50px; margin: 0 0 0 0px; padding: 0; width: 50px; transition: all 700ms ease 0s; } .owl-nav-style-two.owl-theme .owl-nav .owl-next { margin-left: 0px; } .owl-nav-style-two.owl-theme .owl-nav [class*="owl-"]:hover{ color: #ffffff; background: #3740b0; } .owl-carousel.owl-dot-style1 .owl-stage-outer { position: relative; display: block; padding-top: 10px; padding-bottom: 47px; } .owl-carousel.owl-dot-style1 .owl-dots { position: relative; display: block; text-align: center; line-height: 6px; } .owl-carousel.owl-dot-style1 .owl-dots .owl-dot{ position: relative; display: inline-block; width: 35px; height: 6px; background: #d9d9d9; border: 0px solid #4c4c4c; margin: 0px 5px; padding: 0px; border-radius: 10px; transition: all 500ms ease; } .owl-carousel.owl-dot-style1 .owl-dots .owl-dot span{ display: none; } .owl-carousel.owl-dot-style1 .owl-dots .owl-dot.active{ width: 95px; } .accordion-box { position: relative; display: block; } .accordion-box .accordion { position: relative; display: block; margin-bottom: 20px; } .accordion-box .accordion.marginbottom0{ margin-bottom: 0; } .accordion-box .accordion .accord-btn { position: relative; display: block; border: 1px solid #ededed; cursor: pointer; background: #ffffff; padding-left: 20px; padding-right: 60px; padding-top: 17px; padding-bottom: 15px; transition: all 500ms ease; } .accordion-box .accordion .accord-btn h4 { color: #000000; font-size: 18px; line-height: 26px; font-weight: 400; transition: all 500ms ease; } .accordion-box .accordion .accord-btn::after { font-family: "Flaticon"; position: absolute; content: "\f107"; top: 8px; right: 18px; width: 20px; height: 40px; background: transparent; color: #828f9c; font-size: 16px; line-height: 40px; font-weight: 600; text-align: center; transition: all 500ms ease 0s; } .accordion-box .accordion .accord-btn.active{ transition: all 500ms ease; } .accordion-box .accordion .accord-btn.active h4 { color: #ffffff; } .accordion-box .accordion .accord-btn.active:after{ color: #ffffff; content: "\f108"; } .accordion-box .accordion .accord-content { position: relative; display: block; padding-top: 20px; padding-bottom: 20px; padding-left: 20px; padding-right: 30px; display: none; border: 1px solid #ededed; border-top: none; } .accordion-box .accordion .accord-content.collapsed { display: block; } .accordion-box .accordion .accord-content p { color: #798795; font-size: 16px; line-height: 32px; font-weight: 400; margin: 0; } @keyframes pulse { 50% { box-shadow: 0 0 0 5px rgba(255,255,255,.1), 0 0 0 20px rgba(238, 238,238, 0.3000); } } @keyframes pulse2 { 50% { box-shadow: 0 0 0 5px rgba(255,231,1,.1), 0 0 0 20px rgba(255, 231,1, 0.3000); } } .boxed_wrapper { background: #fff none repeat scroll 0 0; position: relative; margin: 0 auto; width: 100%; min-width: 320px; min-height: 400px; overflow: hidden; } /*________________Preloader_______________ */ .preloader{ position:fixed; left:0px; top:0px; width:100%; height:100%; z-index:999999999999999999; background-color:#ffffff; background-position:center center; background-repeat:no-repeat; background-image:url(../images/icon/preloader.gif); } .preloader.style-two { background-image: url(../images/icon/preloader-1.html); } .preloader.style-three { background-image: url(../images/icon/preloader-2.html); } .preloader.style-four { background-image: url(../images/icon/preloader-3.html); } /*** Scroll To Top style ***/ .scroll-top { position: fixed; right: 15px; bottom: 20px; width: 55px; height: 55px; background: transparent; border-radius: 0%; font-size: 14px; line-height: 53px; font-weight: 600; text-align: center; text-transform: uppercase; display: none; cursor: pointer; transition: all 200ms linear; transition-delay: 0.1s; z-index: 999999999; } .scroll-top span {} .scroll-top:after { position: absolute; content: ''; top: 100%; left: 5%; height: 10px; width: 90%; opacity: 1; z-index: -1; background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 80%); background: -webkit-radial-gradient(center ellipse, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 80%); background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 80%); } .scroll-top:hover{ color: #ffffff; } .scroll-top.style2 { position: static; width: 70px; height: 100px; border-radius: 0; background: #0b59d9; border: none; text-align: center; animation: auto; border-top-left-radius: 5px; border-top-right-radius: 5px; transition: all 200ms linear; transition-delay: 0.1s; } .scroll-top.style2:hover{ background: #074dbe; } .scroll-top.style2:after{ display: none; } .scroll-top.style2 span:before{ color: #ffffff; font-size: 20px; } .scroll-top.style2 .text{ position: relative; display: block; color: #ffffff; font-size: 16px; font-weight: 600; text-transform: capitalize; margin: 4px 0 0; } .scroll-top.style2.s3 { position: absolute; top: -30px; right: 30px; bottom: auto; border-radius: 5px; } /* Form validation styles */ input:focus, textarea:focus, select:focus { border-color: #43c3ea; outline: none; } #contact-form input[type="text"].error{ border-color: red; } #contact-form input[type="email"].error{ border-color: red; } #contact-form select.error { border-color: red; } #contact-form textarea.error{ border-color: red; } /* Post pagination styles */ .post-pagination{ position: relative; display: block; } .post-pagination.martop20{ margin-top: 20px; } .post-pagination li { position: relative; display: inline-block; margin: 0 3px; } .post-pagination li a { position: relative; display: block; height: 60px; width: 60px; border-radius: 50%; border: 2px solid #eeeeee; color: #131313; font-size: 18px; line-height: 56px; font-weight: 600; transition: all 500ms ease 0s; font-family: 'Poppins', sans-serif; } .post-pagination li a i { color: #c1c1c1; font-size: 22px; transition: all 200ms linear; transition-delay: 0.1s; } .post-pagination li.active a, .post-pagination li:hover a { background: #fec727; border-color: #fec727; } .post-pagination li.active a i, .post-pagination li:hover a i{ color: #131313; } .post-pagination.style2 li a{ border-radius: 0; } /* Overlay styles */ .overlay-style-one{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition-delay: .1s; transition-timing-function: ease-in-out; transition-duration: .7s; transition-property: all; opacity: 0; z-index: 1; } .overlay-style-one.bg1{ background-color: rgba(3, 13, 40, 0.70); } .overlay-style-one.bg2{ background-color: rgba(255, 255, 255, 0.70); } .overlay-style-one.bg3{ background-color: rgba(0, 83, 153, 0.90); } .overlay-style-one .box{ display: table; height: 100%; width: 100%; } .overlay-style-one .box .content{ display: table-cell; text-align: center; vertical-align: middle; } .overlay-style-one .box .inner{ display: table-cell; text-align: center; vertical-align: middle; } .overlay-style-two{ position: absolute; left: 0px; bottom: 0px; right: 0px; top: 0px; z-index: 2; opacity: 0; transition: all 900ms ease; } .overlay-style-two:before{ position: absolute; content: ''; top: 0px; left: 0px; width: 100%; height: 50%; display: block; opacity: 0; text-align: center; transform: perspective(400px) rotateX(-90deg); transform-origin: top; transition: all 0.5s; background-color: rgba(18, 18, 18, 0.90); } .overlay-style-two:after{ position: absolute; content: ''; left: 0px; bottom: 0px; width: 100%; height: 50%; display: block; opacity: 0; text-align: center; transform: perspective(400px) rotateX(90deg); transform-origin: bottom; transition: all 0.5s; background-color: rgba(18, 18, 18, 0.90); } .review-box { position: relative; display: block; overflow: hidden; line-height: 16px; } .review-box ul { display: block; overflow: hidden; } .review-box ul li { display: inline-block; float: left; margin-right: 4px; } .review-box ul li:last-child{ margin-right: 0px; } .review-box ul li i { font-size: 18px; color: #ffba00; } .social-links-style1 { position: relative; display: block; overflow: hidden; } .social-links-style1 li{ position: relative; display: inline-block; float: left; margin-right: 20px; } .social-links-style1 li:last-child{ margin-right: 0px; } .social-links-style1 li a i{ position: relative; display: block; background: rgba(255, 255, 255, 0.05); width: 40px; height: 40px; border-radius: 50%; color: #798795; font-size: 14px; font-weight: 400; line-height: 40px; text-align: center; transition: all 500ms ease; } .social-links-style1 li a:hover i{ color: #ffffff; } .sociallinks-style-two { position: relative; display: block; overflow: hidden; margin: 7px 0 8px; } .sociallinks-style-two li { position: relative; display: inline-block; float: left; margin-right: 25px; } .sociallinks-style-two li:last-child{ margin-right: 0px; } .sociallinks-style-two li a i { position: relative; display: block; color: #ffffff; font-size: 16px; transition: all 500ms ease 0s; } .sociallinks-style-two li a:hover i{ color: #e4b33d; } /* Update header Style */ @keyframes menu_sticky { 0% {margin-top:-90px;} 50% {margin-top: -74px;} 100% {margin-top: 0;} } /*** ============================================ Hidden Sidebar style ============================================ ***/ .hidden-bar{ position: fixed; top: 0; width: 320px; height: 100%; background: #160f0a; z-index: 9999999999; transition: all 700ms ease; } .hidden-bar .mCSB_inside > .mCSB_container{ margin-right:0px; } .hidden-bar.right-align { right: -400px; } .hidden-bar.right-align.visible-sidebar{ right:0px; transition-delay: 300ms; } .hidden-bar .hidden-bar-closer { position: absolute; right: 20px; top: 20px; width: 40px; height: 40px; background: none; color: #ffffff; border-radius: 0px; text-align: center; line-height: 40px; transition: all 300ms ease; z-index: 999999; } .hidden-bar .hidden-bar-closer button { background: none; display:block; font-size: 40px; color:#ffffff; width:40px; height:40px; line-height:40px; } .hidden-bar .hidden-bar-closer button span:before{ font-size: 30px; line-height: 30px; } .hidden-bar .hidden-bar-closer:hover button { color: #ffffff; } .hidden-bar-wrapper { height: 100%; padding:30px 10px 30px 30px; } .hidden-bar .logo { padding:0px 0px 30px; } .hidden-bar .logo a{ display: inline-block; } .hidden-bar .logo img{ display: inline-block; max-width: 100%; } .hiddenbar-about-us{ position: relative; display: block; } .hiddenbar-about-us h3{ font-size: 20px; color: #ffffff; margin: 0 0 18px; } .hiddenbar-about-us .text{ display: block; } .hiddenbar-about-us .text p{ color: #ffffff; margin: 0; } .hidden-bar .contact-info-box{ position: relative; display: block; padding-top: 36px; } .hidden-bar .contact-info-box h3{ font-size: 20px; color: #ffffff; margin: 0 0 23px; } .hidden-bar .contact-info-box ul{ position: relative; display: block; } .hidden-bar .contact-info-box ul li{ position: relative; display: block; overflow: hidden; margin-bottom: 16px; } .hidden-bar .contact-info-box ul li:last-child{ margin-bottom: 0; } .hidden-bar .contact-info-box ul li h5{ color: #ffffff; font-size: 16px; line-height: 16px; font-weight: 500; margin: 0 0 11px; } .hidden-bar .contact-info-box ul li p{ color: #838383; margin: 0; } .hidden-bar .newsletter-form-box { position: relative; display: block; padding-top: 26px; padding-right: 20px; } .hidden-bar .newsletter-form-box h3{ font-size: 20px; color: #ffffff; margin: 0 0 24px; } .hidden-bar .newsletter-form-box form{ position: relative; display: block; } .hidden-bar .newsletter-form-box form input[type="email"] { position: relative; display: block; width: 100%; height: 50px; background: #ffffff; border: 1px solid #eeeeee; color: #8b8b8b; font-size: 15px; padding: 0 20px; padding-right: 60px; transition: all 500ms ease; } .hidden-bar .newsletter-form-box form button { position: absolute; top: 0; bottom: 0; right: 15px; width: 50px; text-align: center; } .hidden-bar .newsletter-form-box form button:before{ position: absolute; top: 12px; left: 0; bottom: 12px; width: 2px; background: #eeeeee; content: ""; } .hidden-bar .newsletter-form-box form button i{ position: relative; top: 2px; color: #160f0a; font-size: 20px; line-height: 20px; } .hidden-bar .copy-right-text{ position: relative; display: block; padding-top: 44px; } .hidden-bar .copy-right-text p{ color: #ffffff; margin: 0; } /*============================================== Main Header Css ===============================================*/ .main-header { position: absolute; left: 0px; top: 0px; width: 100%; margin: 0px; z-index: 999999; transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; } .sticky-header { position: fixed; top: 0px; left: 0px; width: 100%; padding: 0px 0px; background: rgba(255, 255, 255, 0.95); opacity: 0; visibility: hidden; transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; z-index: 0; } .fixed-header .sticky-header { visibility: visible; -ms-animation-name: fadeInDown; -moz-animation-name: fadeInDown; -op-animation-name: fadeInDown; -webkit-animation-name: fadeInDown; animation-name: fadeInDown; -ms-animation-duration: 500ms; -moz-animation-duration: 500ms; -op-animation-duration: 500ms; -webkit-animation-duration: 500ms; animation-duration: 500ms; -ms-animation-timing-function: linear; -moz-animation-timing-function: linear; -op-animation-timing-function: linear; -webkit-animation-timing-function: linear; animation-timing-function: linear; -ms-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -op-animation-iteration-count: 1; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; box-shadow: 0 0 10px rgba(0,0,0,.1); opacity: 1; z-index: 999999; } .sticky-header .logo { position: relative; display: block; padding: 15px 0; } .sticky-header .logo a{ position: relative; display: inline-block; } .sticky-header .main-menu .navigation> li{ } .sticky-header .main-menu .navigation> li> a{ color: #000000; } .header-top { position: relative; display: block; padding: 10px 0; background: #030e27; } .header-top .outer-box { position: relative; display: flex; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; } .header-top-left{ position: relative; display: block; max-width: 390px; width: 100%; } .welcome-text{ position: relative; display: block; } .welcome-text h6{ color: #798795; font-size: 14px; line-height: 24px; font-weight: 500; } .welcome-text h6 span:before{ position: relative; top: 4px; display: inline-block; padding-right: 10px; font-size: 20px; } .welcome-text h6 b { font-weight: 500; } .header-top-middle{ position: relative; display: block; max-width: 390px; width: 100%; } .header-social-links{ position: relative; display: block; } .header-social-links .social-links-style1 { position: relative; display: flex; text-align: center; align-items: center; justify-content: center; flex-direction: row; } .header-social-links .social-links-style1 li{ float: none; margin: 0; margin: 0 10px; } .header-social-links .social-links-style1 li a { color: #798795; font-size: 18px; transition: all 200ms linear; transition-delay: 0.1s; } .header-social-links .social-links-style1 li a span.fb:before { position: relative; left: 8px; top: -1px; } .header-top-right{ position: relative; display: block; max-width: 390px; width: 100%; } .header-menu { position: relative; display: block; float: right; } .header-menu ul{ position: relative; display: block; overflow: hidden; } .header-menu ul li{ position: relative; display: inline-block; float: left; line-height: 30px; padding-right: 11px; margin-right: 10px; } .header-menu ul li:last-child{ padding-right: 0; margin-right: 0; } .header-menu ul li:before { position: absolute; top: 9px; right: 0; bottom: 7px; width: 1px; background: rgba(255, 255, 255, 0.10); content: ""; } .header-menu ul li:last-child:before{ display: none; } .header-menu ul li a{ color: #798795; font-size: 14px; font-weight: 400; line-height: 0; transition: all 200ms linear; transition-delay: 0.1s; } .header-upper { position: relative; display: block; background: #ffffff; padding: 15px 0; } .header-upper .outer-box { position: relative; display: block; } .header-upper-left { position: relative; display: block; } .header-upper-left .logo { position: relative; display: block; padding: 2px 0; } .header-upper-left .logo a{ position: relative; display: inline-block; } .main-header .logo a img{ width: 110px; } .fixed-header .logo a img{ width: 100px; } .header-upper-right{ position: relative; display: block; } .header-contact-info{ position: relative; display: block; } .header-contact-info ul{ position: relative; display: block; overflow: hidden; } .header-contact-info ul li{ position: relative; display: inline-block; float: left; margin-right: 100px; } .header-contact-info ul li:last-child{ margin-right: 0; } .header-contact-info ul li .icon{ width: 50px; } .header-contact-info ul li .icon span:before{ position: relative; top: 3px; font-size: 30px; line-height: 30px; } .header-contact-info ul li .icon, .header-contact-info ul li .title{ display: table-cell; vertical-align: middle; } .header-contact-info ul li .title span{ font-size: 14px; font-weight: 400; } .header-contact-info ul li .title h6{ color: #2c2d3e; font-size: 16px; line-height: 24px; font-weight: 400; margin: 1px 0 0; } .header-contact-info ul li .title h6 a{ color: #2c2d3e; transition: all 200ms linear; transition-delay: 0.1s; } .header-lawer { position: relative; display: block; background: transparent; } .header-lawer .outer-box { position: relative; display: block; background: #030e27; } .header-lawer-left{ position: relative; display: block; } .main-menu { position: relative; display: block; float: left; } .main-menu .navigation { position: relative; display: block; } .main-menu .navigation>li { position: relative; display: inline-block; float: left; margin-right: 40px; } .main-menu .navigation>li:last-child{ margin-right: 0; } .main-menu .navigation>li>a { position: relative; display: block; color: #ffffff; font-size: 18px; line-height: 30px; font-weight: 600; text-transform: uppercase; padding: 25px 0px 25px; transition: all 500ms ease; opacity: 1; font-family: 'Poppins', sans-serif; } .main-menu .navigation>li>a.home-icon{ padding: 0; } .main-menu .navigation>li>a span.homeicon { color: #ffffff; font-size: 30px; text-align: center; font-weight: 400; width: 70px; padding: 24px 0 25px; } .main-menu .navigation> li> ul { position: absolute; top: 100%; left: inherit; width: 270px; padding: 0px 0; display: none; border-radius: 0; z-index: 100; } .main-menu .navigation> li> ul:before { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; content: ''; background: #ffffff; border-radius: 0; -webkit-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05); -ms-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05); -o-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05); -moz-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05); box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05); z-index: -1; } .main-menu .navigation> li.dropdown:hover> ul { visibility: visible; opacity: 1; } .main-menu .navigation> li> ul> li { position: relative; display: block; padding: 0 20px; width: 100%; } .main-menu .navigation> li> ul> li> a{ position: relative; display: block; border-bottom: 1px solid #e9e9e9; padding: 13px 0px 13px; color: #000000; font-size: 15px; line-height: 24px; font-weight: 500; text-align: left; text-transform: capitalize; transition: all 500ms ease; font-family: 'Poppins', sans-serif; } .main-menu .navigation> li> ul> li:last-child> a{ border: none; } .main-menu .navigation>li>ul>li>a:hover { padding-left: 15px; } .main-menu .navigation> li> ul> li> a:before{ position: absolute; top: 0; left: 0px; bottom: 0; font-family: FontAwesome; content: "\f105"; font-size: 14px; font-weight: 700; margin: 12px 0; opacity: 0; transition: all 500ms ease; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .main-menu .navigation> li> ul> li.dropdown> a:after { position: absolute; top: 0px; right: 0px; bottom: 0; font-family: FontAwesome; content: "\f105"; color: #000000; font-size: 14px; font-weight: 700; margin: 12px 0; text-align: right; z-index: 5; } .main-menu .navigation>li>ul>li:hover>a:before{ opacity: 1; } .main-menu .navigation> li> ul> li> ul { position: absolute; top: 0%; left: 100%; width: 250px; padding: 0; display: none; background: #ffffff; border-radius: 0; -webkit-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05); -ms-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05); -o-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05); -moz-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05); box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05); z-index: 100; } .main-menu .navigation li> ul> li.dropdown:hover ul { visibility: visible; } .main-menu .navigation>li>ul>li>ul> li { position: relative; display: block; padding: 0 20px; width: 100%; } .main-menu .navigation> li> ul> li> ul> li> a { position: relative; display: block; border-bottom: 1px solid #e9e9e9; padding: 13px 0px 13px; color: #000000; font-size: 15px; line-height: 24px; font-weight: 500; text-align: left; text-transform: capitalize; transition: all 500ms ease; font-family: 'Poppins', sans-serif; } .main-menu .navigation> li> ul> li> ul> li:last-child> a{ border: none; } .main-menu .navigation> li> ul> li:hover > a{ padding-left: 15px; } .main-menu .navigation> li> ul> li> ul> li> a:hover { padding-left: 15px; } .main-menu .navigation>li>ul>li>ul>li a:before{ position: absolute; top: 0; left: 0px; bottom: 0; font-family: FontAwesome; content: "\f105"; font-size: 14px; font-weight: 700; margin: 12px 0; opacity: 0; transition: all 500ms ease; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .main-menu .navigation> li> ul> li> ul> li> a:hover:before{ opacity: 1; } .main-menu .navbar-collapse>ul li.dropdown .dropdown-btn { position: absolute; right: 0px; top: 0; width: 50px; height: 42px; border-left: 1px solid #04102a; text-align: center; font-size: 16px; line-height: 42px; color: #ffffff; cursor: pointer; display: none; z-index: 5; } .navbar-header { display: none; } .outer-search-box-style1 { position: relative; display: inline-block; float: left; padding: 25px 0; margin-right: 30px; } .outer-search-box-style1 .seach-toggle { position: relative; display: block; color: #ffffff; font-size: 16px; line-height: 28px; cursor: pointer; text-align: center; height: 30px; width: 30px; border-radius: 50%; margin: 0; border: 1px solid transparent; transition: all 500ms ease; } .outer-search-box-style1 .search-box { position: absolute; top: 120%; right: 0%; background: #02091a; opacity: 0; padding: 20px; transition: all 500ms ease 0s; visibility: hidden; z-index: 100; margin-left: 0; } .outer-search-box-style1 .search-box.now-visible { top: 100%; opacity: 1; visibility: visible; z-index: 100; } .outer-search-box-style1 .search-box .form-group{ position:relative; padding: 0px; margin: 0px; width: 100%; min-width: 250px; } .outer-search-box-style1 .search-box .form-group input[type="search"] { background: #ffffff none repeat scroll 0 0; border: 1px solid #1f1f23; color: #000; display: block; font-size: 13px; line-height: 24px; position: relative; transition: all 500ms ease 0s; width: 100%; height: 45px; padding-left: 15px; padding-right: 50px; } .outer-search-box-style1 .search-box .form-group input[type="search"]:focus{ border-color: #f5f5f5; } .outer-search-box-style1 .search-box .form-group button, .outer-search-box-style1 .search-box .form-group input[type="submit"] { position: absolute; right: 0; top: 0; display: block; cursor: pointer; background: #030e27; color: #fff; font-size: 13px; height: 45px; line-height: 45px; width: 45px; transition: all 500ms ease 0s; } .outer-search-box-style1 .search-box .form-group button:hover, .outer-search-box-style1 .search-box .form-group input:focus + button{ color: #222222; background: #f5f5f5; } .quote-button{ position: relative; display: block; float: right; } .quote-button a { position: relative; display: inline-block; padding: 0 30px; background: #010919; color: #ffffff; font-size: 18px; line-height: 80px; font-weight: 600; text-transform: uppercase; font-family: 'Poppins', sans-serif; transition: all 200ms linear; transition-delay: 0.1s; } .quote-button a span:before { position: relative; top: 2px; display: inline-block; padding-left: 10px; font-size: 22px; line-height: 18px; transition: all 200ms linear; transition-delay: 0.1s; } .quote-button a:hover{ color: #ffffff; } .quote-button a:hover span:before{ color: #ffffff; } /*** ===================================================== Main Slider style ===================================================== ***/ .main-slider { position: relative; z-index: 10; } .main-slider.style1 { margin-top: 200px; } .main-slider .slide{ position: relative; padding: 182px 0px 150px; background-size: cover; background-repeat: no-repeat; background-position: center center; } .main-slider .slide .image-layer{ position:absolute; left:0; top:0; width:100%; height:100%; background-repeat: no-repeat; background-position: center; background-size: cover; -webkit-transform:scale(1); -ms-transform:scale(1); transform:scale(1); -webkit-transition: all 6000ms linear; -moz-transition: all 6000ms linear; -ms-transition: all 6000ms linear; -o-transition: all 6000ms linear; transition: all 6000ms linear; } .main-slider .slide .image-layer:before{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(3, 13, 40, 0.80); content: ""; z-index: -1; } .main-slider .active .slide .image-layer{ -webkit-transform:scale(1.1); -ms-transform:scale(1.1); transform:scale(1.1); } .main-slider .content{ position:relative; z-index:10; } .main-slider .content h2{ position: relative; color: #ffffff; font-size: 72px; line-height: 1.0em; font-weight: 500; opacity: 0; margin-bottom: 36px; -webkit-transition: all 1000ms ease; -moz-transition: all 100ms ease; -ms-transition: all 1000ms ease; -o-transition: all 1000ms ease; transition: all 1000ms ease; -webkit-transform: translateY(80px); -moz-transform: translateY(80px); -ms-transform: translateY(80px); -o-transform: translateY(80px); transform: translateY(80px); } .main-slider .active .content h2{ opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); transition-delay: 1000ms; } .main-slider .content h3{ position: relative; display: inline-block; color: #ffffff; font-size: 24px; line-height: 1.0em; font-weight: 300; text-transform: uppercase; opacity: 0; -webkit-transition: all 1000ms ease; -moz-transition: all 100ms ease; -ms-transition: all 1000ms ease; -o-transition: all 1000ms ease; transition: all 1000ms ease; -webkit-transform: translateY(80px); -moz-transform: translateY(80px); -ms-transform: translateY(80px); -o-transform: translateY(80px); transform: translateY(80px); } .main-slider .content h3:before{ position: absolute; left: 45px; bottom: 4px; right: 35px; height: 4px; content: ""; z-index: -1; } .main-slider .content h3 img{ width: auto; display: inline-block; padding-right: 20px; } .main-slider .active .content h3{ opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); transition-delay: 1500ms; } .main-slider .content .text{ position: relative; margin-top: 27px; margin-bottom: 60px; opacity: 0; max-width: 470px; -webkit-transition: all 1000ms ease; -moz-transition: all 100ms ease; -ms-transition: all 1000ms ease; -o-transition: all 1000ms ease; transition: all 1000ms ease; -webkit-transform: translateY(80px); -moz-transform: translateY(80px); -ms-transform: translateY(80px); -o-transform: translateY(80px); transform: translateY(80px); } .main-slider .content .text p{ color: #ffffff; font-size: 18px; line-height: 1.8em; font-weight: 300; font-family: 'Open Sans', sans-serif; } .main-slider .active .content .text{ opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); transition-delay: 2000ms; } .main-slider .content .btns-box{ position: relative; opacity: 0; -webkit-transition: all 1000ms ease; -moz-transition: all 100ms ease; -ms-transition: all 1000ms ease; -o-transition: all 1000ms ease; transition: all 1000ms ease; -webkit-transform: translateY(80px); -moz-transform: translateY(80px); -ms-transform: translateY(80px); -o-transform: translateY(80px); transform: translateY(80px); } .main-slider .active .content .btns-box{ opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); transition-delay: 2500ms; } .main-slider .content .btns-box .btn-two { position: relative; display: inline-block; padding: 0 30px; background: transparent; color: #ffffff; font-size: 16px; line-height: 57px; font-weight: 400; text-transform: uppercase; border: 2px solid #ffffff; font-family: 'Poppins', sans-serif; transition: all 0.3s ease-in-out 0.1s; } .main-slider .content .btns-box .btn-one{ color: #ffffff; padding: 0 30px; margin-left: 11px; } .main-slider .content .btns-box .btn-one:hover{ color: #ffffff; border-color: #ffffff; background: transparent; } .main-slider .owl-theme .owl-dots { position: absolute; top: 0; right: 50px; bottom: 0; margin: 0; width: 50px; height: 100%; display: flex; justify-content: center; align-items: flex-end; flex-wrap: wrap; flex-direction: column; padding-right: 10px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .main-slider .owl-theme .owl-dots .owl-dot { position: relative; display: block; width: 30px; height: 5px; background: rgba(255, 255, 255, 0.30); border: 0px solid; margin: 5px 0px; padding: 0px; border-radius: 10px; transition: all 500ms ease; } .main-slider .owl-theme .owl-dots .owl-dot span{ display:none; } .main-slider .owl-theme .owl-dots .owl-dot.active{ width: 40px; } .main-slider .owl-theme .owl-dots .owl-dot:before { position: absolute; top: 0px; right: -10px; bottom: 0px; width: 5px; height: 5px; border-radius: 50%; content: ""; background: rgba(255, 255, 255, 0.30); transition: all 500ms ease; } /*** ============================================= Service Style1 Area Css ============================================= ***/ .service-style1-area{ position: relative; display: block; padding: 120px 0 80px; } .service-style1-area.pdtop75{ padding-top: 75px; } .service-style1-area .title { position: relative; display: block; text-align: center; padding: 70px 0 70px; z-index: 1; } .service-style1-area .title:before{ position: absolute; left: 0; top: 0; right: 0; /*background: url(../images/icon/services/service-title-icon.jpeg);*/ width: 70px; height: 130px; margin: 0 auto; background-repeat: no-repeat; background-position: center; content: ""; z-index: -1; } .service-style1-area .title h1{ font-size: 32px; line-height: 44px; } .service-style1-area .title h1 a{ position: relative; display: inline-block; } .single-service-style1 { position: relative; display: block; text-align: center; max-width: 300px; margin: 0 auto 42px; } .single-service-style1 .icon-holder{ position: relative; display: block; padding-bottom: 25px; } .single-service-style1 .text-holder{ position: relative; display: block; padding: 0 10px; } .single-service-style1 .text-holder h3{ font-size: 18px; line-height: 26px; font-weight: 500; margin: 0 0 8px; } .single-service-style1 .text-holder h3 a{ color: #000000; } .single-service-style1 .text-holder p{ color: #798795; line-height: 24px; margin: 0 0 24px; } .single-service-style1 .text-holder .count-box { position: relative; display: block; width: 40px; height: 40px; border-radius: 50%; margin: 0 auto; color: #798795; font-size: 16px; line-height: 40px; font-weight: 400; transition:all 900ms ease; z-index: 1; } .single-service-style1:hover .text-holder .count-box{ color: #ffffff; } .single-service-style1 .text-holder .count-box:before{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; border-radius: 50%; transition:all 500ms ease; transform:scale(0); content: ""; z-index: -1; } .single-service-style1:hover .text-holder .count-box:before{ transform:scale(1.0); } /*** ============================================= About Style1 Area Css ============================================= ***/ .about-style1-area{ position: relative; display: block; background: #f2f3f4; padding: 120px 0 120px; } .about-style1-area.bg-white{ background: #ffffff; } .about-style1-area .shape { position: absolute; left: -130px; bottom: -70px; right: 0px; background: url(../images/shape/shape-1.png); width: 697px; height: 439px; content: ""; } .about-style1-image-box { position: relative; display: block; max-width: 470px; width: 100%; } .about-style1-image-box .image-box1 { position: relative; display: block; width: 370px; overflow: hidden; z-index: 5; } .about-style1-image-box .image-box1:before{ position: absolute; bottom: 0; right: 0; width: 170px; height: 300px; background: url(../images/shape/border.png); content: ""; z-index: 1; } .about-style1-image-box .image-box1 img{ width: 100%; transform: scale(1.01); transition: all 700ms ease; } .about-style1-image-box .image-box1:hover img{ transform: scale(1.2); } .about-style1-image-box .image-box2 { position: relative; display: block; margin-top: 30px; width: 170px; overflow: hidden; z-index: 5; } .about-style1-image-box .image-box2 img{ width: 100%; transform: scale(1.2); transition: all 700ms ease; } .about-style1-image-box .image-box2:hover img{ transform: scale(1.0); } .video-holder-box { position: absolute; bottom: 0; right: 0; width: 270px; height: 545px; overflow: hidden; background-position: center top; background-attachment: inherit; background-size: cover; } .video-holder-box .icon { position: relative; display: block; width: 100%; height: 100%; z-index: 1; } .video-holder-box .icon:before{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; background-color: rgba(0, 0, 0, 0.80); transition-delay: .1s; transition-timing-function: ease-in-out; transition-duration: .7s; transition-property: all; opacity: 0; z-index: 1; } .video-holder-box:hover .icon:before{ opacity: 1; } .video-holder-box .icon .inner { position: absolute; bottom: 0; right: 0; z-index: 5; } .video-holder-box .icon .inner a { position: relative; display: inline-block; text-align: center; height: 100px; width: 100px; transition: all 500ms ease; -webkit-animation: pulse 2s infinite; -o-animation: pulse 2s infinite; animation: pulse 2s infinite; transition: all 1s ease; } .video-holder-box .icon .inner a span:before { position: relative; display: block; width: 100%; height: 100%; color: #ffffff; font-size: 30px; line-height: 100px; } .about-style1-text-box { position: relative; display: block; padding-left: 100px; padding-top: 30px; } .about-style1-text-box .title{ position: relative; display: block; } .about-style1-text-box .title:before { position: absolute; top: 6px; left: -100px; background: url(../images/shape/title-bg.png); width: 60px; height: 39px; content: ""; } .about-style1-text-box .title p{ font-size: 18px; line-height: 20px; font-weight: 400; text-transform: uppercase; letter-spacing: 6px; margin: 0; } .about-style1-text-box .title h1 { position: relative; display: block; color: #000000; font-size: 50px; line-height: 48px; font-weight: 700; margin: 17px 0 0; } .about-style1-text-box .title h1 b{ font-weight: 700; } .about-style1-text-box .title h1 span{ position: relative; top: -13px; display: inline-block; padding: 0px 20px 0px; color: #ffffff; font-size: 14px; line-height: 30px; font-weight: 700; border-radius: 30px; font-family: 'Open Sans', sans-serif; } .about-style1-text-box .inner-contant{ position: relative; display: block; padding-top: 36px; } .about-style1-text-box .inner-contant p{ margin: 0 0 25px; } .about-style1-text-box .inner-contant .signature-box{ position: relative; display: block; padding-top: 37px; } /*** ============================================= Service Style2 Area style ============================================= ***/ .service-style2-area{ position: relative; display: block; background: #ffffff; padding: 120px 0 112px; } .service-style2-area .layer-outer{ position: absolute; top: 0; left: 0; right: 0; height: 495px; background-attachment: scroll; background-size: cover; background-position: center top; } .service-style2-area .layer-outer:before{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; background-color: rgba(3, 13, 40, 0.80); transition-delay: .1s; transition-timing-function: ease-in-out; transition-duration: .7s; transition-property: all; } .service-style2-area .service-box{ z-index: 99; } .single-service-style2{ position: relative; display: block; margin-bottom: 30px; z-index: 100; } .single-service-style2 .img-holder{ position: relative; display: block; overflow: hidden; } .single-service-style2 .img-holder img{ width: 100%; transition: .5s ease; transform: scale(1.05); } .single-service-style2:hover .img-holder img{ transform: scale(1); } .single-service-style2 .img-holder .static-content { position: absolute; left: 5px; bottom: 5px; right: 5px; min-height: 75px; background: #ffffff; display: flex; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; padding-left: 25px; transform: perspective(1200px) rotateX(0deg); transform-origin: bottom; transition: all 700ms ease 100ms; } .single-service-style2:hover .img-holder .static-content{ transform: perspective(1200px) rotateX(90deg); transition: all 700ms ease 200ms; } .single-service-style2 .img-holder .static-content .title{ position: relative; display: block; padding-left: 35px; } .single-service-style2 .img-holder .static-content .title:before { position: absolute; top: 0; left: 0; bottom: 0; width: 15px; height: 15px; content: ""; margin: 7px 0 8px; } .single-service-style2 .img-holder .static-content .title h3{ font-size: 18px; line-height: 30px; font-weight: 600; } .single-service-style2 .img-holder .static-content .title h3 a{ color: #000000; } .single-service-style2 .img-holder .static-content .icon { position: absolute; bottom: -5px; right: -5px; } .single-service-style2 .img-holder .static-content .icon a { position: relative; display: block; width: 70px; height: 70px; text-align: center; color: #ffffff; font-size: 40px; line-height: 70px; font-weight: 300; } .single-service-style2 .overlay-content { position: absolute; top: 0px; left: 0px; width: 100%; height: 0%; z-index: 2; opacity: 0; transform: scale(0.5); background-color: rgba(0, 0, 0, 0.80); transition: all 0.8s ease-in-out 0s; } .single-service-style2:hover .overlay-content{ opacity: 1; transform: scale(1.0); height:100%; } .single-service-style2 .overlay-content .inner-content{ position: relative; display: block; width: 100%; height: 100%; opacity: 0; transition: all 0.1s ease-in-out 0.1s; } .single-service-style2:hover .overlay-content .inner-content{ opacity: 1; transition: all 0.8s ease-in-out 0.7s; } .single-service-style2 .overlay-content .inner-content .icon { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; font-size: 95px; line-height: 95px; padding-top: 132px; transform: translateY(15px); transition: all 0.3s ease-in-out 0.8s; } .single-service-style2:hover .overlay-content .inner-content .icon{ transform: translateY(0px); } .single-service-style2 .overlay-content .inner-content .text-holder { position: absolute; left: 0; bottom: 0; right: 0; padding: 0px 30px 41px; transform: translateY(15px); transition: all 0.2s ease-in-out 0.9s; } .single-service-style2:hover .overlay-content .inner-content .text-holder{ transform: translateY(0px); } .single-service-style2 .overlay-content .inner-content .text-holder .title{ position: relative; display: block; padding-left: 35px; } .single-service-style2 .overlay-content .inner-content .text-holder .title:before { position: absolute; top: 0; left: 0; bottom: 0; width: 15px; height: 15px; content: ""; margin: 7px 0 8px; } .single-service-style2 .overlay-content .inner-content .text-holder .title h3{ font-size: 18px; line-height: 30px; font-weight: 600; } .single-service-style2 .overlay-content .inner-content .text-holder .title h3 a{ color: #ffffff; transition: all 200ms linear; transition-delay: 0.1s; } .single-service-style2 .overlay-content .inner-content .text-holder p{ color: #ffffff; font-size: 14px; line-height: 28px; font-weight: 300; margin: 12px 0 0; } .all-service-button{ position: relative; display: block; padding-top: 40px; } /*** ============================================= Fact Counter Area style ============================================= ***/ .fact-counter-area { position: relative; display: block; background: #ffffff; } .fact-counter-area.pdbottom120{ padding-bottom: 120px; } .fact-counter-area.pdtop120{ padding-top: 120px; } .fact-counter-area.padding_tp{ padding-top: 70px; padding-bottom:70px; } .section_bg1{ background: url('../images/layer39.jpg')no-repeat; background-size: cover; background-position: top center; } .single-fact-counter { position: relative; display: block; overflow: hidden; padding-left: 60px; } .single-fact-counter .count-box { position: relative; display: block; margin-top: 4px; } .single-fact-counter .count-box h1 { position: relative; display: inline-block; float: left; font-size: 60px; line-height: 60px; font-weight: 700; } .single-fact-counter .count-box h1 span{ position: relative; display: inline-block; } .single-fact-counter .count-box .icon { position: relative; display: inline-block; top: 0px; padding-left: 10px; } .single-fact-counter .count-box .icon span:before { color: #000000; font-size: 20px; font-weight: 700; } .single-fact-counter .title{ position: relative; display: block; } .single-fact-counter .title h3 { color: #000000; font-size: 20px; line-height: 28px; font-weight: 400; font-family: 'Open Sans', sans-serif; text-transform: uppercase; } /*** ============================================= Latest Portfolio Area Css ============================================= ***/ .latest-portfolio-area{ position: relative; display: block; padding: 115px 0 120px; } .latest-portfolio-area.pdtop120{ padding-top: 120px; } .project-menu-box { position: relative; display: block; overflow: hidden; max-width: 970px; width: 100%; margin: 0 auto; border: 1px solid #ededed; border-radius: 8px; margin-bottom: 50px; } .project-filter { position: relative; display: block; text-align: center; padding: 21px 0 22px; } .project-filter li { position: relative; display: inline-block; float: none; margin: 0 25px; } .project-filter li:first-child { margin-left: 0; } .project-filter li:last-child { margin-right: 0; } .project-filter li .filter-text { position: relative; display: block; color: #000000; font-size: 15px; line-height: 30px; font-weight: 600; text-transform: capitalize; cursor: pointer; transition: all .4s ease; font-family: 'Open Sans', sans-serif; } .project-filter li .filter-text i:before{ position: relative; top: 3px; display: inline-block; font-size: 30px; padding-right: 6px; } .project-filter li .count { display: none; } .single-portfolio-style1 { position: relative; display: block; padding-bottom: 75px; margin-bottom: 20px; box-shadow: 0px 5px 10px 5px rgb(105 100 100 / 30%); background-color: #fff; } .single-portfolio-style1 .img-holder{ position: relative; display: block; padding: 8px 35px 0px 35px; } .single-portfolio-style1 .img-holder .inner-box{ position: relative; display: block; overflow: hidden; border-top-left-radius: 5px; border-top-right-radius: 5px; height: 300px; border-radius: 52%; border: 2px dotted; } .single-portfolio-style1 .img-holder .inner-box img{ width: 100%; transform: scale(1.0); height: 100%; } .single-portfolio-style1:hover .img-holder .inner-box img { transform: scale(1.2) rotate(1deg); } .single-portfolio-style1 .img-holder .overlay-style-one { background-color: rgba(3, 13, 40, 0.70); } .single-portfolio-style1:hover .img-holder .overlay-style-one{ opacity: 1; } .single-portfolio-style1 .img-holder .inner-box .zoom-button { position: relative; display: block; margin-top: -70px; } .single-portfolio-style1 .img-holder .inner-box .zoom-button a span:before{ position: relative; display: inline-block; width: 70px; height: 70px; text-align: center; color: #ffffff; font-size: 40px; line-height: 70px; opacity: 0; transform: translateY(25px); transition: all 0.5s ease-in-out 0.9s; } .single-portfolio-style1:hover .img-holder .inner-box .zoom-button a span:before{ opacity: 1; transform: translateY(0px); } .single-portfolio-style1 .img-holder .inner-box .zoom-button a:hover span:before{ color: #ffffff; background: #000000; } .single-portfolio-style1 .img-holder .title-holder { position: absolute; left: 20px; bottom: -75px; right: 20px; background: #ffffff; display: block; /*padding: 26px 30px 27px;*/ padding: 1px 1px 1px; text-align: center; /*padding-right: 10px;*/ border-radius: 5px; z-index: 2; } .single-portfolio-style1 .img-holder .title-holder:before{ position: absolute; left: 0px; bottom: 0px; width:100%; height:0px; content:''; border-radius: 5px; transition: all 700ms ease; } .single-portfolio-style1:hover .img-holder .title-holder:before{ height:100%; } .single-portfolio-style1 .img-holder .title-holder span.tag{ position: relative; display: inline-block; padding: 0 15px; font-size: 13px; line-height: 22px; font-weight: 400; text-transform: uppercase; transition: all 0.2s ease-in-out 0.3s; } .single-portfolio-style1:hover .img-holder .title-holder span.tag{ color: #ffffff; background: rgba(255, 255, 255, 0.20); transition: all 0.5s ease-in-out 0.5s; } .single-portfolio-style1 .img-holder .title-holder h5{ position: relative; font-size: 15px; line-height: 22px; font-weight: 700; margin: 5px 0 10px; text-transform: uppercase; } .single-portfolio-style1 .img-holder .title-holder h5 a{ color: #000000; transition: all 0.2s ease-in-out 0.3s; } .single-portfolio-style1:hover .img-holder .title-holder h5 a{ color: #ffffff; transition: all 0.5s ease-in-out 0.6s; } .single-portfolio-style1 .img-holder .title-holder h5 a:hover{ color: #000000; } .single-portfolio-style1 .img-holder .title-holder p{ position: relative; color: #798795; font-size: 14px; line-height: 22px; margin: 0; transition: all 0.2s ease-in-out 0.3s; } .single-portfolio-style1:hover .img-holder .title-holder p{ color: #ffffff; transition: all 0.5s ease-in-out 0.7s; } .single-portfolio-style1 .img-holder .title-holder p span:before{ position: relative; top: 1px; left: -2px; display: inline-block; padding-right: 4px; font-size: 16px; transition: all 0.2s ease-in-out 0.3s; } .single-portfolio-style1:hover .img-holder .title-holder p span:before{ color: #ffffff; transition: all 0.5s ease-in-out 0.9s; } .all-portfolio-button { position: relative; display: block; padding-top: 20px; } /*** ============================================= Testimonial Style1 Area Css ============================================= ***/ .testimonial-style1-area{ position: relative; display: block; } .testimonial-style1-title-box{ position: relative; display: block; padding-top: 120px; padding-bottom: 216px; z-index: 1; } .testimonial-style1-title-box:before{ position: absolute; top: 0; left: -10000px; bottom: 0; right: 0; content: ""; z-index: -1; } .testimonial-style1-title-box .sec-title { padding: 0; } .testimonial-style1-title-box .sec-title p { color: #ffffff; font-size: 14px; line-height: 20px; font-weight: 300; text-transform: uppercase; margin: 0; } .testimonial-style1-title-box .sec-title .big-title { padding: 9px 0 0; } .testimonial-style1-title-box .sec-title .big-title h1 { color: #ffffff; font-size: 80px; line-height: 95px; font-weight: 700; text-transform: capitalize; } .single-testimonial-style1{ position: relative; display: block; } .single-testimonial-style1:before{ position: absolute; top: -10px; right: 30px; font-family: "Flaticon"; content: "\f122"; font-size: 30px; line-height: 30px; z-index: 1; } .single-testimonial-style1 .text { position: relative; display: block; background: #ffffff; border: 1px solid #e7e7e8; padding: 35px 39px 35px; border-radius: 7px; } .single-testimonial-style1 .text:after { position: absolute; left: 29px; bottom: -15px; background: url(../images/icon/testimonial-arrow.png); content: ""; width: 15px; height: 15px; z-index: 1; } .single-testimonial-style1 .text p{ color: #798795; font-size: 18px; line-height: 32px; font-weight: 300; margin: 0; } .single-testimonial-style1 .client-info{ position: relative; display: block; padding-top: 30px; padding-left: 30px; } .single-testimonial-style1 .client-info .icon-box{ width: 60px; } .single-testimonial-style1 .client-info .icon-box span:before{ position: relative; display: block; width: 60px; height: 60px; border: 1px solid #e7e7e8; border-radius: 50%; font-size: 30px; line-height: 58px; text-align: center; } .single-testimonial-style1 .client-info .icon-box, .single-testimonial-style1 .client-info .title-box{ display: table-cell; vertical-align: middle; } .single-testimonial-style1 .client-info .title-box{ position: relative; padding-left: 15px; } .single-testimonial-style1 .client-info .title-box h3{ font-size: 18px; line-height: 20px; font-weight: 600; margin: 0 0 7px; } .single-testimonial-style1 .client-info .title-box p{ color: #000000; font-size: 16px; line-height: 20px; font-weight: 400; margin: 0; } .single-vertical-carousel { position: relative; display: block; margin-left: 98px; z-index: 1; } .single-vertical-carousel:before { position: absolute; left: 0; bottom: 0; right: 0; height: 10px; background: #ffffff; content: ""; z-index: 1; } .single-vertical-carousel .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 10px 0 0; } .single-vertical-carousel.slick-vertical .slick-slide { display: block; height: auto; border: 0px solid transparent; opacity: 1; border-radius: 0px; margin: 0; margin-bottom: 50px; } .single-vertical-carousel.slick-vertical .slick-slide:last-child{ margin-bottom: 0; } .single-vertical-carousel .slide.slick-slide.slick-current.slick-active{ opacity: 1.0; } .single-vertical-carousel .slick-dots{ display:none !important; } .single-vertical-carousel .prev-btn { position: absolute; top: 475px; left: -690px; height: 60px; width: 50px; border-radius: 7px; color: #ffffff; background: none; background-color: rgba(255, 255, 255, 0.10); border: 0px solid #eeeeee; font-size: 30px; text-align: center; cursor: pointer; line-height: 56px; margin-top: 0px; transition: all 0.3s ease; z-index: 10; transform: rotate(-90deg); } .single-vertical-carousel .next-btn { position: absolute; top: 475px; left: -610px; width: 50px; height: 60px; border-radius: 7px; color: #ffffff; background: none; background-color: rgba(255, 255, 255, 0.10); border: 0px solid #eeeeee; font-size: 30px; text-align: center; cursor: pointer; line-height: 56px; margin-bottom: 0; transition: all 0.3s ease; z-index: 10; transform: rotate(-90deg); } .single-vertical-carousel .next-btn:hover, .single-vertical-carousel .prev-btn:hover{ background-color: rgba(255, 255, 255, 0.40); } /*** ============================================= Team Area Css ============================================= ***/ .team-area{ position: relative; display: block; padding: 80px 0 80px; } .team-area.pdtop0{ padding-top: 0; } .team-area.pdtop120{ padding-top: 120px; } .single-team-member { position: relative; display: block; margin-bottom: 40px; } .single-team-member .img-holder { position: relative; display: block; overflow: hidden; border-top-left-radius: 5px; border-top-right-radius: 5px; } .single-team-member .img-holder::after { position: absolute; top: 0; left: -100%; display: block; content: ''; width: 50%; height: 100%; background: linear-gradient(to right, rgba(3,13,40, 0) 0%, rgba(3,13,40, .3) 100%); transform: skewX(-25deg); } .single-team-member:hover .img-holder::after{ -webkit-animation: shine 1.5s; animation: shine 1.5s; } .single-team-member .img-holder img{ width: 100%; transform: scale(1.0); transition: all 700ms ease; } .single-team-member:hover .img-holder img{ } .single-team-member .title-holder{ position: relative; display: block; overflow: hidden; background: #ffffff; -webkit-box-shadow: 0px 4px 7px 1px #ebebeb; box-shadow: 0px 4px 7px 1px #ebebeb; transition: all 0.4s ease-in-out 0.3s; z-index: 1; } .single-team-member:hover .title-holder{ box-shadow: none; transition: all 0.4s ease-in-out 0.3s; } .single-team-member .title-holder:before{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; opacity: 0; transform: translateY(115px); transition: all 0.4s ease-in-out 0.3s; z-index: -1; } .single-team-member:hover .title-holder:before{ opacity: 1; transform: translateY(0px); transition: all 0.4s ease-in-out 0.3s; } .single-team-member .title-holder .inner { position: relative; display: block; overflow: hidden; background: transparent; padding-left: 30px; padding-top: 25px; padding-bottom: 25px; z-index: 1; } .single-team-member .title-holder .inner .left{ position: relative; display: block; } .single-team-member .title-holder .inner .left h3{ color: #000000; font-size: 18px; line-height: 26px; font-weight: 700; margin: 0 0 10px; transition: all 0.4s ease-in-out 0.3s; } .single-team-member:hover .title-holder .inner .left h3{ color: #ffffff; transition: all 0.4s ease-in-out 0.6s; } .single-team-member .title-holder .inner .left .social-links{ position: relative; display: block; } .single-team-member .title-holder .inner .left .social-links .social-links-style1 li { margin-right: 20px; } .single-team-member .title-holder .inner .left .social-links .social-links-style1 li:last-child{ margin-right: 0; } .single-team-member .title-holder .inner .left .social-links .social-links-style1 li a { color: #a4adb7; font-size: 20px; transition: all 200ms linear; transition-delay: 0.1s; transition: all 0.4s ease-in-out 0.3s; } .single-team-member:hover .title-holder .inner .left .social-links .social-links-style1 li a{ color: #ffffff; transition: all 0.4s ease-in-out 0.8s; } .single-team-member .title-holder .inner .left .social-links .social-links-style1 li a:hover{ color: #000000; } .single-team-member .title-holder .inner .right a{ position: absolute; bottom: 0; right: 0; width: 70px; height: 70px; text-align: center; color: #ffffff; font-size: 40px; line-height: 70px; font-weight: 300; } /*** ============================================= Latest blog Area style ============================================= ***/ .latest-blog-area { position: relative; display: block; background: #ffffff; padding-top: 0px; padding-bottom: 68px; } .latest-blog-area.pdtop120{ padding-top: 120px; } .single-blog-post { position: relative; display: block; margin-bottom: 43px; } .single-blog-post .img-holder { position: relative; display: block; overflow: hidden; border-top-left-radius: 5px; border-top-right-radius: 5px; } .single-blog-post .img-holder img { width: 100%; transition: .5s ease; transform: scale(1.05); } .single-blog-post:hover .img-holder img { transform: scale(1); } .single-blog-post:hover .overlay-style-one{ opacity: 1; } .single-blog-post .img-holder .post-date{ position: absolute; top: 20px; left: 20px; z-index: 2; } .single-blog-post .img-holder .post-date p{ position: relative; display: inline-block; padding: 5px 15px 5px; color: #ffffff; font-size: 13px; line-height: 20px; font-weight: 400; margin: 0; } .single-blog-post .img-holder .post-date p span:before{ position: relative; display: inline-block; padding-right: 5px; } .single-blog-post .text-holder { position: relative; display: block; padding-top: 25px; background: #ffffff; transition: all 0.5s ease-in-out 0.2s; } .single-blog-post .text-holder .blog-title { position: relative; display: block; color: #010101; font-size: 24px; line-height: 32px; font-weight: 600; margin: 0 0 13px; } .single-blog-post .text-holder .blog-title a{ color: #010101; transition: all 500ms ease; } .single-blog-post .text-holder p{ color: #798795; font-size: 18px; line-height: 32px; margin: 0; } .single-blog-post .text-holder .bottom { position: relative; display: flex; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-top: 14px; } .single-blog-post .text-holder .bottom .author-name{ position: relative; display: block; } .single-blog-post .text-holder .bottom .author-name a{ color: #000000; font-size: 14px; font-weight: 500; } .single-blog-post .text-holder .bottom .author-name a span:before{ position: relative; display: inline-block; font-weight: 700; padding-right: 4px; } .single-blog-post .text-holder .bottom .read-more-button{ position: relative; display: block; } .single-blog-post .text-holder .bottom .read-more-button a{ font-size: 14px; font-weight: 700; } .single-blog-post .text-holder .bottom .read-more-button a span:before{ position: relative; display: inline-block; padding-left: 5px; } .single-blog-post.style2 { margin-bottom: 42px; } .single-blog-post.style2 .text-holder .blog-title { font-size: 18px; line-height: 28px; margin: 0; } /*** ============================================= Partner Area Css ============================================= ***/ .partner-area { position: relative; display: block; background: #ffffff; padding-top: 80px; padding-bottom: 75px; } .partner-box { position: relative; overflow: hidden; display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; align-items: center; } .single-partner-logo-box { position: relative; overflow: hidden; flex: 0 0 20%; max-width: 20%; width: 100%; margin-bottom: 40px; } .single-partner-logo-box a { position: relative; display: inline-block; } .single-partner-logo-box a img { opacity: .35; transition: all 0.2s ease-in-out 0.1s; } .single-partner-logo-box:hover a img{ opacity: .0; transition: all 0.8s ease-in-out 0.1s; } .single-partner-logo-box .overlay-box{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; transform: translateY(80px); transition: all 0.4s ease-in-out 0.1s; } .single-partner-logo-box:hover .overlay-box{ transform: translateX(0px); } .single-partner-logo-box .overlay-box a{ position: relative; display: inline-block; } .single-partner-logo-box .overlay-box a img{ opacity: 1; } /*** ============================================= Footer area style ============================================= ***/ .footer-area { position: relative; display: block; background: #030e27; z-index: 10; } @-webkit-keyframes bgSlideReverse { 0% { background-position: 0 0; } 20% { background-position: 100px 0; } 40% { background-position: 200px 0; } 60% { background-position: 150px 0; } 80% { background-position: 100px 0; } 100% { background-position: 0px 0; } } @keyframes bgSlideReverse { 0% { background-position: 0 0; } 20% { background-position: 100px 0; } 40% { background-position: 200px 0; } 60% { background-position: 150px 0; } 80% { background-position: 100px 0; } 100% { background-position: 0px 0; } } .footer{ position: relative; display: block; padding: 80px 0; z-index: 1; } .single-footer-widget { position: relative; display: block; overflow: hidden; } .single-footer-widget .title { position: relative; display: block; margin-top: -3px; padding-bottom: 16px; } .single-footer-widget .title h3 { color: #ffffff; font-size: 18px; line-height: 20px; font-weight: 700; text-transform: uppercase; } .single-footer-widget .our-company-info{ position: relative; display: block; } .single-footer-widget .our-company-info .footer-logo { position: relative; display: block; padding-bottom: 20px; } .single-footer-widget .our-company-info .footer-logo a{ display: inline-block; } .single-footer-widget .our-company-info .text{ position: relative; display: block; } .single-footer-widget .our-company-info .text p{ color: #798795; font-size: 16px; line-height: 32px; font-weight: 300; margin: 0; } .single-footer-widget .our-company-info .footer-social-links{ position: relative; display: block; padding-top: 40px; } .single-footer-widget .pages-box{ position: relative; display: block; } .single-footer-widget .page-links{ position: relative; display: block; } .single-footer-widget .page-links li { position: relative; display: block; margin-bottom: 12px; } .single-footer-widget .page-links li:last-child{ margin-bottom: 0; } .single-footer-widget .page-links li a{ position: relative; display: block; padding-left: 10px; color: #798795; font-size: 16px; line-height: 32px; font-weight: 300; transition: all 200ms linear; transition-delay: 0.3s; } .single-footer-widget .page-links li a:before{ position: absolute; left: 0; bottom: 10px; width: 2px; height: 2px; background: #798795; content: ""; transition: all 200ms linear; transition-delay: 0.1s; } .twitter-feed-box{ position: relative; display: block; background: #06112a; border: 1px solid #0f1a32; /*padding: 43px 30px 33px;*/ padding: 30px 20px 10px; border-radius: 10px; } .twitter-feed-box h3{ font-size: 24px; line-height: 34px; font-weight: 500; margin: 0 0 1px; } .twitter-feed-box h3 a{ color: #ffffff; } .twitter-feed-box span{ font-size: 13px; font-weight: 400; } .twitter-feed-box .border-box{ position: relative; display: block; height: 1px; width: 70px; background: #5c5e63; margin: 21px 0 20px; } .twitter-feed-box .text{ position: relative; display: block; padding-bottom: 14px; } .twitter-feed-box .text p{ color: #798795; font-size: 16px; line-height: 32px; font-weight: 400; margin: 0; } .twitter-feed-box .bottom { position: relative; display: flex; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; } .twitter-feed-box .bottom .comments{ position: relative; display: block; } .twitter-feed-box .bottom .comments a{ color: #798795; font-size: 14px; font-weight: 400; } .twitter-feed-box .bottom .comments a i{ position: relative; display: inline-block; padding-right: 10px; } .twitter-feed-box .bottom .twitter-icon { position: relative; display: block; transform: rotateY(180deg); } .twitter-feed-box .bottom .twitter-icon span:before { position: relative; top: 5px; display: inline-block; color: #22a0f2; font-size: 48px; } .footer-bottom { position: relative; display: block; overflow: hidden; } .footer-bottom .outer-box { position: relative; display: flex; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; } .copyright-text { position: relative; display: block; padding: 20px 0; padding-right: 70px; z-index: 1; } .copyright-text:before{ position: absolute; top: 0; left: -10000px; bottom: 0; right: 0; content: ""; -moz-transform: skew(25deg, 0deg); -webkit-transform: skew(25deg, 0deg); -o-transform: skew(25deg, 0deg); -ms-transform: skew(25deg, 0deg); transform: skew(25deg, 0deg); z-index: -1; } .copyright-text p{ color: #ffffff; font-size: 16px; line-height: 30px; font-weight: 300; margin: 0; } .copyright-text p a { color: #ffffff; font-weight: 500; transition: all 500ms ease; } .copyright-text p a:hover{ color: #ffffff; } .footer-menu { position: relative; display: block; } .footer-menu ul{ position: relative; display: block; overflow: hidden; } .footer-menu ul li{ position: relative; display: inline-block; float: left; line-height: 30px; padding-right: 11px; margin-right: 10px; } .footer-menu ul li:last-child{ padding-right: 0; margin-right: 0; } .footer-menu ul li:before { position: absolute; top: 9px; right: 0; bottom: 7px; width: 1px; background: rgba(255, 255, 255, 0.10); content: ""; } .footer-menu ul li:last-child:before{ display: none; } .footer-menu ul li a{ color: #798795; font-size: 14px; font-weight: 400; line-height: 0; transition: all 200ms linear; transition-delay: 0.1s; } /*** ============================================= Header Style2 Css ============================================= ***/ .header-style2{ } .header-upper-style2 { position: relative; display: block; background: rgba(255, 255, 255, 0.30); padding: 0; } .header-upper-left-style2 { position: relative; display: block; } .header-upper-left-style2 .logo { position: relative; display: block; padding: 30px 0; } .header-upper-right-style2{ position: relative; display: block; } .header-upper-right-style2 .nav-outer{ position: relative; display: block; float: left; } .main-menu.style2 .navigation>li>a { color: #000000; padding: 40px 0px 40px; } .main-menu.style2 .navigation>li>a.home-icon{ padding: 0; } .main-menu.style2 .navigation>li>a span.homeicon { color: #ffffff; font-size: 30px; text-align: center; font-weight: 400; width: 70px; padding: 39px 0 40px; } .menu-right-content { position: relative; display: block; float: right; } .menu-right-content .outer-search-box-style1 { padding: 40px 0; margin-left: 50px; margin-right: 20px; } .menu-right-content .outer-search-box-style1 .seach-toggle { color: #000000; } .quote-button.style2 { position: relative; display: block; float: right; padding: 15px 0; } .quote-button.style2 a { color: #ffffff; padding: 0 30px; } .quote-button.style2 a:hover{ background: #030e27; } /*** ===================================================== Main Slider Style2 style ===================================================== ***/ .main-slider.style2 { margin-top: 50px; } .main-slider.style2 .slider-box{ position: relative; display: block; } .main-slider.style2 .slide { padding: 262px 0px 160px; } .main-slider.style2 .slide .image-layer:before { display: none; } .main-slider.style2 .content h2 { color: #010101; } .main-slider.style2 .content h3 { color: #010101; } .main-slider.style2 .content .text p { color: #798795; } .main-slider.style2 .content .btns-box .btn-two { color: #000000; border: 2px solid #000000; } .main-slider.style2 .content .btns-box .btn-two:hover{ color: #ffffff; background: #000000; } .video-holder-box-style4 { position: absolute; left: 28px; bottom: 142px; z-index: 100; transform: rotate(-90deg); } .video-holder-box-style4 a { position: relative; display: block; float: left; text-align: center; height: 80px; width: 80px; border-radius: 50%; padding: 11px; border: 1px dashed #777777; transition: all 500ms ease; } .video-holder-box-style4 a span:before { position: relative; display: block; width: 100%; height: 100%; border-radius: 50%; color: #ffffff; font-size: 18px; line-height: 56px; transition: all 500ms linear; transition-delay: 0.1s; } .video-holder-box-style4 a:hover span:before{ background: #000000; } .video-holder-box-style4 h6 { position: relative; display: inline-block; float: left; color: #000000; font-size: 14px; font-weight: 600; margin: 32px 0; padding-left: 15px; } /*** ===================================================== Partner Style2 Area style ===================================================== ***/ .partner-style2-area{ position: relative; display: block; padding: 120px 0 0; } /*** ===================================================== About Style2 Area style ===================================================== ***/ .about-style2-area{ position: relative; display: block; } .about-style2-image-box{ position: relative; display: block; } .about-style2-image-box img{ max-width: none; float: right; } .about-style2-image-box .inner-box{ position: absolute; top: 85px; left: 0; bottom: 0; right: 0; } .about-style2-image-box .inner-box .image-box1 { position: relative; display: inline-block; z-index: 1; } .about-style2-image-box .inner-box .image-box1:before{ position: absolute; top: 0; right: 0; bottom: 0; width: 30px; background: #ffffff; content: ""; } .about-style2-image-box .inner-box .image-box1:after{ position: absolute; left: 0; bottom: 0; right: 0; height: 30px; background: #ffffff; content: ""; } .about-style2-image-box .inner-box .image-box1 img { width: 100%; max-width: none; float: none; } .about-style2-image-box .inner-box .image-box1:hover img{} .about-style2-image-box .inner-box .image-box2 { position: relative; display: inline-block; overflow: hidden; z-index: 1; } .about-style2-image-box .inner-box .image-box2:before { position: absolute; top: 0; right: -30px; bottom: 0; width: 30px; background: #ffffff; content: ""; } .about-style2-image-box .inner-box .image-box2 img{ width: 100%; max-width: none; float: none; -webkit-transition: all 0.5s cubic-bezier(0.62, 0.21, 0.45, 1.22); -o-transition: all 0.5s cubic-bezier(0.62, 0.21, 0.45, 1.22); transition: all 0.5s cubic-bezier(0.62, 0.21, 0.45, 1.22); } .about-style2-image-box .inner-box .image-box2:hover img{} .video-holder-box.style2 { position: absolute; bottom: 0; right: 0; width: 100px; height: 100px; } .video-holder-box.style2 .icon .inner a span:before { background: #ffffff; transition: all 200ms linear; transition-delay: 0.1s; } .video-holder-box.style2 .icon .inner a:hover span:before{ color: #ffffff; background: #030e27; } .about-style1-text-box.style2 { padding-top: 116px; padding-left: 100px; } .about-style1-text-box.style2 .title:before { display: none; } .about-style1-text-box.style2 .title p { color: #ffffff; } .about-style1-text-box.style2 .title h1 { color: #ffffff; margin: 17px 0 0; } .about-style1-text-box.style2 .title h1 span { color: #ffffff; background: #fb8b57; } .about-style1-text-box.style2 .title h1 b { color: #000000; } .about-style1-text-box.style2 .inner-contant p { color: #ffffff; margin: 0; } .fact-box-style2{ position: relative; display: block; padding-top: 60px; } .fact-box-style2 ul{ position: relative; display: block; overflow: hidden; } .fact-box-style2 ul .single-fact-counter { position: relative; display: inline-block; float: left; width: 170px; padding: 0; margin-right: 30px; } .fact-box-style2 ul .single-fact-counter:last-child{ margin-right: 0; } .fact-box-style2 ul .single-fact-counter .count-box { display: block; margin-top: 0px; } .fact-box-style2 ul .single-fact-counter .count-box h1 { display: inline-block; float: none; color: #000000; } .fact-box-style2 ul .single-fact-counter .count-box .icon { position: relative; top: -10px; display: inline-block; padding-left: 3px; } .fact-box-style2 ul .single-fact-counter .count-box .icon span:before { color: #ffffff; font-size: 40px; } .fact-box-style2 ul .single-fact-counter .title { padding-top: 0px; padding-left: 0px; } .fact-box-style2 ul .single-fact-counter .title h3 { color: #ffffff; } /*** ============================================= Service Style3 Area Css ============================================= ***/ .service-style3-area{ position: relative; display: block; } .service-style3-area .auto-container { position: static; max-width: 1800px; padding: 0px 20px; margin: 0 auto; } .single-service-style3{ position: relative; display: block; z-index: 2; } .single-service-style3 .img-holder{ position: relative; display: block; overflow: hidden; } .single-service-style3 .img-holder img{ width: 100%; -webkit-transition: all 0.5s cubic-bezier(0.62, 0.21, 0.45, 1.22); -o-transition: all 0.5s cubic-bezier(0.62, 0.21, 0.45, 1.22); transition: all 0.5s cubic-bezier(0.62, 0.21, 0.45, 1.22); } .single-service-style3:hover .img-holder img{ -webkit-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .single-service-style3 .overlay-content{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(3, 13, 40, 0.80); opacity: 0; -webkit-transform:translateY(-100%); -ms-transform:translateY(-100%); -o-transform:translateY(-100%); -moz-transform:translateY(-100%); transform:translateY(-100%); transition: all 0.7s cubic-bezier(0.62, 0.21, 0.45, 1.22); } .single-service-style3:hover .overlay-content{ opacity:1; -webkit-transform:translateY(0%); -ms-transform:translateY(0%); -o-transform:translateY(0%); -moz-transform:translateY(0%); transform:translateY(0%); transition: all 0.7s cubic-bezier(0.62, 0.21, 0.45, 1.22); } .single-service-style3 .overlay-content .icon-holder{ position: absolute; top: 0; right: 0; width: 70px; height: 70px; color: #ffffff; font-size: 30px; line-height: 70px; text-align: center; } .single-service-style3 .overlay-content .title-holder{ position: absolute; left: 0; bottom: 0; right: 0; display: block; padding: 0 30px 42px; opacity: 0; transform:translateY(100%); transition: all 800ms ease; } .single-service-style3:hover .overlay-content .title-holder{ opacity: 1; transform:translateY(0%); transition-delay: 700ms; } .single-service-style3 .overlay-content .title-holder p{ font-size: 14px; line-height: 20px; font-weight: 400; text-transform: uppercase; margin: 0 0 9px; } .single-service-style3 .overlay-content .title-holder h3{ font-size: 24px; line-height: 32px; font-weight: 600; } .single-service-style3 .overlay-content .title-holder h3 a{ color: #ffffff; transition: all 300ms ease; } .service-carousel.owl-nav-style-one.owl-theme .owl-nav { position: absolute; top: -120px; left: 0; right: 0; max-width: 1170px; margin: 0 auto; text-align: right; } /*** ============================================= Testimonial Style2 Area Css ============================================= ***/ .testimonial-style2-area{ position: relative; display: block; padding: 120px 0 120px; } .testimonial-style2-area.pdtop90{ padding-top: 90px; } .testimonial-style2-area .sec-title { padding-bottom: 54px; } .testimonial-carousel{ padding: 0 100px; } /*** ============================================= Faq Content Area Css ============================================= ***/ .faq-content-area{ position: relative; display: block; background: #ffffff; padding: 0px 0 120px; } .faq-image-box{ position: absolute; left: 0; bottom: 0; right: 0; } /*** ============================================= Video Gallery Area Css ============================================= ***/ .video-gallery-area{ position: relative; display: block; padding: 250px 0 250px; background-attachment: fixed; background-size: cover; background-repeat: no-repeat; background-position: center top; z-index: 1; } .video-gallery-area:before{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(3, 13, 40, 0.80); content: ""; z-index: -1; transition-delay: .1s; transition-timing-function: ease-in-out; transition-duration: .7s; transition-property: all; } .video-holder-box-style3 { position: relative; display: block; } .video-holder-box-style3 a { position: relative; display: block; text-align: center; height: 200px; width: 200px; margin: 0 auto; border-radius: 50%; padding: 50px; background-color: rgba(255, 255, 255, 0.05); transition: all 500ms ease; -webkit-animation: pulse 2s infinite; -o-animation: pulse 2s infinite; animation: pulse 2s infinite; transition: all 1s ease; } .video-holder-box-style3 a span:before { position: relative; display: block; width: 100%; height: 100%; border-radius: 50%; color: #ffffff; font-size: 30px; line-height: 100px; } /*** ============================================= Slogan Area Css ============================================= ***/ .slogan-area{ position: relative; display: block; } .slogan-area.style2{ background: #030e27; overflow: hidden; } .slogan-content{ position: relative; display: flex; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; min-height: 140px; z-index: 1; } .slogan-content:before { position: absolute; top: 0; left: 0; bottom: 0; font-family: "Flaticon"; content: "\f124"; color: rgba(255, 255, 255, 0.10); font-size: 100px; line-height: 100px; padding: 20px 0; } .slogan-content .title{ position: relative; display: block; z-index: 1; } .slogan-content .title h1{ color: #ffffff; font-size: 48px; line-height: 56px; font-weight: 400; font-family: 'Open Sans', sans-serif; } .slogan-content .quote-button{ position: relative; display: block; margin: 0; } .slogan-content .quote-button a { background: #ffffff; line-height: 70px; } .slogan-content .quote-button a:hover{ color: #ffffff; } .slogan-content.style2 .quote-button a{ color: #ffffff; } .slogan-content.style2 .quote-button a:hover{ background: #020a1c; } .slogan-content.style2 .quote-button a span:before { color: #ffffff; } /*** ============================================= header Style3 Css ============================================= ***/ .header-style3{ } .header-upper-style2.bg-transparent { background: transparent; } .main-menu.style2.clr-white .navigation>li>a { color: #ffffff; } .main-menu.style2.clr-white .navigation>li>a.homeicon { color: #ffffff; } .main-menu.style2.clr-white .navigation>li:hover>a.homeicon, .main-menu.style2.clr-white .navigation>li.current>a.homeicon{ color: #ffffff; } .quote-button.style3 a { color: #ffffff; line-height: 110px; } .quote-button.style3 a span:before { color: #ffffff; top: 2px; padding-left: 10px; } .quote-button.style3 a:hover{ background: #030e27; } .menu-right-content .outer-search-box-style1.clr-white .seach-toggle { color: #ffffff; } /*** ============================================= Main Slider Style3 Css ============================================= ***/ .main-slider.style3 { margin-top: 0; } .main-slider.style3 .slide { padding: 252px 0px 400px; } .main-slider.style3 .slide .image-layer:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(3, 13, 40, 0.80); content: ""; z-index: -1; } .main-slider.style3 .content .btns-box { margin-top: 62px; } .main-slider.style3 .active .content .btns-box{ transition-delay: 2000ms; } .video-holder-box-style4.clr-white h6 { color: #ffffff; } /*** ============================================= Service Style2 Area Style3 Css ============================================= ***/ .service-style2-area.style3{ padding: 0px 0 120px; } .service-style2-area.style3 .service-box{ margin-top: -250px; } /*** ============================================= About Style1 Area Style3 Css ============================================= ***/ .about-style1-area.style3{ margin-top: 120px; background: #ffffff; } .about-style3-image-box{ position: absolute; left: 0; bottom: 0; } .about-style3-image-box img{ width: auto; } .about-style1-text-box.style3 { padding-top: 0; padding-left: 230px; } /*** ============================================= Video Gallery Style2 Area Css ============================================= ***/ .video-gallery-style2-area { position: relative; display: block; padding-top: 310px; } .video-galler-outer-bg { position: absolute; top: 0; left: 0; width: 100%; height: 625px; padding-top: 120px; background-attachment: scroll; background-size: cover; background-repeat: no-repeat; background-position: center top; z-index: 1; } .video-galler-outer-bg:before{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; z-index: -1; } .video-galler-outer-bg .title-holder { position: relative; display: block; margin-top: -9px; padding-top: 30px; } .video-galler-outer-bg .title-holder .icon { position: absolute; left: 0; top: 9px; right: 0; text-align: center; } .video-galler-outer-bg .title-holder h2{ color: #ffffff; font-size: 48px; line-height: 58px; font-weight: 500; } .video-holder-box-style5 { position: relative; display: block; max-width: 970px; width: 100%; margin: 0 auto; padding: 315px 0 315px; background-size: cover; background-position: center top; background-repeat: no-repeat; background-attachment: scroll; z-index: 2; } .video-holder-box-style5 .icon { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center; } .video-holder-box-style5 .icon:before{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; background-color: rgba(0, 0, 0, 0.80); transition-delay: .1s; transition-timing-function: ease-in-out; transition-duration: .7s; transition-property: all; opacity: 0; z-index: 1; } .video-holder-box-style5:hover .icon:before{ opacity: 1; } .video-holder-box-style5 .icon .inner { z-index: 5; } .video-holder-box-style5 .icon .inner a { position: relative; display: inline-block; text-align: center; height: 200px; width: 200px; padding: 50px; background: rgba(255, 255, 255, 0.50); border-radius: 50%; transition: all 500ms ease; -webkit-animation: pulse 2s infinite; -o-animation: pulse 2s infinite; animation: pulse 2s infinite; transition: all 1s ease; } .video-holder-box-style5 .icon .inner a span:before { position: relative; display: block; width: 100%; height: 100%; border-radius: 50%; color: #ffffff; font-size: 30px; line-height: 100px; } /*** ============================================= Latest Portfolio Style2 Area Css ============================================= ***/ .latest-portfolio-style2-area{ position: relative; display: block; padding: 120px 0 90px; } .single-portfolio-style2{} .single-portfolio-style2{ position: relative; display: block; margin-bottom: 30px; z-index: 2; } .single-portfolio-style2 .img-holder{ position: relative; display: block; overflow: hidden; } .single-portfolio-style2 .img-holder img{ position: relative; display: block; width: 100%; -webkit-transform: scale(1.2, 1.1); -ms-transform: scale(1.2, 1.1); transform: scale(1.2, 1.1); -webkit-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; -moz-transition: all 600ms ease; transition: all 600ms ease; } .single-portfolio-style2:hover .img-holder img{ -webkit-transform:scale(1,1); -ms-transform:scale(1,1); transform:scale(1,1); } .single-portfolio-style2 .overlay-content{ position:absolute; left:0px; top:0px; width:100%; height:100%; opacity:0; background: rgba(3, 13, 40, 0.80); -webkit-transition:all 700ms ease; -ms-transition:all 700ms ease; -o-transition:all 700ms ease; transition:all 700ms ease; -webkit-transform:translateY(-100%); -ms-transform:translateY(-100%); -o-transform:translateY(-100%); -moz-transform:translateY(-100%); transform:translateY(-100%); } .single-portfolio-style2:hover .overlay-content{ opacity:1; -webkit-transform:translateY(0%); -ms-transform:translateY(0%); -o-transform:translateY(0%); -moz-transform:translateY(0%); transform:translateY(0%); } .single-portfolio-style2 .overlay-content .icon-holder{ position: absolute; top: 0; right: 0; width: 70px; height: 70px; color: #ffffff; font-size: 30px; line-height: 70px; text-align: center; } .single-portfolio-style2 .overlay-content .title-holder{ position: absolute; left: 0; bottom: 0; right: 0; display: block; padding: 0 30px 42px; opacity: 0; transform:translateY(100%); transition: all 800ms ease; } .single-portfolio-style2:hover .overlay-content .title-holder{ opacity: 1; transform:translateY(0%); transition-delay: 700ms; } .single-portfolio-style2 .overlay-content .title-holder p{ font-size: 14px; line-height: 20px; font-weight: 400; text-transform: uppercase; margin: 0 0 9px; } .single-portfolio-style2 .overlay-content .title-holder h3{ font-size: 24px; line-height: 32px; font-weight: 600; } .single-portfolio-style2 .overlay-content .title-holder h3 a{ color: #ffffff; transition: all 300ms ease; } .portfolio-carousel.owl-nav-style-one.owl-theme .owl-nav { position: absolute; top: -120px; left: 0; right: 0; max-width: 1170px; margin: 0 auto; text-align: right; } /*** ============================================= Testimonial Style2 Area Style3 Css ============================================= ***/ .testimonial-style2-area.style3{ position: relative; display: block; padding: 120px 0 120px; background-attachment: fixed; background-size: cover; background-repeat: no-repeat; background-position: center top; z-index: 1; } .testimonial-style2-area.style3:before{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(3, 13, 40, 0.80); content: ""; z-index: -1; transition-delay: .1s; transition-timing-function: ease-in-out; transition-duration: .7s; transition-property: all; } .single-testimonial-style1.style3 .text { background-color: rgba(3, 13, 40, 0.30); border: 1px solid #22283c; } .single-testimonial-style1.style3 .text:after { background: url(../images/icon/testimonial-arrow-2.png); } .single-testimonial-style1.style3 .text p { color: rgba(255, 255, 255, 0.85); } .single-testimonial-style1.style3 .client-info .icon-box span:before { color: #ffffff; } .single-testimonial-style1.style3 .client-info .title-box h3 { color: #ffffff; } .single-testimonial-style1.style3 .client-info .title-box p { color: rgba(255, 255, 255, 0.35); } /*** ============================================= Service Style1 Area Style4 Css ============================================= ***/ .service-style1-area.style4{ padding: 120px 0 120px; } .service-style1-area.style4 .title { padding: 70px 0 140px; } .service-style3-image-box { position: absolute; bottom: 0; right: 0; } /*** ============================================= Breadcrumb area style ============================================= ***/ .breadcrumb-area { position: relative; background-attachment: scroll; background-position: center top; background-repeat: no-repeat; background-size: cover; padding: 155px 0 113px; margin-top: 200px; z-index: 10; } .breadcrumb-area::before { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: rgba(3, 13, 40, 0.80) none repeat scroll 0 0; content: ""; z-index: -1; } .breadcrumb-area .inner-content { position: relative; display: block; } .breadcrumb-area .title { position: relative; display: block; text-align: center; margin: 0 0 35px; } .breadcrumb-area .title h1{ color: #ffffff; font-size: 90px; line-height: 80px; font-weight: 700; text-transform: capitalize; } .breadcrumb-area .breadcrumb-menu { position: relative; display: block; line-height: 0; } .breadcrumb-area .breadcrumb-menu ul { position: relative; display: block; overflow: hidden; text-align: center; } .breadcrumb-area .breadcrumb-menu ul li { position: relative; display: inline-block; float: none; color: #ffffff; font-size: 16px; line-height: 24px; font-weight: 700; text-transform: capitalize; letter-spacing: 1px; transition: all 500ms ease; padding: 0 3px; font-family: 'Poppins', sans-serif; } .breadcrumb-area .breadcrumb-menu ul li a{ color: #ffffff; transition: all 500ms ease; } /*** ============================================= Service Style1 Area Service Page1 Style ============================================= ***/ .service-style1-area.service-page1 { padding-bottom: 62px; } .service-style1-area.service-page1 .single-service-style1{ margin-bottom: 50px; } /*** ============================================= Service Style2 Area Service Page2 Style ============================================= ***/ .service-style2-area.service-page2{ padding-bottom: 82px; } /*** ============================================= Service Imagegalley Area Style ============================================= ***/ .service-imagegalley-area{ position: relative; display: block; padding: 109px 0 0px; } .top-single-service { position: relative; padding-bottom: 57px; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; } .top-single-service .left{ position: relative; display: block; padding-left: 130px; } .top-single-service .left .icon { position: absolute; top: 11px; left: 0; } .top-single-service .left h2{ color: #000000; font-size: 48px; line-height: 58px; font-weight: 700; } .top-single-service .right{ position: relative; top: -4px; display: block; max-width: 570px; width: 100%; } .top-single-service .right p{ color: #798795; font-size: 18px; line-height: 32px; font-weight: 300; margin: 0; } .single-service-big-image{ position: relative; display: block; overflow: hidden; } .single-service-big-image::after { position: absolute; top: 0; left: -100%; display: block; content: ''; width: 50%; height: 100%; background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%); transform: skewX(-25deg); z-index: 2; } .single-service-big-image:hover::after{ -webkit-animation: shine 1.5s; animation: shine 1.5s; } @-webkit-keyframes shine { 100% { left: 125%; } } @keyframes shine { 100% { left: 125%; } } .single-service-big-image img{ position: relative; width: 100%; display: block; -webkit-transform: scale(1.3,1.3); -ms-transform: scale(1.3,1.3); transform: scale(1.3,1.3); -webkit-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; -moz-transition: all 600ms ease; transition: all 600ms ease; } .single-service-big-image:hover img{ -webkit-transform:scale(1,1); -ms-transform:scale(1,1); transform:scale(1,1); } .single-service-image{ position: relative; display: block; } .single-service-image .single-img-box{ position: relative; display: block; overflow: hidden; margin-top: 30px; } .single-service-image .single-img-box::after { position: absolute; top: 0; left: -100%; display: block; content: ''; width: 50%; height: 100%; background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%); transform: skewX(-25deg); z-index: 2; } .single-service-image .single-img-box img{ width: 100%; transition: .5s ease; transform: scale(1.05); } .single-service-image .single-img-box:hover::after{ -webkit-animation: shine 1.5s; animation: shine 1.5s; } .single-service-image .single-img-box:hover img{ transform: scale(1); } .single-service-text-box{ position: relative; display: block; text-align: center; padding: 41px 100px 0; } .single-service-text-box p{ color: #798795; font-size: 18px; line-height: 32px; } .single-service-text-box p.mar0{ margin: 0; } /*** ============================================= Single Service Page Style ============================================= ***/ .single-service-page{} .single-service-page.style4 .title { padding: 70px 0 70px; } .single-service-page .single-service-style1 { margin: 40px auto 30px; } .brochures-box{ position: relative; display: block; background: #ffffff; padding: 40px 25px 43px; border: 5px solid #f0f0f0; } .brochures-box .inner-title { position: relative; display: block; padding-bottom: 63px; } .brochures-box .inner-title h2{ color: #000000; font-size: 32px; line-height: 36px; font-weight: 700; } .brochures-box ul{ position: relative; display: block; overflow: hidden; } .brochures-box ul li { position: relative; display: flex; flex-direction: row; justify-content: space-between; align-items: baseline; flex-wrap: wrap; margin-bottom: 38px; } .brochures-box ul li:last-child{ margin-bottom: 0; } .brochures-box ul li .left{ position: relative; display: block; padding-left: 60px; } .brochures-box ul li .left .icon{ position: absolute; top: 0; left: 0; } .brochures-box ul li .left .icon span:before { position: relative; left: -5px; font-size: 50px; line-height: 50px; } .brochures-box ul li .left h3{ color: #000000; font-size: 18px; line-height: 20px; font-weight: 600; } .brochures-box ul li .left h5{ font-size: 14px; line-height: 20px; font-weight: 500; margin: 12px 0 0; } .brochures-box ul li .right{ position: relative; display: block; } .brochures-box ul li .right p{ color: #798795; font-size: 14px; line-height: 20px; font-weight: 400; margin: 0; } /*** ============================================= Portfolio Pagev1 Css ============================================= ***/ .portfolio-pagev1{ position: relative; display: block; padding-top: 120px; padding-bottom: 0; } .styled-pagination { position: relative; margin-top: 20px; display: flex; flex-direction: row; align-items: center; justify-content: center; flex-wrap: wrap; } .styled-pagination li{ position:relative; display:inline-block; margin:0px 3px 0px 3px; } .styled-pagination li a{ position: relative; display: inline-block; width: 40px; height: 50px; color:#cccccc; font-size:45px; line-height:50px; font-weight:400; text-align:center; text-transform:capitalize; transition:all 500ms ease; -webkit-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; -moz-transition:all 500ms ease; font-family: 'Poppins', sans-serif; } .styled-pagination li.next a { color: #ffffff; font-size: 30px; font-weight: 300; width: 60px; border-radius: 5px; margin-left: 9px; } .styled-pagination li.next a:hover{ color:#000000; background-color:#cccccd; } /*** ============================================= Portfolio Pagev2 Css ============================================= ***/ .portfolio-pagev2{ position: relative; display: block; padding-top: 106px; padding-bottom: 0; } .portfolio-pagev2 .top-box { position: relative; padding-bottom: 70px; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; } .portfolio-pagev2 .top-box .sec-title { position: relative; top: 9px; padding: 0; } .portfolio-pagev2 .top-box .styled-pagination{ margin: 0; } /*** ============================================= Related Portfolio Css ============================================= ***/ .related-portfolio{ position: relative; display: block; padding: 120px 0 120px; } /*** ============================================= Portfolio Single style1 Area Css ============================================= ***/ .portfolio-single-style1-area{ position: relative; display: block; padding: 120px 0 50px; } .single-portfolio-slider { position: relative; display: block; } .single-portfolio-slider .bx-wrapper { position: relative; margin: 0; padding: 0; } .single-portfolio-slider .bx-wrapper .bx-viewport { box-shadow: none; border: 0px solid; left: 0px; background: #fff; transform: translatez(0); } .single-portfolio-slide{ position: relative; display: block; } .single-portfolio-slide .big-image-box{ position: relative; display: block; overflow: hidden; } .single-portfolio-slide .big-image-box img{ width: 100%; transition: .5s ease; transform: scale(1.05); } .single-portfolio-slide:hover .big-image-box img{ transform: scale(1); } .single-portfolio-slider .slider-pager{ position: relative; display: block; } .single-portfolio-slider .slider-pager .thumb-box { position: relative; display: block; margin-top: -30px; margin-bottom: -30px; } .single-portfolio-slider .slider-pager .thumb-box li { position: relative; display: block; margin-top: 30px; margin-bottom: 30px; } .single-portfolio-slider .slider-pager .thumb-box li a{ position: relative; display: block; overflow: hidden; } .single-portfolio-slider .slider-pager .thumb-box li a .img-holder{ position: relative; display: block; overflow: hidden; } .single-portfolio-slider .slider-pager .thumb-box li a .img-holder img{ transition: all 0.5s ease-in-out 0.6s; width: 100%; } .single-portfolio-slider .slider-pager .thumb-box li a.active .img-holder img{ transform: scale(1.2, 1.2); } .single-portfolio-slider .slider-pager .thumb-box li a .img-holder:before{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; background-color: rgba(253, 93, 19, 0.50); transition-delay: .1s; transition-timing-function: ease-in-out; transition-duration: .7s; transition-property: all; opacity: 0; z-index: 1; } .single-portfolio-slider .slider-pager .thumb-box li a.active .img-holder:before{ opacity: 1; } /*** ============================================= Portfolio Single Content Area Css ============================================= ***/ .portfolio-single-content-area{ position: relative; display: block; } .portfolio-single-content{ position: relative; display: block; padding-bottom: 45px; } .portfolio-single-content h3{ color: #000000; font-size: 24px; line-height: 36px; font-weight: 700; margin: -7px 0 11px; } .portfolio-single-content p{ color: #000000; font-size: 18px; line-height: 32px; } .portfolio-single-video-box{ position: relative; display: block; padding: 135px 0; background-attachment: scroll; background-size: cover; background-repeat: no-repeat; background-position: center top; } .portfolio-single-video-box a { position: relative; display: block; text-align: center; height: 200px; width: 200px; margin: 0 auto; border-radius: 50%; padding: 50px; background-color: rgba(255, 255, 255, 0.20); transition: all 500ms ease; } .portfolio-single-video-box a span:before { position: relative; display: block; width: 100%; height: 100%; border-radius: 50%; color: #ffffff; font-size: 30px; line-height: 100px; } .single-portfolio-bottom-text{ position: relative; display: block; padding-top: 61px; } .single-portfolio-bottom-text p{ color: #798795; font-size: 18px; line-height: 32px; margin: 0; } .project-info-box{ position: relative; display: block; padding: 46px 30px 34px; text-align: center; } .project-info-box h3 { color: #ffffff; font-size: 24px; line-height: 30px; font-weight: 600; padding: 0 0 9px; } .project-info-box ul{ position: relative; display: block; overflow: hidden; margin-top: 20px; } .project-info-box ul li{ color: #ffffff; font-size: 18px; font-weight: 300; line-height: 44px; font-family: 'Poppins', sans-serif; } .project-info-box ul li span{ font-weight: 500; } /*** ============================================= Portfolio Single style2 Area Css ============================================= ***/ .portfolio-single-style2-area{ position: relative; display: block; padding: 120px 0 0; } .portfolio-details-top-image{ position: relative; display: block; } .portfolio-details-top-image .single-img-holder{ position: relative; display: block; overflow: hidden; margin-bottom: 30px; } .portfolio-details-top-image .single-img-holder img{ width: 100%; transition: .5s ease; transform: scale(1.05); } .portfolio-details-top-image .single-img-holder:hover img{ transform: scale(1); } .portfolio-details-content-box{ position: relative; display: block; padding: 0 100px; margin-top: 3px; } .portfolio-details-content-box .tag{ font-size: 16px; font-weight: 400; } .portfolio-details-content-box h2{ color: #000000; font-size: 24px; line-height: 34px; font-weight: 700; padding: 0; margin: 6px 0 32px; } .portfolio-details-content-box .text{ position: relative; display: block; } .portfolio-details-content-box .text p{ color: #798795; font-size: 18px; line-height: 32px; } .project-info-box.style2 { position: relative; display: block; padding: 46px 80px 26px; padding-right: 30px; margin-top: 61px; } .project-info-box.style2 ul { position: relative; display: inline-block; overflow: hidden; margin-top: 20px; max-width: 280px; width: 100%; } .social-share-box{ position: relative; display: block; border-top: 1px solid #e8e8e8; padding-top: 20px; margin-top: 70px; } .social-share-box h6{ position: relative; display: inline-block; float: left; margin-right: 5px; font-size: 14px; line-height: 40px; font-weight: 700; } .social-share-box .social-links-style1 li { margin-right: 0px; } .social-share-box .social-links-style1 li:last-child { margin-right: 0px; } .social-share-box .social-links-style1 li a i { color: #798795; font-size: 18px; } .social-share-box .social-links-style1 li a i.fb{ color: #45619d; } .social-share-box .social-links-style1 li a i.gplus{ color: #cf4539; } .social-share-box .social-links-style1 li a i.tw{ color: #42c0fb; } .social-share-box .social-links-style1 li a i.skyp{ color: #009ee5; } .social-share-box .social-links-style1 li a i.rss{ color: #fd9f13; } .social-share-box .social-links-style1 li a:hover i.fb{ color: #ffffff; } .social-share-box .social-links-style1 li a:hover i.gplus{ color: #ffffff; } .social-share-box .social-links-style1 li a:hover i.tw{ color: #ffffff; } .social-share-box .social-links-style1 li a:hover i.skyp{ color: #ffffff; } .social-share-box .social-links-style1 li a:hover i.rss{ color: #ffffff; } .inner-comment-box { position: relative; display: block; overflow: hidden; padding-top: 52px; padding-bottom: 65px; max-width: 770px; width: 100%; } .inner-comment-box .title { position: relative; display: block; padding-bottom: 54px; } .inner-comment-box .title h3{ font-size: 18px; line-height: 24px; font-weight: 700; text-transform: uppercase; } .inner-comment-box .single-comment-box { position: relative; display: block; min-height: 178px; padding-left: 100px; margin-bottom: 50px; } .inner-comment-box .single-comment-box.marlft100{ margin-left: 100px; } .inner-comment-box .single-comment-box .img-holder { position: absolute; left: 0; bottom: 0; width: 80px; height: 80px; } .inner-comment-box .single-comment-box .img-holder img{ width: 100%; border-radius: 50%; } .inner-comment-box .single-comment-box .text-holder { position: relative; display: block; padding: 28px 0 21px; padding-left: 60px; padding-right: 50px; z-index: 1; } .inner-comment-box .single-comment-box .text-holder:before{ position: absolute; top: 0; left: -100px; bottom: 0; right: 0; background: url(../images/icon/single-comment-border.png); background-repeat: no-repeat; background-position: left top; background-size: 100% 100%; content: ""; z-index: -1; } .inner-comment-box .single-comment-box .text-holder .name{ position: relative; display: block; padding-bottom: 19px; } .inner-comment-box .single-comment-box .text-holder .name h3{ color: #333333; font-size: 16px; line-height: 20px; font-weight: 700; } .inner-comment-box .single-comment-box .text-holder .text{ position: relative; display: block; } .inner-comment-box .single-comment-box .text-holder .text p { color: #798795; font-size: 14px; line-height: 24px; font-weight: 400; margin: 0; } .comment-meta-box { position: relative; display: block; overflow: hidden; margin-top: 13px; } .comment-meta-box li{ position: relative; display: inline-block; float: left; margin-right: 20px; } .comment-meta-box li:last-child{ margin-right: 0; } .comment-meta-box li a{ color: #a4a4a4; font-size: 13px; font-weight: 400; } .comment-meta-box li a i { position: relative; display: inline-block; padding-right: 5px; font-size: 12px; transition: all 200ms linear; transition-delay: 0.1s; } .add-comment-box { position: relative; display: block; overflow: hidden; max-width: 770px; width: 100%; } .add-comment-box .title { position: relative; display: block; padding-bottom: 53px; } .add-comment-box .title h3{ font-size: 18px; line-height: 24px; font-weight: 700; text-transform: uppercase; } .add-comment-box #add-comment-form {} .add-comment-box #add-comment-form p{ color: #798795; font-size: 14px; line-height: 14px; font-weight: 400; margin: 0 0 13px; } .add-comment-box #add-comment-form input[type="text"], .add-comment-box #add-comment-form input[type="email"], .add-comment-box #add-comment-form textarea{ position: relative; display: block; background: #ffffff; border: 1px solid #f0f2f7; color: #5f6973; font-size: 14px; font-weight: 400; width: 100%; height: 40px; padding: 0 30px; border-radius: 0px; margin-bottom: 28px; transition: all 500ms ease; } .add-comment-box #add-comment-form textarea { height: 200px; padding: 15px 30px; border-radius: 0px; margin-bottom: 50px; } .add-comment-box #add-comment-form input[type="text"]:focus{ border-color: #d7d9df; } .add-comment-box #add-comment-form input[type="email"]:focus{ border-color: #d7d9df; } .add-comment-box #add-comment-form textarea:focus{ border-color: #d7d9df; } .add-comment-box #add-comment-form button { color: #ffffff; font-weight: 600; } .add-comment-box #add-comment-form button:hover{ background: transparent; } /*** ============================================= Team Area Team Page Css ============================================= ***/ .team-area.team-page{ position: relative; display: block; padding: 120px 0 72px; } /*** ============================================= Partner Area Team Page Css ============================================= ***/ .partner-area.team-page { padding-top: 75px; padding-bottom: 75px; } /*** ============================================= Team Single Area Css ============================================= ***/ .team-single-area{ position: relative; display: block; padding: 120px 0 80px; } .team-singel-image-box{ position: relative; display: block; } .team-singel-image-box img{ width: 100%; } .team-member-info-box{ position: relative; display: block; padding-left: 100px; padding-top: 20px; } .team-member-info-box .title { position: relative; display: block; padding-bottom: 6px; } .team-member-info-box .title h3{ color: #222222; font-size: 24px; line-height: 30px; font-weight: 600; margin: 0 0 6px; } .team-member-info-box .title span{ color: #798795; font-size: 16px; font-weight: 400; } .team-member-info-box ul { position: relative; display: block; overflow: hidden; margin-top: 22px; } .team-member-info-box ul li { color: #798795; font-size: 18px; line-height: 40px; font-weight: 500; } .team-member-info-box ul li span { position: relative; display: inline-block; padding-right: 5px; color: #000000; font-weight: 600; font-family: 'Poppins', sans-serif; } .team-member-info-box ul li a{ color: #798795; } .team-member-info-box .social-links-style1 { margin-top: 36px; } .team-member-info-box .social-links-style1 li a i { position: relative; display: block; background: #ededed; width: 40px; height: 40px; border-radius: 10px 20px 10px 20px; color: #798795; font-size: 16px; font-weight: 400; line-height: 40px; text-align: center; transition: all 500ms ease; } .team-member-info-box .social-links-style1 li a:hover i{ color: #ffffff; } .team-member-content-box { position: relative; display: block; padding-top: 46px; padding-bottom: 95px; } .team-member-content-box h3{ color: #000000; font-size: 24px; line-height: 30px; font-weight: 700; margin: 0 0 13px; } .team-member-content-box p{ color: #798795; font-size: 18px; line-height: 32px; font-weight: 300; } .progress-block .inner-box { position: relative; width: 200px; min-height: 200px; text-align: center; margin: 0 auto 40px; } .progress-block .graph-outer { position: absolute; top: 0; left: 0; display: inline-block; text-align: center; background: #fff; border-radius: 50%; } .progress-block .graph-outer .count-box { position: absolute; top: 50%; left: 0; width: 100%; margin-top: -20px; color: #000000; font-size: 48px; font-weight: 400; transform: translateY(-50%); } .progress-block .graph-outer .count-text { position: relative; display: inline-block; color: #000000; font-size: 48px; line-height: 40px; font-weight: 400; font-family: 'Poppins', sans-serif; } .progress-block .graph-outer .title { position: absolute; top: 50%; left: 0; width: 100%; margin-top: 20px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .progress-block .graph-outer .title h5{ color: #798795; font-size: 16px; line-height: 20px; font-weight: 500; } /*** ============================================= Testimonial Page Area style ============================================= ***/ .testimonial-page-area { position: relative; display: block; padding: 120px 0 55px; } .testimonial-page-area .sec-title{ padding-bottom: 64px; } .testimonial-page-box{ position: relative; display: block; padding: 0 100px; } .testimonial-page-box .single-testimonial-style1{ margin-bottom: 65px; } /*** ============================================= Partner Page Area style ============================================= ***/ .partner-area.partner-page { position: relative; display: block; padding-top: 120px; padding-bottom: 0; } .partner-box-bottom { position: relative; display: flex; flex-direction: row; justify-content: center; align-items: center; flex-wrap: wrap; } .partner-box-style2 { position: relative; display: block; border-top: 2px solid #e5e5e5; margin-top: 75px; padding-top: 70px; } .single-partner-logo-box-style2 { position: relative; display: block; max-width: 270px; width: 100%; margin: 0 auto 30px; -webkit-box-shadow: 0px 3px 6px 2px #ececec; box-shadow: 0px 3px 6px 2px #ececec; } .single-partner-logo-box-style2 a { position: relative; display: inline-block; } .single-partner-logo-box-style2 a img { opacity: .35; transition: all 0.2s ease-in-out 0.1s; } .single-partner-logo-box-style2:hover a img{ opacity: 1.0; transition: all 0.3s ease-in-out 0.1s; } .partner-box-style2 .bottom { position: relative; display: block; padding: 0 150px; } /*** ============================================= Faq Page Area style ============================================= ***/ .faq-content-area.faq-page{ padding-top: 150px; padding-bottom: 112px; } /*** ============================================= Blog Pagev1 Area style ============================================= ***/ .latest-blog-area.blog-pagev1{ position: relative; display: block; padding-top: 120px; padding-bottom: 120px; } /*** ============================================= Blog Pagev2 Area style ============================================= ***/ .blog-pagev2-area{ position: relative; display: block; padding: 120px 0 120px; } .single-blog-post-style3 { position: relative; display: block; margin-bottom: 50px; } .single-blog-post-style3 .img-holder { position: relative; display: block; overflow: hidden; } .single-blog-post-style3 .img-holder img { width: 100%; transform: scale(1.0); } .single-blog-post-style3:hover .img-holder img { transform:scale(1.2) rotate(1deg); } .single-blog-post-style3:hover .overlay-style-one{ opacity: 1; } .single-blog-post-style3 .text-holder{ position: relative; display: block; padding-top: 23px; } .single-blog-post-style3 .text-holder .meta-info{ position: relative; display: block; overflow: hidden; padding-bottom: 15px; } .single-blog-post-style3 .text-holder .meta-info li{ position: relative; display: inline-block; float: left; margin-right: 60px; } .single-blog-post-style3 .text-holder .meta-info li:last-child{ margin-right: 0; } .single-blog-post-style3 .text-holder .meta-info li span:before{ position: relative; top: 1px; display: inline-block; padding-right: 9px; color: #798795; font-size: 18px; } .single-blog-post-style3 .text-holder .meta-info li a{ color: #798795; font-size: 18px; font-weight: 300; } .single-blog-post-style3 .text-holder .blog-title { position: relative; display: block; font-size: 28px; line-height: 36px; font-weight: 700; text-transform: uppercase; } .single-blog-post-style3 .text-holder .blog-title a{ color: #000000; transition: all 500ms ease; } .single-blog-post-style3 .text-holder h4{ font-size: 18px; font-weight: 500; margin: 18px 0 18px; } .single-blog-post-style3 .text-holder p{ color: #798795; font-size: 20px; line-height: 32px; font-weight: 300; margin: 0; } .single-blog-post-style3 .text-holder .button-box { position: relative; display: flex; padding-top: 41px; } .single-blog-post-style3 .text-holder .button-box .readmore{ position: relative; display: block; } .single-blog-post-style3 .text-holder .button-box .readmore a.btn-one { color: #ffffff; font-weight: 400; border-radius: 5px; text-transform: capitalize; } .single-blog-post-style3 .text-holder .button-box .readmore a.btn-one:hover{ background: transparent; } .single-blog-post-style3 .text-holder .button-box .message{ position: relative; display: block; padding-left: 30px; } .single-blog-post-style3 .text-holder .button-box .message a { position: relative; display: inline-block; margin: 15px 0; color: #000000; font-size: 14px; font-weight: 400; } .single-blog-post-style3 .text-holder .button-box .message a span:before { position: relative; display: inline-block; padding-right: 10px; top: 4px; color: #798795; font-size: 20px; } .single-blog-post-style3 .audio-gallery { position: relative; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; flex-wrap: wrap; } .single-blog-post-style3 .audio-gallery .img-box { position: relative; display: block; overflow: hidden; } .single-blog-post-style3 .audio-gallery .audio-content{ position: relative; display: block; padding-left: 30px; } .single-blog-post-style3.withbdr { position: relative; display: block; margin-bottom: 50px; padding: 0 75px 50px; } .single-blog-post-style3 .quote-box { position: relative; display: block; padding-left: 100px; min-height: 130px; padding-top: 56px; } .single-blog-post-style3 .quote-box .icon { position: absolute; top: 0; left: 0; width: 85px; height: 130px; padding: 55px 0 0; } .single-blog-post-style3 .quote-box .icon span:before { position: relative; display: block; text-align: center; color: #ffffff; font-size: 46px; line-height: 50px; } .single-blog-post-style3 .quote-box .title{ position: relative; display: block; } .single-blog-post-style3 .quote-box .title h3{ color: #000000; font-size: 18px; line-height: 28px; font-weight: 600; margin: 0 0 10px; } .single-blog-post-style3 .quote-box .title h4{ color: #798795; font-size: 18px; line-height: 20px; font-weight: 500; } .single-blog-post-style3 .img-holder .overlay { position: absolute; top: 0; left: 0; bottom: 0; right: 0; display: flex; flex-direction: row; justify-content: center; align-items: center; flex-wrap: wrap; z-index: 5; } .single-blog-post-style3 .img-holder .overlay a{ position: relative; display: block; width: 100px; height: 100px; text-align: center; border-radius: 50%; background: #ffffff; font-size: 30px; line-height: 100px; transition: all 500ms linear; transition-delay: 0.1s; } .styled-pagination.blog_pagination { margin-top: 20px; margin-left: -15px; justify-content: flex-start; } .sidebar-wrapper { position: relative; display: block; max-width: 370px; width: 100%; } .sidebar-categories-box{ position: relative; display: block; border: 1px solid #e8e8e8; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; margin-bottom: 50px; } .categories-title{ position: relative; display: block; padding-left: 80px; border-bottom: 1px solid #e8e8e8; } .categories-title:before { position: absolute; top: 0; left: 40px; bottom: 0; background: url(../images/icon/categories-title-bg.png); background-repeat: no-repeat; content: ""; width: 26px; height: 20px; margin: 19px 0; } .categories-title h3 { color: #000000; font-size: 24px; line-height: 58px; font-weight: 600; text-transform: uppercase; } .categories { position: relative; display: block; overflow: hidden; padding: 28px 40px 28px; } .categories li { position: relative; display: block; margin-bottom: 20px; } .categories li:last-child { margin-bottom: 0; } .categories li a{ position: relative; display: block; color: #010101; font-size: 18px; font-weight: 400; transition: all 200ms linear; transition-delay: 0.1s; font-family: 'Open Sans', sans-serif; } .more-categories { position: relative; display: block; padding: 19px 0; padding-left: 40px; border-top: 1px solid #e8e8e8; } .more-categories a{ color: #010101; font-size: 18px; font-weight: 500; font-family: 'Poppins', sans-serif; } .more-categories a span:before { position: relative; top: -2px; display: inline-block; font-size: 12px; padding-right: 5px; color: #0b5be0; font-weight: 700; } .sidebar-wrapper .single-sidebar{ position: relative; display: block; border: 1px solid #e8e8e8; } .sidebar-wrapper .single-sidebar .title { position: relative; display: block; text-align: center; border-bottom: 1px solid #e8e8e8; padding: 12px 0 11px; } .sidebar-wrapper .single-sidebar .title h3 { color: #000000; font-size: 18px; line-height: 20px; font-weight: 500; text-transform: uppercase; } .single-sidebar .popular-tag { position: relative; display: block; overflow: hidden; margin-left: -2.5px; margin-right: -2.5px; padding: 30px 30px 25px; } .single-sidebar .popular-tag li { position: relative; display: inline-block; float: left; margin: 0 2.5px 5px; } .single-sidebar .popular-tag li a { position: relative; display: block; overflow: hidden; padding: 10px 10px 8px; border-bottom: 1px solid #f2f2f2; color: #798795; font-size: 14px; line-height: 14px; font-weight: 400; text-transform: capitalize; transition: all 0.4s ease-in-out 0.1s; z-index: 1; } .single-sidebar .popular-tag li a:before { position: absolute; top: 0; left: 0; bottom: -1px; right: 0; content: ""; z-index: -1; transform: translateY(32px); transition: all 0.4s ease-in-out 0.1s; } .single-sidebar .popular-tag li a:hover:before{ transform: translateX(0px); transition: all 0.2s ease-in-out 0.1s; } .single-sidebar .popular-tag li a:hover{ color: #ffffff; } .single-sidebar .project-box{ position: relative; display: block; border-top: 1px solid #e8e8e8; } .single-sidebar .project-box .project-lists { position: relative; display: block; padding: 21px 30px 20px; } .single-sidebar .project-box .project-lists li { position: relative; display: block; margin-bottom: 1px; } .single-sidebar .project-box .project-lists li:last-child{ margin-bottom: 0; } .single-sidebar .project-box .project-lists li a{ position: relative; display: block; color: #798795; line-height: 30px; font-size: 14px; font-weight: 400; text-transform: capitalize; transition: all 0.4s ease-in-out 0.1s; } .single-sidebar .project-box .project-lists li a span{ float: right; } .single-sidebar .ratting-box{ position: relative; display: block; border-top: 1px solid #e8e8e8; } .single-sidebar .ratting-box .ratting-lists { position: relative; display: block; padding: 21px 30px 20px; } .single-sidebar .ratting-box .ratting-lists li { position: relative; display: block; margin-bottom: 1px; } .single-sidebar .ratting-box .ratting-lists li:last-child{ margin-bottom: 0; } .single-sidebar .ratting-box .ratting-lists li a{ position: relative; display: block; color: #798795; line-height: 30px; font-size: 14px; font-weight: 400; text-transform: capitalize; transition: all 0.4s ease-in-out 0.1s; } .single-sidebar .ratting-box .ratting-lists li a span{ float: right; } .sidebar-bottom-box{ position: relative; display: block; margin-top: 70px; } .sidebar-bottom-box .img-holder{ position: relative; display: block; overflow: hidden; } .sidebar-bottom-box .img-holder img{ width: 100%; transition: .5s ease; transform: scale(1.05); } .sidebar-bottom-box .img-holder:hover img{ transform: scale(1); } .sidebar-bottom-box .img-holder .overlay { position: absolute; top: 0; left: 0; bottom: 0; right: 0; display: flex; flex-direction: row; justify-content: center; align-items: center; flex-wrap: wrap; z-index: 5; } .sidebar-bottom-box .img-holder .overlay a span:before{ position: relative; display: block; width: 100px; height: 100px; color: #ffffff; font-size: 50px; line-height: 100px; text-align: center; } .sidebar-bottom-box .img-holder:hover .overlay-style-one { opacity: 1; } /*** ============================================= Blog Single Area style ============================================= ***/ .blog-single-area{ position: relative; display: block; background: #ffffff; padding: 120px 0 120px; } .blog-single-area .blog-post { position: relative; display: block; } .blog-single-area .blog-post .single-blog-post { position: relative; display: block; margin: 0; } .single-blog-post .text-holder p.martop{ margin-top: 22px; } .blog-single-quote-box { position: relative; display: block; padding: 69px 50px 67px; border-radius: 5px; margin: 41px 0 41px; } .blog-single-quote-box h2{ color: #ffffff; font-size: 32px; line-height: 48px; font-weight: 300; } .blog-single-quote-box h2 i { position: relative; top: -10px; font-size: 18px; padding-right: 5px; } .blog-single-quote-box h2 i.right { position: relative; top: 0px; font-size: 18px; padding-left: 5px; padding-right: 0; } .blog-single-quote-box .quote-icon{ position: absolute; top: 15px; right: 20px; } .single-blog-post .text{ position: relative; display: block; padding-bottom: 41px; } .single-blog-post .text p{ color: #798795; font-size: 18px; line-height: 32px; margin: 0; } .blog-single-img-box{ position: relative; display: block; } .blog-single-img-box .single-image{ position: relative; display: block; margin-bottom: 30px; } .blog-single-img-box .single-image img{ width: 100%; } .single-blog-post .bottom-text{ position: relative; display: block; padding-top: 11px; } .single-blog-post .bottom-text p{ color: #798795; font-size: 18px; line-height: 32px; margin: 0; } /*** ============================================= Contact Info Area Css ============================================= ***/ .contact-info-area{ position: relative; display: block; background: #ffffff; padding: 120px 0 70px; } .single-contact-info-box { position: relative; display: block; padding-bottom: 42px; } .single-contact-info-box .icon{ position: relative; display: block; padding-bottom: 32px; } .single-contact-info-box .icon span:before{ font-size: 50px; line-height: 50px; } .single-contact-info-box .title{ position: relative; display: block; } .single-contact-info-box .title h3{ color: #000000; font-size: 24px; line-height: 30px; font-weight: 400; } .single-contact-info-box .title ul{ position: relative; display: block; padding-top: 16px; } .single-contact-info-box .title ul li{ position: relative; display: block; line-height: 26px; } .single-contact-info-box .title ul li a{ color: #798795; font-size: 16px; font-weight: 400; font-family: 'Poppins', sans-serif; } .single-contact-info-box .title p{ color: #798795; font-size: 16px; line-height: 26px; font-weight: 400; margin: 17px 0 0; font-family: 'Poppins', sans-serif; } /*** ============================================= Contact Form Area Css ============================================= ***/ .contact-form-area { position: relative; display: block; padding: 0px 0px 120px; background-color: #ffffff; } .contact-form{ position: relative; display: block; } .contact-form .title{ position: relative; display: block; padding-bottom: 31px; } .contact-form .title h3 { color: #000000; font-size: 24px; line-height: 30px; font-weight: 600; text-transform: uppercase; margin-top: -6px; } .contact-form form{ position: relative; display: block; } .contact-form form .input-box{ position: relative; display: block; margin-bottom: 24px; } .contact-form form .input-box p { color: #798795; font-size: 14px; line-height: 14px; font-weight: 400; margin: 0 0 8px; } .contact-form form input[type="text"], .contact-form form input[type="email"], .contact-form form textarea{ position: relative; display: block; background: #ffffff; border: 1px solid #ededed; width: 100%; height: 50px; font-size: 15px; font-weight: 500; padding-left: 30px; padding-right: 20px; border-radius: 0px; margin-bottom: 10px; transition: all 500ms ease; } .contact-form form textarea { height: 150px; padding-top: 17px; padding-left: 30px; padding-right: 20px; } .contact-form form input[type="text"]:focus{ color: #222222; border-color: #d9d5d5; } .contact-form form input[type="email"]:focus{ color: #222222; border-color: #d9d5d5; } .contact-form form textarea:focus{ color: #222222; border-color: #d9d5d5; } .contact-form form input[type="text"]::-webkit-input-placeholder { color: #022447; } .contact-form form input[type="text"]:-moz-placeholder { color: #022447; } .contact-form form input[type="text"]::-moz-placeholder { color: #022447; } .contact-form form input[type="text"]:-ms-input-placeholder { color: #022447; } .contact-form form input[type="email"]::-webkit-input-placeholder { color: #022447; } .contact-form form input[type="email"]:-moz-placeholder { color: #022447; } .contact-form form input[type="email"]::-moz-placeholder { color: #022447; } .contact-form form input[type="email"]:-ms-input-placeholder { color: #022447; } .contact-form form textarea::-webkit-input-placeholder { color: #022447; } .contact-form form textarea:-moz-placeholder { color: #022447; } .contact-form form textarea::-moz-placeholder { color: #022447; } .contact-form form textarea:-ms-input-placeholder { color: #022447; } .contact-form form button { color: #ffffff; font-weight: 600; } .contact-form form button:hover{ background: transparent; } .contact-information-box { position: relative; display: block; padding-left: 100px; } .contact-information-box .title { position: relative; display: block; padding-bottom: 33px; } .contact-information-box .title h3{ color: #000000; font-size: 24px; line-height: 30px; font-weight: 600; text-transform: uppercase; margin-top: -6px; } .contact-information-box .title p { color: #798795; font-size: 18px; line-height: 32px; font-weight: 300; margin: 23px 0 0; } .contact-information-box .contact-us{ position: relative; display: block; } .contact-information-box .contact-us li{ position: relative; display: block; margin-bottom: 30px; } .contact-information-box .contact-us li:last-child{ margin-bottom: 0; } .contact-information-box .contact-us li .icon{ width: 60px; } .contact-information-box .contact-us li .icon span:before{ color: #000000; font-size: 30px; } .contact-information-box .contact-us li .icon, .contact-information-box .contact-us li .text{ display: table-cell; vertical-align: middle; } .contact-information-box .contact-us li .text p{ color: #798795; font-size: 16px; line-height: 28px; font-weight: 400; margin: 0; } .contact-information-box .contact-us li .text a{ color: #798795; font-size: 16px; line-height: 28px; font-weight: 400; transition: all 200ms linear; transition-delay: 0.1s; } .contact-information-box .contact-us li .text a:hover{ color: #000000; } /*** ============================================= Google Map Area Css ============================================= ***/ .google-map-area{ position: relative; display: block; background: #ffffff; } .google-map-area .map-outer{ position: relative; display: block; } .google-map-area .map-outer .map-canvas{ position: relative; width: 100%; height: 680px; } #ui-datepicker-div.ui-widget-content { border: 1px solid #c5c5c5; background: #fff none repeat scroll 0 0; border: 1px solid #777; color: #252525; font-family: "Poppins",sans-serif; font-size: 14px; border-radius: 0px; width: 270px; padding: 5px; } #ui-datepicker-div.ui-datepicker .ui-datepicker-header { background: #151515 none repeat scroll 0 0; border: 2px solid #252525; border-radius: 0; color: #fff; font-weight: 700; padding: 5px 0; position: relative; } .ui-datepicker td a { color: #000000 !important; text-align: center; background-image: none !important; background: #f5f5f5 !important; border: 1px solid #f9f9f9 !important; } .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight{ border: 1px solid #333333 !important; background: #333333 !important; color: #ffffff !important; } .ui-datepicker .ui-datepicker-prev { left: 5px; } .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { border-radius: 30%; height: 20px; position: absolute; top: 7px; width: 20px; transition: all 500ms ease; cursor: pointer; } .ui-datepicker .ui-datepicker-next { right: 5px; } .ui-datepicker .ui-datepicker-prev:hover, .ui-datepicker .ui-datepicker-next:hover { top: 7px; background: #fff; border: none; } .ui-datepicker table { border-collapse: collapse; font-size: 13px; margin: 0 0 0.4em; width: 100%; z-index: 99999999; } .ui-datepicker th { border: medium none; font-weight: 600; padding: 2px 3px; text-align: center; } .ui-datepicker-calendar .ui-state-default:hover, .ui-datepicker-calendar .ui-state-default:active{ background: #43c3ea; color: #fff; border-color: #43c3ea; } .application-content{ padding-left: 25%; margin: 30px 0px 0px 0px; } .application-box{ border-radius: 50%; background-color: #ef069ccf; height: 95px; width: 110px; } .application-symbol-box{ padding: 20px; font-size: 60px; } /* Slider */ .slick-slide { margin: 0px 20px; } .slick-slide img { width: 100%; } .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; } [dir='rtl'] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } .video_banner { height: 100vh; position: relative; margin-top: 150px; } .video_banner video { position: absolute; width: 100%; height: 100%; object-fit: cover; } .video_ban-content { position: relative; padding-top: 150px; color: #fff; text-align: center; } .sizeTbl thead tr th, .sizeTbl tbody tr td{ text-align: center; padding: 8px 15px; border-radius: 8px; font-size: 14px; color: #000; border: 3px solid #fff; } .sizeTbl thead tr th{ color: #fff; background-color: blue; } .sizeTbl tbody tr td{ background-color: #f5f5f5; } .product_des_list li{ position: relative; padding-left: 15px; } .product_des_list li:after{ position: absolute; content: ''; width: 8px; height: 8px; background-color: #111; top: 10px; left: 0px; }