/*************************************************************************************************************** |||||||||||||||||||||||||| MASTER STYLESHEET FOR SCREWER ||||||||||||||||||||||||||||||||||||| **************************************************************************************************************** |||||||||||||||||||||||||| 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 |||||||||||||||||||||||||||||||||||| ****************************************************************************************************************/ /* Imported styles */ @import url('https://fonts.googleapis.com/css?family=Poppins:300,300i,400,400i,500,500i,600,600i,700,700i,800'); @import url('https://fonts.googleapis.com/css?family=Rubik:300,300i,400,400i,500,500i,700,700i,900,900i'); @import url('imp.css'); @import url('bootstrap.css'); @import url('font-awesome.min.css'); @import url('hover.css'); @import url('jquery.bxslider.css'); @import url('owl.css'); @import url('owl.theme.default.css'); @import url('animate.css'); @import url('jquery.bootstrap-touchspin.css'); @import url('bootstrap-select.min.css'); @import url('imagehover.css'); @import url('icomoon.css'); @import url('jquery.fancybox.min.css'); @import url('jquery.mCustomScrollbar.min.css'); @import url('slick.css'); /*** Price filter***/ @import url(../js/price-filter/nouislider.css); @import url(../js/price-filter/nouislider.pips.css); /*** single shop slide ***/ @import url(flexslider.css); /*** Time picker css ***/ @import url(../js/timepicker/timePicker.css); /*** flaticon fonts css ***/ @import url(../fonts/flaticon/flaticon.css); /*** jquery ui css ***/ @import url(../js/jquery-ui-1.11.4/jquery-ui.css); /*** Revolution slider ***/ @import url(../js/plugins/revolution/css/settings.css); @import url(../js/plugins/revolution/css/layers.css); @import url(../js/plugins/revolution/css/navigation.css); /*** Bootstrap select picker css ***/ @import url(../js/bootstrap-sl-1.12.1/bootstrap-select.css); /*** Language Switcher ***/ @import url(../js/language-switcher/polyglot-language-switcher.css); /*============================================== Base Css ===============================================*/ html, body { height: 100%; } body { font-family: 'Rubik', sans-serif; color: #868298; font-size: 16px; line-height: 26px; font-weight: 400; } button:focus{ outline: none; } button { cursor: pointer; border: none; background: transparent; padding: 0; } h1, h2, h3, h4, h5, h6 { color: #222222; font-weight: 600; margin: 0; font-family: 'Poppins', sans-serif; } h3 { font-size: 20px; line-height: 26px; } a, a:hover, a:active, a:focus { text-decoration: none; outline: none; border: none; } .fix{ position: relative; display: block; overflow: hidden; } img { max-width: 100%; height: auto; } i { font-style: normal; } ul, li { list-style: none; margin: 0; padding: 0; } .clr1{ color: #3a68b1; } .bgclr1{ background: #3a68b1; } .post-content h1, .post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content h6 { margin-bottom: 16px; } .secpd1{ padding: 100px 0; } .secpd2{ padding: 100px 0 60px; } .secpd3{ padding: 100px 0 70px; } .btn-one { position: relative; display: inline-block; background: #3a68b1; color: #ffffff; font-size: 18px; line-height: 18px; font-weight: 400; padding: 15px 29px 16px; text-transform: capitalize; border-radius: 5px; font-family: 'Rubik', sans-serif; transition: all 500ms ease; border-radius: 3px; } .btn-one span:before { position: relative; top: 1px; font-weight: 400; font-size: 17px; line-height: 10px; display: inline-block; padding-left: 14px; } .btn-one:hover{ color: #f5f5f5; background: #03317B; } .btn-two{ color: #3a68b1; font-size: 18px; font-weight: 400; text-transform: capitalize; font-family: 'Rubik', sans-serif; transition: all 500ms ease; } .btn-two span:before { position: relative; top: 2px; font-weight: 400; font-size: 17px; line-height: 10px; display: inline-block; padding-left: 10px; } .btn-two:hover{ color: #03317B; } .sec-title { position: relative; display: block; margin-top: -7px; padding-bottom: 73px; } .sec-title .title{ position: relative; display: block; } .sec-title .title span { position: relative; display: inline-block; color: #222222; font-size: 30px; line-height: 36px; font-weight: 700; text-transform: uppercase; font-family: 'Poppins', sans-serif; z-index: 1; } .sec-title .title span:before { position: absolute; left: 0; bottom: -13px; width: 100%; height: 1px; background: #f2f1f9; content: ""; } .sec-title .title span:after{ position: absolute; left: 0; bottom: -13px; width: 60px; height: 1px; background: #3a68b1; content: ""; } .sec-title.clr-white{} .sec-title.clr-white .title span{ color: #ffffff; } .sec-title.clr-white .title span:before { background: #302c4a; } .sec-title.center .title span:after { left: 0; right: 0; margin: 0 auto; } .sec-title.max-width { max-width: 770px; margin: -7px auto 0; padding-bottom: 52px; } .sec-title p { font-size: 20px; line-height: 30px; margin: 36px 0 0; } /*** ============================================ Hidden Sidebar style ============================================ ***/ .hidden-bar{ position: fixed; top: 0; width: 320px; height: 100%; background: #111111; 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 { width: 40px; height: 40px; position: absolute; right: 20px; top: 10px; 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 5px 30px 30px; } .hidden-bar .logo { padding:0px 0px 30px; } .hidden-bar .logo img{ display:inline-block; max-width:100%; } .hidden-bar .content-box{ position:relative; padding-right:32px; } .hidden-bar .content-box a { padding: 20px 40px 20px; } .hidden-bar .content-box h2{ position:relative; font-size:18px; color:#ffffff; font-weight:500; margin-bottom:20px; } .hidden-bar .content-box .text{ position:relative; font-size:14px; color: rgba(255,255,255,0.60); margin-bottom:25px; } .hidden-bar .contact-info{ position:relative; margin-top:60px; } .hidden-bar .contact-info h2{ position:relative; font-size:18px; color:#ffffff; font-weight:500; margin-bottom:20px; } .hidden-bar .contact-info li{ position:relative; margin-bottom:12px; color:rgba(255,255,255,0.90); font-size:14px; font-weight:400; padding-left:30px; line-height:2em; } .hidden-bar .contact-info li a{ color:rgba(255,255,255,0.90); transition: all 300ms ease; } .hidden-bar .contact-info li a:hover{ color: #ffffff; } .hidden-bar .contact-info li .icon{ position:absolute; left:0px; top:4px; color:rgba(255,255,255,0.60); font-size:18px; line-height:1.2em; } .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; } .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-style-one{} .owl-nav-style-one .owl-controls { } .owl-nav-style-one.owl-theme .owl-nav [class*="owl-"] { background: #ffffff none repeat scroll 0 0; border-radius: 50%; color: #909090; font-size: 24px; font-weight: 700; height: 50px; line-height: 46px; margin: 0 0 0 0px; padding: 0; width: 50px; border: 1px solid #f3f3f3; transition: all 700ms ease 0s; } .owl-nav-style-one.owl-theme .owl-nav .owl-next { margin-left: 10px; } .owl-nav-style-one.owl-theme .owl-nav [class*="owl-"]:hover{ border-color: #172272; color: #172272; } .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; } .accordion-box { display: block; overflow: hidden; border-top: 1px solid #f2f2f2; border-left: 1px solid #f2f2f2; border-right: 1px solid #f2f2f2; } .accordion-box .accordion { position: relative; display: block; overflow: hidden; } .accordion-box .accordion .accord-btn { position: relative; display: block; cursor: pointer; border-bottom: 1px solid #f2f2f2; padding-left: 75px; padding-right: 20px; padding-top: 33px; padding-bottom: 33px; transition: all 500ms ease; } .accordion-box .accordion .accord-btn h4 { color: #303030; font-size: 16px; font-weight: 700; line-height: 24px; transition: all 500ms ease; } .accordion-box .accordion .accord-btn::after { font-family: "Flaticon"; position: absolute; top: 29px; left: 27px; color: #bdbdbd; content: "\f105"; font-size: 32px; line-height: 32px; font-weight: 300; transition: all 500ms ease 0s; } .accordion-box .accordion .accord-btn.active{ border-bottom: 1px solid #f2f2f2; transition: all 500ms ease; } .accordion-box .accordion .accord-btn.active h4 { color: #3a68b1; } .accordion-box .accordion .accord-btn.active:after{ color: #3a68b1; } .accordion-box .accordion .accord-content { position: relative; padding-top: 34px; padding-bottom: 33px; padding-left: 30px; padding-right: 30px; border-bottom: 1px solid #f2f2f2; display: none; } .accordion-box .accordion .accord-content:before{ position: absolute; top: 0; left: 0px; bottom: 0; width: 3px; background: #3a68b1; content: ""; } .accordion-box .accordion .accord-content.collapsed { display: block; } .accordion-box .accordion .accord-content p { margin: 0; } .slick-dots { position: relative; display: inline-block; top: 0px; margin-top: 31px; } .slick-dots li { position: relative; display: inline-block; margin: 0 15px; } .slick-dots li:before { position: absolute; top: 0; bottom: 0; right: -17px; width: 6px; height: 1px; background: #555555; content: ""; margin: 16px 0; } .slick-dots li:last-child:before { display: none; } .slick-dots li button { position: relative; display: block; width: 32px; height: 32px; border-radius: 50%; background: transparent; color: #c2c2c2; font-size: 17px; font-weight: 500; padding-bottom: 0; font-family: 'Rubik', sans-serif; } .slick-dots li.slick-active button { background: #fec144; color: #222222; } .boxed_wrapper { background: #fff none repeat scroll 0 0; position: relative; margin: 0 auto; width: 100%; min-width: 320px; min-height: 400px; overflow: hidden; } /* Update header Style */ @keyframes menu_sticky { 0% {margin-top:-100px;} 50% {margin-top: -74px;} 100% {margin-top: 0;} } .mainmenu-area.stricky-fixed { position: fixed; top: 0; left: 0; width: 100%; z-index: 99999999; background: #39345a; margin: 0; animation-name: menu_sticky; animation-duration: 0.60s; animation-timing-function: ease-out; transition: all .25s ease-in-out; } .header-style2-area.stricky-fixed{ position: fixed; top: 0; left: 0; width: 100%; z-index: 999; background: #f5f5f8; margin: 0; animation-name: menu_sticky; animation-duration: 0.60s; animation-timing-function: ease-out; transition: all .25s ease-in-out; } .header-style2-area.stricky-fixed .header-style2-logo{ padding: 20px 0 15px; } .header-style2-area.stricky-fixed .main-menu.style2 .navigation li a{ padding-top: 32px; padding-bottom: 33px; } .header-style2-area.stricky-fixed .main-menu.style2 .navigation li ul li a{ padding: 18px 30px 15px; } .header-style2-area.stricky-fixed .main-menu.style2 .navigation li ul li:hover a { padding-left: 45px; } .header-style2-area.stricky-fixed .headers2.quote-button-box{ padding: 14px 0 15px; } /* scroll to top styles */ .scroll-to-top { background: #3a68b1; border-radius: 50%; bottom: 25px; color: #ffffff; cursor: pointer; display: none; font-size: 25px; font-weight: normal; height: 55px; line-height: 56px; position: fixed; right: 15px; text-align: center; transition: all 500ms ease 0s; width: 55px; z-index: 99999999; box-shadow: 0px 8px 23px -6px rgba(27,27,27,1); } .scroll-to-top:hover { opacity: .5; } /* 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 li { display: inline-block; margin: 0 3px; } .post-pagination li a { position: relative; display: block; background: #ffffff; border-radius: 5px; border: 1px solid #f0eef9; color: #222222; font-size: 18px; font-weight: 600; height: 50px; width: 50px; padding: 11px 0; transition: all 500ms ease 0s; font-family: 'Poppins', sans-serif; } .post-pagination li a i { position: relative; top: 1px; color: #868298; font-size: 20px; } .post-pagination li:hover a i{ color: #222222; } .post-pagination li.active a, .post-pagination li:hover a { color: #fff; background: #3a68b1; border: 1px solid #3a68b1; } /* Post pagination styles 2 */ .post-pagination2{ display: block; margin-top: 20px; } .post-pagination2 li { display: inline-block; margin: 0 3px; } .post-pagination2 li a { position: relative; display: block; color: #222222; font-size: 18px; font-weight: 600; height: 32px; width: 32px; line-height: 32px; text-align: center; transition: all 500ms ease 0s; font-family: 'Poppins', sans-serif; border-radius: 50%; } .post-pagination2 li.active a, .post-pagination2 li:hover a { background: #3a68b1; color: #ffffff; } .post-pagination2 li a.left { width: auto; height: auto; display: block; color: #868298; padding-right: 10px; transition: all 500ms ease; } .post-pagination2 li:hover a.left{ background: none; } .post-pagination2 li a.left i { position: relative; top: 1px; display: inline-block; padding-right: 8px; font-size: 21px; } .post-pagination2 li a.left:hover{ color: #3a68b1; } .post-pagination2 li a.right { width: auto; height: auto; display: block; color: #868298; padding-left: 10px; transition: all 500ms ease; } .post-pagination2 li a.right:hover{ color: #3a68b1; } .post-pagination2 li:hover a.right{ background: none; } .post-pagination2 li a.right i { position: relative; top: 1px; display: inline-block; padding-left: 8px; font-size: 21px; } /* Overlay styles */ .overlay-style-one{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(243, 103, 40, 0.85); transition: all 500ms ease; transition-delay: 0.10s; opacity: 0; z-index: 2; } .overlay-style-one .box{ display: table; height: 100%; width: 100%; } .overlay-style-one .box .content{ display: table-cell; text-align: center; vertical-align: middle; } .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: 14px; color: #3a68b1; } .sociallinks-style-one{ display: flex; align-items: center; justify-content: center; gap: 10px; } .sociallinks-style-one li{ display: inline-block; float: left; border: 1px solid #3A68B1; height: 35px; width: 35px; display: flex; align-items: center; justify-content: center; transition: all 500ms ease; cursor: pointer; } .sociallinks-style-one li:hover{ background: #3A68B1; } .sociallinks-style-one li:hover a{ color: #fff; } .sociallinks-style-one li:last-child{ margin-right: 0px; } .sociallinks-style-one li a i{ color: #9491a2; font-size: 18px; font-weight: 400; transition: all 500ms ease; } .sociallinks-style-two{ overflow: hidden; } .sociallinks-style-two li { display: inline-block; float: left; margin-right: 10px; } .sociallinks-style-two li:last-child{ margin-right: 0px; } .sociallinks-style-two li a i { position: relative; display: block; width: 40px; height: 40px; background: #1e1b31; border: 1px solid #26223b; border-radius: 50%; color: #868298; font-size: 14px; line-height: 38px; text-align: center; transition: all 500ms ease 0s; } .sociallinks-style-two li a:hover i{ background: #3a68b1; border-color: #3a68b1; color: #fff; } /*============================================== Top Bar Style1 Css ===============================================*/ .top-bar-style1 { position: relative; display: block; background: #f8f7ff; border-bottom: 1px solid #f2f1f9; padding: 13px 0 11px; } .top-style1{ position: relative; display: block; width: 100%; } .top-left-style1 { position: relative; display: block; max-width: 870px; width: 100%; } .top-left-style1 .find-map { position: relative; display: block; margin: 5px 0 4px; } .top-left-style1 .find-map p { color: #9491a2; margin: 0; } .top-left-style1 .find-map p span:before { color: #3a68b1; font-size: 18px; line-height: 18px; display: inline-block; padding-right: 6px; } .top-left-style1 .find-map p a{ color: #3a68b1; transition: all 500ms ease; } .top-left-style1 .find-map p a span:before{ position: relative; top: 2px; font-size: 16px; line-height: 16px; display: inline-block; padding-left: 6px; padding-right: 0; transition: all 500ms ease; } .top-left-style1 .find-map p a:hover{ color: #9491a2; } .top-left-style1 .find-map p a:hover span:before{ color: #9491a2; } .top-right-style1 { position: relative; display: block; max-width: 300px; width: 100%; } .top-right-style1 .sociallinks-style-one{ line-height: 35px; } /*============================================== Top Bar Style2 Css ===============================================*/ .top-bar-style2 { position: relative; display: block; background: #39345a; padding: 8px 0 7px; } .top-style2 { position: relative; display: block; width: 100%; min-height: 35px; } .top-left-style2 { position: relative; display: block; max-width: 900px; width: 100%; } .top-left-style2 .language-switcher { position: absolute; top: 0; left: 0; bottom: 0; margin: 0; border: none; width: 125px; height: 35px; background: transparent; display: block; padding: 0px 0px; border-radius: 5px; } .top-left-style2 .language-switcher #polyglotLanguageSwitcher a { color: #ffffff; } .top-left-style2 .language-switcher #polyglotLanguageSwitcher span.trigger:before { color: #868298; } .top-left-style2 .top-contact-info{ position: relative; display: block; } .top-left-style2 .top-contact-info ul { display: block; overflow: hidden; margin: 8px 0; } .top-left-style2 .top-contact-info ul li{ display: inline-block; float: left; border-left: 1px solid #4e4a6d; padding-left: 20px; margin-left: 20px; color: #868298; font-size: 16px; font-weight: 400; line-height: 18px; } .top-left-style2 .top-contact-info ul li span:before { position: relative; top: 1px; color: #3a68b1; font-size: 16px; line-height: 16px; display: inline-block; padding-right: 5px; } .top-left-style2 .top-contact-info ul li span.last{ display: inline-block; padding-left: 15px; } .top-left-style2 .top-contact-info ul li b{ color: #ffffff; font-weight: 400; } .top-right-style2 { position: relative; display: block; max-width: 200px; width: 100%; } .top-right-style2 .sociallinks-style-one { float: right; margin: 5px 0 4px; } .top-right-style2 .sociallinks-style-one li a:hover i{ color: #3a68b1; } /*============================================== Header Style1 Area Css ===============================================*/ .header-style1-area { display: block; background: #ffffff; padding: 17px 0 20px; } .header-style1{ position: relative; display: flex; align-items: center; justify-content: space-between; } .header-style1-logo { display: flex; align-items: center; } .header-style1-logo a { display: block; } .headers1-header-right{ position: relative; display: flex; align-items: center; } .headers1-header-right ul { position: relative; display: block; overflow: hidden; float: left; margin-right: 50px; padding: 16px 0; } .headers1-header-right ul li{ display: inline-block; float: left; margin-right: 40px; } .headers1-header-right ul li:last-child{ margin-right: 0; } .headers1-header-right ul li .single-item{ position: relative; display: block; } .headers1-header-right ul li .single-item .icon{ width: 25px; } .headers1-header-right ul li .single-item .icon span:before{ position: relative; display: inline-block; top: 1px; left: 1px; font-size: 24px; line-height: 24px; font-weight: 600; } .headers1-header-right ul li .single-item .icon, .headers1-header-right ul li .single-item .text{ display: table-cell; vertical-align: middle; } .headers1-header-right ul li .single-item .text{ padding-left: 20px; } .headers1-header-right ul li .single-item .text p{ margin: 0 0 1px; } .headers1-header-right ul li .single-item .text h3{ color: #4e4e4e; font-size: 18px; text-transform: uppercase; } .headers1-button { position: relative; display: flex; align-items: center; float: right; width: 280px; border: 1px solid #f0eef9; border-radius: 5px; padding: 6px 15px; } .headers1-button .icon{ width: 70px; position: relative; } .headers1-button .icon:before { content: "\f0da"; font-family: FontAwesome; color: #3a68b1; font-size: 30px; position: absolute; top: 15px; right: 12px; } .headers1-button .icon span:before{ width: 50px; height: 50px; background: #3a68b1; text-align: center; border-radius: 50%; color: #ffffff; font-size: 23px; line-height: 50px; display: block; } .headers1-button .icon, .headers1-button .text{ display: table-cell; vertical-align: middle; } .headers1-button .text { padding-left: 15px; display: flex; flex-direction: column; justify-content: center; } .headers1-button .text span{ font-size: 18px; } .headers1-button .text h3{ font-size: 18px; margin: 2px 0 0; } /*============================================== Header Style2 Area Css ===============================================*/ .header-style2-area { display: block; background: #ffffff; padding: 0 0 0; } .header-style2-logo { display: block; padding: 30px 0 30px; margin-right: 40px; transition: all 500ms ease; } .header-style2-logo img { width: 220px; height: 100%; object-fit: contain; } .header-style2-logo a { display: block; } .main-menu.style2 .navigation li { margin-right: 30px; } .main-menu.style2 .navigation li:last-child{ margin-right: 0; } .main-menu.style2 .navigation li a { color: #686968; padding-top: 52px; padding-bottom: 48px; } .main-menu.style2 .navigation li ul li a { color: #686968; padding: 18px 30px 15px; } .headers2.quote-button-box { position: relative; display: block; padding: 29px 0 30px; transition: all 500ms ease; } /*** ===================================================== Mainmenu Area style ===================================================== ***/ .mainmenu-area{ position: relative; display: block; background: transparent; margin-top: -35px; margin-bottom: -42px; z-index: 999; } .mainmenu-area .inner-content { position: relative; display: block; background: #39345a; padding-left: 30px; padding-right: 30px; } .main-menu { position: relative; display: inline-block; float: left; } .main-menu .navbar-collapse { padding: 0px } .main-menu .navigation { position: relative; } .main-menu .navigation li { position: relative; display: inline-block; float: left; margin-right: 45px; } .main-menu .navigation li:last-child{ margin-right: 0; } .main-menu .navigation li a { position: relative; display: block; color: #ffffff; font-size: 15px; line-height: 15px; font-weight: 600; text-transform: uppercase; opacity: 1; padding: 32px 0 32px; transition: all 300ms ease; font-family: 'Poppins', sans-serif; } /* Mega dropdown (11-09-2025) */ .main-menu .navigation > li.mega-dropdown-item:hover > a { color: #3a68b1; } .main-menu .navigation > li.mega-dropdown-item > .mega-dropdown-menu { position: absolute; left: 0px; top: 130%; width: 400px; background: transparent; padding: 10px 0px 0; z-index: 100; visibility: hidden; opacity: 0; transition: all 500ms ease; display: block; border-bottom: 3px solid #3a68b1; border-radius: 8px; } .main-menu .navigation > li.mega-dropdown-item > .mega-dropdown-menu:before { position: absolute; top: 10px; left: 0; width: 100%; background: #ffffff; content: ""; z-index: -1; bottom: 0; border-radius: 6px; } .main-menu .navigation > li.mega-dropdown-item:hover > .mega-dropdown-menu { top: 100%; opacity: 1; visibility: visible; } .main-menu .navigation > li.mega-dropdown-item > .mega-dropdown-menu > ul { max-height: 28vh; overflow-y: auto; scrollbar-width: thin; margin-block: 10px; } .main-menu .navigation > li.mega-dropdown-item > .mega-dropdown-menu > ul > li { position: relative; display: block; float: none; margin: 0; padding: 0; width: 100%; transition: all 500ms ease; z-index: 1; } .main-menu .navigation > li.mega-dropdown-item > .mega-dropdown-menu > ul > li:before{ position: absolute; left: 30px; right: 30px; height: 100%; border-bottom: 1px solid #e9e9e9; content: ""; z-index: -1; } .main-menu .navigation > li.mega-dropdown-item > .mega-dropdown-menu > ul > li:last-child:before{ border-bottom: none; } .main-menu .navigation li.mega-dropdown-item > .mega-dropdown-menu > ul li a { position: relative; display: block; color: #222222; font-size: 16px; font-weight: 400; line-height: 20px; text-transform: capitalize; transition: all 500ms ease 0s; padding: 18px 30px 15px; font-family: 'Rubik', sans-serif; } .main-menu .navigation li.mega-dropdown-item > .mega-dropdown-menu ul li a:before { position: absolute; top: 0; left: 30px; bottom: 0; right: auto; width: 7px; height: 7px; background: #3a68b1; border-radius: 50%; content: ""; margin: 23px 0; opacity: 1; transform: scale(0); transition: all 500ms ease; } .main-menu .navigation li.mega-dropdown-item > .mega-dropdown-menu ul li:hover a:before { transform: scale(1); left: 30px; } .main-menu .navigation > li.mega-dropdown-item > .mega-dropdown-menu > ul > li:hover > a { color: #3a68b1; padding-left: 45px; } /* End Mega Dropdown Menu */ .main-menu .navigation > li:hover > a, .main-menu .navigation > li.current > a { color: #3a68b1; } .main-menu .navigation > li > ul { position: absolute; left: 0px; top: 130%; width: 250px; background: transparent; padding: 10px 0px 0; z-index: 100; visibility: hidden; opacity: 0; transition: all 500ms ease; display: block; border-bottom: 3px solid #3a68b1; border-radius: 8px; } .main-menu .navigation > li > ul:before { position: absolute; top: 10px; left: 0; width: 100%; background: #ffffff; content: ""; z-index: -1; bottom: 0; border-radius: 6px; } .main-menu .navigation > li:hover > ul { top: 100%; opacity: 1; visibility: visible; } .main-menu .navigation > li > ul > li { position: relative; display: block; float: none; margin: 0; padding: 0; width: 100%; transition: all 500ms ease; z-index: 1; } .main-menu .navigation > li > ul > li:before{ position: absolute; left: 30px; right: 30px; height: 100%; border-bottom: 1px solid #e9e9e9; content: ""; z-index: -1; } .main-menu .navigation > li > ul > li:last-child:before{ border-bottom: none; } .main-menu .navigation li ul li a { position: relative; display: block; color: #222222; font-size: 16px; font-weight: 400; line-height: 20px; text-transform: capitalize; transition: all 500ms ease 0s; padding: 18px 30px 15px; font-family: 'Rubik', sans-serif; } .main-menu .navigation li ul li a:before { position: absolute; top: 0; left: 30px; bottom: 0; right: auto; width: 7px; height: 7px; background: #3a68b1; border-radius: 50%; content: ""; margin: 23px 0; opacity: 1; transform: scale(0); transition: all 500ms ease; } .main-menu .navigation li ul li:hover a:before{ transform: scale(1); left: 30px; } .main-menu .navigation > li > ul > li:hover > a { color: #3a68b1; padding-left: 45px; } .main-slider { position: relative; z-index: 10; border-top: 3px solid #241f40; } .main-slider .tp-caption{ z-index:5 ; } .main-slider .tp-dottedoverlay{ background: none !important; } .main-slider .slide-content{ position: relative; display: block; } .main-slider .slide-content .big-title{ position: relative; color: #ffffff; font-size: 60px; font-weight: 700; text-transform: none; line-height: 1.2em; font-family: 'Poppins', sans-serif; } .main-slider .slide-content .text{ position: relative; display: block; color: #ffffff; font-size: 24px; font-weight: 300; line-height: 1.6em; font-family: 'Rubik', sans-serif; } .main-slider .slide-content .btn-box{} .main-slider .slide-content .btn-box a{ } .main-slider #rev_slider_two_wrapper .slide-content .big-title { color: #ffffff; line-height: 1.1em; } /*** ============================================= Main Slider style2 ============================================= ***/ .main-slider.style2 { border-top: none; } /*** ============================================= About Area style ============================================= ***/ .about-area{ position: relative; display: block; padding: 90px 0 60px; } .about-title{} .about-title .sec-title { padding-bottom: 40px; } .about-title h1 { font-size: 36px; line-height: 58px; } .about-text{ position: relative; display: block; margin-top: -7px; } .about-text span{ color: #222222; font-size: 20px; line-height: 30px; } .about-text p{ line-height: 28px; margin: 25px 0 0; } .service-items{ margin-top: 43px; } .single-service-style2{ position: relative; display: block; max-width: 370px; width: 100%; border: 1px solid #f0eef9; padding: 24px 28px 22px; border-radius: 5px; margin: 0 auto 40px; transition: all 700ms ease; } .single-service-style2:hover{ -webkit-box-shadow: 0px 2px 10px 3px #f0eef9; box-shadow: 0px 2px 10px 3px #f0eef9; } .single-service-style2 .inner{ position: relative; display: block; padding-left: 95px; } .single-service-style2 .icon-box { position: absolute; top: 5px; left: 0; width: 70px; height: 120px; text-align: center; z-index: 1; transition: all 500ms ease; transition-delay: .3s; } .single-service-style2 .icon-box:before { position: absolute; top: 0; left: 0; right: 0; width: 40px; height: 120px; border: 4px solid #f8f7ff; content: ""; z-index: -1; margin: 0 auto; opacity: 0; transition: all 500ms ease; } .single-service-style2:hover .icon-box:before{ opacity: 1; } .single-service-style2 .icon-box span:before{ position: relative; top: 0; color: #39345a; font-size: 65px; line-height: 65px; transition: all 500ms ease; transition-delay: .2s; } .single-service-style2:hover .icon-box span:before{ top: 25px; color: #3a68b1; } .single-service-style2 .text-box{ } .single-service-style2 .text-box h3{ margin: 0 0 9px; } .single-service-style2 .text-box p{ line-height: 24px; margin: 0; } /*** ============================================= Slogan area style ============================================= ***/ .slogan-area { position: relative; background-attachment: scroll; background-size: cover; background-position: center top; background-repeat: no-repeat; padding: 53px 0; z-index: 1; } .slogan-area::before { background: rgba(58, 104, 177, 0.90) none repeat scroll 0 0; position: absolute; top: 0; left: 0; height: 100%; width: 100%; content: ""; z-index: -1; } .slogan-area .title { position: relative; display: block; margin: 12px 0 13px; } .slogan-area .title h3{ color: #ffffff; font-size: 24px; line-height: 30px; } .slogan-area .button{} .slogan-area .button a{ color: #ffffff; background: transparent; display: block; border: 2px solid #ffffff; } .slogan-area .button a:hover{ background: #3a68b1; } /*** ============================================= Services Style1 Area Style ============================================= ***/ .services-style1-area { position: relative; display: block; } .service_s1_title{ position: relative; display: inline-block; float: left; } .service_s1_text { position: relative; display: inline-block; float: left; max-width: 670px; width: 100%; padding-left: 80px; margin-top: -7px; } .service_s1_text p{ color: #222222; font-size: 20px; line-height: 30px; margin: 0; } .service_s1_button { float: right; margin-top: -6px; } .single-service-style1 { min-height: 165px; position: relative; display: block; margin-bottom: 30px; } .single-service-style1 .img-holder{ position: relative; display: block; overflow: hidden; z-index: 1; } .single-service-style1 .img-holder::before { background: rgba(60, 55, 90, 0.85); top: 0px; left: 0px; bottom: 0px; right: 0px; content: ""; position: absolute; transition: all 0.5s ease-in-out 0s; transform-style: preserve-3d; transform: perspective(1200px) rotateX(-90deg) translateZ(0px); } .single-service-style1:hover .img-holder::before{ transform: perspective(1200px) rotateX(0deg) translateZ(0px); transition-delay: 0.1s; } .single-service-style1 .img-holder img { height: 245px; object-fit: cover; width: 100%; transition: .5s ease; } .single-service-style1 .text-holder { min-height: 165px; } .single-service-style1:hover .img-holder img {} .single-service-style1 .text-holder{ position: relative; display: block; border: 1px solid #f0eef9; padding: 24px 19px 23px; transition: all 700ms ease; } .single-service-style1:hover .text-holder{ -webkit-box-shadow: 0px 2px 10px 3px #f0eef9; box-shadow: 0px 2px 10px 3px #f0eef9; } .single-service-style1 .text-holder .inner{ position: relative; display: block; padding-left: 80px; } .single-service-style1 .text-holder .icon-box { position: absolute; top: 5px; left: 0; width: 65px; height: 130px; text-align: center; z-index: 1; transition: all 500ms ease; transition-delay: .3s; } .single-service-style1 .text-holder .icon-box:before { position: absolute; top: 0; left: 0; right: 0; width: 40px; height: 130px; border: 4px solid #f8f7ff; content: ""; z-index: -1; margin: 0 auto; opacity: 0; transition: all 500ms ease; } .single-service-style1:hover .text-holder .icon-box:before{ opacity: 1; } .single-service-style1 .text-holder .icon-box span:before { position: relative; top: 0; color: #39345a; font-size: 35px; line-height: 64px; transition: all 500ms ease; transition-delay: .2s; width: 65px; height: 65px; display: block; border: 1px solid #f0eef9; border-radius: 50%; background: #ffffff; } .single-service-style1:hover .text-holder .icon-box span:before{ top: 30px; color: #ffffff; border-color: #3a68b1; background: #3a68b1; } .single-service-style1 .text-holder .text-box{} .single-service-style1 .text-holder .text-box h3{ margin: 0 0 18px; } .single-service-style1 .text-holder .text-box h3 a{ color: #222222; transition: all 500ms ease; } .single-service-style1 .text-holder .text-box h3 a:hover{ color: #3a68b1; } .single-service-style1 .text-holder .text-box p{ line-height: 24px; margin: 0; } /*** ============================================= Services Style2 Area Style ============================================= ***/ .services-style2-area { position: relative; display: block; padding-bottom: 70px; } /*** ============================================= Company Info area Style ============================================= ***/ .company-info-area{ position: relative; display: block; background: #f5f5f5; padding-top: 100px; padding-bottom: 100px; } .video-holder-box{ position: relative; display: block; } .video-holder-box .img-holder{ position: relative; display: block; overflow: hidden; } .video-holder-box .img-holder img { transform: scale(1); transition: all 0.5s ease 0s; width: 100%; } .video-holder-box .img-holder:hover img{ transform: scale(1.1); } .video-holder-box .img-holder .icon-holder { position: absolute; top: 0; left: 0; height: 100%; width: 100%; transition: all 500ms ease; } .video-holder-box:hover .img-holder .icon-holder { background-color: rgba(0, 0, 0, 0.60); } .video-holder-box .img-holder .icon-holder .icon { display: table; height: 100%; width: 100%; } .video-holder-box .img-holder .icon-holder .icon .inner { display: table-cell; vertical-align: middle; text-align: center; } .video-holder-box .img-holder .icon-holder .icon .inner a{ position: relative; display: block; color: #ffffff; line-height: 88px; height: 90px; width: 90px; margin: 0 auto; border-radius: 50%; border: 1px solid #ffffff; text-align: center; transition: all 500ms ease; } .video-holder-box .img-holder .icon-holder .icon .inner a span:before{ font-size: 25px; } .video-holder-box .img-holder:hover .icon-holder .icon .inner a{ transform: rotate(360deg); } .company-info-content { position: relative; display: block; margin-top: -8px; } .company-info-content h1{ font-size: 36px; line-height: 48px; margin: 0 0 22px; } .company-info-content span{ color: #222222; font-size: 20px; line-height: 28px; } .company-info-content p{ line-height: 28px; margin: 15px 0 21px; } .company-info-content a.learn-more span:before{ color: #3a68b1; } .company-info{ margin-top: 20px; } .single-info-of-company{ position: relative; display: block; overflow: hidden; background: #ffffff; padding-left: 80px; min-height: 110px; margin: 40px auto 0; max-width: 370px; width: 100%; border-radius: 5px; } .single-info-of-company .icon-holder{ position: absolute; top: 0; left: 0; width: 80px; height: 110px; text-align: center; z-index: 1; } .single-info-of-company .icon-holder.one{ position: absolute; top: 0; left: 0; width: 80px; height: 110px; background: url(../images/icon/1.jpg); } .single-info-of-company .icon-holder span:before { color: #3a68b1; font-size: 35px; line-height: 35px; display: block; padding: 37px 0 38px; } .single-info-of-company.two{ background: #48426e; } .single-info-of-company .icon-holder.two{ position: absolute; top: 0; left: 0; width: 80px; height: 110px; background: url(../images/icon/2.png); } .single-info-of-company.two .title-holder h3{ color: #ffffff; } .single-info-of-company.two .title-holder span{ color: #ffffff; } .single-info-of-company.three{ background: #3a68b1; } .single-info-of-company .icon-holder.three{ position: absolute; top: 0; left: 0; width: 80px; height: 110px; background: url(../images/icon/3.png); } .single-info-of-company .icon-holder.three span:before{ color: #ffffff; } .single-info-of-company.three .title-holder h3{ color: #ffffff; } .single-info-of-company.three .title-holder span{ color: #ffffff; } .single-info-of-company .title-holder { position: relative; display: block; padding-left: 15px; margin: 26px 0 25px; } .single-info-of-company .title-holder h3{ font-size: 18px; margin: 0 0 7px; } .single-info-of-company .title-holder span{} /*** ============================================= Latest Project Area Style ============================================= ***/ .latest-project-area{ position: relative; display: block; background: #1a172c; padding: 100px 0 100px; } .latest-project{} .latest-project .owl-carousel{ display:block; max-width:450px; width: 100%; margin: 0 auto; } .latest-project .owl-carousel .owl-stage-outer{ overflow: visible; padding: 0px 0px; } .single-project-style1{ position: relative; display: block; } .single-project-style1 .img-holder{ position: relative; display: block; overflow: hidden; } .single-project-style1 .img-holder img{ width: 100%; transition: all 500ms ease; } .single-project-style1:hover .img-holder img { transform: scale(1.1); } .single-project-style1 .overlay-content{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: all 500ms ease; transition-delay: .3s; opacity: 0; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+36,1e5799+40,1e5799+40,1e5799+40,1e5799+42,1e5799+42,1e5799+49,0b0722+72&0+35,0.67+71,1+100 */ background: -moz-linear-gradient(top, rgba(30,87,153,0) 35%, rgba(30,87,153,0.02) 36%, rgba(30,87,153,0.09) 40%, rgba(30,87,153,0.13) 42%, rgba(30,87,153,0.26) 49%, rgba(12,10,39,0.67) 71%, rgba(11,7,34,0.68) 72%, rgba(11,7,34,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(30,87,153,0) 35%,rgba(30,87,153,0.02) 36%,rgba(30,87,153,0.09) 40%,rgba(30,87,153,0.13) 42%,rgba(30,87,153,0.26) 49%,rgba(12,10,39,0.67) 71%,rgba(11,7,34,0.68) 72%,rgba(11,7,34,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(30,87,153,0) 35%,rgba(30,87,153,0.02) 36%,rgba(30,87,153,0.09) 40%,rgba(30,87,153,0.13) 42%,rgba(30,87,153,0.26) 49%,rgba(12,10,39,0.67) 71%,rgba(11,7,34,0.68) 72%,rgba(11,7,34,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001e5799', endColorstr='#0b0722',GradientType=0 ); /* IE6-9 */ } .single-project-style1:hover .overlay-content{ opacity: 1; } .single-project-style1 .overlay-content .project-details { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 30px 32px; transition: all 700ms ease; transition-delay: .6s; opacity: 0; transform-style: preserve-3d; transform: perspective(1200px) rotateX(-90deg) translateZ(-51px); } .single-project-style1:hover .overlay-content .project-details { -webkit-transform: perspective(1200px) rotateX(0deg) translateZ(0px); -moz-transform: perspective(1200px) rotateX(0deg) translateZ(0px); transform: perspective(1200px) rotateX(0deg) translateZ(0px); opacity: 1; transition-delay: 0.2s; } .single-project-style1 .project-details .left{ display: block; } .single-project-style1 .project-details .left h3{ color: #ffffff; margin: 0 0 3px; } .single-project-style1 .project-details .left span{ color: #3a68b1; } .single-project-style1 .project-details .right { margin: 11px 0; } .single-project-style1 .project-details .right a { line-height: 15px; display: block; } .single-project-style1 .project-details .right a span:before{ color: #3a68b1; font-size: 32px; line-height: 32px; } .latest-project .owl-theme .owl-nav { position: absolute; right: -330px; top: -105px; margin: 0; } .latest-project .owl-theme .owl-nav [class*="owl-"] { background: transparent; color: #ffffff; font-size: 20px; font-weight: 400; height: 45px; width: 45px; line-height: 42px; margin: 0; padding: 0; border: 1px solid #302c4a; transition: all 700ms ease 0s; border-radius: 50%; } .latest-project .owl-theme .owl-nav .owl-next { margin-left: 10px; } .latest-project .owl-theme .owl-nav [class*="owl-"]:hover{ border-color: #3a68b1; background: #3a68b1; color: #000000; } /*** ============================================= Fact counter Area style ============================================= ***/ .fact-counter-area { position: relative; display: block; background: #f8f7ff; padding: 75px 0 40px; } .single-fact-counter { position: relative; display: block; max-width: 270px; width: 100%; margin: 0 auto 30px; padding-left: 85px; } .single-fact-counter .icon-box { position: absolute; top: 0px; left: 0; width: 60px; height: 95px; text-align: center; z-index: 1; transition: all 500ms ease; transition-delay: .3s; } .single-fact-counter .icon-box:before { position: absolute; top: 0; left: 0; right: 0; width: 40px; height: 95px; border: 4px solid #f0eef9; content: ""; z-index: -1; margin: 0 auto; opacity: 1; transition: all 500ms ease; } .single-fact-counter .icon-box span:before { position: relative; top: 0; color: #3a68b1; font-size: 60px; line-height: 60px; transition: all 500ms ease; transition-delay: .2s; } .single-fact-counter .count-box { position: relative; display: block; } .single-fact-counter h1 { line-height: 36px; margin: 0 0 10px; } .single-fact-counter h1 span { color: #222222; font-size: 48px; font-weight: 600; font-family: 'Poppins', sans-serif; } .single-fact-counter .count-box .title{} .single-fact-counter .count-box .title h3 { color: #868298; font-size: 18px; line-height: 26px; font-weight: 400; text-transform: capitalize; font-family: 'Rubik', sans-serif; } /*** ============================================= Latest blog Area style ============================================= ***/ .latest-blog-area { position: relative; display: block; background: #ffffff; padding-top: 100px; padding-bottom: 40px; } .single-blog-post { position: relative; display: block; margin-bottom: 52px; } .single-blog-post .img-holder { position: relative; display: block; overflow: hidden; transition: all 0.5s ease-in-out 0.6s; } .single-blog-post .img-holder::before { background: rgba(60, 55, 90, 0.85); top: 0px; left: 0px; bottom: 0px; right: 0px; content: ""; position: absolute; transition: all 0.5s ease-in-out 0s; transform-style: preserve-3d; transform: perspective(1200px) rotateX(45deg) translateZ(0px); z-index: 3; opacity: 0; } .single-blog-post:hover .img-holder::before{ transform: perspective(1200px) rotateX(0deg) translateZ(0px); transition-delay: 0.1s; opacity: 1; } .single-blog-post .img-holder img { transition: all 0.5s ease-in-out 0.6s; width: 100%; height: 250px; object-fit: cover; } .single-blog-post:hover .img-holder img { transform: scale(1.2, 1.2); } .single-blog-post .post-date { position: absolute; top: 10px; left: 10px; width: 70px; height: 70px; text-align: center; background: #3a68b1; border-radius: 50%; z-index: 3; transition: all 0.8s ease-in-out 0.8s; } .single-blog-post:hover .post-date{ transform: rotate(360deg); } .single-blog-post .post-date h3 { display: block; padding: 13px 10px; color: #ffffff; line-height: 22px; } .single-blog-post .text-holder { position: relative; display: block; padding: 25px 0px 0px; } .single-blog-post .text-holder .blog-title { position: relative; display: block; font-size: 22px; line-height: 30px; } .single-blog-post .text-holder .blog-title a{ color: #393939; transition: all 500ms ease; } .single-blog-post .text-holder .blog-title a:hover{ color: #3a68b1; } .single-blog-post .text-holder .text{ display: block; margin-top: 16px; } .single-blog-post .text-holder .text p{ margin: 0 0 16px; } .single-blog-post .text-holder .text a.read-more{ color: #222222; } .single-blog-post:hover .text-holder .text a.read-more{ color: #3a68b1; } /*** ============================================= Choose Area Style ============================================= ***/ .choose-area { position: relative; background-attachment: fixed; background-position: center top; background-repeat: no-repeat; background-size: cover; padding-top: 93px; padding-bottom: 60px; z-index: 1; } .choose-area::before { position: absolute; background: rgba(26, 22, 46, 0.90); content: ""; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; } .choose-title { position: relative; display: block; max-width: 730px; width: 100%; text-align: center; margin: 0 auto; } .choose-title h1{ color: #ffffff; font-size: 36px; line-height: 42px; font-weight: 600; margin: 0 0 14px; } .choose-title p{ color: #3a68b1; font-size: 20px; line-height: 30px; margin: 0; } .single-choose-item{ position: relative; display: block; background: #39345a; padding: 60px 15px 52px; margin-bottom: 40px; } .single-choose-item .iocn-holder{ display: block; margin-bottom: 25px; } .single-choose-item .text-holder{ position: relative; display: block; } .single-choose-item .text-holder h3{ color: #ffffff; margin: 0 0 18px; } .single-choose-item .text-holder p{ color: #d9d7e8; margin: 0; } .single-choose-item.bg1{ background: #ffffff; } .single-choose-item.bg1 .text-holder h3{ color: #222222; } .single-choose-item.bg1 .text-holder p{ color: #868298; } .single-choose-item.bg2{ background: #3a68b1; } .single-choose-item.bg2 .text-holder h3{ color: #ffffff; } .single-choose-item.bg2 .text-holder p{ color: #ffffff; } /*** ============================================= Call Us Area Style ============================================= ***/ .call-us-area{ position: relative; display: block; padding-top: 100px; padding-bottom: 60px; z-index: 3; } .call-us-area .call-us-bg { position: absolute; top: 0; left: 0; width: 100%; height: 320px; background-attachment: scroll; background-position: top right; background-repeat: no-repeat; background-size: cover; z-index: -1; } .call-us-area .call-us-bg::before { position: absolute; background: rgba(248, 247, 255, 0.85); content: ""; width: 100%; height: 320px; top: 0; left: 0; z-index: -1; } .sec-title.call-us-title{ position: relative; display: inline-block; float: left; padding-right: 120px; } .call-us-text { position: relative; display: inline-block; float: left; max-width: 600px; width: 100%; margin-top: -7px; } .call-us-text p{ color: #39345a; font-size: 20px; line-height: 30px; margin: 0; } .contact-info-box{ position: relative; display: block; background: #39345a; border-radius: 5px; padding: 35px 40px 17px; } .contact-info-box ul { position: relative; display: block; overflow: hidden; border-bottom: 1px solid #4d496b; padding-bottom: 32px; margin-bottom: 17px; } .contact-info-box ul li{ position: relative; display: block; padding-left: 45px; margin-bottom: 25px; } .contact-info-box ul li:last-child{ margin-bottom: 0; } .contact-info-box ul li .icon{ position: absolute; top: 10px; left: 0; } .contact-info-box ul li .icon span:before{ color: #3a68b1; font-size: 35px; line-height: 35px; } .contact-info-box ul li .title{ position: relative; display: block; padding-left: 10px; } .contact-info-box ul li .title h3{ color: #ffffff; font-size: 18px; font-weight: 500; margin: 0 0 2px; } .contact-info-box ul li .title span{ color: #3a68b1; font-size: 18px; } .contact-info-box .find-map-box { position: relative; display: block; overflow: hidden; padding-left: 60px; min-height: 45px; } .contact-info-box .find-map-box .icon{ position: absolute; top: 0; left: 0; } .contact-info-box .find-map-box .icon span:before{ color: #575376; font-size: 45px; line-height: 45px; } .contact-info-box .find-map-box .text { display: block; margin: 9px 0; } .contact-info-box .find-map-box .text a{ color: #ffffff; } .contact-info-form{ position: relative; display: block; background: #ffffff; padding: 40px 40px 20px; border: 1px solid #f0eef9; border-radius: 7px; } .contact-info-form form { position: relative; display: block; } .contact-info-form form .input-box { position: relative; margin-bottom: 20px; } .contact-info-form form .input-box input[type=text], .contact-info-form form .input-box input[type=email], .contact-info-form form .input-box textarea{ position: relative; display: block; width: 100%; height: 55px; border: 1px solid #f0eef9; padding: 0 20px; color: #868298; font-size: 16px; font-weight: 400; border-radius: 5px; font-family: 'Rubik', sans-serif; transition: all 500ms ease; } .contact-info-form form .input-box textarea{ height: 205px; padding: 15px 20px; } .contact-info-form form .input-box button { padding: 19px 35px 18px; border-radius: 5px; } .contact-info-form form .input-box input[type=text]:focus{ border-color: #3a68b1; } .contact-info-form form .input-box input[type=email]:focus{ border-color: #3a68b1; } .contact-info-form form .input-box textarea:focus{ border-color: #3a68b1; } .contact-info-form form .input-box button:hover{} /*** ============================================= Brand Area Style ============================================= ***/ .brand-area{ position: relative; display: block; padding-bottom: 70px; } .single-brand-item { position: relative; display: block; max-width: 270px; width: 100%; text-align: center; margin: 0 auto 30px; border: 1px solid #f0eef9; transition: all 700ms ease; } .single-brand-item:hover{ -webkit-box-shadow: 0px 2px 10px 3px #f0eef9; box-shadow: 0px 2px 10px 3px #f0eef9; } .single-brand-item a{ display: block; } .single-brand-item a img{ width: auto; } /*** ============================================= Footer area style ============================================= ***/ .footer-social-nested a { width: 32px; height: 32px; background-color: rgba(200, 200, 200, 0.3); color: #fff; border-radius: 4px; display: flex; align-items: center; justify-content: center; } .single-footer-widget .contact-info a { transition: opacity .3s ease-in-out; } .single-footer-widget .contact-info a:hover { opacity: 0.8; } .footer-social-nested a:not(:last-child) { margin-right: 0.5rem; } .footer-area { background-color: #1a1f36; padding: 40px 0 10px; position: relative; color: #fff; } .footer-area::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(to right, #3A68B1, #1a1f36); } .footer-area .single-footer-widget { margin-bottom: 30px; } .footer-area .single-footer-widget .title h3 { color: #fff; font-size: 24px; font-weight: 600; margin-bottom: 25px; position: relative; padding-bottom: 15px; } .footer-area .single-footer-widget .title h3::after { content: ''; position: absolute; left: 0; bottom: 0; width: 50px; height: 2px; background: #3A68B1; } .footer-area .solutions-links li { margin-bottom: 12px; } .footer-area .solutions-links li a { color: #a9b0c7; transition: all 0.3s ease; position: relative; padding-left: 15px; } .footer-area .solutions-links li a:before { content: ''; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; background: #3A68B1; border-radius: 50%; transform: translateY(-50%); opacity: 0; transition: all 0.3s ease; } .footer-area .solutions-links li a:hover { color: #fff; padding-left: 20px; } .footer-area .solutions-links li a:hover:before { opacity: 1; } .footer-area .contact-info li { position: relative; padding-left: 30px; margin-bottom: 20px; } .footer-area .contact-info li .icon { position: absolute; left: 0; top: 4px; color: #3A68B1; } .footer-area .contact-info li .text h3 { color: #fff; font-size: 16px; margin-bottom: 5px; } .footer-area .contact-info li .text span { color: #a9b0c7; } .footer-area .footer-social-links { display: flex; gap: 15px; margin-top: 20px; } .footer-area .footer-social-links li a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: rgba(255,255,255,0.1); border-radius: 50%; color: #fff; transition: all 0.3s ease; } .footer-area .footer-social-links li a:hover { background: #3A68B1; transform: translateY(-3px); } .footer-bottom-area { background: #151828; padding: 20px 0; } .footer-bottom-area .copyright-text { color: #a9b0c7; } .footer-bottom-area .copyright-text a { color: #3A68B1; font-weight: 600; } /* Company Info Text Styles */ .company-info-text { color: #a9b0c7; line-height: 1.8; } .company-info-text .call-officers { display: flex; align-items: center; margin-top: 25px; padding: 20px; background: rgba(255,255,255,0.05); border-radius: 10px; } .company-info-text .call-officers .icon { width: 50px; height: 50px; background: #3A68B1; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 15px; } .company-info-text .call-officers .text span { display: block; color: #a9b0c7; margin-bottom: 5px; } .company-info-text .call-officers .text h3 { color: #fff; font-size: 20px; margin: 0; } .single-footer-widget .lat-project li .img-holder { position: relative; display: block; overflow: hidden; } .single-footer-widget .lat-project li .img-holder img{ transition: all 0.5s ease-in-out 0.6s; width: 100%; transform: scale(1.1, 1.1); } .single-footer-widget .lat-project li:hover .img-holder .overlay-style-one{ opacity: 1; } .single-footer-widget .lat-project li .img-holder .overlay-style-one .content a i{ color: #ffffff; font-size: 18px; filter: alpha(opacity=0); opacity: 0; transform: scale(3); transition: all 0.3s ease-in-out 0.3s; } .single-footer-widget .lat-project li:hover .img-holder .overlay-style-one .content a i{ filter: alpha(opacity=100); opacity: 1; transform: scale(1); transition-delay: 0.1s; } .single-footer-widget .lat-project li .img-holder .overlay-style-one .content a:hover i{ color: #222222; } .single-footer-widget .view-all-project{ position: relative; display: block; margin-top: 9px; } .single-footer-widget .view-all-project p{ color: #d9d7e8; line-height: 26px; } .single-footer-widget .view-all-project p a{ color: #3a68b1; font-weight: 500; transition: all 500ms ease; } .single-footer-widget .view-all-project p a:hover{ color: #d9d7e8; } /*** ============================================= Footer Bottom Area Style ============================================= ***/ .footer-bottom-area { position: relative; display: block; background: #26223b; padding: 32px 0 31px; } .footer-bottom-area .copyright-text { margin: 0; } .footer-bottom-area .copyright-text p { color: #d9d7e8; font-size: 16px; font-weight: 400; margin: 0; line-height: 22px; } .footer-bottom-area .copyright-text p a { color: #3a68b1; font-weight: 500; transition: all 500ms ease; } .footer-bottom-area .copyright-text p a:hover{ color: #d9d7e8; } .footer-menu { position: relative; display: block; } .footer-menu li { position: relative; display: inline-block; float: left; margin-right: 20px; padding-right: 20px; line-height: 22px; } .footer-menu li:before { position: absolute; top: 8px; right: -2px; width: 5px; height: 5px; background: #494465; border-radius: 50%; content: ""; transition: all 500ms ease; transition-delay: .1s; } .footer-menu li:last-child:before{ display: none; } .footer-menu li:last-child{ margin-right: 0; padding-right: 0; } .footer-menu li a{ position: relative; display: block; color: #d9d7e8; font-size: 16px; font-weight: 400; text-transform: uppercase; transition: all 500ms ease; transition-delay: .2s; } .footer-menu li a:hover{ color: #3a68b1; } /*** ============================================= Subscribe Area Style ============================================= ***/ .subscribe-area { position: relative; display: block; background: #3a68b1; padding-top: 25px; padding-bottom: 25px; } .subscribe-title { position: relative; display: block; margin: 9px 0 9px; } .subscribe-title h3{ color: #ffffff; font-size: 24px; line-height: 32px; } .subscribe-form{} .subscribe-form { position: relative; display: block; max-width: 470px; width: 100%; } .subscribe-form input[type="email"]{ position: relative; display: block; background: #ffffff; border: 1px solid #f2f2f2; color: #868298; font-size: 16px; height: 50px; width: 100%; margin-bottom: 0px; padding: 0 20px; padding-right: 130px; border-radius: 5px; transition: all 500ms ease; } .subscribe-form button { position: absolute; top: 5px; right: 5px; bottom: 5px; width: 120px; height: 40px; background: #3a68b1; text-align: center; color: #ffffff; font-size: 18px; font-weight: 400; line-height: 38px; border-radius: 5px; text-transform: capitalize; font-family: 'Rubik', sans-serif; transition: all 700ms ease; } /*** ============================================= Latest Blog Area s2 Style ============================================= ***/ .latest-blog-area-s2{ position: relative; display: block; padding-top: 40px; padding-bottom: 70px; } .blog-style2{ position: relative; display: block; } .single-blog-style2{ position: relative; display: block; border: 1px solid #f0eef9; margin-bottom: 30px; } .single-blog-style2 .meta-info { position: relative; display: block; overflow: hidden; margin-bottom: 19px; } .single-blog-style2 .meta-info li { position: relative; display: inline-block; float: left; line-height: 20px; margin-right: 40px; } .single-blog-style2 .meta-info li:last-child{ margin-right: 0; } .single-blog-style2 .meta-info li:before { position: absolute; right: -30px; bottom: 5px; width: 20px; height: 1px; background: #d5d3db; content: ""; display: block; } .single-blog-style2 .meta-info li:last-child:before{ display: none; } .single-blog-style2 .meta-info li a{ color: #868298; font-size: 16px; font-weight: 400; text-transform: capitalize; font-family: 'Rubik', sans-serif; transition: all 500ms ease; } .single-blog-style2 .meta-info li a span:before{ position: relative; top: 1px; color: #39345a; font-size: 16px; display: inline-block; padding-right: 8px; transition: all 500ms ease; } .single-blog-style2 .meta-info li a:hover{ color: #39345a; } .single-blog-style2 .blog-title{ position: relative; display: block; line-height: 28px; } .single-blog-style2 .blog-title a{ color: #393939; } .single-blog-style2 .post-date-readmore{ position: relative; display: block; margin-top: 34px; } .single-blog-style2 .post-date-readmore .post-date{ position: relative; display: block; } .single-blog-style2 .post-date-readmore .post-date span:before{ position: relative; display: inline-block; float: left; top: 6px; color: #39345a; font-size: 16px; padding-right: 8px; transition: all 500ms ease; } .single-blog-style2 .post-date-readmore .post-date p { position: relative; display: inline-block; float: left; color: #868298; margin: 0; line-height: 31px; } .single-blog-style2 .post-date-readmore .readmore{ display: block; line-height: 30px; } .single-blog-style2 .post-date-readmore .readmore a { display: inline-block; line-height: 30px; } .single-blog-style2.image-box{ position: relative; display: block; overflow: hidden; border: 0px solid; padding: 0; margin-bottom: 41px; } .single-blog-style2.image-box img{ width: 100%; } .single-blog-style2.image-box .overlay-box{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(26, 22, 46, 0.85); transition: all 500ms ease; transition-delay: 0.10s; padding: 46px 50px 30px; opacity: 1; } .single-blog-style2.image-box .meta-info li a{ color: #ffffff; } .single-blog-style2.image-box .meta-info li a span:before{ color: #ffffff; } .single-blog-style2.image-box .meta-info li a:hover{ color: #3a68b1; } .single-blog-style2.image-box .blog-title a{ color: #ffffff; } .single-blog-style2.image-box .post-date-readmore { margin-top: 170px; } .single-blog-style2.image-box .post-date-readmore .post-date span:before{ color: #ffffff; } .single-blog-style2.image-box .post-date-readmore .post-date p { color: #ffffff; } .single-blog-style2.image-box .post-date-readmore .readmore a { display: inline-block; color: #ffffff; line-height: 30px; } .more-blog-button{ position: relative; display: block; } .more-blog-button a { border: 1px solid #f0eef9; background: #ffffff; color: #222222; display: block; text-align: center; padding: 19px 0 19px; } .more-blog-button a:hover{ border-color: #dc571a; } /*** ============================================= Call To Action Area Style ============================================= ***/ .call-to-action-area{ position: relative; display: block; padding-top: 80px; } .call-to-action{ position: relative; display: block; overflow: hidden; padding-bottom: 20px; margin-bottom: 60px; } .call-to-action:before{ position: absolute; left: 0; bottom: 0px; width: 100%; height: 1px; background: #e9e8f0; content: ""; } .call-to-action:after{ position: absolute; left: 0; bottom: 0px; width: 60px; height: 1px; background: #3a68b1; content: ""; } .call_to_action_title { position: relative; display: block; float: left; margin: 16px 0; } .call_to_action_title .title{ color: #222222; font-size: 30px; font-weight: 600; line-height: 44px; text-transform: none; font-family: 'Poppins', sans-serif; } .call_to_action_text { position: relative; display: block; float: left; padding-left: 90px; max-width: 608px; margin: 30px 0; } .call_to_action_text p{ color: #222222; font-size: 20px; line-height: 30px; margin: 0; } .video-holder-box2{ position: relative; display: block; float: right; } .video-holder-box2 .icon-holder { position: relative; display: block; height: 120px; width: 120px; border-radius: 50%; padding: 9px; text-align: center; border: 1px solid #eae9f1; transition: all 500ms ease; } .video-holder-box2 .icon-holder .icon { display: block; height: 100%; width: 100%; border-radius: 50%; padding: 9px; border: 1px solid #eae9f1; } .video-holder-box2 .icon-holder .icon .inner { display: block; } .video-holder-box2 .icon-holder .icon .inner a{ position: relative; display: block; height: 80px; width: 80px; background: #3a68b1; color: #ffffff; line-height: 80px; border-radius: 50%; text-align: center; transition: all 500ms ease; } .video-holder-box2 .icon-holder .icon .inner a span:before{ font-size: 20px; } .video-holder-box2:hover .icon-holder .icon .inner a{ transform: rotate(360deg); background:rgb(3, 46, 235); } /*** ============================================= Quote Area Style2 Style ============================================= ***/ .choose-area.style2 { position: relative; display: block; background: #ffffff; padding-top: 0; padding-bottom: 60px; z-index: 1; } .choose-area.style2::before { display: none; } .single-choose-item.style2 { position: relative; display: block; background: #ffffff; padding: 55px 15px 52px; border: 1px solid #e9e8f0; margin-bottom: 40px; transition: all 500ms ease; } .single-choose-item.style2:hover{ border: 1px solid transparent; -webkit-box-shadow: 0px 2px 10px 3px #f0eef9; box-shadow: 0px 2px 10px 3px #f0eef9; } .single-choose-item.style2 .iocn-holder { display: block; margin-bottom: 35px; } .single-choose-item.style2 .title h3 { color: #222222; margin: 0 0 33px; } .single-choose-item.style2 .text p { color: #868298; margin: 0; } /*** ============================================= Capabilities Area Style ============================================= ***/ .capabilities-area{ position: relative; display: block; background: #f8f7ff; padding: 100px 0 100px; } .capabilities-image{ position: relative; display: block; } .capabilities-image img{ width: 100%; } .capabilities-content{ position: relative; display: block; } .capabilities-content .icon{ display: block; margin-bottom: 20px; } .capabilities-content .icon span:before{ color: #3a68b1; font-size: 65px; line-height: 65px; } .capabilities-content h1{ color: #222222; font-size: 30px; font-weight: 700; text-transform: uppercase; margin: 0 0 6px; } .capabilities-content span{ color: #222222; font-size: 18px; } .capabilities-content p { margin: 26px 0 0; } .capabilities-content ul { position: relative; display: block; margin-top: 20px; margin-bottom: 33px; } .capabilities-content ul li{ position: relative; display: block; padding-left: 30px; color: #222222; font-size: 18px; line-height: 40px; } .capabilities-content ul li:before { position: absolute; top: 10px; left: 0; content: "\e905"; font-family: 'icomoon'; color: #3a68b1; font-size: 20px; line-height: 20px; } .capabilities-content a.btn-one span:before{ color: #ffffff; } /*** ============================================= Working Process Area Style ============================================= ***/ .working-process-area { position: relative; display: block; background-attachment: fixed; background-size: cover; background-position: center top; background-repeat: no-repeat; padding: 96px 0 52px; z-index: 1; } .working-process-area::before { background: rgba(26, 22, 46, 0.90) none repeat scroll 0 0; position: absolute; top: 0; left: 0; height: 100%; width: 100%; content: ""; z-index: -1; } .working-process-item{ position: relative; display: block; padding-left: 80px; margin-bottom: 40px; } .working-process-item .icon{ position: absolute; top: 4px; left: 0; width: 80px; } .working-process-item .icon span:before { position: relative; display: block; background: #1a172c; width: 80px; height: 80px; border-radius: 50%; border: 1px solid #2d2944; text-align: center; color: #817d93; font-size: 35px; padding: 21px 0; z-index: 1; } .working-process-item:hover .icon span:before { background: #3a68b1; border-color: #3a68b1; color: #ffffff; transition: all 0.5s ease-in-out 0s; transform-style: preserve-3d; transform: perspective(0px) rotateX(0deg) rotate(360deg); z-index: 1; } .working-process-item .icon h2{ display: block; text-align: center; color: #2c2941; font-size: 30px; font-weight: 500; margin: 3px 0 0; text-transform: uppercase; } .working-process-item .text{ position: relative; display: block; padding-left: 30px; } .working-process-item .text h3{ color: #ffffff; margin: 0 0 3px; } .working-process-item .text span{ color: #3a68b1; } .working-process-item .text p{ margin: 16px 0 0; } /*** ============================================= Testimonial Area Style ============================================= ***/ .testimonial-area { position: relative; display: block; overflow: hidden; padding-top: 40px; } .testimonial-image { position: relative; display: block; min-height: 600px; max-width: 570px; width: 100%; } .testimonial-image .img-box{ position: absolute; bottom: 0; left: -180px; max-width: 570px; height: 600px; } .testimonial-image .quote-icon-box{ position: absolute; top: 145px; right: 30px; width: 270px; height: 270px; border: 1px solid #f0eef9; border-radius: 50%; padding: 40px; } .testimonial-image .quote-icon-box .inner{ width: 100%; height: 100%; border: 1px solid #f0eef9; border-radius: 50%; padding: 40px; } .testimonial-image .quote-icon-box .inner .icon { width: 100%; height: 100%; background: #3a68b1; border-radius: 50%; padding: 32px 0 30px; text-align: center; } .testimonial-content{ position: relative; display: block; padding-top: 60px; } .single-testimonial-item{ position: relative; display: block; } .single-testimonial-item .company-logo{ display: block; margin-bottom: 0px; } .single-testimonial-item .company-logo img{ width: auto; } .single-testimonial-item .text{ margin-bottom: 25px; } .single-testimonial-item .text p{ font-size: 18px; line-height: 30px; margin: 0; } .single-testimonial-item .client-info{ display: block; } .single-testimonial-item .client-info h3{ color: #222222; margin: 0 0 4px; } .single-testimonial-item .client-info span{ color: #3a68b1; } .single-testimonial-item .button{ position: relative; display: block; margin-top: 50px; padding-left: 200px; } .single-testimonial-item .button a{ position: relative; top: 7px; color: #222222; } .testimonial-content .owl-theme .owl-nav { position: absolute; left: 0; bottom: -20px; margin: 0; } .testimonial-content .owl-theme .owl-nav [class*="owl-"] { background: transparent; color: #3a68b1; font-size: 25px; font-weight: 400; height: 55px; width: 55px; line-height: 52px; margin: 0; padding: 0; border: 1px solid #f0eef9; transition: all 700ms ease 0s; border-radius: 50%; } .testimonial-content .owl-theme .owl-nav .owl-next { margin-left: 10px; } .testimonial-content .owl-theme .owl-nav [class*="owl-"]:hover{ border-color: #3a68b1; color: #3a68b1; } /*** ============================================= Breadcrumb area style ============================================= ***/ .breadcrumb-area { position: relative; background-attachment: scroll; background-position: center top; background-repeat: no-repeat; background-size: cover; border-top: 3px solid #241f40; padding: 140px 0 132px; z-index: 1; } .breadcrumb-area::before { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: rgba(248, 247, 255, 0.85) none repeat scroll 0 0; content: ""; z-index: -1; } .breadcrumb-area .inner-content { position: relative; display: block; padding-top: 28px; } .breadcrumb-area .title { display: block; } .breadcrumb-area .title h1{ color: #222222; font-size: 50px; line-height: 60px; font-weight: 700; text-transform: capitalize; margin: 0 0 10px; } .breadcrumb-area .title p{ color: #3a68b1; font-size: 20px; line-height: 30px; margin: 0; } /*** ============================================= History Area style ============================================= ***/ .history-area{ position: relative; display: block; background: #1a172c; } .history-image { position: relative; display: block; margin-right: -65px; } .history-image img { max-width: none; float: right; } .history-content { position: relative; display: block; margin-left: 35px; padding-left: 65px; } .history-content .arrow-box { position: absolute; top: 50%; left: -80px; width: 120px; transform: rotate(180deg); margin-top: -59px; } .history-content .arrow-box span:before{ color: #1a172c; font-size: 125px; line-height: 125px; } .accordion-holder { position: relative; display: block; padding-top: 95px; padding-bottom: 70px; } .accordion-holder .accordion { position: relative; display: block; } .accordion-holder .accordion .acc-btn { position: relative; display: block; padding-left: 160px; cursor: pointer; z-index: 2; margin-bottom: 30px; } .accordion-holder .accordion .acc-btn:before { position: absolute; top: 5px; bottom: -35px; left: 160px; width: 1px; height: auto; background: #2e2a45; content: ""; } .accordion-holder .accordion .acc-btn .year { position: absolute; top: 0px; left: 0px; width: 160px; } .accordion-holder .accordion .acc-btn .year:before { position: absolute; top: 5px; right: -8px; width: 15px; height: 15px; background: #3a68b1; border: 5px solid #1a172c; content: ""; border-radius: 50%; z-index: 3; transition: all 900ms ease; } .accordion-holder .accordion .acc-btn .year h3{ color: #e3e2ec; font-size: 20px; line-height: 26px; transition: all 500ms ease; } .accordion-holder .accordion .acc-btn.active .year:before{ border: 5px solid #ffffff; } .accordion-holder .accordion .acc-btn.active .year h3{ color: #3a68b1; } .accordion-holder .accordion .acc-btn .title { position: relative; display: block; padding-left: 40px; } .accordion-holder .accordion .acc-btn .title h3 { color: #ffffff; font-size: 20px; line-height: 26px; transition: all 700ms ease; } .accordion-holder .accordion .acc-btn.active .title h3{ color: #3a68b1; } .accordion-holder .accordion .acc-content { position: relative; display: none; } .accordion-holder .accordion .acc-content .inner { position: relative; display: block; padding: 0px 0px 30px; padding-left: 200px; } .accordion-holder .accordion .acc-content .inner:before { position: absolute; top: 0px; bottom: -5px; left: 160px; width: 1px; background: #2e2a45; content: ""; transition: all 500ms ease; } .accordion-holder .accordion .acc-content p{ color: #868298; margin: 0; } .accordion-holder .accordion .acc-content.collapsed{ display:block; } /*** ============================================= Testimonial Area S2 style ============================================= ***/ .testimonial-area-s2{ position: relative; display: block; background: #ffffff; padding: 100px 0 100px; } .testimonial_s2_title{ position: relative; display: inline-block; float: left; } .testimonial_s2_text { position: relative; display: inline-block; float: left; max-width: 670px; width: 100%; padding-left: 80px; margin-top: -7px; } .testimonial_s2_text p{ color: #222222; font-size: 20px; line-height: 30px; margin: 0; } .testimonial_s2_button { float: right; margin-top: -6px; } .single-testimonial-style2{ position: relative; display: block; border: 1px solid #f0eef9; padding: 32px 35px 39px; border-radius: 7px; } .single-testimonial-style2 .text{ display: block; padding-bottom: 25px; } .single-testimonial-style2 .text p{ line-height: 28px; margin: 0; } .single-testimonial-style2 .client-name { display: block; padding-bottom: 32px; } .single-testimonial-style2 .client-name h3{ color: #222222; font-size: 18px; margin: 0 0 2px; } .single-testimonial-style2 .client-name span{ color: #3a68b1; } .single-testimonial-style2 .logo-box { position: relative; display: block; border: 1px solid #f0eef9; border-bottom: none; padding: 19px 0; } .single-testimonial-style2 .logo-box:before{ position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #f0eef9; content: ""; } .single-testimonial-style2 .company-logo { display: block; overflow: hidden; width: 100%; height: 45px; text-align: center; padding: 0 50px; } .single-testimonial-style2 .company-logo img{ width: auto; } .testimonial-area-s2 .inner-content{ overflow: hidden; } .testimonial-area-s2 .owl-carousel{ display:block; max-width: 370px; width:100%; margin: 0 auto; } .testimonial-area-s2 .owl-carousel .owl-stage-outer{ overflow: visible; padding: 0px 0px 50px; } .testimonial-area-s2 .owl-carousel .owl-stage-outer .owl-item.active .single-testimonial-style2{ transform: translateY(0px); -webkit-box-shadow: 0px 2px 9px 2px #f0eef9; box-shadow: 0px 2px 9px 2px #f0eef9; border: 1px solid transparent; } .testimonial-area-s2 .owl-dots { position: relative; display: block; margin: 0px !important; line-height: 4px; } .testimonial-area-s2 .owl-dots .owl-dot{ background-image:none; width: 7px; height: 7px; margin: 0px 5px; border: 0px solid #cecece; padding: 0px; background: #bfbccb; border-radius: 0%; transition: all 500ms ease; display: inline-block; } .testimonial-area-s2 .owl-dots .owl-dot span{ display:none; } .testimonial-area-s2 .owl-dots .owl-dot.active{ width: 14px; background: #3a68b1; border-radius: 0; } .testimonial-area-s2 .owl-dots .owl-dot:hover{ width: 14px; background: #3a68b1; border-radius: 0; } /*** ============================================= Single Service Area style ============================================= ***/ .certifications-area{ position: relative; background-attachment: scroll; background-size: cover; background-position: center top; background-repeat: no-repeat; padding: 100px 0 100px; z-index: 1; } .certifications-area:before{ background: rgba(26, 22, 46, 0.90) none repeat scroll 0 0; position: absolute; top: 0; left: 0; height: 100%; width: 100%; content: ""; z-index: -1; } .sec-title.certifications-title{} .sec-title.certifications-title .title{} .sec-title.certifications-title .title span{ color: #ffffff; } .sec-title.certifications-title .title span:before { background: #4e4a6d; } .sec-title.certifications-title p{ color: #ffffff; } .single-certifications { display: block; max-width: 170px; width: 100%; margin: 0 auto; background: #39345a; border: 1px solid #4e4a6d; text-align: center; padding: 30px 0 23px; transition: all 900ms ease; } .single-certifications .icon{ display: block; padding: 0 0 21px; } .single-certifications .icon span:before{ color: #ffffff; font-size: 75px; line-height: 75px; transition: all 900ms ease; transition-delay: .3s; } .single-certifications .title{ display: block; } .single-certifications .title h3{ color: #ffffff; font-size: 18px; text-transform: uppercase; transition: all 900ms ease; transition-delay: .5s; } .certifications-area .outer-box{ max-width: 670px; width: 100%; margin: 0 auto; } .certifications{ overflow: hidden; max-width: 570px; width: 100%; margin: 0 auto; } .certifications-area .owl-carousel{ display: block; max-width: 170px; width: 100%; margin: 0 auto; } .certifications-area .owl-carousel .owl-stage-outer{ overflow: visible; padding: 0px 0px 40px; } .certifications-area .owl-carousel .owl-stage-outer .owl-item.active .single-certifications{ background: #ffffff; border-color: #ffffff; } .certifications-area .owl-carousel .owl-stage-outer .owl-item.active .single-certifications .icon span:before{ color: #3a68b1; } .certifications-area .owl-carousel .owl-stage-outer .owl-item.active .single-certifications .title h3{ color: #222222; } .certifications-area .owl-dots { position: relative; display: block; margin: 0px !important; line-height: 4px; } .certifications-area .owl-dots .owl-dot{ background-image:none; width: 7px; height: 7px; margin: 0px 5px; border: 0px solid #cecece; padding: 0px; background: #bfbccb; border-radius: 0%; transition: all 500ms ease; display: inline-block; } .certifications-area .owl-dots .owl-dot span{ display:none; } .certifications-area .owl-dots .owl-dot.active{ width: 14px; background: #3a68b1; border-radius: 0; } .certifications-area .owl-dots .owl-dot:hover{ width: 14px; background: #3a68b1; border-radius: 0; } /*** ============================================= Team Area style ============================================= ***/ .team-area { position: relative; display: block; padding-top: 100px; padding-bottom: 58px; } .team_s2_title{ position: relative; display: inline-block; float: left; } .team_s2_text { position: relative; display: inline-block; float: left; max-width: 670px; width: 100%; padding-left: 80px; margin-top: -7px; } .team_s2_text p{ color: #222222; font-size: 20px; line-height: 30px; margin: 0; } .team_s2_button { float: right; margin-top: -6px; } .single-team-member { position: relative; display: block; margin-bottom: 40px; transition: all 500ms ease; } .single-team-member .img-holder { position: relative; display: block; overflow: hidden; border-bottom: 3px solid #39345a; transition: all 0.4s ease-in-out 0s; } .single-team-member .img-holder::before { background: rgba(60, 55, 90, 0.85); top: 0px; left: 0px; bottom: 0px; right: 0px; content: ""; opacity: 0; position: absolute; z-index: 1; transition: all 0.4s ease-in-out 0s; } .single-team-member:hover .img-holder::before{ opacity: 1; } .single-team-member .img-holder img{ width: 100%; transition: all 0.4s ease-in-out 0s; } .single-team-member:hover .img-holder img{ transform: translateX(0%) translateY(0px) scale(1.0); } .single-team-member .name { position: relative; display: block; background: #ffffff; padding: 19px 0 0; z-index: 1; transform: translateX(0%) translateY(0px) scale(1.0); transition: all 500ms ease; transition-delay: .4s; } .single-team-member:hover .name{ transform: translateX(0%) translateY(0px) scale(0); } .single-team-member .name.overlay-content { position: absolute; left: 0; right: 0; bottom: -75px; display: block; z-index: 3; padding: 24px 0px 5px; background: #ffffff; opacity: 0; transition: all 0.4s ease-in-out 0s; border-top: 3px solid #3a68b1; -webkit-box-shadow: 0px 3px 6px 1px #f5f5f5; box-shadow: 0px 3px 6px 1px #f5f5f5; margin: 0; } .single-team-member:hover .name.overlay-content{ opacity: 1; transform: translateX(0%) translateY(-77px) scale(1); } .single-team-member .name h3{ display: block; color: #222222; font-size: 18px; font-weight: 600; margin: 0 0 8px; transition: all 500ms ease; transition-delay: .4s; } .single-team-member .name p{ margin: 0; line-height: 14px; } .single-team-member .name.overlay-content p{ color: #3a68b1; } .single-team-member .sociallinks-style-one { position: relative; display: block; overflow: hidden; padding: 15px 0 20px; } .single-team-member .sociallinks-style-one ul{ text-align: center; } .single-team-member .sociallinks-style-one li { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; color: #fff; transition: all 0.3s ease; } .single-team-member .sociallinks-style-one li:hover { background-color: #3A68B1; color: #fff; } /*** ============================================= About Area Style2 style ============================================= ***/ .about-area.Style2{ position: relative; display: block; padding: 100px 0 100px; } .mission-vision-content{ position: relative; display: block; margin-top: 63px; } .mission-vision-tab-box { position: relative; display: block; width: 50%; background: #39345a; float: left; padding: 60px 50px 60px; } .mission-vision-tab-box .sec-title { padding-bottom: 58px; } .mission-vision-tab-box .sec-title .title{} .mission-vision-tab-box .sec-title .title span { color: #ffffff; font-size: 18px; font-weight: 600; line-height: 28px; } .mission-vision-tab-box .sec-title .title span:before { background: #4e4a6d; } .mission-vision-tab-box .sec-title .title span:after { background: #4e4a6d; } .mission-vision-tab-box .inner-content{ position: relative; display: block; padding-right: 50px; } .mission-vision-tab-box .inner-content h2 { color: #ffffff; font-size: 24px; line-height: 30px; margin: 0 0 27px; } .mission-vision-tab-box .inner-content p{ color: #ffffff; margin: 0; } .mission-vision-tab-box .tab-btns { position: relative; display: block; overflow: hidden; padding-top: 33px; } .mission-vision-tab-box .tab-btns li { position: relative; display: inline-block; float: left; margin-right: 30px; padding-right: 30px; padding-left: 45px; border-right: 1px solid #4e4a6d; cursor: pointer; } .mission-vision-tab-box .tab-btns li:last-child{ margin-right: 0; padding-right: 0; border: none; } .mission-vision-tab-box .tab-btns li .icon { position: absolute; top: 7px; left: 0; } .mission-vision-tab-box .tab-btns li .icon span:before{ color: #75718c; font-size: 30px; line-height: 30px; } .mission-vision-tab-box .tab-btns li .title{} .mission-vision-tab-box .tab-btns li .title h3{ color: #75718c; font-size: 18px; line-height: 24px; } .mission-vision-tab-box .tab-btns li.active-btn .icon span:before, .mission-vision-tab-box .tab-btns li.active-btn .title h3{ color: #ffffff; } .mission-vision-tab-box .tab-content-box { position: relative; display: block; } .mission-vision-tab-box .tab-content-box .single-tab-content{ position: absolute; left: 0px; top: 0px; width: 100%; height: auto; visibility: hidden; } .mission-vision-tab-box .tab-content-box .single-tab-content.active-tab { position: relative; visibility: visible; z-index: 5; } .mission { position: absolute; top: 102px; right: -108px; } .vision { position: absolute; top: 102px; right: -85px; } .mission-vision-image{ position: relative; display: block; width: 50%; float: right; } /*** ============================================= Choose Area style3 style ============================================= ***/ .choose-area.style3{ position: relative; display: block; background: #f8f7ff; padding: 100px 0 60px; } .choose-area.style3:before{ display: none; } .choose-area.style3 .sec-title .title span:before { background: #ebe6e6; } .choose-area.style3 .sec-title p { color: #222222; } .choose-area.style3 .single-choose-item.style2 { background: #f8f7ff; padding: 55px 15px 52px; border: 1px solid #e9e8f0; margin-bottom: 40px; border-radius: 6px; } .choose-area.style3 .single-choose-item.style2:hover{ background: #ffffff; border: 1px solid transparent; } /*** ============================================= Single Service Area style ============================================= ***/ .single-service-area{ position: relative; display: block; padding: 100px 0 92px; } .sec-title-box { position: relative; display: block; overflow: hidden; padding-bottom: 36px; margin-top: -8px; } .sec-title-box.style2{ margin-top: -7px; padding-bottom: 42px; } .sec-title-box h2{ color: #222222; font-size: 30px; line-height: 38px; font-weight: 700; text-transform: uppercase; margin: 0 0 14px; } .sec-title-box h3{ color: #222222; font-size: 24px; line-height: 32px; font-weight: 700; text-transform: uppercase; margin: 0 0 16px; } .sec-title-box span{ color: #222222; font-size: 18px; font-weight: 500; line-height: 28px; } .sec-title-box p{ margin: 0; } .single-service-top { position: relative; display: block; } .single-service-top .text{ position: relative; display: block; padding-bottom: 42px; } .single-service-top .text p{ margin: 0; } .single-service-top .img-holder{ position: relative; display: block; } .single-service-top .img-holder img{ width: 100%; transition: all 0.4s ease-in-out 0s; } .single-service-top .img-holder .video-box { position: absolute; top: 40px; right: 40px; width: 150px; height: 150px; display: block; padding-left: 20px; padding-top: 25px; z-index: 2; } .single-service-top .img-holder .video-box:before{ position: absolute; top: 0; left: 0; width: 150px; height: 150px; background: url(../images/icon/service-video-bg.png); content: ""; z-index: -1; } .single-service-top .img-holder .video-box a span:before{ color: #ffffff; font-size: 35px; line-height: 35px; } .single-service-top .img-holder .video-box h4{ color: #ffffff; font-size: 16px; font-weight: 500; line-height: 22px; margin: 20px 0 0; } .service-provide{ position: relative; display: block; overflow: hidden; margin-top: 80px; } .service-provide .single-provide{ position: relative; display: block; max-width: 370px; width: 100%; margin: 0 auto 30px; } .service-provide .single-provide:before { position: absolute; left: 0; right: 0; bottom: 0px; width: 50px; height: 3px; margin: 0 auto; background: #3a68b1; content: ""; z-index: 3; } .service-provide .single-provide:after { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 3px; background: #3a68b1; content: ""; transform: scaleX(0); transition: all 500ms ease; transition-delay: .9s; z-index: 3; } .service-provide .single-provide:hover:after{ transform: scaleX(1.0); } .service-provide .single-provide .img-holder{ position: relative; display: block; overflow: hidden; } .service-provide .single-provide .img-holder img{ width: 100%; transition: all 500ms ease; } .service-provide .single-provide:hover .img-holder img{ transform: scale(1.1); } .service-provide .single-provide .img-holder .static-box{ position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; background: rgba(60, 55, 90, 0.85); content: ""; opacity: 1; transform: scale(1.0); z-index: 1; transition: all 500ms ease; } .service-provide .single-provide:hover .img-holder .static-box{ opacity: 0; transform: scale(0); } .service-provide .single-provide .img-holder .static-box .content{ display: table; width: 100%; height: 100%; } .service-provide .single-provide .img-holder .static-box .content .title{ display: table-cell; vertical-align: middle; text-align: center; } .service-provide .single-provide .img-holder .static-box .content .title h3{ color: #ffffff; filter: alpha(opacity=0); opacity: 1; transform: scale(1.0); transition: all 900ms ease; transition-delay: .3s; } .service-provide .single-provide:hover .img-holder .static-box .content .title h3{ transform: scale(0.0); } .service-provide .single-provide .img-holder .overlay-box{ position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; background: rgba(60, 55, 90, 0.85); content: ""; opacity: 0; transform: scale(0) z-index: 1; transition: all 900ms ease; } .service-provide .single-provide:hover .img-holder .overlay-box{ opacity: 1; transform: scale(1.0) } .service-provide .single-provide .img-holder .overlay-box .content{ display: table; width: 100%; height: 100%; } .service-provide .single-provide .img-holder .overlay-box .content .text{ display: table-cell; vertical-align: middle; text-align: center; } .service-provide .single-provide .img-holder .overlay-box .content .text p{ color: #ffffff; margin: 0; filter: alpha(opacity=0); opacity: 0; transform: scale(3); transition: all 900ms ease; transition-delay: .3s; } .service-provide .single-provide:hover .img-holder .overlay-box .content .text p{ opacity: 1; transform: scale(1.0); } .team-support { position: relative; display: block; margin-top: 44px; } .team-support h2 { font-size: 24px; font-weight: 700; line-height: 32px; margin: 0 0 41px; } .team-support ul{ position: relative; display: block; overflow: hidden; } .team-support ul li{ position: relative; display: block; padding-left: 45px; margin-bottom: 26px; } .team-support ul li:last-child{ margin-bottom: 0; } .team-support ul li .icon { position: absolute; top: 7px; left: 0; } .team-support ul li .icon span:before{ color: #3a68b1; font-size: 25px; line-height: 25px; } .team-support ul li .text{ position: relative; display: block; } .team-support ul li .text h3{ margin: 0 0 13px; } .team-support ul li .text p{ margin: 0; } .team-support .img-holder{ position: relative; display: block; margin-top: 6px; } .statistical-overview { position: relative; display: block; overflow: hidden; margin-top: 76px; } .statistical-overview .sec-title-box.style2{ } .statistical-overview .chart-box{ position: relative; display: block; border: 1px solid #f0eef9; padding: 33px 30px 37px; } .statistical-overview .chart-box h3{ font-size: 18px; margin: 0 0 18px; } .statistical-overview .chart-box .inner-chart{ position: relative; display: block; } .business-growth{ position: relative; display: block; overflow: hidden; margin-top: 60px; } .business-growth-left{ position: relative; display: block; border: 1px solid #f0eef9; padding: 36px 40px 31px; } .business-growth-left h5{ font-size: 14px; font-weight: 700; text-transform: uppercase; margin: 0 0 15px; } .business-growth-left h1 { font-size: 60px; font-weight: 700; margin: 0 0 15px; line-height: 50px; text-transform: uppercase; } .business-growth-left h3{ font-size: 24px; font-weight: 700; margin: 0 0 19px; } .business-growth-left p{ margin: 0; } .business-growth-right{ position: relative; display: block; } .business-growth-right p{ margin: 0; } .business-growth-right ul { display: block; overflow: hidden; margin-top: 11px; } .business-growth-right ul li{ line-height: 36px; } .single-service-bottom-box{ position: relative; display: block; overflow: hidden; width: 100%; margin-top: 80px; border-top: 1px solid #f0eef9; padding-top: 54px; } .single-service-bottom-box:before { position: absolute; top: 60px; bottom: 8px; left: 50%; width: 1px; background: #f0eef9; content: ""; } .single-service-bottom-box .single-item{ position: relative; display: block; max-width: 330px; width: 100%; padding-left: 90px; } .single-service-bottom-box .single-item.left{ float: left; } .single-service-bottom-box .single-item.right{ float: right; } .single-service-bottom-box .single-item .icon{ position: absolute; top: 6px; left: 0; } .single-service-bottom-box .single-item .icon span:before{ color: #1a172c; font-size: 65px; line-height: 65px; } .single-service-bottom-box .single-item .text{ position: relative; display: block; } .single-service-bottom-box .single-item .text p{ margin: 0 0 11px; } .single-service-bottom-box .single-item .text p span{ color: #222222; text-transform: uppercase; } .single-service-bottom-box .single-item .text a{} .single-service-sidebar{ position: relative; display: block; } .service-sidebar-title{ position: relative; display: block; padding-bottom: 27px; } .service-sidebar-title h3 { color: #222222; font-size: 20px; line-height: 20px; font-weight: 700; text-transform: capitalize; } .single-service-sidebar .single-sidebar{ position: relative; display: block; border: 1px solid #f0eef9; padding: 38px 30px 40px; margin-bottom: 50px; } .single-service-sidebar .service-pages{ display: block; } .single-service-sidebar .service-pages li{ position: relative; display: block; margin-bottom: 10px; z-index: 5; } .single-service-sidebar .service-pages li:last-child{ margin-bottom: 0; } .single-service-sidebar .service-pages li:before { position: absolute; top: 0; left: -30px; right: -30px; height: 1px; background: #f0eef9; content: ""; z-index: 3; transition: all 500ms ease; transition-delay: .2s; opacity: 0; } .single-service-sidebar .service-pages li:after { position: absolute; bottom: 0; left: -30px; right: -30px; height: 1px; background: #f0eef9; content: ""; z-index: 3; transition: all 500ms ease; transition-delay: .2s; opacity: 0; } .single-service-sidebar .service-pages li:hover:before, .single-service-sidebar .service-pages li.active:before{ opacity: 1; } .single-service-sidebar .service-pages li:hover:after, .single-service-sidebar .service-pages li.active:after{ opacity: 1; } .single-service-sidebar .service-pages li a{ position: relative; display: block; background: #f8f7ff; border: 1px solid #f0eef9; padding: 14px 20px 13px; color: #868298; font-size: 16px; font-weight: 500; text-transform: capitalize; font-family: 'Poppins', sans-serif; transition: all 500ms ease; transition-delay: .2s; } .single-service-sidebar .service-pages li a:hover, .single-service-sidebar .service-pages li.active a{ background: #ffffff; padding-left: 35px; color: #222222; border: 1px solid transparent; } .single-service-sidebar .service-pages li a:before { position: absolute; top: 0; left: 0; bottom: 0; font-family: 'icomoon'; content: "\e9b3"; color: #3a68b1; font-size: 16px; line-height: 16px; margin: 19px 0; transition: all 500ms ease; transition-delay: .1s; opacity: 0; transform: scale(0) } .single-service-sidebar .service-pages li a:hover:before, .single-service-sidebar .service-pages li.active a:before{ opacity: 1; transform: scale(1) } .single-service-sidebar .our-brochures { position: relative; display: block; } .single-service-sidebar .our-brochures li { position: relative; display: block; border: 1px solid #f0eef9; padding: 13px 60px 12px; padding-right: 0; margin-bottom: 20px; transition: all 500ms ease; } .single-service-sidebar .our-brochures li:hover{ -webkit-box-shadow: 0px 2px 10px 3px #f0eef9; box-shadow: 0px 2px 10px 3px #f0eef9; } .single-service-sidebar .our-brochures li:last-child{ margin-bottom: 0; } .single-service-sidebar .our-brochures li .icon-holder { position: absolute; top: 27px; left: 19px; margin: 0; } .single-service-sidebar .our-brochures li .icon-holder span:before{ color: #39345a; font-size: 25px; line-height: 25px; } .single-service-sidebar .our-brochures li .title-holder{} .single-service-sidebar .our-brochures li .title-holder h3 { color: #222222; font-size: 16px; font-weight: 500; line-height: 24px; margin: 0 0 2px; } .single-service-sidebar .our-brochures li .title-holder h3 span{ color: #868298; font-weight: 400; font-family: 'Rubik', sans-serif; } .single-service-sidebar .our-brochures li .title-holder a{ color: #868298; } .single-service-sidebar .our-brochures li .title-holder a span:before{ transform: scale(0); transition: all 500ms ease; } .single-service-sidebar .our-brochures li .title-holder a:hover span:before{ color: #3a68b1; transform: scale(1.0); } .single-service-sidebar .our-brochures li .title-holder a:hover{ color: #3a68b1; } .single-sidebar .lat-projects { position: relative; display: block; } .single-sidebar .lat-projects li { position: relative; display: block; margin-bottom: 20px; padding-bottom: 20px; padding-left: 80px; border-bottom: 1px solid #f0eef9; min-height: 80px; } .single-sidebar .lat-projects li:last-child{ margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .single-sidebar .lat-projects li .img-holder { position: absolute; top: 0px; left: 0; width: 80px; height: 80px; overflow: hidden; } .single-sidebar .lat-projects li .img-holder img { transition: all 0.4s ease-in-out 0.5s; width: 100%; transform: scale(1.0, 1.0); } .single-sidebar .lat-projects li:hover .img-holder img { transition-delay: 0s; transform: scale(1.2, 1.2); } .single-sidebar .lat-projects li .img-holder .overlay-style-one .box .content a i{ color: #fff; font-size: 16px; transition: all 500ms ease; } .single-sidebar .lat-projects li:hover .img-holder .overlay-style-one{ filter: alpha(opacity=100); opacity: 1; } .single-sidebar .lat-projects li .img-holder .overlay-style-one .box .content a:hover i{ color: #0a1821; } .single-sidebar .lat-projects li .title-holder { padding-left: 20px; } .single-sidebar .lat-projects li .title-holder .post-title { position: relative; font-size: 16px; line-height: 26px; font-weight: 600; margin: 0 0 1px; } .single-sidebar .lat-projects li .title-holder .post-title a{ color: #222222; transition: all 500ms ease; } .single-sidebar .lat-projects li .title-holder .post-title a:hover{ color: #3a68b1; } .single-sidebar .lat-projects li .title-holder span { color: #f36724; } .single-sidebar .lat-projects li .title-holder .button{ display: block; } .single-sidebar .lat-projects li .title-holder .button a p{ display: inline-block; font-size: 16px; margin: 0; transform: scale(0); transition: all 500ms ease; transition-delay: .2s; } .single-sidebar .lat-projects li .title-holder .button a:hover p{ transform: scale(1.0); } .single-sidebar .lat-projects li .title-holder .button a span:before { top: 3px; transition: all 500ms ease; transition-delay: .1s; transform: translate3d(-93px, 0px, 0px); } .single-sidebar .lat-projects li .title-holder .button a:hover span:before{ transform: translate3d(0px, 0px, 0px); } .sidebar-contact-box{ position: relative; display: block; overflow: hidden; background: #39345a; padding: 45px 30px 50px; } .sidebar-contact-box h3{ color: #ffffff; font-weight: 700; margin: 0 0 3px; } .sidebar-contact-box span{ color: #ffffff; } .sidebar-contact-box ul { position: relative; display: block; overflow: hidden; border-top: 1px solid #4e4a6d; margin: 12px 0 0; padding: 23px 0 0; } .sidebar-contact-box ul li{ color: #ffffff; font-size: 18px; line-height: 28px; } .sidebar-contact-box a{ margin-top: 22px; background: #ffffff; color: #3a68b1; padding: 17px 30px 17px; } /*** ============================================= Testimonial Page Sec style ============================================= ***/ .testimonial-page-sec{ position: relative; display: block; padding: 100px 0 20px; } .single-testimonial-box{ position: relative; display: block; margin-bottom: 80px; transition: all 500ms ease; } .single-testimonial-box:hover{} .single-testimonial-box .company-logo{ position: relative; display: block; } .single-testimonial-box .company-logo img{ width: auto; } .single-testimonial-box .text-holder{ position: relative; display: block; } .single-testimonial-box .text-holder .text { display: block; margin-top: -6px; margin-bottom: 32px; } .single-testimonial-box .text-holder .text p{ margin: 0; } .single-testimonial-box .text-holder .client-info{ position: relative; display: block; } .single-testimonial-box .text-holder .client-info .img-box{ width: 90px; } .single-testimonial-box .text-holder .client-info .img-box img{ width: 70px; height: 70px; border-radius: 50%; } .single-testimonial-box .text-holder .client-info .img-box, .single-testimonial-box .text-holder .client-info .name-box{ display: table-cell; vertical-align: middle; } .single-testimonial-box .text-holder .client-info .name-box{ margin-left: 20px; border-left: 1px solid #f0eef9; padding-left: 20px; } .single-testimonial-box .text-holder .client-info .name-box h3{ font-size: 18px; margin: 0 0 2px; } .single-testimonial-box .text-holder .client-info .name-box span{ color: #3a68b1; } /*** ============================================= Faq Area style ============================================= ***/ .faq-area{ position: relative; display: block; padding: 100px 0 100px; } .faq-area .sec-title { padding-bottom: 35px; margin: -4px auto 0; } .faq-area .sec-title h3{ font-size: 24px; font-weight: 700; text-transform: uppercase; } .faq-search-box form.search-form { position: relative; display: block; max-width: 540px; width: 100%; margin: 0px auto 0px; } .faq-search-box .search-form input[type="search"] { position: relative; display: block; background: #fff; border: 1px solid #f0eef9; color: #868298; font-size: 16px; font-weight: 400; height: 55px; letter-spacing: 1px; padding-left: 20px; padding-right: 80px; width: 100%; border-radius: 0; transition: all 500ms ease 0s; } .faq-search-box .search-form button { position: absolute; top: 0; bottom: 0; right: 0px; display: block; background: transparent; font-size: 14px; color: #3a68b1; height: 55px; width: 70px; border: 0px solid; line-height: 54px; text-align: center; border-radius: 0%; transition: all 500ms ease 0s; margin: 0; } .faq-search-box .search-form button i { font-size: 14px } .faq-search-box .search-form input[type="search"]:focus { border: 1px solid #3a68b1; background: #fff; color: #000000; } .faq-search-box .search-form input[type="search"]:focus + button, .faq-search-box .search-form button:hover { background: #3a68b1; color: #fff; } .faq-search-box p{ display: block; text-align: center; margin: 20px 0 52px; } .faq-search-box p a{ color: #3a68b1; } .faq-content-box { position: relative; display: block; } /*** ============================================= Main Project Area style ============================================= ***/ .main-project-area{ position: relative; display: block; background: #ffffff; padding: 100px 0 50px; } .project-filter { position: relative; display: inline-block; border: 1px solid #f0eef9; border-radius: 5px; margin-bottom: 60px; } .project-filter li { position: relative; display: inline-block; margin: 0 1px; } .project-filter li span { position: relative; display: block; cursor: pointer; color: #222222; font-size: 18px; line-height: 18px; font-weight: 500; text-transform: capitalize; transition: all 500ms ease 0s; font-family: 'Poppins', sans-serif; padding: 15px 20px 15px; border-radius: 0px; border-right: 1px solid #f0eef9; } .project-filter li:last-child span{ border-right: none; } .project-filter li.active span, .project-filter li:hover span { color: #3a68b1; } .single-project{ position: relative; display: block; max-width: 370px; width: 100%; margin: 0 auto 45px; } .single-project .img-holder{ position: relative; display: block; overflow: hidden; z-index: 5; } .single-project .img-holder .inner { position: relative; display: block; overflow: hidden; padding-bottom: 37px; } .single-project .img-holder .inner::before { position: absolute; top: 0px; left: 0px; bottom: 37px; right: 0px; background: rgba(60, 55, 90, 0.85); content: ""; transition: all 0.5s ease-in-out 0s; transform-style: preserve-3d; transform: perspective(1200px) rotateX(-90deg) translateZ(0px); } .single-project:hover .img-holder .inner::before{ transform: perspective(1200px) rotateX(0deg) translateZ(0px); transition-delay: 0.1s; } .single-project .img-holder img{ transition: all 0.5s ease-in-out 0.6s; width: 100%; } .single-project:hover .img-holder img {} .single-project .img-holder .overlay-content { position: absolute; left: 30px; bottom: 0; right: 30px; transition: all 0.7s ease-in-out 0s; transform: translateX(0%) translateY(117px) scale(1.0); } .single-project:hover .img-holder .overlay-content{ transform: translateX(0%) translateY(0px) scale(1.0); } .single-project .img-holder .overlay-content .categories{ position: relative; display: inline-block; } .single-project .img-holder .overlay-content .categories h5{ position: relative; display: block; padding: 9px 15px 5px; background: #3a68b1; color: #ffffff; font-size: 14px; font-weight: 500; text-transform: uppercase; font-family: 'Rubik', sans-serif; } .single-project .img-holder .overlay-content .inner-content { position: relative; display: block; background: #ffffff; -webkit-box-shadow: 0px 2px 3px 0px #F8F8F8; box-shadow: 0px 2px 3px 0px #F8F8F8; margin: 0 0px 5px; padding-bottom: 19px; } .single-project .img-holder .overlay-content .inner-content:before{ position: absolute; left: 0; bottom: 0; right: 0; width: 90px; height: 3px; margin: 0 auto; background: #3a68b1; content: ""; } .single-project .img-holder .overlay-content .inner-content .title{ position: relative; display: block; padding: 21px 0 18px; box-shadow: 0px 2px 3px 0px #F8F8F8; transition: all 0.2s ease-in-out 0s; } .single-project:hover .img-holder .overlay-content .inner-content .title{ box-shadow: none; } .single-project .img-holder .overlay-content .inner-content .title h3{ position: relative; display: block; } .single-project .img-holder .overlay-content .inner-content .title h3 a{ color: #222222; transition: all 0.2s ease-in-out 0s; } .single-project .img-holder .overlay-content .inner-content .title h3 a:hover{ color: #3a68b1; } .single-project .img-holder .overlay-content .inner-content .text{ position: relative; display: block; padding: 0 20px 0; margin-bottom: 17px; } .single-project .img-holder .overlay-content .inner-content .text p{ margin: 0; } .single-project .img-holder .overlay-content .inner-content .readmore{ display: block; text-align: center; } .single-project .img-holder .overlay-content .inner-content .readmore a span:before{ color: #222222; font-size: 22px; line-height: 22px; transition: all 0.2s ease-in-out 0s; } .single-project .img-holder .overlay-content .inner-content .readmore a:hover span:before{ color: #3a68b1; } /*** ============================================= Main Project Area Style2 style ============================================= ***/ .main-project-area.style2{ position: relative; display: block; padding-bottom: 100px; } .single-project-style2{ position: relative; display: block; overflow: hidden; max-width: 370px; width: 100%; margin: 0 auto 30px; } .single-project-style2 .img-holder{ position: relative; display: block; overflow: hidden; } .single-project-style2 .img-holder img{ transition: all 0.5s ease-in-out 0.6s; width: 100%; } .single-project-style2:hover .img-holder img { transform: scale(1.2, 1.2); } .single-project-style2 .overlay-style-one{ background: rgba(60, 55, 90, 0.85); } .single-project-style2:hover .overlay-style-one{ opacity: 1; } .single-project-style2 .img-holder .overlay-style-one .content{} .single-project-style2 .img-holder .overlay-style-one .content a { position: relative; top: -34px; display: inline-block; width: 30px; height: 30px; color: #ffffff; font-size: 25px; line-height: 30px; font-weight: 500; transform: translateX(0%) translateY(-50%) scale(0.5); transition: all 0.7s ease 0s; opacity: 0; } .single-project-style2 .img-holder .overlay-style-one .content a span:before{ font-weight: 600; transition: all 500ms ease; } .single-project-style2 .img-holder .overlay-style-one .content a:hover span:before{ color: #3a68b1; } .single-project-style2:hover .img-holder .overlay-style-one .content a { opacity: 1; transform: translateX(0) translateY(0%) scale(1); } .single-project-style2 .img-holder .title-holder { position: absolute; left: 0; bottom: 0; right: 0; background: #ffffff; display: block; padding: 22px 25px 23px; transition: all 700ms ease; transition-delay: .6s; opacity: 0; transform-style: preserve-3d; transform: perspective(1200px) rotateX(-90deg) translateZ(50px); z-index: 10; } .single-project-style2:hover .img-holder .title-holder{ -webkit-transform: perspective(1200px) rotateX(0deg) translateZ(0px); -moz-transform: perspective(1200px) rotateX(0deg) translateZ(0px); transform: perspective(1200px) rotateX(0deg) translateZ(0px); opacity: 1; transition-delay: 0.2s; } .single-project-style2 .img-holder .title-holder .title{} .single-project-style2 .img-holder .title-holder .title h3{ line-height: 30px; } .single-project-style2 .img-holder .title-holder .title h3 a{ color: #222222; transition: all 500ms ease; } .single-project-style2 .img-holder .title-holder .title h3 a:hover{ color: #3a68b1; } .single-project-style2 .img-holder .title-holder .readmore { line-height: 30px; } .single-project-style2 .img-holder .title-holder .readmore a{} .single-project-style2 .img-holder .title-holder .readmore a span:before { position: relative; top: 3px; display: inline-block; color: #222222; font-size: 20px; line-height: 20px; transition: all 500ms ease; } .single-project-style2 .img-holder .title-holder .readmore a:hover span:before{ color: #3a68b1; } .main-project-area.style2 .post-pagination { position: relative; display: block; margin-top: 20px; } /*** ============================================= Main Project Area Style3 style ============================================= ***/ .main-project-area.style3{ position: relative; display: block; } .main-project-area.style3 .single-project-style1{ margin-bottom: 50px; } /*** ============================================= Project single Area style ============================================= ***/ .project-single-area { position: relative; display: block; padding: 100px 0 56px; } .project-carousel-box{ position: relative; display: block; margin-right: -30px; } .project-carousel-box .project-single-carousel{} .project-carousel-box .project-single-carousel .single-item{ position: relative; display: block; } .project-carousel-box .project-single-carousel .single-item img{ width: 100%; } .project-carousel-box .owl-theme .owl-nav { position: absolute; bottom: 0; right: 0; width: 120px; height: 60px; z-index: 100; margin: 0; } .project-carousel-box .owl-theme .owl-nav .owl-prev { position: absolute; left: 0; top: 0; width: 60px; height: 60px; background: #f8f7ff; display: block; transition: all 700ms ease 0s; z-index: 10; border-radius: 0; margin: 0; padding: 0; } .project-carousel-box .owl-theme .owl-nav .owl-next { position: absolute; right: 0; top: 0; width: 60px; height: 60px; background: #f8f7ff; display: block; transition: all 700ms ease 0s; z-index: 10; border-radius: 0; margin: 0; padding: 0; } .project-carousel-box .owl-theme .owl-nav .owl-prev:hover{ background: #3a68b1; } .project-carousel-box .owl-theme .owl-nav .owl-next:hover{ background: #3a68b1; } .project-carousel-box .owl-theme .owl-nav div .fa:hover{ color: #fff; } .project-carousel-box .owl-theme .owl-nav div .fa { display: block; text-align: center; color: #222222; font-size: 24px; font-weight: 700; line-height: 60px; } .project-info { position: relative; display: block; border: 1px solid #f0eef9; padding: 55px 39px 15px; } .project-info .title { display: block; padding-bottom: 22px; } .project-info .title h3{ color: #222222; font-size: 24px; font-weight: 700; text-transform: uppercase; margin: 0 0 19px; } .project-info .title p{ margin: 0; } .project-info ul{ position: relative; display: block; overflow: hidden; } .project-info ul li{ line-height: 53px; border-bottom: 1px solid #f0eef9; } .project-info ul li:last-child{ border: none; } .project-info ul li span { display: inline-block; float: left; color: #222222; font-weight: 500; width: 90px; font-family: 'Poppins', sans-serif; } .project-info ul li b { display: inline-block; float: left; color: #222222; font-weight: 500; width: 20px; font-family: 'Poppins', sans-serif; } .project-info ul li .review-box{ display: inline-block; line-height: normal; } .project-info ul li .review-box ul{ } .project-info ul li .review-box ul li { border: none; line-height: 53px; } .project-description{ position: relative; display: block; margin-top: 53px; } .project-description .title{ display: block; padding-bottom: 26px; } .project-description .title h2{ color: #222222; font-size: 30px; font-weight: 700; text-transform: uppercase; } .project-description .inner-content{ position: relative; display: block; } /*** ============================================= Challenge Solution Area style ============================================= ***/ .challenge-solution-area{ position: relative; display: block; padding-bottom: 50px; } .challenge-solution-box { position: relative; display: block; margin-bottom: 50px; } .challenge-solution-box .img-holder{ position: relative; display: block; } .challenge-solution-box .img-holder img{ width: 100%; } .challenge-solution-box .img-holder .icon { position: absolute; top: 50px; right: -60px; width: 120px; height: 120px; background: #ffffff; border-radius: 50%; content: ""; text-align: center; display: block; padding: 27px 0; -webkit-box-shadow: 3px 0px 6px 0px #f6f6f6; box-shadow: 3px 0px 6px 0px #f6f6f6; transition: all 0.3s ease-in-out 0s; } .challenge-solution-box .img-holder .icon.solutions{ top: 50px; left: -60px; -webkit-box-shadow: -3px 0px 6px 0px #F6F6F6; box-shadow: -3px 0px 6px 0px #F6F6F6; } .challenge-solution-box:hover .img-holder .icon { background: #3a68b1; transition: all 0.5s ease-in-out 0s; transform-style: preserve-3d; transform: perspective(0px) translateY(5px)rotate(360deg); box-shadow: none; } .challenge-solution-box .img-holder .icon span:before{ color: #3a68b1; font-size: 65px; line-height: 65px; transition: all 900ms ease; } .challenge-solution-box:hover .img-holder .icon span:before{ color: #ffffff; } .challenge-solution-box .text-holder { position: relative; display: block; padding-top: 55px; } .challenge-solution-box .text-holder .sec-title{ padding-bottom: 37px; } .challenge-solution-box .text-holder .inner-content{ position: relative; display: block; } .challenge-solution-box .text-holder .inner-content span{ color: #222222; font-size: 18px; } .challenge-solution-box .text-holder .inner-content p { margin: 26px 0 0; } .challenge-solution-box .text-holder .inner-content ul{ display: block; overflow: hidden; margin-top: 10px; } .challenge-solution-box .text-holder .inner-content ul li{ position: relative; display: block; padding-left: 30px; color: #222222; font-size: 18px; line-height: 40px; } .challenge-solution-box .text-holder .inner-content ul li:before { position: absolute; top: 10px; left: 0; content: "\e905"; font-family: 'icomoon'; color: #3a68b1; font-size: 20px; line-height: 20px; } /*** ============================================= Blog Default Area style ============================================= ***/ #blog-area{ padding: 100px 0 100px; } .blog-default-area .post-pagination { border-top: 1px solid #f0eef9; padding-top: 30px; } /*** ============================================= Blog large Area style ============================================= ***/ .blog-large-area{} .blog-large-area .blog-post { position: relative; display: block; z-index: 1; } .blog-large-area .single-blog-post { position: relative; display: block; border: 1px solid #f0eef9; padding: 29px 29px 22px; border-radius: 7px; margin-bottom: 60px; transition: all 900ms ease; } .blog-large-area .single-blog-post:hover{ -webkit-box-shadow: 0px 3px 10px 2px rgba(240,238,249,0.85); box-shadow: 0px 3px 10px 2px rgba(240,238,249,0.85); } .post-author-share-box{ position: relative; display: block; overflow: hidden; } .post-author-share-box .post-author{ position: relative; display: block; } .post-author-share-box .post-author .img-box{ width: 60px; } .post-author-share-box .post-author .img-box img{ border-radius: 50%; } .post-author-share-box .post-author .img-box, .post-author-share-box .post-author .title-box{ display: table-cell; vertical-align: middle; } .post-author-share-box .post-author .title-box{ padding-left: 20px; } .post-author-share-box .post-author .title-box h5{ font-size: 16px; margin: 0 0 6px; } .post-author-share-box .post-author .title-box p{ margin: 0; } .post-author-share-box .post-author .title-box p span:before{ position: relative; top: 0px; color: #39345a; font-size: 14px; line-height: 14px; display: inline-block; padding-right: 6px; } .post-author-share-box .share-box { position: relative; display: block; margin: 7px 0; } .post-author-share-box .share-box a{ display: block; overflow: hidden; float: right; padding-left: 10px; } .post-author-share-box .share-box a span:before { position: relative; display: block; width: 45px; height: 45px; border: 1px solid #f0eef9; border-radius: 50%; color: #39345a; font-size: 20px; line-height: 20px; text-align: center; padding: 11px 0; transition: all 900ms ease; } .post-author-share-box .share-box a:hover span:before{ border-color: #3a68b1; color: #3a68b1; } .post-author-share-box .share-box ul { position: absolute; top: 0; right: 55px; width: 0; height: 45px; opacity: 0; transform: scale(0); transition: all 900ms ease; padding-right: 0; } .post-author-share-box .share-box:hover ul{ transform: scale(1.0); width: 155px; opacity: 1; } .post-author-share-box .share-box ul li { display: inline-block; float: right; margin-left: 10px; } .post-author-share-box .share-box ul li:last-child{ margin-left: 0; } .post-author-share-box .share-box ul li a{ padding: 0; } .post-author-share-box .share-box ul li a i { display: block; width: 45px; height: 45px; border: 1px solid #f0eef9; border-radius: 50%; text-align: center; color: #868298; font-size: 14px; line-height: 44px; transition: all 500ms ease; } .post-author-share-box .share-box ul li a:hover i{ color: #ffffff; background: #3a68b1; border-color: #3a68b1; } .blog-large-area .single-blog-post .blog-title { font-size: 26px; line-height: 32px; display: block; padding: 25px 0 23px; } .blog-large-area .single-blog-post .blog-title a{ color: #393939; transition: all 500ms ease; } .blog-large-area .single-blog-post .blog-title a:hover{ color: #3a68b1; } .blog-large-area .single-blog-post .img-holder{ border-radius: 5px; } .blog-large-area .single-blog-post .text-holder{ position: relative; display: block; padding: 0; } .blog-large-area .single-blog-post .text-holder .text { display: block; margin-top: 25px; margin-bottom: 15px; border-bottom: 1px solid #f0eef9; padding-bottom: 16px; } .single-blog-post .meta-box { position: relative; display: block; overflow: hidden; } .single-blog-post .meta-box .meta-info { position: relative; display: block; overflow: hidden; margin: 3px 0; } /*************************************************************************************************************** |||||||||||||||||||||||||| MASTER STYLESHEET FOR SCREWER ||||||||||||||||||||||||||||||||||||| **************************************************************************************************************** |||||||||||||||||||||||||| 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 |||||||||||||||||||||||||||||||||||| ****************************************************************************************************************/ /* Imported styles */ @import url('https://fonts.googleapis.com/css?family=Poppins:300,300i,400,400i,500,500i,600,600i,700,700i,800'); @import url('https://fonts.googleapis.com/css?family=Rubik:300,300i,400,400i,500,500i,700,700i,900,900i'); @import url(imp.css); @import url(bootstrap.css); @import url(font-awesome.min.css); @import url(hover.css); @import url(jquery.bxslider.css); @import url(owl.css); @import url(owl.theme.default.css); @import url(animate.css); @import url(jquery.bootstrap-touchspin.css); @import url('bootstrap-select.min.css'); @import url('imagehover.css'); @import url('icomoon.css'); @import url('jquery.fancybox.min.css'); @import url('jquery.mCustomScrollbar.min.css'); @import url('slick.css'); @import url(../fonts/flaticon/flaticon.css); /*** Price filter***/ @import url(../assets/price-filter/nouislider.css); @import url(../assets/price-filter/nouislider.pips.css); /*** single shop slide ***/ @import url(flexslider.css); /*** Time picker css ***/ @import url(../assets/timepicker/timePicker.css); /*** flaticon fonts css ***/ @import url(../fonts/flaticon/flaticon.css); /*** jquery ui css ***/ @import url(../assets/jquery-ui-1.11.4/jquery-ui.css); /*** Revolution slider ***/ @import url(../plugins/revolution/css/settings.css); @import url(../plugins/revolution/css/layers.css); @import url(../plugins/revolution/css/navigation.css); /*** Bootstrap select picker css ***/ @import url(../assets/bootstrap-sl-1.12.1/bootstrap-select.css); /*** Language Switcher ***/ @import url(../assets/language-switcher/polyglot-language-switcher.css); /*============================================== Base Css ===============================================*/ html, body { height: 100%; } body { font-family: 'Rubik', sans-serif; color: #868298; font-size: 16px; line-height: 26px; font-weight: 400; } button:focus{ outline: none; } button { cursor: pointer; border: none; background: transparent; padding: 0; } h1, h2, h3, h4, h5, h6 { color: #222222; font-weight: 600; margin: 0; font-family: 'Poppins', sans-serif; } h3 { font-size: 20px; line-height: 26px; } h4 { } a, a:hover, a:active, a:focus { text-decoration: none; outline: none; border: none; } .fix{ position: relative; display: block; overflow: hidden; } img { max-width: 100%; height: auto; } i { font-style: normal; } ul, li { list-style: none; margin: 0; padding: 0; } .clr1{ color: #3a68b1; } .bgclr1{ background: #3a68b1; } .secpd1{ padding: 100px 0; } .secpd2{ padding: 100px 0 60px; } .secpd3{ padding: 100px 0 70px; } .btn-one { position: relative; display: inline-block; background: #3a68b1; color: #ffffff; font-size: 18px; line-height: 18px; font-weight: 400; padding: 15px 29px 16px; text-transform: capitalize; border-radius: 5px; font-family: 'Rubik', sans-serif; transition: all 500ms ease; border-radius: 3px; } .btn-one span:before { position: relative; top: 1px; font-weight: 400; font-size: 17px; line-height: 10px; display: inline-block; padding-left: 14px; } .btn-one:hover{ color: #f5f5f5; background: #03317B; } .btn-two{ color: #3a68b1; font-size: 18px; font-weight: 400; text-transform: capitalize; font-family: 'Rubik', sans-serif; transition: all 500ms ease; } .btn-two span:before { position: relative; top: 2px; font-weight: 400; font-size: 17px; line-height: 10px; display: inline-block; padding-left: 10px; } .btn-two:hover{ color: #03317B; } .sec-title { position: relative; display: block; margin-top: -7px; padding-bottom: 73px; } .sec-title .title{ position: relative; display: block; } .sec-title .title span { position: relative; display: inline-block; color: #222222; font-size: 30px; line-height: 36px; font-weight: 700; text-transform: uppercase; font-family: 'Poppins', sans-serif; z-index: 1; } .sec-title .title span:before { position: absolute; left: 0; bottom: -13px; width: 100%; height: 1px; background: #f2f1f9; content: ""; } .sec-title .title span:after{ position: absolute; left: 0; bottom: -13px; width: 60px; height: 1px; background: #3a68b1; content: ""; } .sec-title.clr-white{} .sec-title.clr-white .title span{ color: #ffffff; } .sec-title.clr-white .title span:before { background: #302c4a; } .sec-title.center .title span:after { left: 0; right: 0; margin: 0 auto; } .sec-title.max-width { max-width: 770px; margin: -7px auto 0; padding-bottom: 52px; } .sec-title p { font-size: 20px; line-height: 30px; margin: 36px 0 0; } /*** ============================================ Hidden Sidebar style ============================================ ***/ .hidden-bar{ position: fixed; top: 0; width: 320px; height: 100%; background: #111111; 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 { width: 40px; height: 40px; position: absolute; right: 20px; top: 10px; 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 5px 30px 30px; } .hidden-bar .logo { padding:0px 0px 30px; } .hidden-bar .logo img{ display:inline-block; max-width:100%; } .hidden-bar .content-box{ position:relative; padding-right:32px; } .hidden-bar .content-box a { padding: 20px 40px 20px; } .hidden-bar .content-box h2{ position:relative; font-size:18px; color:#ffffff; font-weight:500; margin-bottom:20px; } .hidden-bar .content-box .text{ position:relative; font-size:14px; color: rgba(255,255,255,0.60); margin-bottom:25px; } .hidden-bar .contact-info{ position:relative; margin-top:60px; } .hidden-bar .contact-info h2{ position:relative; font-size:18px; color:#ffffff; font-weight:500; margin-bottom:20px; } .hidden-bar .contact-info li{ position:relative; margin-bottom:12px; color:rgba(255,255,255,0.90); font-size:14px; font-weight:400; padding-left:30px; line-height:2em; } .hidden-bar .contact-info li a{ color:rgba(255,255,255,0.90); transition: all 300ms ease; } .hidden-bar .contact-info li a:hover{ color: #ffffff; } .hidden-bar .contact-info li .icon{ position:absolute; left:0px; top:4px; color:rgba(255,255,255,0.60); font-size:18px; line-height:1.2em; } .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; } .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-style-one{} .owl-nav-style-one .owl-controls { } .owl-nav-style-one.owl-theme .owl-nav [class*="owl-"] { background: #ffffff none repeat scroll 0 0; border-radius: 50%; color: #909090; font-size: 24px; font-weight: 700; height: 50px; line-height: 46px; margin: 0 0 0 0px; padding: 0; width: 50px; border: 1px solid #f3f3f3; transition: all 700ms ease 0s; } .owl-nav-style-one.owl-theme .owl-nav .owl-next { margin-left: 10px; } .owl-nav-style-one.owl-theme .owl-nav [class*="owl-"]:hover{ border-color: #172272; color: #172272; } .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; } .accordion-box { display: block; overflow: hidden; border-top: 1px solid #f2f2f2; border-left: 1px solid #f2f2f2; border-right: 1px solid #f2f2f2; } .accordion-box .accordion { position: relative; display: block; overflow: hidden; } .accordion-box .accordion .accord-btn { position: relative; display: block; cursor: pointer; border-bottom: 1px solid #f2f2f2; padding-left: 75px; padding-right: 20px; padding-top: 33px; padding-bottom: 33px; transition: all 500ms ease; } .accordion-box .accordion .accord-btn h4 { color: #303030; font-size: 16px; font-weight: 700; line-height: 24px; transition: all 500ms ease; } .accordion-box .accordion .accord-btn::after { font-family: "Flaticon"; position: absolute; top: 29px; left: 27px; color: #bdbdbd; content: "\f105"; font-size: 32px; line-height: 32px; font-weight: 300; transition: all 500ms ease 0s; } .accordion-box .accordion .accord-btn.active{ border-bottom: 1px solid #f2f2f2; transition: all 500ms ease; } .accordion-box .accordion .accord-btn.active h4 { color: #3a68b1; } .accordion-box .accordion .accord-btn.active:after{ color: #3a68b1; } .accordion-box .accordion .accord-content { position: relative; padding-top: 34px; padding-bottom: 33px; padding-left: 30px; padding-right: 30px; border-bottom: 1px solid #f2f2f2; display: none; } .accordion-box .accordion .accord-content:before{ position: absolute; top: 0; left: 0px; bottom: 0; width: 3px; background: #3a68b1; content: ""; } .accordion-box .accordion .accord-content.collapsed { display: block; } .accordion-box .accordion .accord-content p { margin: 0; } .slick-dots { position: relative; display: inline-block; top: 0px; margin-top: 31px; } .slick-dots li { position: relative; display: inline-block; margin: 0 15px; } .slick-dots li:before { position: absolute; top: 0; bottom: 0; right: -17px; width: 6px; height: 1px; background: #555555; content: ""; margin: 16px 0; } .slick-dots li:last-child:before { display: none; } .slick-dots li button { position: relative; display: block; width: 32px; height: 32px; border-radius: 50%; background: transparent; color: #c2c2c2; font-size: 17px; font-weight: 500; padding-bottom: 0; font-family: 'Rubik', sans-serif; } .slick-dots li.slick-active button { background: #fec144; color: #222222; } .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-size: 75vw; } .preloader:before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 75vw; height: 20vh; background-image: url(../img/resources/logo.png); background-size: contain; background-position: center; background-repeat: no-repeat; animation: breathe 1.5s infinite ease-in-out; } @keyframes breathe { 0% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.1); } 100% { transform: translate(-50%, -50%) scale(1); } } /* Update header Style */ @keyframes menu_sticky { 0% {margin-top:-100px;} 50% {margin-top: -74px;} 100% {margin-top: 0;} } .mainmenu-area.stricky-fixed { position: fixed; top: 0; left: 0; width: 100%; z-index: 99999999; background: #39345a; margin: 0; animation-name: menu_sticky; animation-duration: 0.60s; animation-timing-function: ease-out; transition: all .25s ease-in-out; } .header-style2-area.stricky-fixed{ position: fixed; top: 0; left: 0; width: 100%; z-index: 999; background: #f5f5f8; margin: 0; animation-name: menu_sticky; animation-duration: 0.60s; animation-timing-function: ease-out; transition: all .25s ease-in-out; } .header-style2-area.stricky-fixed .header-style2-logo{ padding: 15px 0 15px; } .header-style2-area.stricky-fixed .main-menu.style2 .navigation li a{ padding-top: 32px; padding-bottom: 33px; } .header-style2-area.stricky-fixed .main-menu.style2 .navigation li ul li a{ padding: 18px 30px 15px; } .header-style2-area.stricky-fixed .main-menu.style2 .navigation li ul li:hover a { padding-left: 45px; } .header-style2-area.stricky-fixed .headers2.quote-button-box{ padding: 14px 0 15px; } /* scroll to top styles */ .scroll-to-top { background: #3a68b1; border-radius: 50%; bottom: 25px; color: #ffffff; cursor: pointer; display: none; font-size: 25px; font-weight: normal; height: 55px; line-height: 56px; position: fixed; right: 15px; text-align: center; transition: all 500ms ease 0s; width: 55px; z-index: 99999999; box-shadow: 0px 8px 23px -6px rgba(27,27,27,1); } .scroll-to-top:hover { opacity: .5; } /* 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 li { display: inline-block; margin: 0 3px; } .post-pagination li a { position: relative; display: block; background: #ffffff; border-radius: 5px; border: 1px solid #f0eef9; color: #222222; font-size: 18px; font-weight: 600; height: 50px; width: 50px; padding: 11px 0; transition: all 500ms ease 0s; font-family: 'Poppins', sans-serif; } .post-pagination li a i { position: relative; top: 1px; color: #868298; font-size: 20px; } .post-pagination li:hover a i{ color: #222222; } .post-pagination li.active a, .post-pagination li:hover a { color: #fff; background: #3a68b1; border: 1px solid #3a68b1; } /* Post pagination styles 2 */ .post-pagination2{ display: block; margin-top: 20px; } .post-pagination2 li { display: inline-block; margin: 0 3px; } .post-pagination2 li a { position: relative; display: block; color: #222222; font-size: 18px; font-weight: 600; height: 32px; width: 32px; line-height: 32px; text-align: center; transition: all 500ms ease 0s; font-family: 'Poppins', sans-serif; border-radius: 50%; } .post-pagination2 li.active a, .post-pagination2 li:hover a { background: #3a68b1; color: #ffffff; } .post-pagination2 li a.left { width: auto; height: auto; display: block; color: #868298; padding-right: 10px; transition: all 500ms ease; } .post-pagination2 li:hover a.left{ background: none; } .post-pagination2 li a.left i { position: relative; top: 1px; display: inline-block; padding-right: 8px; font-size: 21px; } .post-pagination2 li a.left:hover{ color: #3a68b1; } .post-pagination2 li a.right { width: auto; height: auto; display: block; color: #868298; padding-left: 10px; transition: all 500ms ease; } .post-pagination2 li a.right:hover{ color: #3a68b1; } .post-pagination2 li:hover a.right{ background: none; } .post-pagination2 li a.right i { position: relative; top: 1px; display: inline-block; padding-left: 8px; font-size: 21px; } /* Overlay styles */ .overlay-style-one{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(243, 103, 40, 0.85); transition: all 500ms ease; transition-delay: 0.10s; opacity: 0; z-index: 2; } .overlay-style-one .box{ display: table; height: 100%; width: 100%; } .overlay-style-one .box .content{ display: table-cell; text-align: center; vertical-align: middle; } .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: 14px; color: #3a68b1; } .sociallinks-style-one{ display: flex; align-items: center; justify-content: center; gap: 10px; } .sociallinks-style-one li{ display: inline-block; float: left; border: 1px solid #3A68B1; height: 35px; width: 35px; display: flex; align-items: center; justify-content: center; transition: all 500ms ease; cursor: pointer; } .sociallinks-style-one li:hover{ background: #3A68B1; } .sociallinks-style-one li:hover a{ color: #fff; } .sociallinks-style-one li:last-child{ margin-right: 0px; } .sociallinks-style-one li a i{ color: #9491a2; font-size: 18px; font-weight: 400; transition: all 500ms ease; } .sociallinks-style-two{ overflow: hidden; } .sociallinks-style-two li { display: inline-block; float: left; margin-right: 10px; } .sociallinks-style-two li:last-child{ margin-right: 0px; } .sociallinks-style-two li a i { position: relative; display: block; width: 40px; height: 40px; background: #1e1b31; border: 1px solid #26223b; border-radius: 50%; color: #868298; font-size: 14px; line-height: 38px; text-align: center; transition: all 500ms ease 0s; } .sociallinks-style-two li a:hover i{ background: #3a68b1; border-color: #3a68b1; color: #fff; } /*============================================== Top Bar Style1 Css ===============================================*/ .top-bar-style1 { position: relative; display: block; background: #f8f7ff; border-bottom: 1px solid #f2f1f9; padding: 13px 0 11px; } .top-style1{ position: relative; display: block; width: 100%; } .top-left-style1 { position: relative; display: block; max-width: 870px; width: 100%; } .top-left-style1 .find-map { position: relative; display: block; margin: 5px 0 4px; } .top-left-style1 .find-map p { color: #9491a2; margin: 0; } .top-left-style1 .find-map p span:before { color: #3a68b1; font-size: 18px; line-height: 18px; display: inline-block; padding-right: 6px; } .top-left-style1 .find-map p a{ color: #3a68b1; transition: all 500ms ease; } .top-left-style1 .find-map p a span:before{ position: relative; top: 2px; font-size: 16px; line-height: 16px; display: inline-block; padding-left: 6px; padding-right: 0; transition: all 500ms ease; } .top-left-style1 .find-map p a:hover{ color: #9491a2; } .top-left-style1 .find-map p a:hover span:before{ color: #9491a2; } .top-right-style1 { position: relative; display: block; max-width: 300px; width: 100%; } .top-right-style1 .sociallinks-style-one{ line-height: 35px; } /*============================================== Top Bar Style2 Css ===============================================*/ .top-bar-style2 { position: relative; display: block; background: #39345a; padding: 8px 0 7px; } .top-style2 { position: relative; display: block; width: 100%; min-height: 35px; } .top-left-style2 { position: relative; display: block; max-width: 900px; width: 100%; } .top-left-style2 .language-switcher { position: absolute; top: 0; left: 0; bottom: 0; margin: 0; border: none; width: 125px; height: 35px; background: transparent; display: block; padding: 0px 0px; border-radius: 5px; } .top-left-style2 .language-switcher #polyglotLanguageSwitcher a { color: #ffffff; } .top-left-style2 .language-switcher #polyglotLanguageSwitcher span.trigger:before { color: #868298; } .top-left-style2 .top-contact-info{ position: relative; display: block; } .top-left-style2 .top-contact-info ul { display: block; overflow: hidden; margin: 8px 0; } .top-left-style2 .top-contact-info ul li{ display: inline-block; float: left; border-left: 1px solid #4e4a6d; padding-left: 20px; margin-left: 20px; color: #fff; font-size: 16px; font-weight: 400; line-height: 18px; } .top-left-style2 .top-contact-info ul li span:before { position: relative; top: 1px; color: #3a68b1; font-size: 16px; line-height: 16px; display: inline-block; padding-right: 5px; } .top-left-style2 .top-contact-info ul li span.last{ display: inline-block; padding-left: 15px; } .top-left-style2 .top-contact-info ul li b{ color: #ffffff; font-weight: 400; } .top-right-style2 { position: relative; display: block; max-width: 200px; width: 100%; } .top-right-style2 .sociallinks-style-one { float: right; margin: 5px 0 4px; } .top-right-style2 .sociallinks-style-one li a:hover i{ color: #3a68b1; } /*============================================== Header Style1 Area Css ===============================================*/ .header-style1-area { display: block; background: #ffffff; padding: 17px 0 20px; } .header-style1{ position: relative; display: flex; align-items: center; justify-content: space-between; } .header-style1-logo { display: flex; align-items: center; } .header-style1-logo a { display: block; } .headers1-header-right{ position: relative; display: flex; align-items: center; } .headers1-header-right ul { position: relative; display: block; overflow: hidden; float: left; margin-right: 50px; padding: 16px 0; } .headers1-header-right ul li{ display: inline-block; float: left; margin-right: 40px; } .headers1-header-right ul li:last-child{ margin-right: 0; } .headers1-header-right ul li .single-item{ position: relative; display: block; } .headers1-header-right ul li .single-item .icon{ width: 25px; } .headers1-header-right ul li .single-item .icon span:before{ position: relative; display: inline-block; top: 1px; left: 1px; font-size: 24px; line-height: 24px; font-weight: 600; } .headers1-header-right ul li .single-item .icon, .headers1-header-right ul li .single-item .text{ display: table-cell; vertical-align: middle; } .headers1-header-right ul li .single-item .text{ padding-left: 20px; } .headers1-header-right ul li .single-item .text p{ margin: 0 0 1px; } .headers1-header-right ul li .single-item .text h3{ color: #4e4e4e; font-size: 18px; text-transform: uppercase; } .headers1-button { position: relative; display: flex; align-items: center; float: right; width: 280px; border: 1px solid #f0eef9; border-radius: 5px; padding: 6px 15px; } .headers1-button .icon{ width: 70px; position: relative; } .headers1-button .icon:before { content: "\f0da"; font-family: FontAwesome; color: #3a68b1; font-size: 30px; position: absolute; top: 15px; right: 12px; } .headers1-button .icon span:before{ width: 50px; height: 50px; background: #3a68b1; text-align: center; border-radius: 50%; color: #ffffff; font-size: 23px; line-height: 50px; display: block; } .headers1-button .icon, .headers1-button .text{ display: table-cell; vertical-align: middle; } .headers1-button .text { padding-left: 15px; display: flex; flex-direction: column; justify-content: center; } .headers1-button .text span{ font-size: 18px; } .headers1-button .text h3{ font-size: 18px; margin: 2px 0 0; } /*============================================== Header Style2 Area Css ===============================================*/ .header-style2-area { display: block; background: #ffffff; padding: 0 0 0; } .header-style2-logo { display: block; padding-top: 40px; padding-bottom: 10px; margin-right: 40px; transition: all 500ms ease; } .header-style2-logo img { width: 220px; height: 100%; object-fit: contain; } .header-style2-logo a { display: block; } .main-menu.style2 .navigation li { margin-right: 30px; } .main-menu.style2 .navigation li:last-child{ margin-right: 0; } .main-menu.style2 .navigation li a { color: #535151; padding-top: 52px; padding-bottom: 48px; } .main-menu.style2 .navigation li ul li a { color: #535151; padding: 18px 30px 15px; } .headers2.quote-button-box { position: relative; display: block; padding: 29px 0 30px; transition: all 500ms ease; } /*** ===================================================== Mainmenu Area style ===================================================== ***/ .mainmenu-area{ position: relative; display: block; background: transparent; margin-top: -35px; margin-bottom: -42px; z-index: 999; } .mainmenu-area .inner-content { position: relative; display: block; background: #39345a; padding-left: 30px; padding-right: 30px; } .main-menu { position: relative; display: inline-block; float: left; } .main-menu .navbar-collapse { padding: 0px } .main-menu .navigation { position: relative; } .main-menu .navigation li { position: relative; display: inline-block; float: left; margin-right: 45px; } .main-menu .navigation li:last-child{ margin-right: 0; } .main-menu .navigation li a { position: relative; display: block; color: #ffffff; font-size: 15px; line-height: 15px; font-weight: 600; text-transform: uppercase; opacity: 1; padding: 32px 0 32px; transition: all 300ms ease; font-family: 'Poppins', sans-serif; } .main-menu .navigation > li:hover > a, .main-menu .navigation > li.current > a { color: #3a68b1; } .main-menu .navigation > li > ul { position: absolute; left: 0px; top: 130%; width: 250px; background: transparent; padding: 10px 0px 0; z-index: 100; visibility: hidden; opacity: 0; transition: all 500ms ease; display: block; border-bottom: 3px solid #3a68b1; border-radius: 8px; } .main-menu .navigation > li > ul:before { position: absolute; top: 10px; left: 0; width: 100%; background: #ffffff; content: ""; z-index: -1; bottom: 0; border-radius: 6px; } .main-menu .navigation > li:hover > ul { top: 100%; opacity: 1; visibility: visible; } .main-menu .navigation > li > ul > li { position: relative; display: block; float: none; margin: 0; padding: 0; width: 100%; transition: all 500ms ease; z-index: 1; } .main-menu .navigation > li > ul > li:before{ position: absolute; left: 30px; right: 30px; height: 100%; border-bottom: 1px solid #e9e9e9; content: ""; z-index: -1; } .main-menu .navigation > li > ul > li:last-child:before{ border-bottom: none; } .main-menu .navigation li ul li a { position: relative; display: block; color: #222222; font-size: 16px; font-weight: 400; line-height: 20px; text-transform: capitalize; transition: all 500ms ease 0s; padding: 18px 30px 15px; font-family: 'Rubik', sans-serif; } .main-menu .navigation li ul li a:before { position: absolute; top: 0; left: 30px; bottom: 0; right: auto; width: 7px; height: 7px; background: #3a68b1; border-radius: 50%; content: ""; margin: 23px 0; opacity: 1; transform: scale(0); transition: all 500ms ease; } .main-menu .navigation li ul li:hover a:before{ transform: scale(1); left: 30px; } .main-menu .navigation > li > ul > li:hover > a { color: #3a68b1; padding-left: 45px; } /* .main-menu .navigation > li > ul > li > ul { position: absolute; left:100%; top:20px; width: 250px; z-index: 100; padding-left: 10px; visibility: hidden; opacity: 0; background: transparent; transition: all 200ms ease; } .main-menu .navigation > li > ul > li > ul:before{ position: absolute; left: 10px; bottom: 0; width: 100%; height: 100%; background: #ffffff; border-bottom: 3px solid #fec144; content: ""; z-index: -1; border-radius: 6px; } .main-menu .navigation > li > ul > li:hover > ul{ visibility:visible; opacity:1; top:0px; } .main-menu .navigation > li > ul > li > ul > li{ position: relative; display: block; float: none; margin: 0; padding: 0; width: 100%; transition: all 500ms ease; } .main-menu .navigation > li > ul > li > ul > li:before{ position: absolute; left: 30px; right: 30px; height: 100%; border-bottom: 1px solid #e9e9e9; content: ""; z-index: -1; } .main-menu .navigation > li > ul > li > ul > li:last-child:before{ border-bottom: none; } .main-menu .navigation > li > ul > li > ul > li a{ position: relative; display: block; color: #222222; font-size: 16px; font-weight: 400; line-height: 20px; text-transform: capitalize; transition: all 500ms ease 0s; padding: 18px 30px 15px; font-family: 'Rubik', sans-serif; } .main-menu .navigation > li > ul > li > ul > li a:before { position: absolute; top: 0; left: 30px; bottom: 0; right: auto; width: 7px; height: 7px; background: #fec144; border-radius: 50%; content: ""; margin: 23px 0; transform: none; opacity: 0; transform: scale(0); transition: all 500ms ease; } .main-menu .navigation > li > ul > li > ul > li:hover a:before{ transform: scale(1); opacity: 1; left: 30px; } .main-menu .navigation > li > ul > li > ul > li:hover a{ color: #fec144; padding-left: 45px; } **/ /* .main-menu .navigation li ul li.dropdown{ position: relative; display: block; width: 100%; } .main-menu .navigation li ul li.dropdown:after{ position: absolute; font-family: 'FontAwesome'; content: "\f105"; font-size: 18px; line-height: 30px; display: block; top: 0; bottom: 0; right: 30px; margin: 11px 0; color: #8d8d8d; } .main-menu .navbar-collapse > ul li.dropdown .dropdown-btn { position: absolute; right: 10px; top: 6px; width: 34px; height: 30px; border: 1px solid #ffffff; background: url(../images/icon/submenu-icon.png) center center no-repeat; background-size: 20px; cursor: pointer; z-index: 5; display: none; border-radius: 3px; } .mainmenu-right { position: relative; display: inline-block; float: right; } .outer-search-box { display: inline-block; float: left; margin-right: 30px; } .outer-search-box .seach-toggle { position: relative; display: block; color: #ffffff; font-size: 16px; line-height: 52px; cursor: pointer; text-align: center; height: 51px; width: 50px; border-radius: 5px; margin: 14px 0; transition: all 500ms ease; } .outer-search-box .seach-toggle:hover, .outer-search-box .seach-toggle.active{ color: #3a68b1; background: #353055; } .search-box { background: #2f2f2f; opacity: 0; padding: 18px; position: absolute; top: 120%; left: -100%; transition: all 500ms ease 0s; visibility: hidden; z-index: 100; margin-left: 33px; } .search-box.now-visible { top: 100%; opacity: 1; visibility: visible; z-index: 100; } .search-box .form-group{ position:relative; padding: 0px; margin: 0px; width: 100%; min-width: 250px; } .search-box .form-group input[type="search"] { background: #ffffff none repeat scroll 0 0; border: 1px solid #1d1d1d; color: #000; display: block; font-size: 13px; line-height: 24px; position: relative; transition: all 500ms ease 0s; width: 100%; height: 40px; padding-left: 15px; padding-right: 50px; } .search-box .form-group input[type="search"]:focus{ border-color: #000000; } .search-box .form-group button, .search-box .form-group input[type="submit"] { background: #1d1d1d; color: #fff; cursor: pointer; display: block; font-size: 13px; height: 40px; line-height: 40px; position: absolute; right: 0; top: 0; width: 40px; transition: all 500ms ease 0s; } .search-box .form-group button:hover, .search-box .form-group input:focus + button{ color:#fff; background: #000; } .mainmenu-right .quote-button-box { margin: 14px 0; } /*** ===================================================== Main Slider style ===================================================== ***/ .main-slider { position: relative; z-index: 10; border-top: 3px solid #241f40; } .main-slider .tp-caption{ z-index:5 ; } .main-slider .tp-dottedoverlay{ background: none !important; } .main-slider .slide-content{ position: relative; display: block; } .main-slider .slide-content .big-title{ position: relative; color: #ffffff; font-size: 60px; font-weight: 700; text-transform: none; line-height: 1.2em; font-family: 'Poppins', sans-serif; } .main-slider .slide-content .text{ position: relative; display: block; color: #ffffff; font-size: 24px; font-weight: 300; line-height: 1.6em; font-family: 'Rubik', sans-serif; } .main-slider .slide-content .btn-box{} .main-slider .slide-content .btn-box a{ } .main-slider #rev_slider_two_wrapper .slide-content .big-title { color: #ffffff; line-height: 1.1em; } /*** ============================================= Main Slider style2 ============================================= ***/ .main-slider.style2 { border-top: none; } /*** ============================================= About Area style ============================================= ***/ .about-area{ position: relative; display: block; padding: 90px 0 60px; } .about-title{} .about-title .sec-title { padding-bottom: 40px; } .about-title h1 { font-size: 36px; line-height: 58px; } .about-text{ position: relative; display: block; margin-top: -7px; } .about-text span{ color: #222222; font-size: 20px; line-height: 30px; } .about-text p{ line-height: 28px; margin: 25px 0 0; } .service-items{ margin-top: 43px; } .single-service-style2{ position: relative; display: block; max-width: 370px; width: 100%; border: 1px solid #f0eef9; padding: 24px 28px 22px; border-radius: 5px; margin: 0 auto 40px; transition: all 700ms ease; } .single-service-style2:hover{ -webkit-box-shadow: 0px 2px 10px 3px #f0eef9; box-shadow: 0px 2px 10px 3px #f0eef9; } .single-service-style2 .inner{ position: relative; display: block; padding-left: 95px; } .single-service-style2 .icon-box { position: absolute; top: 5px; left: 0; width: 70px; height: 120px; text-align: center; z-index: 1; transition: all 500ms ease; transition-delay: .3s; } .single-service-style2 .icon-box:before { position: absolute; top: 0; left: 0; right: 0; width: 40px; height: 120px; border: 4px solid #f8f7ff; content: ""; z-index: -1; margin: 0 auto; opacity: 0; transition: all 500ms ease; } .single-service-style2:hover .icon-box:before{ opacity: 1; } .single-service-style2 .icon-box span:before{ position: relative; top: 0; color: #39345a; font-size: 65px; line-height: 65px; transition: all 500ms ease; transition-delay: .2s; } .single-service-style2:hover .icon-box span:before{ top: 25px; color: #3a68b1; } .single-service-style2 .text-box{ } .single-service-style2 .text-box h3{ margin: 0 0 9px; } .single-service-style2 .text-box p{ line-height: 24px; margin: 0; } /*** ============================================= Global Office Area style ============================================= ***/ .global-office-area { position: relative; display: block; padding: 100px 0 94px; } .global-office-area .sec-title p{ color: #222222; } .single-global-office { position: relative; display: block; float: left; width: 100%; min-height: 240px; border: 1px solid #f0eef9; padding: 39px 49px 31px; border-radius: 5px; margin-bottom: 30px; } .single-global-office.headquater{ padding-bottom: 27px; } .single-global-office .inner{ position: relative; display: block; } .single-global-office .inner .icon{ width: 75px; } .single-global-office .inner .icon span:before{ color: #39345a; font-size: 75px; line-height: 75px; } .single-global-office .inner .icon, .single-global-office .inner .text{ display: table-cell; vertical-align: middle; } .single-global-office .inner .text{ padding-left: 30px; } .single-global-office .inner .text h3{ margin: 0 0 14px; } .single-global-office .inner .text h3 span{ display: inline-block; background: #3a68b1; color: #ffffff; font-size: 16px; font-weight: 400; padding: 2px 15px 2px; border-radius: 5px; margin-left: 15px; font-family: 'Rubik', sans-serif; } .single-global-office .inner .text p{ margin: 0 0 16px; } .single-global-office .inner .text a{} .single-global-office .inner .text ul { position: relative; margin-top: 18px; margin-bottom: 16px; } .single-global-office .inner .text ul li{ margin-bottom: 1px; } .single-global-office .inner .text ul li:last-child{ margin-bottom: 0; } .single-global-office .inner .text ul li b{ color: #222222; font-size: 16px; font-weight: 500; font-family: 'Poppins', sans-serif; } .all-global-branch{ position: relative; display: block; text-align: center; margin-top: 15px; } .all-global-branch h3 a{ color: #3a68b1; } /*** ============================================= Slogan area style ============================================= ***/ .slogan-area { position: relative; background-attachment: scroll; background-size: cover; background-position: center top; background-repeat: no-repeat; padding: 53px 0; z-index: 1; } .slogan-area::before { background: rgba(58, 104, 177, 0.90) none repeat scroll 0 0; position: absolute; top: 0; left: 0; height: 100%; width: 100%; content: ""; z-index: -1; } .slogan-area .title { position: relative; display: block; margin: 12px 0 13px; } .slogan-area .title h3{ color: #ffffff; font-size: 24px; line-height: 30px; } .slogan-area .button{} .slogan-area .button a{ color: #ffffff; background: transparent; display: block; border: 2px solid #ffffff; } .slogan-area .button a:hover{ background: #3a68b1; } /*** ============================================= Services Style1 Area Style ============================================= ***/ .services-style1-area { position: relative; display: block; } .service_s1_title{ position: relative; display: inline-block; float: left; } .service_s1_text { position: relative; display: inline-block; float: left; max-width: 670px; width: 100%; padding-left: 80px; margin-top: -7px; } .service_s1_text p{ color: #222222; font-size: 20px; line-height: 30px; margin: 0; } .service_s1_button { float: right; margin-top: -6px; } .single-service-style1 { position: relative; display: block; margin-bottom: 30px; } .single-service-style1 .img-holder{ position: relative; display: block; overflow: hidden; z-index: 1; } .single-service-style1 .img-holder::before { background: rgba(60, 55, 90, 0.85); top: 0px; left: 0px; bottom: 0px; right: 0px; content: ""; position: absolute; transition: all 0.5s ease-in-out 0s; transform-style: preserve-3d; transform: perspective(1200px) rotateX(-90deg) translateZ(0px); } .single-service-style1:hover .img-holder::before{ transform: perspective(1200px) rotateX(0deg) translateZ(0px); transition-delay: 0.1s; } .single-service-style1 .img-holder img { height: 245px; object-fit: cover; width: 100%; transition: .5s ease; } .single-service-style1:hover .img-holder img {} .single-service-style1 .text-holder{ position: relative; display: block; border: 1px solid #f0eef9; padding: 24px 19px 23px; min-height: 239px; transition: all 700ms ease; } .single-service-style1:hover .text-holder{ -webkit-box-shadow: 0px 2px 10px 3px #f0eef9; box-shadow: 0px 2px 10px 3px #f0eef9; } .single-service-style1 .text-holder .inner{ position: relative; display: block; padding-left: 80px; } .single-service-style1 .text-holder .icon-box { position: absolute; top: 5px; left: 0; width: 65px; height: 130px; text-align: center; z-index: 1; transition: all 500ms ease; transition-delay: .3s; } .single-service-style1 .text-holder .icon-box:before { position: absolute; top: 0; left: 0; right: 0; width: 40px; height: 130px; border: 4px solid #f8f7ff; content: ""; z-index: -1; margin: 0 auto; opacity: 0; transition: all 500ms ease; } .single-service-style1:hover .text-holder .icon-box:before{ opacity: 1; } .single-service-style1 .text-holder .icon-box span:before { position: relative; top: 0; color: #39345a; font-size: 35px; line-height: 64px; transition: all 500ms ease; transition-delay: .2s; width: 65px; height: 65px; display: block; border: 1px solid #f0eef9; border-radius: 50%; background: #ffffff; } .single-service-style1:hover .text-holder .icon-box span:before{ top: 30px; color: #ffffff; border-color: #3a68b1; background: #3a68b1; } .single-service-style1 .text-holder .text-box{} .single-service-style1 .text-holder .text-box h3{ margin: 0 0 18px; } .single-service-style1 .text-holder .text-box h3 a{ color: #222222; transition: all 500ms ease; } .single-service-style1 .text-holder .text-box h3 a:hover{ color: #3a68b1; } .single-service-style1 .text-holder .text-box p{ line-height: 24px; margin: 0; } /*** ============================================= Services Style2 Area Style ============================================= ***/ .services-style2-area { position: relative; display: block; padding-bottom: 70px; } /*** ============================================= Company Info area Style ============================================= ***/ .company-info-area{ position: relative; display: block; background: #f5f5f5; padding-top: 100px; padding-bottom: 100px; } .video-holder-box{ position: relative; display: block; } .video-holder-box .img-holder{ position: relative; display: block; overflow: hidden; } .video-holder-box .img-holder img { transform: scale(1); transition: all 0.5s ease 0s; width: 100%; } .video-holder-box .img-holder:hover img{ transform: scale(1.1); } .video-holder-box .img-holder .icon-holder { position: absolute; top: 0; left: 0; height: 100%; width: 100%; transition: all 500ms ease; } .video-holder-box:hover .img-holder .icon-holder { background-color: rgba(0, 0, 0, 0.60); } .video-holder-box .img-holder .icon-holder .icon { display: table; height: 100%; width: 100%; } .video-holder-box .img-holder .icon-holder .icon .inner { display: table-cell; vertical-align: middle; text-align: center; } .video-holder-box .img-holder .icon-holder .icon .inner a{ position: relative; display: block; color: #ffffff; line-height: 88px; height: 90px; width: 90px; margin: 0 auto; border-radius: 50%; border: 1px solid #ffffff; text-align: center; transition: all 500ms ease; } .video-holder-box .img-holder .icon-holder .icon .inner a span:before{ font-size: 25px; } .video-holder-box .img-holder:hover .icon-holder .icon .inner a{ transform: rotate(360deg); } .company-info-content { position: relative; display: block; margin-top: -8px; } .company-info-content h1{ font-size: 36px; line-height: 48px; margin: 0 0 22px; } .company-info-content span{ color: #222222; font-size: 20px; line-height: 28px; } .company-info-content p{ line-height: 28px; margin: 15px 0 21px; } .company-info-content a.learn-more span:before{ color: #3a68b1; } .company-info{ margin-top: 20px; } .single-info-of-company{ position: relative; display: block; overflow: hidden; background: #ffffff; padding-left: 80px; min-height: 110px; margin: 40px auto 0; max-width: 370px; width: 100%; border-radius: 5px; } .single-info-of-company .icon-holder{ position: absolute; top: 0; left: 0; width: 80px; height: 110px; text-align: center; z-index: 1; } .single-info-of-company .icon-holder.one{ position: absolute; top: 0; left: 0; width: 80px; height: 110px; background: url(../images/icon/1.jpg); } .single-info-of-company .icon-holder span:before { color: #3a68b1; font-size: 35px; line-height: 35px; display: block; padding: 37px 0 38px; } .single-info-of-company.two{ background: #48426e; } .single-info-of-company .icon-holder.two{ position: absolute; top: 0; left: 0; width: 80px; height: 110px; background: url(../images/icon/2.png); } .single-info-of-company.two .title-holder h3{ color: #ffffff; } .single-info-of-company.two .title-holder span{ color: #ffffff; } .single-info-of-company.three{ background: #3a68b1; } .single-info-of-company .icon-holder.three{ position: absolute; top: 0; left: 0; width: 80px; height: 110px; background: url(../images/icon/3.png); } .single-info-of-company .icon-holder.three span:before{ color: #ffffff; } .single-info-of-company.three .title-holder h3{ color: #ffffff; } .single-info-of-company.three .title-holder span{ color: #ffffff; } .single-info-of-company .title-holder { position: relative; display: block; padding-left: 15px; margin: 26px 0 25px; } .single-info-of-company .title-holder h3{ font-size: 18px; margin: 0 0 7px; } .single-info-of-company .title-holder span{} /*** ============================================= Latest Project Area Style ============================================= ***/ .latest-project-area{ position: relative; display: block; background: #1a172c; padding: 100px 0 100px; } .latest-project{} .latest-project .owl-carousel{ display:block; max-width:450px; width: 100%; margin: 0 auto; } .latest-project .owl-carousel .owl-stage-outer{ overflow: visible; padding: 0px 0px; } .single-project-style1{ position: relative; display: block; } .single-project-style1 .img-holder{ position: relative; display: block; overflow: hidden; } .single-project-style1 .img-holder img{ width: 100%; transition: all 500ms ease; } .single-project-style1:hover .img-holder img { transform: scale(1.1); } .single-project-style1 .overlay-content{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: all 500ms ease; transition-delay: .3s; opacity: 0; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+36,1e5799+40,1e5799+40,1e5799+40,1e5799+42,1e5799+42,1e5799+49,0b0722+72&0+35,0.67+71,1+100 */ background: -moz-linear-gradient(top, rgba(30,87,153,0) 35%, rgba(30,87,153,0.02) 36%, rgba(30,87,153,0.09) 40%, rgba(30,87,153,0.13) 42%, rgba(30,87,153,0.26) 49%, rgba(12,10,39,0.67) 71%, rgba(11,7,34,0.68) 72%, rgba(11,7,34,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(30,87,153,0) 35%,rgba(30,87,153,0.02) 36%,rgba(30,87,153,0.09) 40%,rgba(30,87,153,0.13) 42%,rgba(30,87,153,0.26) 49%,rgba(12,10,39,0.67) 71%,rgba(11,7,34,0.68) 72%,rgba(11,7,34,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(30,87,153,0) 35%,rgba(30,87,153,0.02) 36%,rgba(30,87,153,0.09) 40%,rgba(30,87,153,0.13) 42%,rgba(30,87,153,0.26) 49%,rgba(12,10,39,0.67) 71%,rgba(11,7,34,0.68) 72%,rgba(11,7,34,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001e5799', endColorstr='#0b0722',GradientType=0 ); /* IE6-9 */ } .single-project-style1:hover .overlay-content{ opacity: 1; } .single-project-style1 .overlay-content .project-details { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 30px 32px; transition: all 700ms ease; transition-delay: .6s; opacity: 0; transform-style: preserve-3d; transform: perspective(1200px) rotateX(-90deg) translateZ(-51px); } .single-project-style1:hover .overlay-content .project-details { -webkit-transform: perspective(1200px) rotateX(0deg) translateZ(0px); -moz-transform: perspective(1200px) rotateX(0deg) translateZ(0px); transform: perspective(1200px) rotateX(0deg) translateZ(0px); opacity: 1; transition-delay: 0.2s; } .single-project-style1 .project-details .left{ display: block; } .single-project-style1 .project-details .left h3{ color: #ffffff; margin: 0 0 3px; } .single-project-style1 .project-details .left span{ color: #3a68b1; } .single-project-style1 .project-details .right { margin: 11px 0; } .single-project-style1 .project-details .right a { line-height: 15px; display: block; } .single-project-style1 .project-details .right a span:before{ color: #3a68b1; font-size: 32px; line-height: 32px; } .latest-project .owl-theme .owl-nav { position: absolute; right: -330px; top: -105px; margin: 0; } .latest-project .owl-theme .owl-nav [class*="owl-"] { background: transparent; color: #ffffff; font-size: 20px; font-weight: 400; height: 45px; width: 45px; line-height: 42px; margin: 0; padding: 0; border: 1px solid #302c4a; transition: all 700ms ease 0s; border-radius: 50%; } .latest-project .owl-theme .owl-nav .owl-next { margin-left: 10px; } .latest-project .owl-theme .owl-nav [class*="owl-"]:hover{ border-color: #3a68b1; background: #3a68b1; color: #000000; } /*** ============================================= Fact counter Area style ============================================= ***/ .fact-counter-area { position: relative; display: block; background: #f8f7ff; padding: 75px 0 40px; } .single-fact-counter { position: relative; display: block; max-width: 270px; width: 100%; margin: 0 auto 30px; padding-left: 85px; } .single-fact-counter .icon-box { position: absolute; top: 0px; left: 0; width: 60px; height: 95px; text-align: center; z-index: 1; transition: all 500ms ease; transition-delay: .3s; } .single-fact-counter .icon-box:before { position: absolute; top: 0; left: 0; right: 0; width: 40px; height: 95px; border: 4px solid #f0eef9; content: ""; z-index: -1; margin: 0 auto; opacity: 1; transition: all 500ms ease; } .single-fact-counter .icon-box span:before { position: relative; top: 0; color: #3a68b1; font-size: 60px; line-height: 60px; transition: all 500ms ease; transition-delay: .2s; } .single-fact-counter .count-box { position: relative; display: block; } .single-fact-counter h1 { line-height: 36px; margin: 0 0 10px; } .single-fact-counter h1 span { color: #222222; font-size: 48px; font-weight: 600; font-family: 'Poppins', sans-serif; } .single-fact-counter .count-box .title{} .single-fact-counter .count-box .title h3 { color: #868298; font-size: 18px; line-height: 26px; font-weight: 400; text-transform: capitalize; font-family: 'Rubik', sans-serif; } /*** ============================================= Latest blog Area style ============================================= ***/ .latest-blog-area { position: relative; display: block; background: #ffffff; padding-top: 100px; padding-bottom: 40px; } .single-blog-post { position: relative; display: block; margin-bottom: 52px; } .single-blog-post .img-holder { position: relative; display: block; overflow: hidden; transition: all 0.5s ease-in-out 0.6s; } .single-blog-post .img-holder::before { background: rgba(60, 55, 90, 0.85); top: 0px; left: 0px; bottom: 0px; right: 0px; content: ""; position: absolute; transition: all 0.5s ease-in-out 0s; transform-style: preserve-3d; transform: perspective(1200px) rotateX(45deg) translateZ(0px); z-index: 3; opacity: 0; } .single-blog-post:hover .img-holder::before{ transform: perspective(1200px) rotateX(0deg) translateZ(0px); transition-delay: 0.1s; opacity: 1; } .single-blog-post .img-holder img { transition: all 0.5s ease-in-out 0.6s; width: 100%; } .single-blog-post:hover .img-holder img { transform: scale(1.2, 1.2); } .single-blog-post .post-date { position: absolute; top: 10px; left: 10px; width: 70px; height: 70px; text-align: center; background: #3a68b1; border-radius: 50%; z-index: 3; transition: all 0.8s ease-in-out 0.8s; } .single-blog-post:hover .post-date{ transform: rotate(360deg); } .single-blog-post .post-date h3 { display: block; padding: 13px 10px; color: #ffffff; line-height: 22px; } .single-blog-post .text-holder { position: relative; display: block; padding: 25px 0px 0px; } .single-blog-post .text-holder .blog-title { position: relative; display: block; font-size: 22px; line-height: 30px; } .single-blog-post .text-holder .blog-title a{ color: #393939; transition: all 500ms ease; } .single-blog-post .text-holder .blog-title a:hover{ color: #3a68b1; } .single-blog-post .text-holder .text{ display: block; margin-top: 16px; } .single-blog-post .text-holder .text p{ margin: 0 0 16px; } .single-blog-post .text-holder .text a.read-more{ color: #222222; } .single-blog-post:hover .text-holder .text a.read-more{ color: #3a68b1; } /*** ============================================= Choose Area Style ============================================= ***/ .choose-area { position: relative; background-attachment: fixed; background-position: center top; background-repeat: no-repeat; background-size: cover; padding-top: 93px; padding-bottom: 60px; z-index: 1; } .choose-area::before { position: absolute; background: rgba(26, 22, 46, 0.90); content: ""; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; } .choose-title { position: relative; display: block; max-width: 730px; width: 100%; text-align: center; margin: 0 auto; } .choose-title h1{ color: #ffffff; font-size: 36px; line-height: 42px; font-weight: 600; margin: 0 0 14px; } .choose-title p{ color: #3a68b1; font-size: 20px; line-height: 30px; margin: 0; } .single-choose-item{ position: relative; display: block; background: #39345a; padding: 60px 15px 52px; margin-bottom: 40px; } .single-choose-item .iocn-holder{ display: block; margin-bottom: 25px; } .single-choose-item .text-holder{ position: relative; display: block; } .single-choose-item .text-holder h3{ color: #ffffff; margin: 0 0 18px; } .single-choose-item .text-holder p{ color: #d9d7e8; margin: 0; } .single-choose-item.bg1{ background: #ffffff; } .single-choose-item.bg1 .text-holder h3{ color: #222222; } .single-choose-item.bg1 .text-holder p{ color: #868298; } .single-choose-item.bg2{ background: #3a68b1; } .single-choose-item.bg2 .text-holder h3{ color: #ffffff; } .single-choose-item.bg2 .text-holder p{ color: #ffffff; } /*** ============================================= Call Us Area Style ============================================= ***/ .call-us-area{ position: relative; display: block; padding-top: 100px; padding-bottom: 60px; z-index: 3; } .call-us-area .call-us-bg { position: absolute; top: 0; left: 0; width: 100%; height: 320px; background-attachment: scroll; background-position: top right; background-repeat: no-repeat; background-size: cover; z-index: -1; } .call-us-area .call-us-bg::before { position: absolute; background: rgba(248, 247, 255, 0.85); content: ""; width: 100%; height: 320px; top: 0; left: 0; z-index: -1; } .sec-title.call-us-title{ position: relative; display: inline-block; float: left; padding-right: 120px; } .call-us-text { position: relative; display: inline-block; float: left; max-width: 600px; width: 100%; margin-top: -7px; } .call-us-text p{ color: #39345a; font-size: 20px; line-height: 30px; margin: 0; } .contact-info-box{ position: relative; display: block; background: #39345a; border-radius: 5px; padding: 35px 40px 17px; } .contact-info-box ul { position: relative; display: block; overflow: hidden; border-bottom: 1px solid #4d496b; padding-bottom: 32px; margin-bottom: 17px; } .contact-info-box ul li{ position: relative; display: block; padding-left: 45px; margin-bottom: 25px; } .contact-info-box ul li:last-child{ margin-bottom: 0; } .contact-info-box ul li .icon{ position: absolute; top: 10px; left: 0; } .contact-info-box ul li .icon span:before{ color: #3a68b1; font-size: 35px; line-height: 35px; } .contact-info-box ul li .title{ position: relative; display: block; padding-left: 10px; } .contact-info-box ul li .title h3{ color: #ffffff; font-size: 18px; font-weight: 500; margin: 0 0 2px; } .contact-info-box ul li .title span{ color: #3a68b1; font-size: 18px; } .contact-info-box .find-map-box { position: relative; display: block; overflow: hidden; padding-left: 60px; min-height: 45px; } .contact-info-box .find-map-box .icon{ position: absolute; top: 0; left: 0; } .contact-info-box .find-map-box .icon span:before{ color: #575376; font-size: 45px; line-height: 45px; } .contact-info-box .find-map-box .text { display: block; margin: 9px 0; } .contact-info-box .find-map-box .text a{ color: #ffffff; } .contact-info-form{ position: relative; display: block; background: #ffffff; padding: 40px 40px 20px; border: 1px solid #f0eef9; border-radius: 7px; } .contact-info-form form { position: relative; display: block; } .contact-info-form form .input-box { position: relative; margin-bottom: 20px; } .contact-info-form form .input-box input[type=text], .contact-info-form form .input-box input[type=email], .contact-info-form form .input-box textarea{ position: relative; display: block; width: 100%; height: 55px; border: 1px solid #f0eef9; padding: 0 20px; color: #868298; font-size: 16px; font-weight: 400; border-radius: 5px; font-family: 'Rubik', sans-serif; transition: all 500ms ease; } .contact-info-form form .input-box textarea{ height: 205px; padding: 15px 20px; } .contact-info-form form .input-box button { padding: 19px 35px 18px; border-radius: 5px; } .contact-info-form form .input-box input[type=text]:focus{ border-color: #3a68b1; } .contact-info-form form .input-box input[type=email]:focus{ border-color: #3a68b1; } .contact-info-form form .input-box textarea:focus{ border-color: #3a68b1; } .contact-info-form form .input-box button:hover{} /*** ============================================= Brand Area Style ============================================= ***/ .brand-area{ position: relative; display: block; padding-bottom: 70px; } .single-brand-item { position: relative; display: block; max-width: 270px; width: 100%; text-align: center; margin: 0 auto 30px; border: 1px solid #f0eef9; transition: all 700ms ease; } .single-brand-item:hover{ -webkit-box-shadow: 0px 2px 10px 3px #f0eef9; box-shadow: 0px 2px 10px 3px #f0eef9; } .single-brand-item a{ display: block; } .single-brand-item a img{ width: auto; } /*** ============================================= Contact Info Area style ============================================= ***/ .contact-info-area{ position: relative; display: block; background: #f8f7ff; padding: 100px 0 100px; } .contact-form { position: relative; display: block; background: #ffffff; padding: 50px 50px 50px; -webkit-box-shadow: 0px 2px 5px 3px #f2f1f9; box-shadow: 0px 2px 5px 3px #f2f1f9; } .contact-form form{ position: relative; display: block; } .contact-form form .input-box{ position: relative; display: block; } .contact-form form input[type="text"], .contact-form form input[type="email"], .contact-form form textarea{ position: relative; display: block; background: transparent; border: 1px solid #f0eef9; width: 100%; height: 60px; font-size: 16px; margin-bottom: 30px; padding-left: 45px; padding-right: 20px; border-radius: 5px; transition: all 500ms ease; } .contact-form form textarea { height: 110px; padding-left: 45px; padding-right: 20px; padding-top: 17px; padding-bottom: 15px; } .contact-form form input[type="text"]:focus{ border-color: #1d1d1d; color: #222222; } .contact-form form .input-box .icon { position: absolute; top: 0; left: 20px; margin: 16px 0 14px; } .contact-form form .input-box .icon i{ color: #868298; font-size: 16px; line-height: 30px; } .contact-form form input[type="text"]::-webkit-input-placeholder { color: #868298; } .contact-form form input[type="text"]:-moz-placeholder { color: #868298; } .contact-form form input[type="text"]::-moz-placeholder { color: #868298; } .contact-form form input[type="text"]:-ms-input-placeholder { color: #868298; } .contact-form form input[type="email"]::-webkit-input-placeholder { color: #868298; } .contact-form form input[type="email"]:-moz-placeholder { color: #868298; } .contact-form form input[type="email"]::-moz-placeholder { color: #868298; } .contact-form form input[type="email"]:-ms-input-placeholder { color: #868298; } .contact-form form button { width: 100%; padding: 21px 0 21px; cursor: pointer; display: block; } .how-can-help-box { position: relative; display: block; } .how-can-help-box .sec-title { padding-bottom: 38px; } .how-can-help-box .sec-title p { color: #222222; margin: 46px 0 0; } .how-can-help-box .inner-content{ position: relative; display: block; } .how-can-help-box .inner-content ul { position: relative; display: block; overflow: hidden; margin-bottom: 46px; } .how-can-help-box .inner-content ul li { position: relative; display: block; overflow: hidden; border-bottom: 1px solid #e8e6f4; padding-bottom: 22px; margin-bottom: 24px; } .how-can-help-box .inner-content ul li:last-child{ border-bottom: none; padding-bottom: 0; margin-bottom: 0; } .how-can-help-box .inner-content ul li .left{ position: relative; display: block; padding-left: 50px; } .how-can-help-box .inner-content ul li .left .icon { position: absolute; top: 7px; left: 0; } .how-can-help-box .inner-content ul li .left .icon span:before{ color: #39345a; font-size: 45px; line-height: 45px; } .how-can-help-box .inner-content ul li .left .text{ position: relative; display: block; padding-left: 27px; } .how-can-help-box .inner-content ul li .left .text h3{ color: #222222; margin: 0 0 8px; } .how-can-help-box .inner-content ul li .left .text span{ color: #868298; } .how-can-help-box .inner-content ul li .right { position: relative; display: block; line-height: 20px; margin: 17px 0; } .how-can-help-box .inner-content ul li .right i{ color: #868298; font-size: 24px; transition: all 500ms ease; transform: perspective(0px) translateX(0px) rotate(0deg); } .how-can-help-box .inner-content ul li:hover .right i{ color: #3a68b1; transform: perspective(0px) translateX(-20px) rotate(0deg); } /*** ============================================= Branches Section style ============================================= ***/ .branches-section{ position: relative; display: block; padding: 100px 0 90px; } .branches_s2_title { position: relative; display: inline-block; float: left; } .branches_s2_text{ position: relative; display: inline-block; float: left; max-width: 670px; width: 100%; padding-left: 80px; margin-top: -7px; } .branches_s2_text p{ color: #222222; font-size: 20px; line-height: 30px; margin: 0; } .single-branches-box{ position: relative; display: block; border: 1px solid #f0eef9; border-radius: 6px; padding: 34px 39px 32px; padding-right: 30px; transition: all 900ms ease; transition-delay: .5s; } .single-branches-box .title-box{ position: relative; display: block; padding-bottom: 15px; } .single-branches-box .title-box:before{ position: absolute; bottom: 0; left: 0; width: 60px; height: 1px; background: #3a68b1; content: ""; } .single-branches-box .title-box h3{ display: block; text-transform: capitalize; } .single-branches-box ul { position: relative; display: block; margin-top: 26px; } .single-branches-box ul li{ display: block; margin-bottom: 20px; } .single-branches-box ul li:last-child{ margin-bottom: 0; } .single-branches-box ul li .title{ display: block; margin-bottom: 7px; } .single-branches-box ul li .title h5{ color: #222222; font-size: 16px; text-transform: uppercase; } .single-branches-box ul li .text{} .single-branches-box ul li .text p{ line-height: 24px; margin: 0; } .branches-section .inner-content{ overflow: hidden; } .branches-section .owl-carousel{ display: block; max-width: 370px; width: 100%; margin: 0 auto; } .branches-section .owl-carousel .owl-stage-outer{ overflow: visible; padding: 0px 0px 10px; } .branches-section .owl-carousel .owl-stage-outer .owl-item.active .single-branches-box{ transform: translateY(0px); -webkit-box-shadow: 0px 2px 9px 2px #f0eef9; box-shadow: 0px 2px 9px 2px #f0eef9; border: 1px solid transparent; } .branches-section .owl-theme .owl-nav { position: absolute; right: -400px; top: -102px; margin: 0; } .branches-section .owl-theme .owl-nav [class*="owl-"] { background: transparent; color: #868298; font-size: 20px; font-weight: 400; height: 45px; width: 45px; line-height: 42px; margin: 0; padding: 0; border: 1px solid #f0eef9; transition: all 700ms ease 0s; border-radius: 50%; } .branches-section .owl-theme .owl-nav .owl-next { margin-left: 10px; } .branches-section .owl-theme .owl-nav [class*="owl-"]:hover{ border-color: #3a68b1; background: #3a68b1; color: #000000; } /*** ============================================= Branches Section style ============================================= ***/ .google-map-area{ position: relative; display: block; } #contact-google-map { height: 480px; width: 100%; } .modern-choose-section { background-color: #f8f9fa; padding: 80px 0; } .section-header { margin-bottom: 50px; } .section-title { font-size: 2.5rem; color: #2c3e50; font-weight: 700; margin-bottom: 15px; } .section-subtitle { color: #7f8c8d; font-size: 1.1rem; } .modern-card { background-color: white; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); padding: 40px 30px; text-align: center; transition: all 0.3s ease; margin-bottom: 30px; } .modern-card:hover { transform: translateY(-10px); box-shadow: 0 15px 40px rgba(0,0,0,0.15); } .icon-holder { margin-bottom: 25px; } .choose-icon { width: 80px; height: 80px; } .choose-description { color: #7f8c8d; line-height: 1.6; } .modern-choose-section .row { display: flex; align-items: stretch; } .modern-card { display: flex; flex-direction: column; height: 100%; justify-content: space-between; } .modern-card .content-box { flex-grow: 1; display: flex; flex-direction: column; } .choose-title { flex-shrink: 0; font-size: 1.5rem; color: #2c3e50; font-weight: 600; } .choose-description { flex-grow: 1; display: flex; align-items: center; text-align: center; } @media (max-width: 991px) { .modern-choose-section .single-choose-item { margin-bottom: 30px; } } .latest-blog-area-s2 .blog-carousel { display: flex; justify-content: space-between; } .latest-blog-area-s2 .blog-card { margin: 0 1.5%; box-shadow: 0 10px 30px rgba(0,0,0,0.1); transition: all 0.3s ease; } .latest-blog-area-s2 .blog-card:hover { transform: translateY(-10px); box-shadow: 0 15px 40px rgba(0,0,0,0.15); } .latest-blog-area-s2 .blog-card .img-holder { position: relative; overflow: hidden; } .latest-blog-area-s2 .blog-card .img-holder img { width: 100%; height: 250px; object-fit: cover; } .latest-blog-area-s2 .blog-card .overlay-box { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s ease; } .latest-blog-area-s2 .blog-card:hover .overlay-box { opacity: 1; } .latest-blog-area-s2 .blog-card .overlay-box .read-more-link { color: white; padding: 10px 20px; border: 2px solid white; text-decoration: none; } .latest-blog-area-s2 .blog-card .text-holder { padding: 20px; min-height: 245px; } @media (max-width: 991px) { .latest-blog-area-s2 .blog-card { width: 45%; margin: 0 2.5%; } } @media (max-width: 767px) { .latest-blog-area-s2 .blog-card { width: 90%; margin: 0 5%; } } .latest-blog-area-s2 .blog-card .post-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; padding: 0 10px; } .latest-blog-area-s2 .blog-card .post-meta .date { color: #7f8c8d; font-size: 0.9rem; } .latest-blog-area-s2 .blog-card .post-meta .readmore .btn-two { padding: 8px 15px; font-size: 0.9rem; } .latest-blog-area-s2 .blog-nav-container { display: inline-block; margin-left: 15px; vertical-align: middle; } .latest-blog-area-s2 .blog-nav-buttons { display: inline-flex; align-items: center; } .latest-blog-area-s2 .blog-nav-buttons span { cursor: pointer; margin: 0 5px; color: #7f8c8d; transition: color 0.3s ease; } .latest-blog-area-s2 .blog-nav-buttons span:hover { color: #FFFFFF; } .latest-blog-area-s2 .blog-nav-buttons .blog-nav-prev, .latest-blog-area-s2 .blog-nav-buttons .blog-nav-next { font-size: 1.2rem; } .latest-blog-area-s2 .sec-title .title { display: flex; align-items: center; justify-content: space-between; width: 100%; } .latest-blog-area-s2 .blog-nav-container { display: flex; align-items: center; } .latest-blog-area-s2 .blog-nav-buttons { display: flex; align-items: center; } .latest-blog-area-s2 .blog-nav-buttons span { width: 40px; height: 40px; background-color: #3A68B1; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-left: 10px; cursor: pointer; transition: background-color 0.3s ease; } .latest-blog-area-s2 .blog-nav-buttons span:hover { background-color: #03317B; } .latest-blog-area-s2 .blog-nav-buttons .blog-nav-prev, .latest-blog-area-s2 .blog-nav-buttons .blog-nav-next { font-size: 1.2rem; } .group-companies-area { padding: 80px 0; background-color: #f8f9fa; } .group-companies-area .section-header { margin-bottom: 50px; } .group-companies-area .company-logo { margin-bottom: 30px; } .group-companies-area .company-logo img { max-width: 200px; height: auto; } .group-companies-area .section-title { font-size: 2.5rem; color: #2c3e50; font-weight: 700; margin-bottom: 15px; } .company-card { background: white; border-radius: 15px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.1); transition: all 0.3s ease; margin-bottom: 30px; } .company-card:hover { transform: translateY(-10px); box-shadow: 0 15px 40px rgba(0,0,0,0.15); } .company-card .company-image { position: relative; overflow: hidden; height: 250px; } .company-card .company-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .company-card:hover .company-image img { transform: scale(1.1); } .company-card .company-content { padding: 30px; } .company-card .company-content h3 { font-size: 1.5rem; color: #2c3e50; margin-bottom: 15px; font-weight: 600; } .company-card .company-content p { color: #7f8c8d; margin-bottom: 20px; line-height: 1.6; } .company-card .btn-two { display: inline-block; padding: 10px 25px; background-color: #3A68B1; color: white; text-decoration: none; border-radius: 5px; transition: background-color 0.3s ease; } .company-card .btn-two:hover { background-color: #03317B; } @media (max-width: 991px) { .group-companies-area .section-title { font-size: 2rem; } .company-card { margin-bottom: 30px; } }