/* Template Name: Axivis - Car Services and Repair HTML Template Template URI: http://vecurosoft.com/products/html/axivis Description: Axivis - Car Services and Repair HTML Template Author: Vecuro Author URI: https://themeforest.net/user/vecuro Version: 1.0 */ /*================================= CSS Index End ==================================*/ /* 01. Variable 02. Typography 03. Theme Global Layout 04. Bootstrap Overwrite 4.1 Grid 4.2 Form 05. Vendor Custom Style 5.1. Select 2 5.2. Slick Slider 5.3. Mobile Menu 5.4. Date & Time Picker 5.5. Twenty Twenty Img Handler 06. Template Style 6.1. header Top 6.2. header Middle 6.3. Header 6.4. Hero Section 6.5. About Us 6.6. Service 6.7. Repair Estimator 6.8. Work Process 6.9. Latest Project 6.10. Our Team 6.11. Featured 6.12. Pricing Table 6.13. Testomonial 6.14. Counter 6.15. Blog 6.16. Subscribe Area 6.17. Brand 6.18. CTA Area 6.19. Gallery 6.20. Breadcumb 6.22. Contact Form 6.23. Mission Vision 6.24. Appointment Form 6.25. Error Page 6.26. Pricing Details 6.27. Project 6.28. Pagination 6.29. Branch Information 6.30. Contact Map 6.31. axivis Founder 6.32. Team Details 6.33. Service Details 6.34. Popup Search Box 6.35. Popup Side Menu 6.36. Widget 6.37. Footer 6.38. Shop 6.39. Shop Details 6.40. Inner Form Design 6.41. Shopping Cart 6.42. Checkout 07. Helper Classes 7.1. Background 7.2. Padding 7.3. Margin */ /*================================= CSS Index End ==================================*/ /*================================= 01. Variable ==================================*/ /*================================= 02. Typography ==================================*/ :root{--theme-clr1: #0046e2; --theme-clr2: #ef0f3a;} body{font-family: "Roboto", sans-serif; font-size: 16px; font-weight: 400; color: #696e78; overflow-x: hidden; -webkit-font-smoothing: antialiased;} iframe{border: none;} .slick-slide, .slick-slide:focus, button:focus, a:focus, a:active, input, input:hover, input:focus, input:active, textarea, textarea:hover, textarea:focus, textarea:active{-moz-outline: none; outline: none;} input:focus{outline: none; box-shadow: none;} img:not([draggable]), embed, object, video{max-width: 100%; height: auto;} a{text-decoration: none; outline: 0; color: #696e78; line-height: 28px; transition: 0.4s;} a:active, a:focus, a:hover, a:visited{text-decoration: none; outline: 0;} a:active, a:focus, a:hover{color: #0046e2;} button{transition: 0.4s;} img{border: none; max-width: 100%;} ul, li{margin: 0; padding: 0; list-style: none;} h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, p a, span a{color: inherit; font-size: inherit; font-family: inherit; font-weight: inherit;} h1, h2, h3, h4, h5, h6{font-family: "Roboto", sans-serif; line-height: 28px; color: #01133c; font-weight: 500; margin-bottom: 25px; text-transform: capitalize; letter-spacing: 1px;} @media (max-width: 1500px){h1, h2, h3, h4, h5, h6{letter-spacing: 0;}} h1, h2{line-height: 48px; font-weight: 600; font-family: "Oswald", sans-serif;} h1{font-size: 42px;} h2{font-size: 36px;} h3{font-size: 30px;} h4{font-size: 22px;} h5{font-size: 20px;} h6{font-size: 16px;} p{margin-bottom: 20px; letter-spacing: 0.20px; line-height: 28px;} @media (max-width: 1500px){p{letter-spacing: 0;}} [class^="flaticon-"]:before, [class*=" flaticon-"]:before, [class^="flaticon-"]:after, [class*=" flaticon-"]:after{font-size: inherit; margin-left: 0;} /*================================= 03. Theme Global Layout ==================================*/ .primary-btn{display: inline-block; max-width: 100%; width: 140px; height: 50px; line-height: 49px; text-align: center; font-weight: 700; font-family: "Roboto", sans-serif; font-size: 14px; text-transform: uppercase; background-color: #0046e2; color: #ffffff; position: relative; margin-right: 15px; z-index: 5; border: none; overflow: hidden; transition: all ease 0.4s !important; box-shadow: 0px 10px 28.5px 1.5px rgba(0, 43, 139, 0.25);} .primary-btn:last-child{margin-right: 0;} .primary-btn .btn-text{position: relative; z-index: 10; display: inline-block;} .primary-btn .btn-bg{position: absolute; display: block; width: 0; height: 0; border-radius: 50%; background-color: #ef0f3a; transition: width 0.4s ease-in-out, height 0.4s ease-in-out; transform: translate(-50%, -50%); z-index: -1;} .primary-btn:focus, .primary-btn:active{color: #ffffff;} .primary-btn:hover{color: #ffffff;} .primary-btn:hover .btn-bg{width: 225%; height: 500px;} .primary-btn.skew{transform: skewX(-10deg);} .primary-btn.skew .btn-text{transform: skewX(10deg);} .primary-btn.type2{background-color:#ffac01; box-shadow: 0px 10px 28.5px 1.5px rgba(146, 0, 28, 0.25);} .primary-btn.type2 .btn-bg{background-color: #0046e2;} .primary-btn.outline-btn{color: #01133c; border: 1px solid #0046e2 !important;} .primary-btn.outline-btn:hover{border-color: transparent !important; color: #ffffff; background-color: #0046e2;} .primary-btn.outline-btn.type2{border-color: #ef0f3a !important;} .primary-btn.outline-btn.type2:hover{background-color: #ef0f3a !important; border-color: transparent !important;} .primary-btn.outline-btn.type2 .btn-bg{background-color: #ef0f3a;} .primary-btn.white-btn{color: #01133c; background-color: #ffffff;} .primary-btn.white-btn.outline-btn{background-color: transparent; color: #ffffff !important; border-color: #ffffff !important;} .primary-btn.white-btn.outline-btn:hover{border-color: transparent !important;} .primary-btn.white-btn:hover{color: #ffffff;} .primary-btn.no-shadow{box-shadow: none;} .circle-btn{display: inline-block; text-align: center; background-color: #0046e2; color: #ffffff; z-index: 1; font-size: 46px; position: relative; width: 100px; height: 100px; line-height: 100px; border-radius: 50%; transition: all ease 0.4s;} .circle-btn i{width: inherit; height: inherit; line-height: inherit; display: inherit; background-color: inherit; color: inherit; border-radius: inherit;} .circle-btn:hover{color: #0046e2; background-color: #ffffff; box-shadow: 0 10px 54px -4px rgba(0, 0, 0, 0.1);} .circle-btn.xl{font-size: 52px; width: 120px; height: 120px; line-height: 120px;} .circle-btn.xs{font-size: 16px; width: 50px; height: 50px; line-height: 50px;} .circle-btn .ripple{background-color: #0046e2;} .circle-btn.type2{background-color: #ef0f3a;} .circle-btn.type2 .ripple{background-color: #ef0f3a;} a.link-btn{font-size: 14px; text-transform: uppercase; font-weight: 700; color: #0046e2; letter-spacing: 0.20px; position: relative; display: inline-block;} a.link-btn:after{content: '\f178'; font-family: "Font Awesome 5 Pro"; position: absolute; left: 0; opacity: 0; visibility: hidden; transition: left ease 0.4s, opacity ease 0.4s;} a.link-btn:hover:after{opacity: 1; visibility: visible; left: -20px;} .video-btn{width: 100px; height: 100px; line-height: 100px; text-align: center; font-size: 40px; display: inline-block; position: relative; border-radius: 50%; z-index: 1;} .video-btn .btn-text{display: inline-block; color: inherit; width: 100%; height: 100%; line-height: inherit; padding: 0; position: relative; z-index: 1; border-radius: 50%; background-color: #0046e2; color: #ffffff; transition: all ease-in-out 0.4s;} .video-btn .btn-text:hover{border-color: #0046e2; background-color: #ffffff; color: #0046e2;} .video-btn.type2-btn .btn-text{background-color: #ef0f3a;} .video-btn.type2-btn .btn-text:hover{background-color: #ffffff; border-color: #ef0f3a; color: #ef0f3a;} .video-btn.type2-btn .ripple{background-color: #ef0f3a;} .shape-icon{position: relative; display: inline-block; z-index: 1; margin-right: 20px;} .shape-icon:before{content: ''; position: absolute; top: 50%; left: 0; width: 60px; height: 60px; margin-top: -30px; background-color: #0046e2; z-index: -1; opacity: 0.10; border-radius: 50%; animation: cscale 1s infinite alternate;} .shape-icon i{color: #0046e2; font-size: 62px; padding-left: 30px;} .preloader{position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: #0046e2; z-index: 999999; overflow: hidden;} .preloader .meter{position: absolute; left: 50%; top: 50%; margin: -75px 0 0 -75px; border: 1px solid #ffffff; width: 150px; height: 150px; border-radius: 50%; box-shadow: 0px 10px 30px -11px rgba(0, 0, 0, 0.39);} .preloader .meter .loadtext{position: absolute; top: 50%; left: 0; width: 100%; text-align: center; line-height: 14px; font-family: "Roboto", sans-serif; font-weight: bold; font-size: 10px; margin-top: 20px; color: #ffffff; display: block; text-transform: uppercase;} .preloader .meter .loader-circle-1{width: 138px; height: 138px; left: 5px; top: 5px; border: 1px #ffffff solid; border-radius: 50%; position: absolute; border-right-color: transparent; animation: loaderspin 3s linear infinite;} .preloader .meter .loader-circle-2{width: 126px; height: 126px; left: 5px; top: 5px; border: 1px transparent solid; border-radius: 50%; position: absolute; border-right-color: #ffffff; animation: loaderspin 5s linear infinite;} .preloader .meter .line{width: 10px; height: 2px; background: #ffffff; position: absolute;} .preloader .meter .line:nth-child(1){left: 16px; top: 50%; margin-top: -1px;} .preloader .meter .line:nth-child(2){transform: rotate(45deg); left: 33px; top: 33px;} .preloader .meter .line:nth-child(3){top: 16px; left: 50%; width: 2px; height: 10px;} .preloader .meter .line:nth-child(4){transform: rotate(135deg); right: 33px; top: 33px;} .preloader .meter .line:nth-child(5){right: 16px; top: 50%; margin-top: -1px;} .preloader .meter .line:nth-child(6){transform: rotate(45deg); right: 33px; bottom: 33px; background: #ffffff;} .preloader .meter .subline{position: absolute; width: 6px; height: 2px; background: #ffffff;} .preloader .meter .subline:nth-child(7){transform: rotate(22.5deg); left: 21px; top: 50px;} .preloader .meter .subline:nth-child(8){transform: rotate(67.5deg); left: 50px; top: 21px;} .preloader .meter .subline:nth-child(9){transform: rotate(112.5deg); right: 50px; top: 21px;} .preloader .meter .subline:nth-child(10){transform: rotate(157.5deg); right: 21px; top: 50px;} .preloader .meter .subline:nth-child(11){transform: rotate(22.5deg); right: 20px; bottom: 49px; background: #ffffff;} .preloader .meter .needle{width: 14px; height: 14px; border-radius: 50%; border: 1px #fff solid; position: absolute; left: 50%; top: 50%; margin: -8px 0 0 -8px; z-index: 1; animation: meterIndecator 3s infinite ease-in-out;} .preloader .meter .needle:before{content: ""; width: 0; height: 0; border-style: solid; border-width: 3.5px 50px 3.5px 0; border-color: transparent #ffffff transparent transparent; position: absolute; right: 50%; top: 50%; margin: -3.5px 0 0 0; border-radius: 0 50% 50% 0;} .preloader.layout2{background-color: #ef0f3a;} @keyframes loaderspin{0%{transform: rotate(0deg);} 100%{transform: rotate(360deg);}} @keyframes meterIndecator{0%{transform: rotate(0deg);} 16%{transform: rotate(75deg);} 25%{transform: rotate(55deg);} 30%{transform: rotate(90deg);} 36%{transform: rotate(170deg);} 42%{transform: rotate(150deg);} 50%{transform: rotate(227deg);} 100%{transform: rotate(0deg);}} .section-title{padding: 0 10px; padding-bottom: 45px;} .section-title .title{font-size: 40px; text-transform: uppercase; line-height: 0.9; margin-top: -3px;} .section-title2{padding-bottom: 75px;} .section-title2 .title{font-size: 48px; text-transform: uppercase; font-weight: 600; position: relative; z-index: 1; line-height: 0.8; margin-bottom: 25px;} .section-title2 .title:before{content: attr(data-text); font-family: "Oswald", sans-serif; display: inline-block; position: absolute; width: 100%; z-index: -1; font-size: 150px; text-align: center; left: 50%; top: 50%; opacity: 0.05; text-transform: capitalize; font-weight: 600; line-height: 26px; margin-top: -24px; transform: translate(-50%, -50%);} .section-title2 .text{line-height: 26px; margin-bottom: 0; color: #494f5b;} .section-title3{position: relative; padding-bottom: 32px; margin-bottom: 80px;} .section-title3 .icon{width: 90px; height: 90px; line-height: 90px; display: inline-block; font-size: 48px; position: relative; z-index: 1; color: #0046e2; margin-bottom: 30px; border-radius: 50%;} .section-title3 .icon:before{content: ''; position: absolute; left: -2px; right: -2px; top: -2px; bottom: -2px; border: 2px dotted #0046e2; box-shadow: inset 0px 10px 19px 1px rgba(0, 42, 135, 0.1); border-radius: 50%; animation: cspine 20s linear infinite;} .section-title3 .title{font-size: 48px; text-transform: uppercase; letter-spacing: 0.40px; font-weight: 600; line-height: 0.8; margin-bottom: 30px;} .section-title3 .text{margin-bottom: 0;} .section-title3 .shape{position: absolute; bottom: 0; left: 50%; margin-left: -75px; width: 150px; height: 6px; overflow: hidden;} .section-title3 .shape:after, .section-title3 .shape:before{content: ''; position: absolute; left: -100%; top: 50%; width: 30px; height: 6px; background-color: #0046e2; margin-top: -3px;} .section-title3 .shape:after{width: 100%; height: 2px; margin: 0; margin-top: -1px; left: 0;} .section-title3 .shape:before{animation: sectionShape 8s linear infinite; animation-delay: 0s;} @keyframes sectionShape{form{left: -101%;} to{left: 101%;}} .sec-separator{width: 100%; text-align: center; position: relative;} .sec-separator:after, .sec-separator:before{content: ''; position: absolute; top: calc(50% - 1px); left: 0; height: 2px; width: 100%; background-color: #ef0f3a; z-index: 1;} .sec-separator:after{display: none;} .sec-separator span{display: block; width: 80px; height: 80px; line-height: 80px; background-color: #ef0f3a; color: #ffffff; font-size: 48px; z-index: 2; position: relative; border-radius: 50%; margin: 0 auto; overflow: hidden;} .sec-separator span i{position: absolute; left: -100%; top: 0; animation: sectionShape 8s linear infinite;} .separator-layout2 .sec-separator .shape{width: 100px; height: 100px; display: inline-block; position: absolute; left: 50%; top: 50%; margin-top: -50px; margin-left: -50px; border: 2px dotted #0046e2; z-index: 1; border-radius: 50%; box-shadow: 0 0 70px -25px #0d2b6e; animation: cspine 20s linear infinite; box-shadow: 0px 10px 38px 2px rgba(13, 43, 110, 0.2);} .separator-layout2 .sec-separator:before, .separator-layout2 .sec-separator:after{display: inline-block; width: calc(50% - 67px); background-color: #0046e2; left: 0;} .separator-layout2 .sec-separator:after{left: auto; right: 0;} .separator-layout2 .sec-separator span{background-color: #0046e2;} .separator-layout3 .sec-separator:before{background-color: #0046e2;} .separator-layout3 .sec-separator span{background-color: #0046e2;} .phone-box{background-color: #ef0f3a; border-top-left-radius: 50px; border-bottom-left-radius: 50px; padding-right: 60px;} .phone-box .icon{width: 70px; height: 70px; background-color: #ffffff; padding: 3px; text-align: center; margin-right: 35px; position: relative; border-radius: 50%;} .phone-box .icon:after, .phone-box .icon:before{content: ''; background-color: #ffffff; position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: 1; z-index: 1; border-radius: 50%; animation-name: callIcon; animation-duration: 4s; animation-iteration-count: infinite;} .phone-box .icon:after{animation-delay: 1.8s;} @keyframes callIcon{0%{transform: scale(0.7);} 90%{transform: scale(1.5);} 100%{opacity: 0;}} .phone-box .icon a{width: 100%; height: 100%; line-height: 70px; background-color: #ef0f3a; display: inline-block; font-size: 26px; color: #ffffff; position: relative; z-index: 2; border-radius: 50%;} .phone-box .icon a:hover{color: #ffffff;} .phone-box .content span{color: #ffffff; font-size: 14px; display: block; letter-spacing: 0.5px; margin-bottom: 5px;} .phone-box .content a{color: #ffffff; font-weight: 700; font-size: 24px; display: block;} .phone-box .content a:hover{color: #ffffff;} .ripple-wrap{position: relative; z-index: 1;} .ripple-wrap i{position: relative; z-index: 2;} .ripple-wrap.type2{background-color: #ef0f3a;} .ripple{position: absolute; top: 0; left: 0; display: inline-block; z-index: -1; width: 100%; height: 100%; background-color: #0046e2; animation-name: ripple; animation-duration: 5s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; border-radius: 50%; transition: background 1.5s ease;} .ripple.ripple-1{animation-delay: 1s;} .ripple.ripple-2{animation-delay: 1.5s;} .ripple.ripple-2{animation-delay: 2s;} @keyframes ripple{0%{transform: scale(1); opacity: 0;} 30%{opacity: 0.30;} 100%{transform: scale(1.9); opacity: 0;}} @keyframes ripple2{0%{transform: scale(1); opacity: 0;} 30%{opacity: 1;} 100%{transform: scale(1.9); opacity: 0;}} .gray-shadow, .our-featured-wrapper .single-featured .featured-icon .circle-btn{box-shadow: 0 10px 54px -4px rgba(0, 0, 0, 0.1);} .scrollToTop{position: fixed; bottom: 20px; right: 20px; display: inline-block; width: 34px; height: 60px; background-color: #fff; border: 2px solid #0046e2; padding: 10px 5px; overflow: hidden; border-radius: 50px; z-index: 9; opacity: 0; visibility: hidden;} .scrollToTop .move{width: 2px; height: 15px; background-color: #0046e2; display: inline-block; position: absolute; top: 0; left: 50%; opacity: 0; transform: translateX(-50%); animation: moveUp 2s linear infinite;} .scrollToTop.type2{border-color: #ef0f3a;} .scrollToTop.type2 .move{background-color: #ef0f3a;} .scrollToTop.show{opacity: 1; visibility: visible;} @keyframes moveUp{0%{transform: translate(-50%, 35px); opacity: 0;} 50%{transform: translate(-50%, 20px); opacity: 1;} 100%{transform: translate(-50%, 5px); opacity: 0;}} .scroll-btn{background-image: url("../img/bg-img/scroll-btn-bg.png"); background-size: 100% 100%; background-repeat: no-repeat; background-position: center center; width: 100%; height: 100%; max-height: 170px; max-width: 835px; margin: 0 auto; text-align: center;} .scroll-btn a{position: relative; display: inline-block; width: 34px; height: 60px; border: 2px solid #0046e2; padding: 10px 5px; overflow: hidden; border-radius: 50px;} .scroll-btn a .move{width: 2px; height: 15px; background-color: #0046e2; display: inline-block; position: absolute; top: 0; left: 50%; opacity: 0; transform: translateX(-50%); animation: move 2s linear infinite;} @keyframes move{0%{transform: translate(-50%, 5px); opacity: 0;} 50%{transform: translate(-50%, 20px); opacity: 1;} 100%{transform: translate(-50%, 35px); opacity: 0;}} @keyframes cscale{from{transform: scale(0.9);} to{transform: scale(1.08);}} @keyframes cspine{from{transform: rotate(0);} to{transform: rotate(359deg);}} @keyframes cspinereverse{from{transform: rotate(359deg);} to{transform: rotate(0);}} @keyframes cmoving{0%{transform: translate(0px, 0px);} 20%{transform: translate(-50px, 0px);} 50%{transform: translate(-50px, -50px);} 70%{transform: translate(0px, -50px);} 100%{transform: translate(0px, 0px);}} /* Up Down Animation */ @keyframes upDown{from{transform: translateY(-50px);} to{transform: translateY(50px);}} /* Down Up Animation */ @keyframes downUp{from{transform: translateY(50px);} to{transform: translateY(-50px);}} /*================================= 04. Bootstrap Overwrite ==================================*/ /*------------------- 4.1 Grid -------------------*/ @media only screen and (min-width: 1400px){.container{max-width: 1400px;}} .row.no-gutters{margin-right: 0; margin-left: 0;} .row.no-gutters .slick-track > [class^="col-"], .row.no-gutters .slick-track > [class*=" col-"], .row.no-gutters > [class^="col-"], .row.no-gutters > [class*=" col-"]{padding-right: 0; padding-left: 0;} .row.gutters-1{padding-left: 14.5px; padding-right: 14.5px;} .row.gutters-1 > [class^="col-"]{padding-left: 0.5px; padding-right: 0.5px;} .row.gutters-2{padding-left: 14px; padding-right: 14px;} .row.gutters-2 > [class^="col-"]{padding-left: 1px; padding-right: 1px;} .row.gutters-3{padding-left: 13.5px; padding-right: 13.5px;} .row.gutters-3 > [class^="col-"]{padding-left: 1.5px; padding-right: 1.5px;} .row.gutters-4{padding-left: 13px; padding-right: 13px;} .row.gutters-4 > [class^="col-"]{padding-left: 2px; padding-right: 2px;} .row.gutters-5{padding-left: 12.5px; padding-right: 12.5px;} .row.gutters-5 > [class^="col-"]{padding-left: 2.5px; padding-right: 2.5px;} .row.gutters-6{padding-left: 12px; padding-right: 12px;} .row.gutters-6 > [class^="col-"]{padding-left: 3px; padding-right: 3px;} .row.gutters-7{padding-left: 11.5px; padding-right: 11.5px;} .row.gutters-7 > [class^="col-"]{padding-left: 3.5px; padding-right: 3.5px;} .row.gutters-8{padding-left: 11px; padding-right: 11px;} .row.gutters-8 > [class^="col-"]{padding-left: 4px; padding-right: 4px;} .row.gutters-9{padding-left: 10.5px; padding-right: 10.5px;} .row.gutters-9 > [class^="col-"]{padding-left: 4.5px; padding-right: 4.5px;} .row.gutters-10{padding-left: 10px; padding-right: 10px;} .row.gutters-10 > [class^="col-"]{padding-left: 5px; padding-right: 5px;} .row.gutters-11{padding-left: 9.5px; padding-right: 9.5px;} .row.gutters-11 > [class^="col-"]{padding-left: 5.5px; padding-right: 5.5px;} .row.gutters-12{padding-left: 9px; padding-right: 9px;} .row.gutters-12 > [class^="col-"]{padding-left: 6px; padding-right: 6px;} .row.gutters-13{padding-left: 8.5px; padding-right: 8.5px;} .row.gutters-13 > [class^="col-"]{padding-left: 6.5px; padding-right: 6.5px;} .row.gutters-14{padding-left: 8px; padding-right: 8px;} .row.gutters-14 > [class^="col-"]{padding-left: 7px; padding-right: 7px;} .row.gutters-15{padding-left: 7.5px; padding-right: 7.5px;} .row.gutters-15 > [class^="col-"]{padding-left: 7.5px; padding-right: 7.5px;} .row.gutters-20{padding-left: 5px; padding-right: 5px;} .row.gutters-20 > [class^="col-"]{padding-left: 10px; padding-right: 10px;} .row.gutters-40{margin-left: -20px; margin-right: -20px;align-items: flex-start!important;} .row.gutters-40 > [class^="col-"]{padding-left: 20px; padding-right: 20px;} @media only screen and (max-width: 575px){.row.gutters-40{margin-left: 0; margin-right: 0;} .row.gutters-40 > [class^="col-"]{padding-left: 0; padding-right: 0;}} .row.gutters-50{margin-left: -25px; margin-right: -25px;} .row.gutters-50 > [class^="col-"]{padding-left: 25px; padding-right: 25px;} @media only screen and (max-width: 1199px){.row.gutters-50{margin-left: -15px; margin-right: -15px;} .row.gutters-50 > [class^="col-"]{padding-left: 15px; padding-right: 15px;}} @media only screen and (max-width: 575px){.row.gutters-50{margin-left: 0; margin-right: 0;} .row.gutters-50 > [class^="col-"]{padding-left: 15px; padding-right: 15px;}} /*------------------- 4.2 Form -------------------*/ .form-group{position: relative;} .form-group label{font-size: 16px; font-weight: 400; color: #696e78; margin-bottom: 12px; text-transform: capitalize;} .form-group .form-control{font-size: 16px; color: #696e78; padding: 10px 20px; border: none; background-color: #ffffff; border: 1px solid #e2e2e2; border-radius: 0;} .form-group .form-control:focus{outline: none; box-shadow: none;} .form-group input{height: 50px;} .form-group input:focus{outline: none; box-shadow: none;} .form-group textarea{min-height: 200px;} .form-group input.form-control::placeholder, .form-group textarea.form-control::placeholder{color: #696e78;} .form-group i{position: absolute; top: 50%; right: 30px; font-size: 16px; transform: translateY(-50%);} .form-group input[type="checkbox"]{visibility: hidden; opacity: 0; display: inline-block; vertical-align: middle; width: 0; height: 0; display: none;} .form-group input[type="checkbox"]:checked ~ label{color: #0046e2;} .form-group input[type="checkbox"]:checked ~ label:before{content: "\f00c"; color: #0046e2; border-color: #0046e2;} .form-group input[type="checkbox"] ~ label{position: relative; padding-left: 30px; cursor: pointer; display: block;} .form-group input[type="checkbox"] ~ label:before{content: ''; font-family: "Font Awesome 5 Pro"; font-weight: 700; position: absolute; left: 0; top: 2px; border: 1px solid #dddddd; height: 18px; width: 18px; line-height: 18px; text-align: center; font-size: 12px;} .form-group input[type="radio"]{visibility: hidden; opacity: 0; display: inline-block; vertical-align: middle; width: 0; height: 0; display: none;} .form-group input[type="radio"] ~ label{position: relative; padding-left: 28px; cursor: pointer; line-height: 20px; display: inline-block; font-weight: 600; color: #01133c; margin-bottom: 0;} .form-group input[type="radio"] ~ label::before{content: ''; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border: 1px solid #ddd; border-radius: 100%; background: #fff; transition: all 0.2s ease;} .form-group input[type="radio"] ~ label:after{content: ''; width: 12px; height: 12px; background: #0046e2; position: absolute; top: 3px; left: 3px; border-radius: 100%; transition: all 0.2s ease; opacity: 0; transform: scale(0);} .form-group input[type="radio"]:checked ~ label:before{border-color: #0046e2;} .form-group input[type="radio"]:checked ~ label:after{opacity: 1; transform: scale(1);} .form-control:focus{box-shadow: none;} .gutters-20 .form-group{margin-bottom: 20px;} /*================================= 05. Vendor Custom Style ==================================*/ /*------------------- 5.1. Select 2 -------------------*/ .select2-container{width: 100% !important;} .select2-container span.select2-selection{border: 1px solid #e2e2e2; height: 50px; border-radius: 0; background-color: #ffffff;} .select2-container span.select2-selection:focus{outline: none;} .select2-container .select2-selection--single .select2-selection__rendered{line-height: 50px; padding-left: 20px; font-family: "Roboto", sans-serif; color: #696e78; font-size: 16px;} .select2-container .select2-selection--single .select2-selection__arrow{height: 50px;} .select2-container .select2-selection--single .select2-selection__arrow b{border-width: 6px 7px 0 7px; margin-top: -4px; margin-left: -22px; border-color: #696e78 transparent transparent transparent;} .select2-container .select2-dropdown{border: 1px solid #e2e2e2;} .select2-container .select2-dropdown .select2-search__field{border: 1px solid #e2e2e2;} .select2-container .select2-results__option--highlighted[aria-selected], .select2-container .select2-results__option[aria-selected=true]{background-color: #0046e2; color: #ffffff;} .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{border-width: 0 7px 6px 7px; border-color: transparent transparent #696e78 transparent;} /*------------------- 5.2. Slick Slider -------------------*/ .slick-slide:focus{outline: none;} .slick-slide img{display: inline-block;} .slick-arrow{position: absolute; z-index: 1; width: 50px; height: 50px; padding: 0; border: none; background-color: #ffffff;} .slick-arrow:hover{color: #0046e2;} .slick-arrow.slick-prev{width: 52px; padding-right: 2px;} .slick-arrow.slick-prev:after{content: ''; position: absolute; right: 0; top: 50%; margin-top: -10px; height: 20px; width: 1px; background-color: #d9d9d9;} .slick-arrow.skew{width: 48px; height: 48px; font-size: 20px; transform: skewX(-5deg);} .slick-arrow.skew:after{display: none;} .slick-arrow.skew i{transform: skewX(5deg);} .slick-arrow.type2{background-color: #ef0f3a; color: #ffffff; box-shadow: 0px 10px 28.5px 1.5px rgba(146, 0, 28, 0.25);} .slick-arrow.type2:hover{background-color: #0046e2;} /*------------------- 5.3. Mobile Menu -------------------*/ .mobile-menu-wrapper{position: fixed; top: 0; left: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.6); z-index: 999999; width: 0; height: 100%; transition: all ease 0.8s;} .mobile-menu-wrapper .mean-menu-area{width: 100%; max-width: 250px; background-color: #fff; height: 100%; position: relative; left: -1000px; opacity: 0; visibility: hidden; transition: all ease 1s;} .mobile-menu-wrapper .mean-menu-area .mobile-logo{max-width: 140px; padding-bottom: 30px; padding-top: 45px; margin: 0 auto; text-align: center;} .mobile-menu-wrapper .mean-menu-area .mobileMenucls{background-color: transparent; border: none; font-size: 22px; position: absolute; right: 0; top: 0; padding: 0; line-height: 1; width: 45px; height: 45px; line-height: 45px; font-size: 24px; color: #0046e2; z-index: 1;} .mobile-menu-wrapper .mean-menu-area .mobile-menu{overflow-y: scroll; max-height: 350px;} .mobile-menu-wrapper .mean-menu-area .mobile-menu ul li{border-bottom: 1px solid #eee;} .mobile-menu-wrapper .mean-menu-area .mobile-menu ul li:first-child{border-top: 1px solid #eee;} .mobile-menu-wrapper .mean-menu-area .mobile-menu ul li a{display: block; position: relative; padding: 7px 10px; line-height: 1; font-size: 14px; text-transform: capitalize;} .mobile-menu-wrapper .mean-menu-area .mobile-menu ul li ul li:last-child{border-bottom: none;} .mobile-menu-wrapper .mean-menu-area .mobile-menu ul li ul li a{padding-left: 15px;} .mobile-menu-wrapper .mean-menu-area .mobile-menu ul li ul li ul li a{padding-left: 20px;} .mobile-menu-wrapper .mean-menu-area .mobile-menu ul li ul li ul li ul li a{padding-left: 25px;} .mobile-menu-wrapper .mean-menu-area .mobile-menu ul li.menu-item-has-children > a:after{content: '\f0d7'; font-family: "Font Awesome 5 Pro"; font-weight: 700; float: right; padding-right: 10px;} .mobile-menu-wrapper .mean-menu-area .mobile-menu ul li.menu-item-has-children.show > a{color: #0046e2;} .mobile-menu-wrapper .mean-menu-area .mobile-menu ul li.menu-item-has-children.show > a:after{content: '\f0d8';} .mobile-menu-wrapper.menu-visible{opacity: 1; visibility: visible; width: 100%; transition: all ease 0.8s;} .mobile-menu-wrapper.menu-visible .mean-menu-area{left: 0; opacity: 1; visibility: visible; transition: all ease 1s;} .mobile-menu-wrapper.layout2 .mean-menu-area .mobile-menu ul li a:hover, .mobile-menu-wrapper.layout2 .mean-menu-area .mobile-menu ul li.menu-item-has-children.show > a{color: #ef0f3a;} .mobile-menu-wrapper.layout2 .mean-menu-area .mobileMenucls{color: #ef0f3a;} .menuToggleBtn{padding: 0; border: none; color: #0046e2; font-size: 36px; line-height: 50px; height: 50px; background-color: transparent; margin-right: 15px;} .menuToggleBtn.type2{color: #ef0f3a;} /*------------------- 5.4. Date & Time Picker -------------------*/ .xdsoft_datetimepicker .xdsoft_datepicker{width: 300px;} .xdsoft_datetimepicker .xdsoft_calendar td, .xdsoft_datetimepicker .xdsoft_calendar th{font-size: 16px; color: #696e78; background-color: #fff;} .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today, .xdsoft_datetimepicker .xdsoft_calendar th.xdsoft_today{color: #0046e2;} .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current, .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default, .xdsoft_datetimepicker .xdsoft_calendar td:hover, .xdsoft_datetimepicker .xdsoft_calendar th.xdsoft_current, .xdsoft_datetimepicker .xdsoft_calendar th.xdsoft_default, .xdsoft_datetimepicker .xdsoft_calendar th:hover{background-color: #0046e2 !important; color: #fff !important;} .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current div, .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default div, .xdsoft_datetimepicker .xdsoft_calendar th.xdsoft_current div, .xdsoft_datetimepicker .xdsoft_calendar th.xdsoft_default div{background-color: inherit !important; color: inherit;} .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div{font-size: 16px; color: #696e78; background-color: #fff;} .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current, .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div:hover{background-color: #0046e2 !important; color: #fff !important; box-shadow: #0046e2 0 1px 3px 0 inset !important;} .xdsoft_datetimepicker .xdsoft_datetimepicker{color: #696e78;} /*------------------- 5.5. Twenty Twenty Img Handler -------------------*/ .twentytwenty-handle{background-color: #0046e2;} /*================================= 06. Template Style ==================================*/ /*------------------- zidingyiheader Top -------------------*/ @media (min-width: 1200px){ .topcon { -ms-flex: 0 0 80%; flex: 0 0 80%; max-width: 80%; } } @media (min-width: 1200px){ .topyou { -ms-flex: 0 0 10%; flex: 0 0 10%; max-width: 10%; } } @media (min-width: 1200px){ .topnav { -ms-flex: 0 0 69%; flex: 0 0 69%; max-width: 69%; } } /*------------------- 6.1. header Top -------------------*/ .header-top-wrap{padding: 6px 0;} .header-top-wrap .select-box{padding-right: 10px; margin-right: 12px; border-right: 1px solid rgba(255, 255, 255, 0.25);} .header-top-wrap .select-box .select2-container{width: 100% !important;} .header-top-wrap .select-box .select2-container span.select2-selection{border: none; height: auto; border-radius: 0; background-color: transparent;} .header-top-wrap .select-box .select2-container .select2-selection--single .select2-selection__rendered{line-height: 1; padding-left: 0; font-family: "Roboto", sans-serif; color: #fff; font-size: 14px;} .header-top-wrap .select-box .select2-container .select2-selection--single .select2-selection__arrow{height: auto;} .header-top-wrap .select-box .select2-container .select2-selection--single .select2-selection__arrow b{border-width: 6px 7px 0 7px; margin-top: 2px; margin-left: -3px; border-color: #ffffff transparent transparent transparent;} .header-top-wrap .select-box .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{border-width: 0 7px 6px 7px; border-color: transparent transparent #ffffff transparent;} .header-top-wrap ul li{display: inline-block; margin-right: 15px; padding-right: 15px; border-right: 1px solid rgba(255, 255, 255, 0.25);} .header-top-wrap ul li:last-child{border-right: none; padding-right: 10px; margin-right: 0;} .header-top-wrap ul li span, .header-top-wrap ul li a{display: inline-block; color: #ffffff; font-size: 14px;} .header-top-wrap ul li span i, .header-top-wrap ul li a i{margin-right: 10px;} .header-top-wrap ul.social-links li{border-right: none; padding-right: 0; margin-right: 10px;} .header-top-wrap ul.social-links li a i{margin-right: 0;} .header-top-layout1{background-color: #0046e2; background-image: url("../img/bg-img/header-top-layout-1.png"); background-size: 100% 100%; background-position: center center;opacity: .85;} .header-top-layout1 a:hover{color: #ef0f3a;} .header-top-layout2 a:hover{text-decoration: underline;} .zixiao li{padding:0 10px;border-radius:5px; border-right:none!important;background:#fff} .zixiao li a{color:#0046e2!important} /*------------------- 6.2. header Middle -------------------*/ .header-middle-area{position: relative; border-top: 1px solid rgba(255, 255, 255, 0.15); padding: 18px 0;} .header-middle-area form.search-bar{display: flex; margin-left: 45px;} .header-middle-area form.search-bar input{width: calc(100% - 120px); height: 50px; padding-left: 20px; border: none; background-color: #fff;} .header-middle-area form.search-bar button{width: 120px; height: 50px;} .header-middle-area form.search-bar button:hover{color: #fff;} .header-middle-area .action-box{padding-right: 50px; margin-right: 50px; border-right: 1px solid rgba(255, 255, 255, 0.15);} .header-middle-area .action-box:last-of-type{margin-right: 0; padding-right: 0; border-right: none;} .header-middle-area .action-box .icon .shape-icon:before{background-color: #ffffff; margin-top: -25px; width: 35px; height: 35px; opacity: 0.15;} .header-middle-area .action-box .icon .shape-icon i{color: #ffffff; font-size: 30px; padding-left: 15px;} .header-middle-area .action-box .content span{font-size: 14px; color: #ffffff; text-transform: capitalize; letter-spacing: 0.5px; display: block;} .header-middle-area .action-box .content .text{font-size: 16px; color: #ffffff; font-weight: 500; letter-spacing: 0.5px; margin-bottom: 0;} .header-middle-area .phone-box{position: absolute; right: 0; top: 50%; transform: translateY(-50%);} @media only screen and (max-width: 1730px){.header-middle-area .phone-box{display: none !important;}} .header-middle-layout3{border-top: none; position: relative; padding: 6px 0;} .header-middle-layout3:before{content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #0046e2; opacity: 0.07;} .header-middle-layout3 .action-box{border-right: none; padding-right: 40px; margin-right: 40px; position: relative;} .header-middle-layout3 .action-box:last-of-type{margin-right: 0; padding-right: 0;} .header-middle-layout3 .action-box:last-of-type:before{display: none;} .header-middle-layout3 .action-box:before{content: ''; position: absolute; right: -0.5px; top: 50%; height: 40px; width: 1px; margin-top: -20px; background-color: #0046e2; opacity: 0.15;} .header-middle-layout3 .action-box .icon{font-size: 42px; color: #0046e2; display: inline-block; margin-right: 20px;} .header-middle-layout3 .action-box .content span{color: #01133c; font-size: 14px; text-transform: none;} .header-middle-layout3 .action-box .content .text{color: #01133c; font-size: 22px; letter-spacing: 0.20px;} /*------------------- 6.3. Header -------------------*/ header{background-color: #fff;} header .header-logo{padding: 10px 0;} header .main-menu ul li{display: inline-block; position: relative; margin: 0px 26px;} header .main-menu ul li a{font-size: 14px; text-transform: uppercase; display: inline-block; position: relative; padding: 30px 0; color: #01133c;} header .main-menu ul li a:hover{color: #0046e2;} header .main-menu ul li.menu-item-has-children > a:after{position: relative; font-family: 'font awesome 5 pro'; margin-left: 5px;} header .zicaiico{content: '\f078';} header .main-menu ul li ul{border-top: 3px solid #0046e2; position: absolute; left: 0; top: 100%; background-color: #ffffff; min-width: 250px; z-index: 99; text-align: left; opacity: 0; visibility: hidden; transform-origin: top; transform: rotateX(90deg); transition: all ease 0.4s;} header .main-menu ul li ul li{display: block; margin: 0;} header .main-menu ul li ul li.menu-item-has-children > a:after{float: right; content: '\f054'; transform: translateX(0); transition: all ease 0.4s;} header .main-menu ul li ul li a{display: block; padding: 12px 15px; padding-left: 15px; overflow: hidden; border-bottom: 1px solid #edf2f4; color: #01133c;} header .main-menu ul li ul li a:hover{color: #0046e2;} header .main-menu ul li ul li a:before{content: '\f0da'; position: absolute; font-weight: 300; font-family: "Font Awesome 5 Pro"; font-size: 16px; margin-right: 0; left: -20px; opacity: 0; visibility: hidden; transition: all ease 0.4s;} header .main-menu ul li ul li a:hover{padding-left: 25px;} header .main-menu ul li ul li a:hover:before{opacity: 1; visibility: visible; left: 10px;} header .main-menu ul li ul li a:hover:after{transform: translateX(40px);} header .main-menu ul li ul li:last-child a{border-bottom: none;} header .main-menu ul li ul li ul{left: 100%; top: 0;} header .main-menu ul li ul li ul ul li ul{left: auto; right: 100%; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);} header .main-menu ul li:hover > ul{opacity: 1; visibility: visible; transform: rotateX(0);} header .header-btn{display: flex; align-items: center; justify-content: flex-end; width: 100%;} header .header-btn > a.primary-btn{margin-right: 30px;background: linear-gradient(90deg, #7dc1f8,#0046e2);border-radius: 10px;} header .header-btn button{padding: 0; border: none; color: #0046e2; font-size: 28px; line-height: 50px; height: 50px; background-color: transparent;} header .header-btn button:hover{color: #01133c;} .header2-overlay{position: absolute; top: 0; left: 0; right: 0; z-index: 9;} .header-layout2{position: relative; background-color: transparent; z-index: 2;} .header-layout2:before{content: ''; position: absolute; left: 0; top: 0px; width: 29.5%; height: 100%; background-color: #ffffff; clip-path: polygon(0 0, 100% 0, 91% 100%, 0% 100%);} .header-layout2 .main-menu ul li a{padding: 41.51px 0; color: #ffffff; font-weight: 700;} .header-layout2 .main-menu ul li a:hover{color: #ef0f3a;} .header-layout2 .main-menu ul li ul{border-top: none; padding-top: 10px; left: -15px; margin-top: 40px; transition: all ease-in-out 0.3s; transform: rotate(0);} .header-layout2 .main-menu ul li ul:before{content: ''; position: absolute; top: -16px; left: 24px; border-bottom: 18px solid #ffffff; border-left: 14px solid transparent; border-right: 14px solid transparent;} .header-layout2 .main-menu ul li ul li a{padding: 12px 15px; color: #01133c;} .header-layout2 .main-menu ul li ul li a:hover{color: #ef0f3a;} .header-layout2 .main-menu ul li ul li ul{left: 100%; padding-top: 0;} .header-layout2 .main-menu ul li ul li ul:before{display: none;} .header-layout2 .main-menu ul li:hover > ul{margin-top: 0;} .header-layout2 .header-btn .primary-btn{width: 246px; font-size: 14px; margin-right: 25px;} .header-layout2 .header-btn button{font-size: 18px; color: #ffffff; margin-right: 30px;} .header-layout2 .header-btn button:last-child{margin-right: 0;} .header-layout2 .header-btn button:hover{color: #ef0f3a;} .header-layout3{background-color: transparent; position: absolute; top: 0; left: 0; right: 0; z-index: 99;} .header-layout3 .header-top-wrap{padding-left: 50px; padding-right: 50px;} .header-layout3 .header-middle-layout3{padding-left: 50px; padding-right: 50px; background-color: transparent;} .header-layout3 .inner-wrapper{padding-bottom: 85px; background-image: url(../img/bg-img/header-bg-3-1.png); background-size: 100.5% 100%; background-position: center top; background-repeat: no-repeat; position: relative;} .header-layout3 .inner-wrapper::before{content: ''; position: absolute; left: 50%; bottom: -18px; margin-left: -55px; width: 110px; height: 110px; background-color: #ffffff; border-radius: 50%;} .header-layout3 .phone-btn{position: absolute; left: 50%; width: 90px; height: 90px; margin-left: -45px; text-align: center; background-color: #ffffff; bottom: -7px; padding: 10px; border-radius: 50%; z-index: 1; box-shadow: 0px 7px 14.7px 0.3px rgba(0, 0, 0, 0.15);} .header-layout3 .phone-btn a{width: 100%; height: 100%; display: inline-block; background-color: #0046e2; line-height: 69px; font-size: 30px; color: #ffffff; z-index: 3; border-radius: 50%;} .header-layout3 .phone-btn a:hover{background-color: #ef0f3a; color: #ffffff;} .header-layout3 .phone-btn .ripple{z-index: -1;} .header-layout3 .header-menu-area{padding: 30px 50px;} .header-layout3 .main-menu ul li a{font-weight: 700; padding: 12px 0;} .header-layout3 .main-menu ul li ul{border-top: none; left: -15px; margin-top: 40px; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.08); transition: all ease-in-out 0.3s; transform: rotate(0);} .header-layout3 .main-menu ul li ul li a{padding: 12px 15px; color: #01133c;} .header-layout3 .main-menu ul li ul li ul{left: 100%; padding-top: 0;} .header-layout3 .main-menu ul li:hover > ul{margin-top: 0;} .header-layout3 .header-btn button{width: 52px; color: #ffffff; font-size: 18px; background-color: #0046e2; margin-right: 20px;} .header-layout3 .header-btn button:hover{color: #ffffff;} .header-layout3 .header-btn button:last-child{margin-right: 0;} .sticky-header-wrap{position: fixed; top: 0; left: 0; right: 0; background-color: #ffffff; z-index: 9999; box-shadow: 0 0 13px 0 rgba(0, 0, 0, 0.1); opacity: 0; visibility: hidden; transform: translateY(-110%); transition: all ease 0.6s;} .sticky-header-wrap.active{visibility: visible; opacity: 1; transform: translateY(0);} .sticky-header-wrap .logo{padding: 10px 0;} .sticky-header-wrap .main-menu ul li{display: inline-block; position: relative; margin: 0px 11px;} .sticky-header-wrap .main-menu ul li a{font-size: 14px; text-transform: uppercase; display: inline-block; position: relative; padding: 23px 0; color: #01133c;} .sticky-header-wrap .main-menu ul li a:hover{color: #0046e2;} .sticky-header-wrap .main-menu ul li.menu-item-has-children > a:after{content: '\f078'; position: relative; font-family: 'font awesome 5 pro'; margin-left: 5px;} .sticky-header-wrap .main-menu ul li ul{border-top: 3px solid #0046e2; position: absolute; left: 0; top: 100%; background-color: #ffffff; min-width: 250px; z-index: 99; text-align: left; opacity: 0; visibility: hidden; transform-origin: top; transform: rotateX(90deg); transition: all ease 0.4s;} .sticky-header-wrap .main-menu ul li ul li{display: block; margin: 0;} .sticky-header-wrap .main-menu ul li ul li.menu-item-has-children > a:after{float: right; content: '\f054'; transform: translateX(0); transition: all ease 0.4s;} .sticky-header-wrap .main-menu ul li ul li a{display: block; padding: 12px 15px; padding-left: 15px; overflow: hidden; border-bottom: 1px solid #edf2f4; color: #01133c;} .sticky-header-wrap .main-menu ul li ul li a:hover{color: #0046e2;} .sticky-header-wrap .main-menu ul li ul li a:before{content: '\f0da'; position: absolute; font-weight: 300; font-family: "Font Awesome 5 Pro"; font-size: 16px; margin-right: 0; left: -20px; opacity: 0; visibility: hidden; transition: all ease 0.4s;} .sticky-header-wrap .main-menu ul li ul li a:hover{padding-left: 25px;} .sticky-header-wrap .main-menu ul li ul li a:hover:before{opacity: 1; visibility: visible; left: 10px;} .sticky-header-wrap .main-menu ul li ul li a:hover:after{transform: translateX(40px);} .sticky-header-wrap .main-menu ul li ul li:last-child a{border-bottom: none;} .sticky-header-wrap .main-menu ul li ul li ul{left: 100%; top: 0;} .sticky-header-wrap .main-menu ul li ul li ul ul li ul{left: auto; right: 100%; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);} .sticky-header-wrap .main-menu ul li:hover > ul{opacity: 1; visibility: visible; transform: rotateX(0);} .sticky-header-layout2 .main-menu ul li a:hover{color: #ef0f3a;} .sticky-header-layout2 .main-menu ul li ul{border-top-color: #ef0f3a;} .sticky-header-layout2 .main-menu ul li ul li a:hover{color: #ef0f3a;} .sticky-header-layout2 .menuToggleBtn{color: #ef0f3a;} /*------------------- 6.4. Hero Section -------------------*/ .hero-layout2{position: relative; z-index: 1; padding-top: 50px;} .hero-layout2 .small-title{position: relative; font-style: italic; font-weight: 700; color: #ffffff; text-transform: uppercase; font-family: "Roboto", sans-serif;} .hero-layout2 .small-title:before{content: ''; position: absolute; left: -40%; top: 50%; margin-top: -1px; height: 2px; width: 35.2%; background-color: #ffffff;} .hero-layout2 .big-title{text-transform: uppercase; color: #ffffff;} .hero-layout2 .ls-bottom-nav-wrapper{position: absolute; right: 85px; top: 0 !important; height: 100%; display: flex !important; align-items: center;} .hero-layout2 .ls-bottom-nav-wrapper .ls-bottom-slidebuttons a{display: block !important; width: 100% !important; width: 10px !important; height: 10px !important; border-radius: 50% !important; border: 2px solid #ffffff !important; background-color: transparent; margin: 20px auto !important; opacity: 1 !important; position: relative; z-index: 1; transition: all ease 0.4s;} .hero-layout2 .ls-bottom-nav-wrapper .ls-bottom-slidebuttons a:before{content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; background-color: #ef0f3a; z-index: -1; border-radius: 50%; opacity: 0;} .hero-layout2 .ls-bottom-nav-wrapper .ls-bottom-slidebuttons a:hover{background-color: #ef0f3a;} .hero-layout2 .ls-bottom-nav-wrapper .ls-bottom-slidebuttons a.ls-nav-active{background-color: transparent !important; width: 25px !important; height: 25px !important;} .hero-layout2 .ls-bottom-nav-wrapper .ls-bottom-slidebuttons a.ls-nav-active:before{opacity: 1;} .hero-layout2 .ls-bottom-nav-wrapper .ls-bottom-slidebuttons a.ls-nav-active:hover{background-color: transparent !important;} .hero-layout2 .phone-box{position: absolute; bottom: 210px; right: 0; z-index: 99;} .hero-layout3 .small-title{font-weight: 700; font-style: italic; text-transform: uppercase; color: #ffffff; letter-spacing: 0.20px; position: relative; text-align: center;} .hero-layout3 .small-title:after, .hero-layout3 .small-title:before{content: ''; position: absolute; width: 28.1%; height: 2px; background-color: #ffffff; left: -31%; top: 50%; margin-top: -1px;} .hero-layout3 .small-title:after{left: auto; right: -33.1%;} .hero-layout3 .big-title{color: #ffffff; text-transform: uppercase; letter-spacing: 0.20px; text-align: center;} .hero-layout3 .ls-v6 .ls-nav-prev, .hero-layout3 .ls-v6 .ls-nav-next{top: 60%;} @media (min-width: 1400px){.hero-layout3 .ls-v6 .ls-nav-prev, .hero-layout3 .ls-v6 .ls-nav-next{width: 70px; height: 70px; top: 64%; border: 2px solid #4a4c58 !important; text-align: center; line-height: 70px; left: 100px; border-radius: 50%;} .hero-layout3 .ls-v6 .ls-nav-prev:after, .hero-layout3 .ls-v6 .ls-nav-next:after{margin-top: -9px; width: 18px; height: 18px; margin-left: 9px; border-top-color: #4a4c58; border-left-color: #4a4c58;} .hero-layout3 .ls-v6 .ls-nav-prev:hover, .hero-layout3 .ls-v6 .ls-nav-next:hover{border-color: transparent !important; background-color: #0046e2; transform: scaleX(1) scaleY(1);} .hero-layout3 .ls-v6 .ls-nav-next{left: auto; right: 100px;} .hero-layout3 .ls-v6 .ls-nav-next:after{border-left-color: transparent; border-right-color: #4a4c58; margin-left: 0; margin-right: 9px;}} /*------------------- 6.5. About Us -------------------*/ .about-us-sec{padding-top:80px!important;padding-bottom: 100px!important;} .about-us-sec .experiance-box{background-image: url("../img/bg-img/ab-experiance-box-bg.png"); background-size: 100% 100%; background-position: center center; background-repeat: no-repeat; position: relative; padding: 50px 45px 50px 40px; min-width: 470px; margin-top: -80px; right: 2px; z-index: 1;} .about-us-sec .experiance-box .icon span{display: inline-block; width: 80px; height: 80px; line-height: 80px; background-color: #ffffff; text-align: center; font-size: 40px; position: relative; margin-right: 20px; color: #0046e2; z-index: 1; border-radius: 50%;} .about-us-sec .experiance-box .icon span:before{content: ''; position: absolute; top: -5px; left: -5px; bottom: -5px; right: -5px; border: 2px dashed #ffffff; z-index: -1; border-radius: 50%; animation: cspine 10s linear infinite;} .about-us-sec .experiance-box .content{width: calc(100% - 100px);} .about-us-sec .experiance-box .content .main-title{position: absolute; top: -25px; left: 32px; color: #ffffff; font-size: 48px; text-transform: uppercase; letter-spacing: 4px; margin-bottom: 0; text-shadow: 3px 3px 0px #000;} .about-us-sec .experiance-box .content .title{color: #ffffff; font-size: 22px; font-weight: 500; font-family: "Roboto", sans-serif; letter-spacing: 1px; margin-bottom: 15px;} .about-us-sec .experiance-box .content .text{color: #ffffff; margin-bottom: 0;} .about-wrap-layout1{position: relative;} .about-wrap-layout1:before{content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: 1130px; background-image: url("../img/overly-shape/about-us-shapes-1-1.png"); background-size: 100% 100%; background-position: center center; background-repeat: no-repeat; animation: upDown 10s infinite alternate;} .about-wrap-layout1 .about-us-img{position: relative;} .about-wrap-layout1 .about-us-img a:before{content: ''; position: absolute; top: 20px; left: 20px; right: 20px; bottom: 20px; border: 2px dashed #ffffff;} .about-wrap-layout1 .about-title{font-size: 48px; text-transform: uppercase; letter-spacing: 2px; color: #0046e2; margin-bottom: 33px; font-weight: 700;} .about-wrap-layout1 .about-title span{color: #ef0f3a; font-size: 80px; position: relative; top: 10px;} .about-wrap-layout1 .sub-title{font-size: 40px; text-transform: uppercase; letter-spacing: 2px; font-weight: 600; margin-bottom: 40px; font-family: "Oswald", sans-serif;} .about-wrap-layout1 .sub-title span{color: #ef0f3a;} .about-wrap-layout1 .about-us-content{margin-left: 30px; padding-top: 35px;} .about-wrap-layout1 .about-us-content .text{color: #494f5b; margin-bottom: 25px;} .about-wrap-layout1 .about-us-content .features-list ul li{position: relative; margin-bottom: 4px; color: #494f5b;} .about-wrap-layout1 .about-us-content .features-list ul li:last-child{margin-bottom: 0;} .about-wrap-layout1 .about-us-content .features-list ul li:before{content: '\f111'; position: relative; left: 0; top: -1px; font-size: 18px; font-family: "Font Awesome 5 Pro"; font-weight: 900; font-size: 5px; width: 15px; height: 15px; display: inline-block; text-align: center; box-shadow: inset 0 0 6px -2px #0046e2; line-height: 15px; margin-right: 15px; color: #0046e2; border-radius: 50%;} .about-wrap-layout1 .action-btn{float: right; overflow: hidden;} .about-wrap-layout1 .action-area{position: relative; margin-top: -150px; padding-left:80px;} .about-wrap-layout1 .action-area .action-box{padding-right: 60px; margin-right: 60px; position: relative;} .about-wrap-layout1 .action-area .action-box:before{content: ''; position: absolute; right: 0; top: 50%; height: 60px; width: 1px; margin-top: -30px; background-color: #e5e5e5;} .about-wrap-layout1 .action-area .action-box:last-child{padding-right: 0; margin-right: 0;} .about-wrap-layout1 .action-area .action-box:last-child:before{display: none;} .about-wrap-layout1 .action-area .action-box .icon span{font-size: 46px; color: #0046e2; display: block; margin-bottom: 5px;} .about-wrap-layout1 .action-area .action-box .icon span .flaticon-envelope{font-size: 40px;} .about-wrap-layout1 .action-area .action-box .content .text{font-size: 24px; color: #0046e2; margin-bottom: 0; font-weight: 500;} .about-wrap-layout1 .action-area .action-box .content span{text-transform: uppercase; font-size: 14px; display: inline-block; margin-bottom: 10px; line-height: 1; color: #494f5b;} .about-wrap-layout2{position: relative;} .about-wrap-layout2 .shape-bg{right: 0; top: -170px; animation: downUp 15s alternate infinite;} .about-wrap-layout2 .about-us-img{position: relative; padding: 20px;} .about-wrap-layout2 .about-us-img img{box-shadow: 0px 10px 28.5px 1.5px rgba(0, 0, 0, 0.25); position: relative; z-index: 2;} .about-wrap-layout2 .about-us-img::before{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: 370px; background-color: #e5e5e5; z-index: 1;} .about-wrap-layout2 .about-us-content{padding-right: 40px;} .about-wrap-layout2 .about-us-content .about-title{font-size: 48px; line-height: 60px; text-transform: uppercase; font-weight: 600; max-width: 85%; width: 100%;} .about-wrap-layout2 .about-us-content p.text{color: #494f5b;} .about-wrap-layout2 .about-us-content .video-action{margin-right: 60px; padding-top: 15px;} .about-wrap-layout2 .about-us-content .video-action .video-btn{width: 50px; height: 50px; line-height: 50px; font-size: 17px; margin-right: 20px; background-color: #ef0f3a;} .about-wrap-layout2 .about-us-content .video-action .video-btn span{background-color: #ef0f3a;} .about-wrap-layout2 .about-us-content .video-action .video-btn:hover .btn-text{color: #ef0f3a; background-color: #ffffff;} .about-wrap-layout2 .about-us-content .video-action a.text{font-size: 18px; display: inline-block; font-weight: 500; text-transform: capitalize; color: #01133c;} .about-wrap-layout2 .about-us-content .video-action a.text:hover{color: #ef0f3a;} .about-wrap-layout2 .about-us-content .author-signa{padding-top: 10px;} .about-wrap-layout2 .action-area{padding-top: 85px;} .about-wrap-layout2 .action-area .action-box{display: flex; align-items: center; padding-right: 60px; margin-right: 60px; position: relative;} .about-wrap-layout2 .action-area .action-box:before{content: ''; position: absolute; height: 50px; width: 2px; top: calc(50% - 25px); right: 0; border-right: 2px dashed #ef0f3a; opacity: 0.15;} .about-wrap-layout2 .action-area .action-box:last-child{padding-right: 0; margin-right: 0;} .about-wrap-layout2 .action-area .action-box:last-child::before{display: none;} .about-wrap-layout2 .action-area .action-box .icon span{margin-right: 25px;} .about-wrap-layout2 .action-area .action-box .icon span:before{background-color: #ef0f3a; opacity: 0.06; width: 50px; height: 50px; margin-top: -25px;} .about-wrap-layout2 .action-area .action-box .icon span i{color: #ef0f3a; font-size: 42px; padding-left: 23px;} .about-wrap-layout2 .action-area .action-box .icon span i.fa-phone-alt{font-size: 38px; padding-left: 28px;} .about-wrap-layout2 .action-area .action-box .content span{color: #1f1f1f; font-size: 16px; display: block; line-height: 1; margin-bottom: 5px;} .about-wrap-layout2 .action-area .action-box .content .text{font-weight: 700; font-size: 20px; color: #1f1f1f; letter-spacing: 0; margin-bottom: 0;} .about-wrap-layout2 .action-area .action-box .content .text a:hover{color: #ef0f3a;} .about-wrap-layout3{background-color: #fafafa;} .about-wrap-layout3 .about-us-content{padding-right: 30px;} .about-wrap-layout3 .about-us-content h2.about-title{font-size: 48px; text-transform: uppercase; line-height: 60px; font-weight: 600; letter-spacing: 0.40px; margin-bottom: 25px; max-width: 80%; margin-top: -12px;} .about-wrap-layout3 .about-us-content p{color: #494f5b;} .about-wrap-layout3 .about-us-content .features-list{padding-top: 5px; margin-bottom: 35px;} .about-wrap-layout3 .about-us-content .features-list ul li{position: relative; margin-bottom: 4px; color: #494f5b;} .about-wrap-layout3 .about-us-content .features-list ul li:last-child{margin-bottom: 0;} .about-wrap-layout3 .about-us-content .features-list ul li:before{content: '\f111'; position: relative; left: 0; top: -4px; font-size: 18px; font-family: "Font Awesome 5 Pro"; font-weight: 900; font-size: 5px; width: 15px; height: 15px; display: inline-block; text-align: center; box-shadow: inset 0 0 6px -2px #0046e2; line-height: 15px; margin-right: 15px; color: #0046e2; border-radius: 50%;} .about-wrap-layout3 .about-us-content .counter-box-wrapper{padding-top: 5px; margin-bottom: 35px;} .about-wrap-layout3 .about-us-content .single-counter{max-width: 200px; width: 100%; margin-right: 30px; background-color: #0046e2; padding: 25px 30px; padding-right: 0; position: relative;} .about-wrap-layout3 .about-us-content .single-counter:last-child{margin-right: 0;} .about-wrap-layout3 .about-us-content .single-counter i{position: absolute; right: 28px; top: 25px; color: #ffffff; font-size: 67px; opacity: 0.10;} .about-wrap-layout3 .about-us-content .single-counter .counter{color: #ffffff; font-size: 48px; font-weight: 600; font-family: "Oswald", sans-serif; line-height: 1; position: relative;} .about-wrap-layout3 .about-us-content .single-counter .counter:after{content: '\f067'; font-family: "Font Awesome 5 Pro"; font-weight: 900; font-size: 26px; position: relative; top: -9px; margin-left: 3px;} .about-wrap-layout3 .about-us-content .single-counter .text{font-size: 16px; color: #ffffff; font-weight: 600; text-transform: capitalize; margin-bottom: 0;} .about-wrap-layout3 form.estimator-form{position: relative; padding: 60px;} .about-wrap-layout3 form.estimator-form::before{content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #070a12; opacity: 0.60;} .about-wrap-layout3 form.estimator-form h3.form-title{font-size: 32px; color: #ffffff; position: relative; text-transform: uppercase; font-weight: 600; font-family: "Oswald", sans-serif; margin-bottom: 12px;} .about-wrap-layout3 form.estimator-form p.sub-title{line-height: 22px; color: #ffffff; position: relative; margin-bottom: 30px; margin-bottom: 25px;} .about-wrap-layout3 form.estimator-form .form-group{margin-bottom: 20px;} .about-wrap-layout3 form.estimator-form .form-group .select2-container span.select2-selection, .about-wrap-layout3 form.estimator-form .form-group input{border: none;} .about-wrap-layout4 .about-us-content{padding-right: 10px; padding-top: 50px;} .about-wrap-layout4 .about-us-content p{color: #494f5b;} .about-wrap-layout4 .about-us-content .about-title{font-weight: 600; font-size: 40px; text-transform: uppercase; margin-bottom: 30px;} .about-wrap-layout4 .about-us-content .about-title span{color: #ef0f3a;} .about-wrap-layout4 .about-us-content .sub-title{font-size: 18px; line-height: 30px; margin-bottom: 20px; text-transform: none; color: #01133c; letter-spacing: 0.20px;} .about-wrap-layout4 .about-us-content .author-signa{padding-top: 5px; padding-bottom: 50px;} .about-wrap-layout4 .about-us-content .video-action{display: flex; align-items: center;} .about-wrap-layout4 .about-us-content .video-action a.video-btn{width: 60px; height: 60px; line-height: 58px; font-size: 22px; margin-right: 30px;} .about-wrap-layout4 .about-us-content .video-action .text{font-size: 20px; font-weight: 500; color: #01133c; text-transform: capitalize; line-height: 30px; display: inline-block; width: 100%; max-width: 200px;} .about-wrap-layout4 .about-us-content .video-action .text:hover{color: #0046e2;} .about-wrap-layout4 .about-us-img{position: relative; min-height: 570px;} .about-wrap-layout4 .about-us-img .small-img, .about-wrap-layout4 .about-us-img .big-img{position: absolute; display: inline-block; width: 100%;} .about-wrap-layout4 .about-us-img .small-img:before, .about-wrap-layout4 .about-us-img .small-img:after, .about-wrap-layout4 .about-us-img .big-img:before, .about-wrap-layout4 .about-us-img .big-img:after{content: ''; position: absolute; width: 12px; height: 12px; display: inline-block; background-color: #0046e2; box-shadow: 0 0 0 5px #ffffff; z-index: 1; border-radius: 50%; animation: cscale 1s infinite alternate;} .about-wrap-layout4 .about-us-img .big-img{top: 0; right: 0; z-index: 2; max-width: 437px;} .about-wrap-layout4 .about-us-img .big-img:before{top: 120px; left: -5px;} .about-wrap-layout4 .about-us-img .big-img:after{bottom: -6px; right: 134px;} .about-wrap-layout4 .about-us-img .small-img{bottom: 0; left: 20px; z-index: 2; max-width: 430px;} .about-wrap-layout4 .about-us-img .small-img:before{left: 89px; top: -6px;} .about-wrap-layout4 .about-us-img .small-img:after{bottom: 47px; right: -6px;} .about-wrap-layout4 .about-us-img .experiance{width: 130px; height: 130px; line-height: 130px; position: absolute; background-color: #ffffff; right: 155px; top: 225px; z-index: 4; text-align: center; font-size: 36px; font-weight: 700; box-shadow: 0 19px 33px 0 rgba(0, 0, 0, 0.2); border-radius: 50%;} .about-wrap-layout4 .about-us-img .experiance:before{content: ''; position: absolute; left: 15px; top: 15px; right: 15px; bottom: 15px; background-color: #0046e2; border: 2px dashed #ffffff; border-radius: 50%; animation: cspinereverse 20s linear infinite;} .about-wrap-layout4 .about-us-img .experiance span{color: #ffffff; position: relative; z-index: 1;} .about-wrap-layout4 .about-us-img:before{content: ''; display: inline-block; width: 450px; height: 450px; position: absolute; margin-left: -225px; left: 50%; bottom: 20px; background-color: #ffffff; border: 2px dashed #0046e2; box-shadow: 0 0 75px -55px rgba(0, 0, 0, 0.6); border-radius: 50%; animation: cspine 50s linear infinite;} .about-wrap-layout5 .about-us-img{position: relative; padding-bottom: 100px; padding-left: 20px; padding-top: 20px;} .about-wrap-layout5 .about-us-img .experiance{width: 120px; height: 120px; line-height: 120px; position: absolute; background-color: #ffffff; right: 150px; top: 185px; z-index: 4; text-align: center; font-size: 36px; font-weight: 700; box-shadow: 0 19px 33px 0 rgba(0, 0, 0, 0.2); border-radius: 50%;} .about-wrap-layout5 .about-us-img .experiance:before{content: ''; position: absolute; left: 15px; top: 15px; right: 15px; bottom: 15px; background-color: #0046e2; border: 2px dashed #ffffff; border-radius: 50%; animation: cspinereverse 20s linear infinite;} .about-wrap-layout5 .about-us-img .experiance span{color: #ffffff; position: relative; z-index: 1;} .about-wrap-layout5 .about-us-img .small-img{position: absolute; bottom: 0; right: 0;} .about-wrap-layout5 .about-us-img .big-img{max-width: 430px; position: relative;} .about-wrap-layout5 .about-us-img .big-img:before, .about-wrap-layout5 .about-us-img .big-img:after{content: ''; position: absolute; top: -20px; right: -20px; width: 97%; height: 100%; border: 4px solid #0046e2; z-index: -1;} .about-wrap-layout5 .about-us-img .big-img:after{top: auto; right: auto; left: -20px; bottom: -20px; background-color: #0046e2; max-width: 200px; max-height: 200px;} .about-wrap-layout5 .about-us-content{padding-top: 20px;} .about-wrap-layout5 .about-us-content .features-list{padding-bottom: 30px;} .about-wrap-layout5 .about-us-content .features-list ul li{position: relative; margin-bottom: 4px; color: #494f5b;} .about-wrap-layout5 .about-us-content .features-list ul li:last-child{margin-bottom: 0;} .about-wrap-layout5 .about-us-content .features-list ul li:before{content: '\f111'; position: relative; left: 0; top: -4px; font-size: 18px; font-family: "Font Awesome 5 Pro"; font-weight: 900; font-size: 5px; width: 15px; height: 15px; display: inline-block; text-align: center; box-shadow: inset 0 0 6px -2px #0046e2; line-height: 15px; margin-right: 15px; color: #0046e2; border-radius: 50%;} .about-wrap-layout5 .about-us-content p{color: #494f5b;} .about-wrap-layout5 .about-us-content .about-title{font-weight: 600; font-size: 40px; text-transform: uppercase; margin-bottom: 30px;} .about-wrap-layout5 .about-us-content .about-title span{color: #ef0f3a;} .about-wrap-layout5 .about-us-content .sub-title{font-size: 18px; line-height: 30px; margin-bottom: 15px; text-transform: none; color: #01133c; letter-spacing: 0.20px;} .about-wrap-layout5 .about-us-content .author-signa{padding-top: 5px; overflow: hidden; float: left; margin-right: 30px;} .about-wrap-layout5 .about-us-content .video-action{display: flex; align-items: center; float: left;} .about-wrap-layout5 .about-us-content .video-action a.video-btn{width: 60px; height: 60px; line-height: 58px; font-size: 22px; margin-right: 30px;} .about-wrap-layout5 .about-us-content .video-action .text{font-size: 20px; font-weight: 500; color: #01133c; text-transform: capitalize; line-height: 30px; display: inline-block; width: 100%; max-width: 200px;} .about-wrap-layout5 .about-us-content .video-action .text:hover{color: #0046e2;} /*------------------- 6.6. Service -------------------*/ .our-service-wrapper .service-box{padding: 60px 0; padding-bottom: 55px; text-align: center; background-color: #ffffff; overflow: hidden; position: relative;} .our-service-wrapper .service-box .service-img{position: absolute; left: 0; top: 0; width: 101%; height: 101%; visibility: visible; opacity: 1; transform-origin: bottom; transform: rotateX(-90deg); transition: all cubic-bezier(0.4, 0, 1, 1) 0.3s;} .our-service-wrapper .service-box .service-img:before{content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: 0.7; z-index: 1; background-color: rgba(0, 0, 0, 0.7);} .our-service-wrapper .service-box .service-img img{width: 100%;} .our-service-wrapper .service-box .service-icon{width: 80px; height: 80px; display: inline-block; line-height: 80px; background-color: #0046e2; font-size: 38px; color: #ffffff; box-shadow: 0 5px 29px -10px #0046e2; margin-bottom: 30px; border-radius: 50%; z-index: 3; position: relative; transition: all ease 0.4s; animation: cscale 3s infinite alternate;} .our-service-wrapper .service-box .bottom-icon{font-size: 16px; margin-bottom: 0; position: absolute; bottom: -70px; left: 50%; margin-left: -40px; line-height: 10px; padding-top: 13px; background-color: #ef0f3a; box-shadow: none; opacity: 0; visibility: hidden; animation: none;} .our-service-wrapper .service-box .bottom-icon:hover{background-color: #ffffff !important; color: #ef0f3a;} .our-service-wrapper .service-box .service-content{position: relative; z-index: 1; padding: 0 40px;} .our-service-wrapper .service-box .service-content .title{font-size: 22px; font-weight: 500; margin-bottom: 20px; letter-spacing: 0.5px; font-family: "Roboto", sans-serif; transition: all ease 0.4s;} .our-service-wrapper .service-box .service-content p{margin-bottom: 0; transition: all ease 0.4s;} .our-service-wrapper .service-box:hover .service-img{opacity: 1; visibility: visible; transform: rotateX(0);} .our-service-wrapper .service-box:hover .service-icon{background-color: #ef0f3a; box-shadow: none;} .our-service-wrapper .service-box:hover .bottom-icon{opacity: 1; visibility: visible; bottom: -40px;} .our-service-wrapper .service-box:hover .service-content .title{color: #ffffff;} .our-service-wrapper .service-box:hover .service-content p{color: #ffffff;} .service-layout1{background-size: 100% 100%; background-repeat: no-repeat; background-position: center; position: relative;} .service-layout1 .shape-bg{opacity: 0.92; animation: upDown 10s infinite alternate;} .service-layout1 .service-box{margin-bottom: 30px;} .service-layout1 .service-box:before{content: ''; position: absolute; top: 0; left: 50%; width: 100%; height: 100%; max-width: 300px; max-height: 300px; border-radius: 50%; transform: translate(-50%, -65%); background-color: #0046e2; opacity: 0.15; visibility: visible; transition: all ease 0.4s;} .service-layout1 .service-box:hover:before{top: -100%; opacity: 0; visibility: hidden;} .service-layout2{background-image: url("../img/service/bg-shape-2-1.png"); background-size: 100% 100%; background-position: center top; background-repeat: no-repeat; position: relative;} .service-layout2 .shape-bg{top: -10px; left: 0;} .service-layout2 .shape-bg img{animation: upDown 15s alternate infinite;} .service-layout2 .service-box{padding: 0 0; margin-bottom: 30px;} .service-layout2 .service-box .service-img{position: relative; top: 0; left: 0; transform: rotateX(0deg); opacity: 1; visibility: visible; width: 100%; height: 100%; overflow: hidden;} .service-layout2 .service-box .service-img img{width: 100%; transition: all ease 0.4s; transform: scale(1.01);} .service-layout2 .service-box .service-img:before{background-color: #030d23; opacity: 0; visibility: hidden; transition: all ease 0.4s;} .service-layout2 .service-box .service-img .service-icon{margin-bottom: 0; animation: none; position: absolute; left: 50%; top: 50%; background-color: #ef0f3a; font-size: 31px; width: 60px; height: 60px; line-height: 60px; box-shadow: none; margin-top: -30px; margin-left: -30px; opacity: 0; visibility: hidden; transition: all ease 0.4s; transform: scale(1.5);} .service-layout2 .service-box .service-img .service-icon i{width: 100%; height: 100%; border-radius: 50%; color: inherit; background-color: inherit; transition: all ease 0.4s; z-index: 1; display: inline-block; line-height: inherit;} .service-layout2 .service-box .service-img .service-icon .ripple{background-color: #ef0f3a;} .service-layout2 .service-box .bottom-icon{bottom: -40px; visibility: visible; opacity: 1; border: 1px solid transparent;} .service-layout2 .service-box .service-content{overflow: hidden; border: 1px solid #f0f0f0; border-top: none; padding: 37px 35px; padding-bottom: 67px; background-color: #fbfbfb;} .service-layout2 .service-box .service-content .title:hover{color: #ef0f3a !important;} .service-layout2 .service-box:hover .service-img img{transform: scale(1.04);} .service-layout2 .service-box:hover .service-img .service-icon{opacity: 1; visibility: visible; transform: scale(1);} .service-layout2 .service-box:hover .service-img:before{opacity: 0.59; visibility: visible;} .service-layout2 .service-box:hover .service-content .title{color: #01133c;} .service-layout2 .service-box:hover .service-content p{color: #696e78;} .service-layout2 .service-box:hover .bottom-icon{border-color: #ef0f3a;} .service-layout2 .slick-track > [class^="col-"]{padding-left: 10px; padding-right: 10px;} .service-layout2 .slick-arrow{position: absolute; left: -115px; top: 50%; margin-top: -25px;} .service-layout2 .slick-arrow.slick-next{left: auto; right: -115px;} .service-layout3{background-color: #fafafa; position: relative;} .service-layout3 .section-title3{margin-bottom: 40px;} .service-layout3 .service-box{text-align: left; padding: 55px 40px; margin-bottom: 60px; margin-top: 40px;} .service-layout3 .service-box .service-content{padding: 0 0;} .service-layout3 .service-box .service-content .title{text-transform: none; font-size: 22px; line-height: 32px; color: #01133c; margin-bottom: 40px;} .service-layout3 .service-box .service-content p{color: #696e78;} .service-layout3 .service-box .service-content .shape-icon{margin-bottom: 42px; margin-right: 0;} .service-layout3 .service-box .service-content .shape-icon:before{width: 85px; height: 85px; margin-top: -45px;} .service-layout3 .service-box .service-content .shape-icon i{font-size: 56px; padding-left: 45px;} .service-layout3 .service-box:hover .service-content .title{color: #01133c;} .service-layout3 .service-box:hover .service-content p{color: #696e78;} .service-layout3 .slick-slider{padding: 0px 82px;} .service-layout3 .slick-slider .slick-arrow{position: absolute; left: -17px; top: 50%; width: 76px; height: 76px; background-color: #ffffff; font-size: 22px; padding: 8px; border-radius: 50%; transform: translateY(-50%);} .service-layout3 .slick-slider .slick-arrow:after{content: ''; position: absolute; left: -4%; top: -6.5%; margin-top: 0; height: 115%; width: 51%; background-color: #fafafa; z-index: 2;} .service-layout3 .slick-slider .slick-arrow:before{content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: 1; z-index: 1; border: 1px solid #0046e2; border-radius: 50%;} .service-layout3 .slick-slider .slick-arrow i{width: 100%; height: 100%; display: inline-block; line-height: 58px; color: #ffffff; border-radius: 50%; background-color: #0046e2; z-index: 3; position: relative;} .service-layout3 .slick-slider .slick-arrow.slick-next{left: auto; right: -17px;} .service-layout3 .slick-slider .slick-arrow.slick-next::after{left: auto; right: -4%;} .service-layout3 .inner-wrapper{position: relative; padding-bottom: 95px;} .service-layout3 .inner-wrapper:before{content: ''; position: absolute; left: -21px; right: -21px; bottom: 0; height: 100%; max-height: 747px; background-image: url("../img/service/bg-shape-3-1.png");} .service-layout3 .shape-bg{right: 0; bottom: 0;} .service-layout3 .gutters-40 .slick-track > [class^="col-"]{padding-left: 20px; padding-right: 20px;} @media only screen and (max-width: 575px){.service-layout3 .gutters-40 .slick-track > [class^="col-"]{padding-left: 15px; padding-right: 15px;}} .service-layout3 .slick-slide .service-box{box-shadow: none; transition: all 0.3s;} .service-layout3 .slick-slide.slick-active .service-box{box-shadow: 0 0 45px 0 rgba(0, 0, 0, 0.05);} .service-layout3 .scroll-btn{position: absolute; left: 50%; top: -85px; z-index: 99; padding-top: 50px; transform: translateX(-50%);} .service-layout4{background-image: url("../img/service/service-bg-4-1.png");} .service-layout4 .service-box{border-right: 1px solid #e8e8e8; border-top: 1px solid #e8e8e8; background-color: transparent;} .service-layout4 .service-box .service-icon{animation: none;} .service-layout4 .service-box:hover .service-content p, .service-layout4 .service-box:hover .service-content .title{color: #01133c;} @media (min-width: 1200px){.service-layout4 .row > div:nth-child(4n-4) .service-box{border-right: none;} .service-layout4 .row > div:nth-child(-n+4) .service-box{border-top: none;}} @media (min-width: 992px) and (max-width: 1199.98px){.service-layout4 .row > div:nth-child(3n-3) .service-box{border-right: none;} .service-layout4 .row > div:nth-child(-n+3) .service-box{border-top: none;}} @media (min-width: 576px) and (max-width: 991.98px){.service-layout4 .row > div:nth-child(2n-2) .service-box{border-right: none;} .service-layout4 .row > div:nth-child(-n+2) .service-box{border-top: none;}} /*------------------- 6.7. Repair Estimator -------------------*/ .repair-estimator-wrap{position: relative;} .repair-estimator-wrap .estimator-title-area{padding-bottom: 20px;} .repair-estimator-wrap .estimator-title-area .title{color: #01133c; font-weight: 600; text-transform: uppercase; margin-bottom: 5px; font-size: 40px;} .repair-estimator-wrap .estimator-title-area .text{font-size: 20px; color: #01133c; font-weight: 500; margin-bottom: 0;} .repair-estimator-wrap form.estimator-form{margin-left: 45px;} .repair-estimator-layout1:before{content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: 0.68; z-index: 0; background-color: #0f1729;} .repair-estimator-layout1 .estimator-title-area .text, .repair-estimator-layout1 .estimator-title-area .title{color: #ffffff;} .repair-estimator-layout1 form.estimator-form input{border: none; box-shadow: none;} .repair-estimator-layout1 form.estimator-form .select2-container span.select2-selection{box-shadow: none; border: none;} .repair-estimator-layout2:before{display: none;} .repair-estimator-layout2 .inner-wrap{padding: 80px 80px; padding-bottom: 60px; border-bottom: 2px solid #ef0f3a; box-shadow: 0 0 65px 0 rgba(0, 0, 0, 0.1); position: relative; margin-top: -140px; z-index: 2; background-color: #ffffff;} .repair-estimator-layout2 .estimator-title-area .title{color: #01133c; font-size: 40px;} .repair-estimator-layout2 .estimator-title-area .text{color: #696e78;} .repair-estimator-layout2 form.estimator-form .select2-container span.select2-selection{box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.05);} .repair-estimator-layout2 form.estimator-form input{box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.05);} .repair-estimator-layout2 form.estimator-form input:focus{box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.05);} /*------------------- 6.8. Work Process -------------------*/ .work-process-layout1{position: relative;} .work-process-layout1:before{content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: 1; z-index: 0; background-image: url("../img/testomonial/testomonial-bg-1-1.png");} .work-process-layout1.wrap-layout2{overflow: hidden;} .work-process-layout1.wrap-layout2:after{content: ''; position: absolute; width: 100%; height: 100%; bottom: -100px; left: 0; z-index: -1; max-width: 830px; max-height: 735px; background-image: url("../img/work-process/bg-shape-4-2.png"); animation: upDown 10s alternate infinite;} .work-process-layout1.wrap-layout2:before{top: 0; right: 0; left: auto; max-width: 445px; max-height: 671px; background-image: url("../img/work-process/bg-shape-4-1.png");} .work-process-layout1 .work-process{margin-bottom: 30px; padding-top: 20px;} .work-process-layout1 .work-process .process-head{text-align: center; margin-bottom: 80px; position: relative;} .work-process-layout1 .work-process .process-head:before{content: ''; position: absolute; right: -120px; top: -22px; background-image: url("../img/work-process/border-line-1.png"); background-size: 100% 100%; background-position: center top; background-repeat: no-repeat; width: 100%; max-width: 66%; height: 45px;} .work-process-layout1 .work-process .process-head:after{content: ''; position: absolute; right: -121px; top: -7px; width: 15px; height: 15px; display: inline-block; background-color: #0046e2; border-radius: 50%; animation: cscale 1s infinite alternate;} .work-process-layout1 .work-process .process-body{box-shadow: 0px 25px 47.5px 2.5px rgba(0, 0, 0, 0.1); background-color: #fff;} .work-process-layout1 .work-process .icon{width: 70px; height: 70px; line-height: 70px; display: inline-block; color: #ffffff; text-align: center; font-size: 18px; font-weight: 700; background-color: #0046e2; border-radius: 50%;} .work-process-layout1 .work-process .icon .text{position: relative; z-index: 1;} .work-process-layout1 .work-process .process-img{overflow: hidden; min-height: 250px;} .work-process-layout1 .work-process .process-img img{width: 100%;height: 240px;transform: scale(1.01); transition: all ease 0.4s;} .work-process-layout1 .work-process .process-content{padding: 15px 40px;} .work-process-layout1 .work-process .process-content .title{font-family: "Roboto", sans-serif; font-size: 16px; line-height: 32px; font-weight: 500; letter-spacing: 0.5px; margin-bottom: 10px;} .work-process-layout1 .work-process:hover .process-img img{transform: scale(1.08);} .work-process-layout1 .row > div:nth-child(even) .work-process .icon{background-color: #ef0f3a;} .work-process-layout1 .row > div:nth-child(even) .work-process .icon .ripple{background-color: #ef0f3a;} .work-process-layout1 .row > div:nth-child(even) .work-process .process-head:before{background-image: url("../img/work-process/border-line-2.png"); top: 40px;} .work-process-layout1 .row > div:nth-child(even) .work-process .process-head:after{top: auto; bottom: 0; background-color: #ef0f3a;} .work-process-layout1 .row > div:last-child .process-head:before{display: none;} .work-process-layout1 .row > div:last-child .process-head:after{display: none;} .work-process-layout2{position: relative; min-height: 1235px;} .work-process-layout2:before, .work-process-layout2:after{content: ''; position: absolute; width: 100%; height: 100%; background-position: center center; background-size: 100% 100%; background-repeat: no-repeat;} .work-process-layout2:before{top: -210px; left: 0; max-width: 200px; max-height: 490px; background-image: url("../img/work-process/bg-shape-2-2.png"); z-index: -1;} .work-process-layout2:after{top: -115px; right: 0; max-width: 520px; z-index: -1; background-image: url("../img/work-process/bg-shape-2-1.png");} .work-process-layout2 .shape-bg{bottom: 45px; right: 430px;} .work-process-layout2 .work-process{display: flex; align-items: center; position: absolute; max-width: 440px; margin-bottom: 40px;} .work-process-layout2 .work-process:before{content: ''; position: absolute; background-repeat: no-repeat; background-size: 100% 100%; background-position: center center;} .work-process-layout2 .work-process .icon span{display: inline-block; width: 150px; height: 150px; text-align: center; line-height: 126px; position: relative; background-color: #ffffff; color: #ef0f3a; font-size: 54px; z-index: 1; padding: 10px; margin-right: 40px; border-radius: 50%; box-shadow: 0px 25px 47.5px 2.5px rgba(0, 0, 0, 0.07);} .work-process-layout2 .work-process .icon span:before{content: attr(data-no); position: absolute; top: 0px; right: 24px; width: 40px; height: 40px; display: inline-block; background-color: #ef0f3a; color: #ffffff; font-size: 16px; line-height: 42px; font-weight: 700; border-radius: 50%; animation: cscale 2s infinite alternate;} .work-process-layout2 .work-process .icon span i{width: 100%; height: 100%; border: 2px solid #ef0f3a; display: inline-block; border-radius: 50%;} .work-process-layout2 .work-process .process-content{width: calc(100% - 190px);} .work-process-layout2 .work-process .process-content .title{font-size: 22px; margin-bottom: 10px; text-transform: capitalize; line-height: 32px;} .work-process-layout2 .work-process .process-content .title a:hover{color: inherit;} .work-process-layout2 .work-process .process-content .text{margin-bottom: 0;} .work-process-layout2 .container{position: relative;} .work-process-layout2 .container .row{position: relative;} .work-process-layout2 .container .row > [class^="col-"]{position: static;} .work-process-layout2 .container .row > div:nth-child(1) .work-process{top: 0; left: 41%;} .work-process-layout2 .container .row > div:nth-child(1) .work-process:before{background-image: url("../img/work-process/border-line-2-1.png"); width: 345px; height: 170px; top: 137px; left: 105px;} .work-process-layout2 .container .row > div:nth-child(2) .work-process{top: 250px; right: 45px;} .work-process-layout2 .container .row > div:nth-child(2) .work-process:before{background-image: url("../img/work-process/border-line-2-2.png"); width: 450px; height: 70px; left: -100%; top: 41px;} .work-process-layout2 .container .row > div:nth-child(3) .work-process{flex-direction: row-reverse; text-align: right; top: 220px; left: 50px;} .work-process-layout2 .container .row > div:nth-child(3) .work-process:before{background-image: url("../img/work-process/border-line-2-3.png"); width: 197px; height: 210px; top: 95%; right: 55px;} .work-process-layout2 .container .row > div:nth-child(3) .work-process .icon span{margin-right: 0; margin-left: 40px;} .work-process-layout2 .container .row > div:nth-child(4) .work-process{top: 485px; display: block; text-align: center; max-width: 250px; left: 90px;} .work-process-layout2 .container .row > div:nth-child(4) .work-process:before{display: none;} .work-process-layout2 .container .row > div:nth-child(4) .work-process .icon span{margin-right: 0; margin-bottom: 35px;} .work-process-layout2 .container .row > div:nth-child(4) .work-process .process-content{width: calc(100%);} .work-process-layout3 .section-title3{margin-bottom: 140px;} .work-process-layout3 .container{position: relative;} .work-process-layout3 .work-process{display: flex; align-items: center; max-width: 385px; margin-bottom: 130px;} .work-process-layout3 .work-process .icon span{width: 100px; height: 100px; line-height: 100px; display: inline-block; text-align: center; font-size: 46px; color: #0046e2; margin-right: 20px; position: relative; z-index: 1; border-radius: 50%; box-shadow: inset 0px 10px 50px 0px rgba(13, 99, 220, 0.1);} .work-process-layout3 .work-process .icon span:before{content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: 1; z-index: -1; border: 2px dotted #0046e2; border-radius: 50%; animation: cspine 20s linear infinite;} .work-process-layout3 .work-process .process-content{width: calc(100% - 120px);} .work-process-layout3 .work-process .process-content .title{font-size: 22px; margin-bottom: 11px;} .work-process-layout3 .work-process .process-content .text{margin-bottom: 00;} .work-process-layout3 .row > div:nth-child(odd) .work-process{flex-direction: row-reverse; text-align: right;} .work-process-layout3 .row > div:nth-child(odd) .work-process .icon span{margin-right: 0; margin-left: 20px;} .work-process-layout3 .row > div:nth-child(even) .work-process{margin-right: 0; margin-left: auto;} .work-process-layout3 .shape-bg{bottom: -35px; left: 50%; max-width: 545px; max-height: 420px; transform: translateX(-50%);} .work-process-layout3 .shape-bg:before, .work-process-layout3 .shape-bg:after{content: ''; position: absolute; left: 50%; top: -135px; width: 480px; height: 480px; margin-left: -240px; border: 3px dotted #0046e2; border-radius: 50%; z-index: 1; animation: cspinereverse 50s linear infinite;} .work-process-layout3 .shape-bg:after{border-width: 2px; box-shadow: 0px 10px 47.5px 2.5px rgba(0, 70, 226, 0.25); width: 430px; height: 430px; margin-left: -215px; top: -110px; opacity: 0.941; animation: cspine 50s linear infinite;} .work-process-layout3 .shape-bg img{position: relative; z-index: 2;} /*------------------- 6.9. Latest Project -------------------*/ .latest-project-wrapper{position: relative;} .latest-project-wrapper:before{content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: 0.8; z-index: 0; background-color: #060d1e;} .latest-project-wrapper .section-title{padding: 0;} .latest-project-wrapper .section-title h2.title{color: #ffffff; text-transform: uppercase; line-height: 60px; font-size: 48px; margin-bottom: 30px;} .latest-project-wrapper .section-title .text{color: #ffffff; padding-right: 10px; margin-bottom: 40px;} .latest-project-wrapper .project-slider-area{position: absolute; top: 60px; right: 60px; width: 100%; max-width: 950px; box-shadow: 0px 25px 47.5px 2.5px rgba(0, 0, 0, 0.2);} .latest-project-wrapper .project-slider-area .thumb-logo{position: absolute; bottom: 30px; left: -100px; display: inline-block; z-index: 1; animation: cspine 20s linear infinite;} .latest-project-wrapper .latProject-slider-active .slick-arrow{bottom: 30px; right: 30px;} .latest-project-wrapper .latProject-slider-active .slick-arrow.slick-prev{right: 79.5px;} /*------------------- 6.10. Our xinwen -------------------*/ /*------------------- 6.10. Our xinwen -------------------*/ /*------------------- 6.10. Our Team -------------------*/ .team-layout1{position: relative; overflow: hidden;} .team-layout1 .slick-track > [class^="col-"]{padding-left: 5px; padding-right: 5px;} .team-layout1:after, .team-layout1:before{content: ''; position: absolute; background-size: 100% 100%; background-position: center center; background-repeat: no-repeat; z-index: -1; width: 100%; height: 100%;} .team-layout1:before{background-image: url("../img/team-member/bg-shape-1-1.png"); max-width: 980px; max-height: 640px; top: -160px; left: 0;} .team-layout1:after{background-image: url("../img/team-member/bg-shape-1-2.png"); max-width: 705px; max-height: 576px; bottom: -330px; right: 0;} .team-layout1.wrap-layout2:after, .team-layout1.wrap-layout2:before{display: none;} .team-layout1 .team-member{position: relative; margin-bottom: 30px; margin-top: 45px; z-index: 2;} .team-layout1 .team-member .member-img img{width: 100%;height: 490px;} .team-layout1 .team-member ul.social-links{position: absolute; top: 0; left: 0; width: 0; height: 100%; overflow: hidden; text-align: center; opacity: 0; visibility: hidden; padding: 2.5px 0; transition: all ease 0.4s;} .team-layout1 .team-member ul.social-links li{display: inline-block; margin-right: 10px;} .team-layout1 .team-member ul.social-links li:last-child{margin-right: 0;} .team-layout1 .team-member ul.social-links li a{display: inline-block; text-align: center; background-color: #ef0f3a; color: #ffffff; line-height: 45px; position: relative; visibility: hidden; opacity: 0; width: 45px; height: 45px; border-radius: 50%; transition: all ease 0.4s; transform: translateX(-20px);} .team-layout1 .team-member ul.social-links li a:hover{background-color: #ffffff; color: #ef0f3a;} .team-layout1 .team-member ul.social-links.show{opacity: 1; visibility: visible; width: 100%;} .team-layout1 .team-member ul.social-links.show li a{opacity: 1; visibility: visible; transform: translateX(0);} .team-layout1 .team-member .btn-overly{position: absolute; top: 0; right: 40px; opacity: 1; visibility: visible; transform: translateX(0); transition: all ease 0.4s;} .team-layout1 .team-member .btn-overly.hide{transform: translateX(20px); opacity: 0; visibility: hidden;} .team-layout1 .team-member .link-area{position: absolute; top: 0; height: 50px; width: 100%; margin-top: -25px; background-color: transparent;} .team-layout1 .team-member .team-member ul.social-links li:last-child{margin-right: 0;} .team-layout1 .team-member .member-text{text-align: center; position: relative; background-color: #ffffff; padding: 35px 0; margin: 0 30px; box-shadow: 0px 25px 47.5px 2.5px rgba(0, 0, 0, 0.07); margin-top: -60px; overflow: hidden;} .team-layout1 .team-member .member-text span{color: #0046e2; font-size: 14px; display: inline-block; margin-bottom: 7px;} .team-layout1 .team-member .member-text .name{font-size: 22px; letter-spacing: 0; font-family: "Roboto", sans-serif; text-transform: capitalize; margin-bottom: 0;} .team-layout1 .team-member .member-text:before, .team-layout1 .team-member .member-text:after{content: ''; position: absolute; background-color: #0046e2; left: 50%; top: -225px; opacity: 0.20; z-index: 1; width: 250px; height: 250px; border-radius: 50%; transform: translateX(-50%); transition: all 0.4s;} .team-layout1 .team-member .member-text:after{top: auto; bottom: -250px; background-color: #ef0f3a;} .team-layout1 .team-member:hover .btn-overly{background-color: #ef0f3a; color: #ffffff; box-shadow: 0 0 0 17px #ffffff;} .team-layout1 .team-member:hover .btn-overly .ripple{background-color: #ef0f3a;} .team-layout1 .team-member:hover .member-text span{color: #ef0f3a;} .team-layout1 .team-member:hover .member-text:before, .team-layout1 .team-member:hover .member-text:after{top: -270px;} .team-layout1 .team-member:hover .member-text:after{top: auto; bottom: -225px;} .team-layout2{padding: 0 180px; position: relative;} .team-layout2:before, .team-layout2:after{content: ''; position: absolute; width: 100%; height: 100%; z-index: 1; background-size: 100% 100%; background-repeat: no-repeat; background-position: center center;} .team-layout2:before{max-width: 900px; max-height: 615px; bottom: -175px; left: 0; background-image: url("../img/team-member/bg-shape-2-2.png");} .team-layout2:after{max-width: 845px; min-height: 1386px; right: 0; top: 0; background-image: url("../img/team-member/bg-shape-2-1.png");} .team-layout2 .background-image{height: 495px; width: 100%; position: absolute; left: 0; top: 0; z-index: 2;} .team-layout2 .section-title2 .text, .team-layout2 .section-title2 .title{color: #fff;} .team-layout2 .section-title2 .text:before, .team-layout2 .section-title2 .title:before{color: #fff;} .team-layout2 .container-fluid{position: relative; z-index: 4;} .team-layout2 .team-member{position: relative;} .team-layout2 .team-member .member-img{overflow: hidden;} .team-layout2 .team-member .member-img img{width: 100%; transform: scale(1.001); transition: all ease 0.4s;} .team-layout2 .team-member .member-content{position: absolute; left: 0; right: 0; bottom: 0; text-align: center; padding-bottom: 45px; padding-top: 20px; z-index: 1;} .team-layout2 .team-member .member-content:after, .team-layout2 .team-member .member-content:before{content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 146%; z-index: -1; transition: all ease 0.4s;} .team-layout2 .team-member .member-content:before{opacity: 0; height: 0; visibility: hidden; background: #ef0f3a; background: linear-gradient(0deg, rgba(239, 15, 58, 0.927609) 13%, rgba(239, 15, 58, 0.849177) 26%, rgba(239, 15, 58, 0.739933) 39%, rgba(239, 15, 58, 0.6559) 50%, rgba(239, 15, 58, 0.462623) 63%, rgba(239, 15, 58, 0.179709) 80%, rgba(239, 15, 58, 0.154499) 85%, rgba(239, 15, 58, 0.0816702) 90%, rgba(239, 15, 58, 0.0620623) 95%, rgba(239, 15, 58, 0) 100%);} .team-layout2 .team-member .member-content:after{opacity: 0.65; visibility: visible; background: #070b28; background: linear-gradient(0deg, rgba(0, 0, 0, 0.927609) 13%, rgba(0, 0, 0, 0.849177) 26%, rgba(0, 0, 0, 0.739933) 39%, rgba(0, 0, 0, 0.6559) 50%, rgba(0, 0, 0, 0.462623) 63%, rgba(0, 0, 0, 0.179709) 80%, rgba(0, 0, 0, 0.154499) 85%, rgba(0, 0, 0, 0.0816702) 90%, rgba(0, 0, 0, 0.0620623) 95%, rgba(0, 0, 0, 0) 100%);} .team-layout2 .team-member .member-content a.btn-overly{background-color: #ef0f3a; position: absolute; left: calc(50% - 25px); top: 20px; width: 45px; height: 45px; line-height: 45px; opacity: 1; visibility: visible;} .team-layout2 .team-member .member-content a.btn-overly .ripple{background-color: #ef0f3a;} .team-layout2 .team-member .member-content ul.social-links{padding-bottom: 35px; position: relative; top: -40px; opacity: 0; visibility: hidden; transition: all ease 0.4s;} .team-layout2 .team-member .member-content ul.social-links li{display: inline-block; margin: 0 3px;} .team-layout2 .team-member .member-content ul.social-links li a{width: 45px; height: 45px; line-height: 45px; display: inline-block; text-align: center; background-color: #ffffff; color: #ef0f3a; border-radius: 50%;} .team-layout2 .team-member .member-content ul.social-links li a:hover{border-radius: 7px;} .team-layout2 .team-member .member-content .member-text .degi{color: #ffffff; font-size: 14px; display: inline-block; margin-bottom: 7px;} .team-layout2 .team-member .member-content .member-text .name{font-size: 22px; color: #ffffff; margin-bottom: 0;} .team-layout2 .team-member .member-content .member-text .name:hover a{color: #ffffff;} .team-layout2 .team-member:hover .member-img img{transform: scale(1.05);} .team-layout2 .team-member:hover .member-content a.btn-overly{opacity: 0; visibility: hidden; top: 40px;} .team-layout2 .team-member:hover .member-content ul.social-links{top: 0; visibility: visible; opacity: 1;} .team-layout2 .team-member:hover .member-content:before{opacity: 0.9; visibility: visible; height: 146%;} .team-layout2 .team-member:hover .member-content:after{opacity: 0; visibility: hidden;} .team-layout2 .slick-arrow{top: calc(50% - 25px); left: -95px;} .team-layout2 .slick-arrow.slick-next{left: auto; right: -95px;} .team-layout3{position: relative; background-color: #fafafa;} .team-layout3 .team-member{position: relative; margin-bottom: 30px;} .team-layout3 .team-member .member-img{width: 100%; padding-left: 60px;} .team-layout3 .team-member .member-img img{width: 100%; position: relative; z-index: 2;} .team-layout3 .team-member .member-text{position: absolute; bottom: 60px; width: 100%; max-width: 250px; background-color: #0046e2; padding: 34px 40px; z-index: 3; transition: all ease 0.4s;} .team-layout3 .team-member .member-text .name{font-size: 22px; color: #ffffff; margin-bottom: 3px;} .team-layout3 .team-member .member-text .name:hover{color: #ffffff;} .team-layout3 .team-member .member-text .name a{color: inherit;} .team-layout3 .team-member .member-text span{color: #ffffff; font-size: 14px;} .team-layout3 .team-member .btn-overly{position: absolute; bottom: 100px; left: 250px; width: 45px; height: 45px; line-height: 44px; z-index: 4; background-color: #ffffff; color: #0046e2; opacity: 1; visibility: visible; transform: translateX(-50%);} .team-layout3 .team-member .btn-overly .ripple{background-color: #7aa3ff;} .team-layout3 .team-member ul.social-links{width: 60px; position: absolute; top: 0; bottom: 80px; left: 61px; z-index: 1; background-color: #0046e2; text-align: center; padding-top: 28px; opacity: 0; visibility: hidden; border-top-left-radius: 26px; transition: all ease 0.4s;} .team-layout3 .team-member ul.social-links li{margin-bottom: 29px;} .team-layout3 .team-member ul.social-links li:last-child{margin-bottom: 0;} .team-layout3 .team-member ul.social-links li a{color: #ffffff; font-size: 16px; display: inline-block;} .team-layout3 .team-member:hover .social-links{left: 0; opacity: 1; visibility: visible;} .team-layout3 .team-member:hover .member-text{border-top-right-radius: 26px; border-bottom-left-radius: 26px;} .team-layout3 .team-member:hover .btn-overly{left: 200px; opacity: 0; visibility: hidden;} .team-layout3 .slick-center .team-member .social-links{left: 0; opacity: 1; visibility: visible;} .team-layout3 .slick-center .team-member .member-text{border-top-right-radius: 26px; border-bottom-left-radius: 26px;} .team-layout3 .slick-center .team-member .btn-overly{left: 200px; opacity: 0; visibility: hidden;} .team-layout3 .background-image{position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: 0.06; z-index: 0;} .team-layout4 .team-member{text-align: center; box-shadow: 0px 18px 25px 6px rgba(0, 70, 226, 0.09); padding: 60px 0; margin-bottom: 20px; position: relative; overflow: hidden;} .team-layout4 .team-member .member-img{background-color: #060d1d; position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: 0; z-index: 0; visibility: hidden; transform-origin: right top; transform: scale(1.1); transition: all ease 0.4s;} .team-layout4 .team-member .member-img img{width: 100%; height: 100%;} .team-layout4 .team-member .member-img:before{content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: 0.51; z-index: 1; background-color: #060d1d;} .team-layout4 .team-member .member-thumb-img, .team-layout4 .team-member .member-text, .team-layout4 .team-member ul{position: relative; z-index: 3;} .team-layout4 .team-member .member-thumb-img{width: 190px; height: 190px; margin: 0 auto; border: 2px dotted #8cbeff; padding: 10px; margin-bottom: 40px; border-radius: 50%; opacity: 1; visibility: visible; transform: scale(1); transition: all ease 0.3s;animation: cspine 200s linear infinite;} .team-layout4 .team-member .member-thumb-img img{width: 100%; height: 100%;} .team-layout4 .team-member .member-text{margin-bottom: 25px;} .team-layout4 .team-member .member-text .name{font-size: 22px; margin-bottom: 3px;} .team-layout4 .team-member .member-text .name a{color: inherit;} .team-layout4 .team-member .member-text .name a:Hover{color: inherit;} .team-layout4 .team-member .member-text .degi{font-size: 14px; color: #0046e2; letter-spacing: 0.20px; transition: all ease 0.4s;} .team-layout4 .team-member ul li{display: inline-block; margin: 0 3px;} .team-layout4 .team-member ul li a{display: inline-block; width: 45px; height: 45px; line-height: 45px; text-align: center; background-color: #ffffff; color: #0046e2; box-shadow: 0 7px 28px -12px #0046e2; border-radius: 50%;} .team-layout4 .team-member ul li a:hover{color: #ffffff; background-color: #ef0f3a;} .team-layout4 .team-member:hover .member-img{opacity: 1; visibility: visible; transform: scale(1);} .team-layout4 .team-member:hover .member-thumb-img{opacity: 0; visibility: hidden; transform: scale(0.5);} .team-layout4 .team-member:hover .member-text .name, .team-layout4 .team-member:hover .member-text .degi{color: #ffffff;} /*------------------- 6.11. Featured -------------------*/ .our-featured-wrapper{position: relative;} .our-featured-wrapper .single-featured{text-align: center; position: relative; padding-top: 30px; transform: translateY(0); transition: all ease 0.4s;} .our-featured-wrapper .single-featured .shape{display: inline-block; position: absolute; top: 0; left: 50%; margin-left: -90px; border: 3px solid #ffffff; width: 180px; height: 180px; border-radius: 50%;} .our-featured-wrapper .single-featured .shape:after, .our-featured-wrapper .single-featured .shape:before{content: ''; width: 10px; height: 10px; background-color: #0046e2; display: inline-block; box-shadow: 0 0 1px 6px white; position: absolute; left: -6px; top: calc(50% - 4px); border-radius: 50%; z-index: 3;} .our-featured-wrapper .single-featured .shape:after{left: auto; right: -6px;} .our-featured-wrapper .single-featured .featured-icon{position: relative; margin-bottom: -60px; z-index: 3;} .our-featured-wrapper .single-featured .featured-icon .circle-btn{transform: rotate(0);} .our-featured-wrapper .single-featured .featured-icon .circle-btn:hover{color: #ffffff;} .our-featured-wrapper .single-featured .featured-content{background-color: #ffffff; padding: 100px 40px; padding-bottom: 25px; position: relative; z-index: 2;} .our-featured-wrapper .single-featured .featured-content .title{font-size: 30px; font-family: "Roboto", sans-serif; margin-bottom: 22px;} .our-featured-wrapper .single-featured:hover{transform: translateY(5px);} .our-featured-wrapper .single-featured:hover .featured-icon .circle-btn{background-color: #ef0f3a; transform: rotate(360deg);} .our-featured-wrapper .single-featured:hover .shape:after, .our-featured-wrapper .single-featured:hover .shape:before{background-color: #ef0f3a;} .our-featured-wrapper .section-title p, .our-featured-wrapper .section-title .title{color: #ffffff;} .featured-layout1:before{content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: 0.75; z-index: 0; background-color: #0e121d;} .featured-layout1 .circle-btn{box-shadow: 0px 10px 18px 2px rgba(4, 5, 5, 0.13);} .featured-layout1 .circle-btn:hover{color: #ffffff;} .featured-layout1 .single-featured .text{color: #494f5b;} .featured-layout2{position: relative; overflow: hidden;} .featured-layout2:before{content: ''; position: absolute; right: 0; bottom: -75px; width: 100%; height: 100%; max-width: 625px; max-height: 410px; background-image: url("../img/featured/bg-shape-2-1.png"); background-size: 100% 100%; background-position: center center; background-repeat: no-repeat;} .featured-layout2 .single-featured{margin-bottom: 30px;} .featured-layout2 .single-featured .featured-icon .circle-btn{background-color: #ef0f3a;} .featured-layout2 .single-featured .featured-icon .circle-btn:hover{color: #ffffff;} .featured-layout2 .single-featured .shape{border-color: #ef0f3a;} .featured-layout2 .single-featured .shape:after, .featured-layout2 .single-featured .shape:before{background-color: #ef0f3a;} .featured-layout2 .single-featured .featured-content{box-shadow: 0 20px 38px -11px rgba(0, 0, 0, 0.05); transition: all ease 0.4s;} .featured-layout2 .single-featured .featured-content .text{color: #494f5b;} .featured-layout2 .single-featured:hover .featured-content{box-shadow: none;} .featured-layout3 .single-featured{margin-bottom: 30px;} .featured-layout3 .single-featured .shape{border-color: #0046e2;} .featured-layout3 .single-featured .featured-icon .circle-btn{box-shadow: 0px 10px 18px 2px rgba(4, 5, 5, 0.13);} .featured-layout3 .single-featured p{color: #494f5b;} .featured-layout3 .single-featured:hover .shape{border-color: #ef0f3a;} .featured-layout3 .slick-slide .single-featured .featured-content{box-shadow: none; transition: all ease 0.4s;} .featured-layout3 .slick-slide.slick-active .single-featured .featured-content{box-shadow: 0 22px 55px -21px rgba(0, 0, 0, 0.1);} /*------------------- 6.12. Pricing Table -------------------*/ @media (min-width: 576px){.lianxi {-ms-flex: 0 0 33%;flex: 0 0 33%;max-width: 33%;}} .pricing-table-wrapper .pricing-table{text-align: center; overflow: hidden;} .pricing-table-wrapper .pricing-table h3.title{margin-bottom: 15px; font-weight: 700;} .pricing-table-wrapper .pricing-table p.text{color: #494f5b;} .pricing-table-wrapper .pricing-table ul.pricing-list li{margin-bottom: 10px; color: #494f5b;} .pricing-table-wrapper .pricing-table ul.pricing-list li:last-child{margin-bottom: 0;} .pricing-table-layout1{position: relative; overflow: hidden;} .pricing-table-layout1:before{content: ''; position: absolute; bottom: -105px; right: 0; width: 100%; height: 100%; max-width: 1165px; max-height: 415px; background-image: url("../img/bg-img/pricing-plan-bg.png"); background-size: 100% 100%; background-position: center center; background-repeat: no-repeat;} .pricing-table-layout1 .pricing-table{padding-bottom: 60px; box-shadow: 0 0px 38px -11px rgba(0, 0, 0, 0.1); padding-top: 75px; margin-bottom: 30px; position: relative; background-color: #ffffff; transform: scale(1.001); transition: all ease 0.4s;} .pricing-table-layout1 .pricing-table:before{content: ''; position: absolute; background-color: #0046e2; left: 50%; top: -240px; opacity: 0.10; z-index: 1; width: 300px; height: 300px; border-radius: 50%; transform: translateX(-50%); transition: all 0.4s;} .pricing-table-layout1 .pricing-table .pricing-icon{padding-top: 28px; padding-bottom: 60px;} .pricing-table-layout1 .pricing-table .circle-btn:Hover{background-color: #0046e2; color: #ffffff;} .pricing-table-layout1 .pricing-table .price-plan{padding-top: 40px; padding-bottom: 35px;} .pricing-table-layout1 .pricing-table .price-plan .plan-text{font-size: 24px; font-weight: 700; text-transform: none; margin-bottom: 0;} .pricing-table-layout1 .pricing-table .price-plan .plan-text span{color: #0046e2;} .pricing-table-layout1 .pricing-table:hover{transform: scale(1.02);} .pricing-table-layout1 .slick-center .pricing-table:before{background-color: #ef0f3a;} .pricing-table-layout1 .slick-center .pricing-table .pricing-icon .circle-btn{background-color: #ef0f3a;} .pricing-table-layout1 .slick-center .pricing-table .pricing-icon .circle-btn .ripple{background-color: #ef0f3a;} .pricing-table-layout1 .slick-center .pricing-table .price-plan .plan-text span{color: #ef0f3a;} .pricing-table-layout1 .slick-center .pricing-table a.primary-btn{background-color: #ef0f3a;} .pricing-table-layout1 .slick-center .pricing-table a.primary-btn .btn-bg{border-color: #ef0f3a;} .pricing-table-layout2.pt-190{padding-top: 190px;} .pricing-table-layout2 .pricing-table{margin-bottom: 100px; padding-bottom: 60px; position: relative; overflow: visible; background: linear-gradient(0deg, white 16%, rgba(255, 255, 255, 0.944415) 43%, rgba(255, 255, 255, 0.857581) 62%, rgba(255, 255, 255, 0.709121) 77%, rgba(255, 255, 255, 0.400998) 90%, rgba(255, 255, 255, 0) 97%); box-shadow: 0 75px 85px -21px rgba(0, 0, 0, 0.1); opacity: 0; visibility: hidden; transition: all ease 0.4s; transform: translateY(0);} .pricing-table-layout2 .pricing-table:hover{transform: translateY(10px);} .pricing-table-layout2 .pricing-table .pricing-icon{position: relative; padding-top: 10px;} .pricing-table-layout2 .pricing-table .pricing-icon:before{content: ''; position: absolute; left: 50%; top: 0; border-radius: 50%; transform: translateX(-50%); width: 186px; height: 186px; box-shadow: inset 0px 1px 50px 0px rgba(0, 0, 0, 0.02), inset 0px 0px 20px 0px rgba(0, 0, 0, 0.1);} .pricing-table-layout2 .pricing-table .pricing-icon .circle-btn{width: 167px; height: 167px; line-height: 167px; font-size: 76px; margin-bottom: 60px; background-color: #ef0f3a;} .pricing-table-layout2 .pricing-table .pricing-icon .circle-btn:hover{color: #ffffff;} .pricing-table-layout2 .pricing-table span.price-amount{font-size: 60px; font-weight: 700; line-height: 1; color: #ef0f3a; display: block; padding: 13px 0; margin-bottom: 30px;} .pricing-table-layout2 .pricing-table ul.pricing-list{margin-bottom: 50px;} .pricing-table-layout2 .pricing-table ul.pricing-list li{margin-bottom: 18px;} .pricing-table-layout2 .pricing-table ul.pricing-list li:last-child{margin-bottom: 0;} .pricing-table-layout2 .pricing-table .price-plan{position: absolute; left: -52%; top: 52.5%; background-color: #ef0f3a; width: 100%; min-width: 450px; z-index: 3; text-align: center; border-top-right-radius: 28px; border-top-left-radius: 28px; transform: rotate(-90deg) translateY(-50%);} .pricing-table-layout2 .pricing-table .price-plan .plan-text{color: #ffffff; margin-bottom: 0; padding: 17px 0; font-size: 24px; text-transform: none; font-weight: 500;} .pricing-table-layout2 .pricing-table .price-plan span.shape{position: absolute; left: 65px; width: 3px; height: 75px; top: 40.59%; background: linear-gradient(0deg, #ef0f3a 50%, white 50%);} .pricing-table-layout2 .pricing-table .price-plan span.shape.shape2{left: auto; right: 65px;} .pricing-table-layout2 .pricing-table .price-plan span.shape:after, .pricing-table-layout2 .pricing-table .price-plan span.shape:before{content: ''; position: absolute; width: 7px; height: 7px; top: 3px; left: -2.5px; display: inline-block; background-color: #ef0f3a; box-shadow: 0 0 1px 5px #ffffff; border-radius: 50%;} .pricing-table-layout2 .pricing-table .price-plan span.shape:after{top: auto; bottom: 3px; background-color: #ffffff; box-shadow: 0 0 1px 5px #ef0f3a;} .pricing-table-layout2 .slick-active .pricing-table{opacity: 1; visibility: visible;} .pricing-table-layout2 .inner-wrapper{width: 100%; max-width: 1492px; margin: 0 auto; overflow: hidden !important; padding: 0 61px;} .pricing-table-layout2 .inner-wrapper .slick-list{overflow: visible;} .pricing-table-layout3 .pricing-table{padding-top: 90px; padding-bottom: 80px; position: relative; transition: all ease 0.4s;} .pricing-table-layout3 .pricing-table:before{content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: 0; z-index: -1; background-color: #0046e2; background-image: url("../img/bg-img/pricing-table-bg-3-1.jpg"); background-repeat: no-repeat; background-position: center center; background-size: 100% 100%; visibility: hidden; transition: all ease 0.4s;} .pricing-table-layout3 .pricing-table:after{content: ''; position: absolute; top: 0; right: 1px; bottom: 0; left: 1px; z-index: -1; opacity: 1; visibility: visible; border: 1px solid #dfe8fd; transition: all ease 0.4s;} .pricing-table-layout3 .pricing-table span.price-amount{display: inline-block; width: 186px; height: 186px; line-height: 168px; background-color: #0046e2; border: 10px solid #ffffff; color: #ffffff; font-size: 50px; font-weight: 700; letter-spacing: 0.20px; margin-bottom: 60px; border-radius: 50%;} .pricing-table-layout3 .pricing-table ul.pricing-list{padding-top: 12px; padding-bottom: 45px;} .pricing-table-layout3 .pricing-table:hover:before{opacity: 1; visibility: visible;} .pricing-table-layout3 .pricing-table:hover:after{opacity: 0; visibility: hidden;} .pricing-table-layout3 .pricing-table:hover .content p, .pricing-table-layout3 .pricing-table:hover .content .title{color: #ffffff;} .pricing-table-layout3 .pricing-table:hover ul.pricing-list li{color: #ffffff;} .pricing-table-layout3 .pricing-table:hover a{background-color: #ffffff; color: #0046e2;} .pricing-table-layout3 .pricing-table:hover a:Hover{color: #ffffff;} .pricing-table-layout3 .no-gutters .slick-track > div{padding-left: 0; padding-right: 0;} .pricing-table-layout3 .slick-center .pricing-table:before{opacity: 1; visibility: visible;} .pricing-table-layout3 .slick-center .pricing-table:after{opacity: 0; visibility: hidden;} .pricing-table-layout3 .slick-center .pricing-table .content p, .pricing-table-layout3 .slick-center .pricing-table .content .title{color: #ffffff;} .pricing-table-layout3 .slick-center .pricing-table ul.pricing-list li{color: #ffffff;} .pricing-table-layout3 .slick-center .pricing-table a{background-color: #ffffff; color: #0046e2;} .pricing-table-layout3 .slick-center .pricing-table a:Hover{color: #ffffff;} .pricing-table-layout3 .slick-slider{box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.08); margin-bottom: 30px;} .pricing-table-layout4{background-color: #fbfbfb; position: relative; overflow: hidden; background-image: url("../img/bg-img/pricing-plan-bg-4-1.png");} .pricing-table-layout4 .shape-bg{right: 0; bottom: 30px; animation: upDown 10s alternate infinite;} .pricing-table-layout4 .pricing-table{padding-top: 90px; padding-bottom: 60px; margin-bottom: 30px; background-color: #ffffff; box-shadow: 0 0 35px -15px rgba(0, 0, 0, 0.1); position: relative; transform: translateY(0); transition: all ease 0.4s;} .pricing-table-layout4 .pricing-table:before{content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 255px; background-color: #0046e2; clip-path: polygon(100% 0%, 100% 49%, 100% 93%, 37% 80%, 0 100%, 0 0);} .pricing-table-layout4 .pricing-table .price-amount{display: inline-block; width: 186px; height: 186px; line-height: 169px; background-color: #0046e2; color: #ffffff; border: 10px solid #ffffff; font-size: 60px; font-weight: 700; letter-spacing: 0.20px; margin-bottom: 40px; border-radius: 50%; position: relative; z-index: 2;} .pricing-table-layout4 .pricing-table .pricing-list{padding-top: 10px; padding-bottom: 50px;} .pricing-table-layout4 .pricing-table .pricing-list li{margin-bottom: 20px;} .pricing-table-layout4 .pricing-table .pricing-list li:last-child{margin-bottom: 0 !important;} .pricing-table-layout4 .pricing-table:hover{transform: translateY(10px);} /*------------------- 6.13. Testomonial -------------------*/ .testomonial-layout1{background-color: #f7f7f7; background-image: url("../img/testomonial/testomonial-bg-1-1.png"); background-size: 100% 100%; background-position: center center; background-repeat: no-repeat;} .testomonial-layout1 .slick-arrow{right: -100px; top: calc(50% - 83px); width: 50px; height: 52px; box-shadow: 0 0px 38px -11px rgba(0, 0, 0, 0.1);} .testomonial-layout1 .slick-arrow.slick-prev{z-index: 2;} .testomonial-layout1 .slick-arrow.slick-prev:after{width: 20px !important; height: 1px; right: calc(50% - 10px); bottom: 1px; top: auto;} .testomonial-layout1 .slick-arrow.slick-next{top: calc(50% - 33px); z-index: 1;} .testomonial-layout1 .single-testomonial{padding-top: 60px; padding-bottom: 30px;} .testomonial-layout1 .single-testomonial .testo-author{max-width: 320px; width: 100%; text-align: center; background-color: #0046e2; background-image: url("../img/testomonial/author-bg.jpg"); background-size: 100% 100%; background-position: center center; background-repeat: no-repeat; padding-top: 60px; padding-bottom: 55px; position: relative; z-index: 9; margin-top: 60px; transform: translateX(-2000px); transition: all ease 1s;} .testomonial-layout1 .single-testomonial .testo-author img{width: 150px; height: 150px; background-color: #ffffff; padding: 8px; margin-bottom: 30px; border-radius: 50%;} .testomonial-layout1 .single-testomonial .testo-author .name{color: #ffffff; font-size: 22px; font-weight: 500; margin-bottom: 5px;} .testomonial-layout1 .single-testomonial .testo-author span{color: #ffffff;} .testomonial-layout1 .single-testomonial .testomonial-content{position: relative; z-index: 1; padding-left: 60px; width: calc(100% - 320px); padding-top: 45px; height: min-content; padding-bottom: 55px; padding-right: 105px;} .testomonial-layout1 .single-testomonial .testomonial-content:before{content: ''; position: absolute; left: -160px; top: 0; width: calc(100% + 160px); background-color: #ffffff; height: 100%; z-index: -1; box-shadow: 0 0px 38px -11px rgba(0, 0, 0, 0.1);} .testomonial-layout1 .single-testomonial .testomonial-content:after{content: '\f10e'; position: absolute; font-family: "Font Awesome 5 Pro"; right: 65px; bottom: 20px; font-size: 100px; font-weight: 300; color: #0046e2; opacity: 0.10;} .testomonial-layout1 .single-testomonial .testomonial-content .quote{font-size: 48px; color: #0046e2; display: inline-block; margin-bottom: 8px;} .testomonial-layout1 .single-testomonial .testomonial-content .text{font-size: 20px; line-height: 32px; margin-bottom: 20px;} .testomonial-layout1 .single-testomonial .testomonial-content .rating i{color: #ffd200; display: inline-block; font-size: 22px; margin-right: 5px;} .testomonial-layout1 .single-testomonial .testomonial-content .rating i:last-child{margin-right: 0;} .testomonial-layout1 .counter-area-wrap{padding: 0 60px;} .testomonial-layout1 .slick-current .single-testomonial .testo-author{transform: translateX(0);} .testomonial-layout1 .slick-current .single-testomonial .testomonial-content .quote, .testomonial-layout1 .slick-current .single-testomonial .testomonial-content .rating, .testomonial-layout1 .slick-current .single-testomonial .testomonial-content .text{animation-name: fadeIn; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-fill-mode: both; animation-duration: 1s; animation-delay: 0.3s;} .testomonial-layout2{position: relative;} .testomonial-layout2:before{content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-height: 845px; background-image: url("../img/testomonial/bg-shape-2-1.png"); background-size: 100% 100%; background-repeat: no-repeat; background-position: center center; z-index: -1;} .testomonial-layout2 .single-testomonial{padding-bottom: 20px; text-align: center;} .testomonial-layout2 .single-testomonial .testomonial-content{padding-bottom: 20px;} .testomonial-layout2 .single-testomonial .testomonial-content .title{font-size: 36px; line-height: 48px; font-weight: 500; color: #000000; text-transform: none; margin-bottom: 20px; letter-spacing: 0;} .testomonial-layout2 .single-testomonial .testomonial-content .text{font-size: 20px; line-height: 32px; font-style: italic; color: #000000;} .testomonial-layout2 .single-testomonial .testo-author .name{font-size: 24px; color: #1c1b19; font-weight: 700; letter-spacing: 0; margin-bottom: 5px;} .testomonial-layout2 .single-testomonial .testo-author span{font-size: 16px; font-weight: 700; color: #ef0f3a;} .testomonial-layout2 .testomonial-avatar-nav{padding-top: 25px; max-width: 205px; margin: 0 auto;} .testomonial-layout2 .testomonial-avatar-nav .slick-track{margin: 25px 0;} .testomonial-layout2 .testomonial-avatar-nav .avatar{width: 70px; height: 70px; margin: 0 auto; background-color: transparent; padding: 5px; position: relative; z-index: 1; cursor: pointer; border-radius: 50%; transform: scale(0.86); transition: all ease 0.4s;} .testomonial-layout2 .testomonial-avatar-nav .avatar img{width: 100%; height: 100%; border-radius: 50%;} .testomonial-layout2 .testomonial-avatar-nav .avatar.slick-center{transform: scale(1.71); background-color: #ffffff; z-index: 2;} .testomonial-layout2 .border-line{width: 100%; max-width: 760px; margin: 0 auto; text-align: center;} .testomonial-layout2 .shape-bg{right: 0; bottom: 100px; z-index: -1; animation: downUp 20s alternate infinite;} .testomonial-layout2 span.quote-top{position: absolute; left: calc(50% - 83.5px); top: -83.5px; display: inline-block; width: 167px; height: 167px; line-height: 167px; background-color: #ef0f3a; text-align: center; color: #ffffff; font-size: 82px; border-radius: 50%;} .testomonial-layout2 span.quote-top:before{content: ''; position: absolute; left: 50%; top: -9.5px; border-radius: 50%; transform: translateX(-50%); width: 186px; height: 186px; box-shadow: inset 0px 1px 50px 0px rgba(0, 0, 0, 0.02), inset 0px 0px 20px 0px rgba(0, 0, 0, 0.1);} .testomonial-layout2 .brand-layout3{margin: 0 80px; margin-bottom: 30px; margin-top: 80px; padding-left: 43px; padding-right: 43px; box-shadow: 0px 25px 47.5px 2.5px rgba(0, 0, 0, 0.1);} .testomonial-layout3 .inner-wrapper{background-color: #ffffff; box-shadow: 0 11px 35px 0 rgba(0, 0, 0, 0.1);} .testomonial-layout3 .single-testomonial{text-align: center; background-color: #fff; text-align: center; padding-left: 60px; padding-right: 60px; min-height: 660px;} .testomonial-layout3 .single-testomonial .testomonial-content .title{font-size: 22px; line-height: 32px; margin-bottom: 20px; text-transform: none; letter-spacing: 0;} .testomonial-layout3 .single-testomonial .testomonial-content .text{font-style: italic; letter-spacing: 0; max-width: 440px; margin: 0 auto; margin-bottom: 45px; color: #494f5b;} .testomonial-layout3 .single-testomonial .testo-author .avater{width: 100px; height: 100px; margin: 0 auto; border-radius: 50%; overflow: hidden; margin-bottom: 25px;} .testomonial-layout3 .single-testomonial .testo-author .name{font-size: 20px; letter-spacing: 0; margin-bottom: 4px;} .testomonial-layout3 .single-testomonial .testo-author span{font-size: 16px; color: #0046e2; display: inline-block;} .testomonial-layout3 ul.slick-dots{position: absolute; bottom: 80px; left: 50%; border: 2px dashed #0046e2; background-color: #ffffff; padding: 8px 10px; text-align: center; line-height: 0; min-width: 70px; min-height: 30px; box-shadow: 0 5px 27px -6px rgba(0, 0, 0, 0.2); border-radius: 50px; transform: translate(-50%);} .testomonial-layout3 ul.slick-dots li{display: inline-block; margin: 0 5px; line-height: 0;} .testomonial-layout3 ul.slick-dots li:last-child{margin-right: 0;} .testomonial-layout3 ul.slick-dots li:first-child{margin-left: 0;} .testomonial-layout3 ul.slick-dots li button{padding: 0; border: none; line-height: 1; font-size: 0; width: 5px; height: 5px; background-color: #0046e2; border-radius: 50%; transition: all ease 0.4s;} .testomonial-layout3 ul.slick-dots li.slick-active button{width: 10px; height: 10px;} .testomonial-layout3 span.quote-top{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);} .testomonial-layout3 span.quote-top i{display: inline-block; width: 175px; height: 175px; background-color: #0046e2; color: #ffffff; text-align: center; font-size: 72px; line-height: 152px; border-radius: 50%; border: 10px solid #ffffff;} .testomonial-layout3 span.quote-top .ripple{background-color: #ffffff;} .testomonial-layout4{position: relative;} .testomonial-layout4:before{content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: 0.79; z-index: 0; background-color: #040d20;} .testomonial-layout4 .single-testomonial{padding-left: 50px;} .testomonial-layout4 .single-testomonial .testo-author{max-width: 320px; width: 100%; text-align: center; background-color: #0046e2; background-image: url("../img/testomonial/author-bg.jpg"); background-size: 100% 100%; background-position: center center; background-repeat: no-repeat; padding-top: 60px; padding-bottom: 55px; position: relative; z-index: 9; transform: translateX(-2000px); transition: all ease 1s;} .testomonial-layout4 .single-testomonial .testo-author img{width: 150px; height: 150px; background-color: #ffffff; padding: 8px; margin-bottom: 30px; border-radius: 50%;} .testomonial-layout4 .single-testomonial .testo-author .name{color: #ffffff; font-size: 22px; font-weight: 500; margin-bottom: 5px;} .testomonial-layout4 .single-testomonial .testo-author span{color: #ffffff;} .testomonial-layout4 .single-testomonial .testomonial-content{position: relative; z-index: 1; padding-left: 75px; width: calc(100% - 320px); height: min-content; padding-right: 50px;} .testomonial-layout4 .single-testomonial .testomonial-content:after{content: '\f10e'; position: absolute; font-family: "Font Awesome 5 Pro"; right: 0; bottom: 5px; font-size: 76px; font-weight: 300; color: #ffffff; opacity: 0.10;} .testomonial-layout4 .single-testomonial .testomonial-content .quote{font-size: 48px; color: #ffffff; display: inline-block; margin-bottom: 8px;} .testomonial-layout4 .single-testomonial .testomonial-content .text{font-size: 20px; line-height: 32px; margin-bottom: 20px; font-style: italic; color: #ffffff; font-weight: 500;} .testomonial-layout4 .single-testomonial .testomonial-content .rating i{color: #ffd200; display: inline-block; font-size: 22px; margin-right: 5px;} .testomonial-layout4 .single-testomonial .testomonial-content .rating i:last-child{margin-right: 0;} .testomonial-layout4 .slick-current .single-testomonial .testo-author{transform: translateX(0);} .testomonial-layout4 .slick-current .single-testomonial .testomonial-content .quote, .testomonial-layout4 .slick-current .single-testomonial .testomonial-content .rating, .testomonial-layout4 .slick-current .single-testomonial .testomonial-content .text{animation-name: fadeIn; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-fill-mode: both; animation-duration: 1s; animation-delay: 0.3s;} .testomonial-layout5{background-color: #0046e2; background-image: url("../img/testomonial/testomonial-bg-5-1.png");} .testomonial-layout5 .single-testomonial{display: flex; align-items: center; padding: 80px 100px;} .testomonial-layout5 .single-testomonial .testo-author{width: 245px; margin-right: 50px;} .testomonial-layout5 .single-testomonial .testomonial-content{width: calc(100% - 295px);} .testomonial-layout5 .single-testomonial .testomonial-content .text{font-size: 20px; color: #fff; font-weight: 500; font-style: italic; line-height: 32px; margin-bottom: 15px;} .testomonial-layout5 .single-testomonial .testomonial-content .rating{color: #ffd200; font-size: 20px;} .testomonial-layout5 .single-testomonial .testomonial-content .rating i{margin-right: 2px;} .testomonial-layout5 .single-testomonial .testomonial-content .rating i:last-child{margin-right: 0;} /*------------------- 6.14. Counter -------------------*/ .counter-box{display: flex; align-items: center;} .counter-box .icon .shape-icon:before{width: 70px; height: 70px; margin-top: -35px;} .counter-box .icon .shape-icon i{padding-left: 20px;} .counter-box .content .counter{font-size: 30px; font-weight: 700; color: #01133c;} .counter-box .content .text{font-weight: 700; text-transform: capitalize; margin-bottom: 0;} .counter-layout2 .inner-wrapper{box-shadow: 0 10px 54px -4px rgba(0, 0, 0, 0.1); padding-left: 80px; padding-right: 80px; position: relative; margin-top: -120px; background-color: #ffffff;} .counter-layout2 .counter-box .shape-icon:before{background-color: #ef0f3a; opacity: 0.10;} .counter-layout2 .counter-box .shape-icon i{color: #ef0f3a;} .counter-layout2 .counter-box .content .text{font-weight: 400;} .counter-layout2.pt-70{padding-top: 0;} .counter-layout2.pt-70 .inner-wrapper{padding-top: 70px;} .counter-layout2.pb-70{padding-bottom: 0;} .counter-layout2.pb-70 .inner-wrapper{padding-bottom: 70px;} .counter-layout3 .counter-content-area .title{font-size: 48px; text-transform: uppercase; font-weight: 600; letter-spacing: 0.40px; line-height: 60px; margin-bottom: 18px; margin-top: -10px;} .counter-layout3 .counter-content-area .text{margin-bottom: 0;} .counter-layout3 .counter-box{padding-bottom: 40px;} .counter-layout3 .counter-box .content .text{font-weight: 400;} .counter-layout3 .counter-box .icon .shape-icon:before{width: 60px; height: 60px; margin-top: -32px;} .counter-layout3 .counter-box .icon .shape-icon i{font-size: 56px; padding-left: 25px;} .counter-layout3 .inner-wrapper{padding-left: 90px;} .counter-layout4{background-color: #f4f4f4;} .counter-layout4 .text{color: #494f5b;} /*------------------- 6.15. Blog -------------------*/ .blog-layout1 .blog{margin-bottom: 30px;} .blog-layout1 .blog .blog-img{overflow: hidden;} .blog-layout1 .blog .blog-img img{width: 100%; height:280px;transition: all ease 0.4s; transform: scale(1.001);} .blog-layout1 .blog .blog-content{height: 188px;background-color: #ffffff; box-shadow: 0px 10px 47.5px 2.5px rgba(0, 0, 0, 0.07); margin: 0 30px; padding: 35px 40px 0 40px; position: relative; margin-top: -50px;} .blog-layout1 .blog .blog-content h3.blog-title{font-size: 22px; line-height: 32px; text-transform: none; margin-bottom: 12px;} .blog-layout1 .blog .blog-content p.blog-text{margin-bottom: 25px; padding-right: 10px;} .blog-layout1 .blog .blog-content .blog-meta{position: relative; padding: 16px 0;} .blog-layout1 .blog .blog-content .blog-meta:before{content: ''; position: absolute; left: -41px; right: -41px; top: 0; height: 1px; background-color: #edf2f4;} .blog-layout1 .blog .blog-content .blog-meta span{font-size: 14px; display: inline-block; margin-right: 30px;} .blog-layout1 .blog .blog-content .blog-meta span:last-child{margin-right: 0;} .blog-layout1 .blog .blog-content .blog-meta span i{color: #0046e2; margin-right: 10px; font-size: 16px;} .blog-layout1 .blog:hover .blog-img img{transform: scale(1.04);} .blog-layout2 .gutters-20 .slick-track > [class^="col-"]{padding-left: 10px; padding-right: 10px;} .blog-layout2 .slick-arrow{position: absolute; top: calc(50% - 25px); opacity: 0; visibility: hidden; transition: all ease 0.4s;} .blog-layout2:hover .slick-arrow{opacity: 1; visibility: visible;} .blog-layout2 .latest-blog-area .slick-arrow{left: -130px;} .blog-layout2 .latest-blog-area .slick-arrow.slick-next{display: none !important;} .blog-layout2 .latest-blog{position: relative;} .blog-layout2 .latest-blog:before{content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; max-height: 500px; background-image: url("../img/blog/blog-overly-2-1.png"); background-size: 100% 100%; background-position: center center; background-repeat: no-repeat; z-index: 1;} .blog-layout2 .latest-blog .blog-content{position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; padding: 0 50px; padding-bottom: 15px;} .blog-layout2 .latest-blog .blog-content .blog-title{color: #ffffff; font-size: 22px; letter-spacing: 0; line-height: 32px; font-weight: 500; text-transform: none; padding-right: 20px; margin-bottom: 10px;} .blog-layout2 .latest-blog .blog-content .blog-title a:hover{color: #ef0f3a;} .blog-layout2 .latest-blog .blog-content .blog-text{color: #ffffff;} .blog-layout2 .latest-blog .blog-meta{border-bottom: 1px solid rgba(255, 255, 255, 0.3); padding-bottom: 18px; margin-bottom: 25px; margin-right: 20px;} .blog-layout2 .latest-blog .blog-meta span{color: #ffffff; letter-spacing: 0.20px;} .blog-layout2 .popular-blog .slick-arrow{right: -115px;} .blog-layout2 .popular-blog .slick-arrow.slick-prev{display: none !important;} .blog-layout2 .popular-blog .blog .blog-meta{padding-bottom: 15px; border-bottom: 1px solid #dfdfe2; margin-bottom: 25px;} .blog-layout2 .popular-blog .blog .blog-meta span{color: #494f5b;} .blog-layout2 .popular-blog .blog .blog-content{background-color: #f7f7f8; padding: 40px;} .blog-layout2 .popular-blog .blog .blog-content .blog-title{font-size: 21px; line-height: 32px; letter-spacing: 0; font-weight: 500; margin-bottom: 20px; text-transform: none;} .blog-layout2 .popular-blog .blog .blog-content .primary-btn{height: 35px; width: 125px; line-height: 35px; box-shadow: 0px 10px 28.5px 1.5px rgba(146, 0, 28, 0.25);} .blog-layout2 .blog{margin-bottom: 30px;} .blog-layout2 .blog .blog-img{overflow: hidden;} .blog-layout2 .blog .blog-img img{width: 100%; transition: all ease 0.4s; transform: scale(1.001);} .blog-layout2 .blog .blog-meta span{font-size: 14px; margin-right: 30px;} .blog-layout2 .blog .blog-meta span:last-child{margin-right: 0;} .blog-layout2 .blog .blog-meta span i{font-size: 16px; margin-right: 10px; color: #ef0f3a;} .blog-layout2 .blog:hover .blog-img img{transform: scale(1.06);} .blog-layout3{background-color: #fafafa;} .blog-layout3 .blog{margin-bottom: 30px; background-color: #ffffff; box-shadow: 0 0 20px -5px rgba(0, 0, 0, 0.1);} .blog-layout3 .blog .blog-img{overflow: hidden;} .blog-layout3 .blog .blog-img img{width: 100%; transition: all ease 0.4s; transform: scale(1.001);} .blog-layout3 .blog .blog-content{padding: 40px; padding-top: 35px; padding-bottom: 9px;} .blog-layout3 .blog .blog-content h3.blog-title{font-size: 22px; line-height: 32px; text-transform: none; letter-spacing: 0.40px; margin-bottom: 15px;} .blog-layout3 .blog .blog-content .blog-text{margin-bottom: 15px; color: #494f5b;} .blog-layout3 .blog .blog-meta{border-top: 1px solid rgba(7, 13, 32, 0.08); padding: 18px 0; margin-top: 25px;} .blog-layout3 .blog .blog-meta span{font-size: 14px; display: inline-block; margin-right: 30px; color: #494f5b;} .blog-layout3 .blog .blog-meta span:last-child{margin-right: 0;} .blog-layout3 .blog .blog-meta span i{font-size: 16px; color: #0046e2; margin-right: 10px;} .blog-layout3 .blog:hover .blog-img img{transform: scale(1.04);} .blog-layout3 .widget-blog-image{margin-bottom: 30px !important; padding: 0 !important;} .blog-layout3 .widget-blog-image .blog-img{overflow: hidden;} .blog-layout3 .widget-blog-image .blog-img img{width: 100%; transition: all ease 0.4s; transform: scale(1.001);} .blog-layout3 .widget-blog-image .blog-img:hover img{transform: scale(1.04);} .blog-layout3 .widget-blog-image ul.slick-dots{position: absolute; top: 20px; right: 20px; background-color: #0046e2; padding: 0 11px; border-radius: 50px;} .blog-layout3 .widget-blog-image ul.slick-dots li{display: inline-block; line-height: 0; margin: 9px 3px;} .blog-layout3 .widget-blog-image ul.slick-dots li button{font-size: 0; line-height: 0; padding: 0; border: 3px solid #ffffff; width: 10px; height: 10px; display: inline-block; background-color: #ffffff; border-radius: 50%;} .blog-layout3 .widget-blog-image ul.slick-dots li.slick-active button{background-color: #0046e2;} .blog-layout3 .widget-blog-comment{padding: 0 0 !important; margin-bottom: 30px !important;} .blog-layout3 .single-comment{overflow: hidden; position: relative; padding: 35px 25px; padding-right: 25px; min-height: 325px;} .blog-layout3 .single-comment:before{content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: 0.75; z-index: 0; background-color: #0c111b;} .blog-layout3 .single-comment:after{content: "\f136"; position: absolute; bottom: 25px; right: 0; font-family: "Flaticon"; font-weight: 900; color: #ffffff; font-size: 38px; right: 30px; line-height: 1;} .blog-layout3 .single-comment .comment-text{color: #ffffff; position: relative; z-index: 1; font-style: italic; margin-bottom: 23px;} .blog-layout3 .single-comment .comment-author{position: relative; z-index: 1;} .blog-layout3 .single-comment .comment-author .author-img{width: 60px; height: 60px; margin-right: 15px;} .blog-layout3 .single-comment .comment-author .author-content .name{color: #ffffff; font-size: 18px; margin-bottom: 2px; line-height: 1;} .blog-layout3 .single-comment .comment-author .author-content span{font-size: 14px; color: #ffffff;} .blog-single-layout1 .blog{background-color: #fff; margin-bottom: 40px;} .blog-single-layout1 .blog.background-image{position: relative;} .blog-single-layout1 .blog.background-image::before{content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: 0.7; z-index: 0; background-color: #0b1835;} .blog-single-layout1 .blog.background-image .blog-meta{border-bottom-color: #ffffff; z-index: 3; position: relative;} .blog-single-layout1 .blog.background-image .blog-meta span i, .blog-single-layout1 .blog.background-image .blog-meta span, .blog-single-layout1 .blog.background-image .blog-admin a, .blog-single-layout1 .blog.background-image .link-btn, .blog-single-layout1 .blog.background-image .blog-text, .blog-single-layout1 .blog.background-image .blog-title{color: #ffffff; position: relative; z-index: 3;} .blog-single-layout1 .blog .blog-img{overflow: hidden;} .blog-single-layout1 .blog .blog-img img{width: 100%; transition: all ease 0.4s; transform: scale(1.001);} .blog-single-layout1 .blog .blog-img:hover img{transform: scale(1.05);} .blog-single-layout1 .blog .middle-img{margin-bottom: 30px;} .blog-single-layout1 .blog .blog-video{position: relative;} .blog-single-layout1 .blog .blog-video:before{content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: 0.5; z-index: 1; background-color: #050b18;} .blog-single-layout1 .blog .blog-video .video-btn{position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%);} .blog-single-layout1 .blog .blog-img-slider{position: relative;} .blog-single-layout1 .blog .blog-img-slider .slick-arrow{top: 50%; left: 30px; font-weight: 700; transform: translateY(-50%);} .blog-single-layout1 .blog .blog-img-slider .slick-arrow:hover{background-color: #0046e2; color: #ffffff;} .blog-single-layout1 .blog .blog-img-slider .slick-arrow.slick-prev:after{display: none;} .blog-single-layout1 .blog .blog-img-slider .slick-arrow.slick-next{right: 30px; left: auto;} .blog-single-layout1 .blog .blog-audio iframe{width: 100%; background-color: #fff;} .blog-single-layout1 .blog .blog-meta{padding: 29px 40px 25px 40px; border-bottom: 1px solid #f3f3f3;} .blog-single-layout1 .blog .blog-meta span{display: inline-block; margin-right: 25px;} .blog-single-layout1 .blog .blog-meta span i{font-size: 18px; color: #0046e2; margin-right: 10px;} .blog-single-layout1 .blog .blog-content{padding: 0 40px; padding-top: 25px;} .blog-single-layout1 .blog .blog-content .blog-title{font-size: 36px; line-height: 46px; font-weight: 500; text-transform: none; margin-bottom: 20px; font-family: "Roboto", sans-serif; letter-spacing: 0.20px;} .blog-single-layout1 .blog .blog-content .blog-title a{line-height: inherit;} .blog-single-layout1 .blog .blog-content .inner-title{font-size: 30px; line-height: 40px; text-transform: none; letter-spacing: 0.20px; border-top: 1px solid #ededed; padding-top: 30px; margin-bottom: 25px; margin-top: 10px;} .blog-single-layout1 .blog .blog-content ul{padding-bottom: 13px;} .blog-single-layout1 .blog .blog-content ul li{position: relative; margin-bottom: 20px; padding-left: 25px; line-height: 28px;} .blog-single-layout1 .blog .blog-content ul li:before{content: ''; position: absolute; left: 0; top: 10px; width: 7px; height: 7px; background-color: #0046e2; border-radius: 50%;} .blog-single-layout1 .blog .blog-content blockquote{margin: 0; border: 12px solid #e5ecfc; margin-bottom: 35px; font-size: 22px; line-height: 32px; color: #01133c; padding: 45px; letter-spacing: 0.20px; position: relative; z-index: 1;} .blog-single-layout1 .blog .blog-content blockquote:before{content: '\f10e'; font-family: "Font Awesome 5 Pro"; position: absolute; right: 30px; bottom: 30px; font-size: 68px; line-height: 1; font-weight: 300; color: #ebeffc; z-index: -1;} .blog-single-layout1 .blog .blog-content blockquote .quote-author{display: block; font-size: 18px; color: "Roboto", sans-serif; position: relative; line-height: 1; padding-left: 45px; margin-bottom: 23px;} .blog-single-layout1 .blog .blog-content blockquote .quote-author:before{content: ''; width: 30px; height: 1px; display: inline-block; background-color: #0046e2; position: absolute; left: 0; top: 50%; margin-top: -0.5px;} .blog-single-layout1 .blog .blog-admin{position: relative; z-index: 3;} .blog-single-layout1 .blog .blog-admin img{width: 50px; height: 50px; margin-right: 15px;} .blog-single-layout1 .blog .blog-admin a{font-size: 18px; color: #01133c; font-weight: 500;} .blog-single-layout1 .blog .blog-admin a:hover{color: #0046e2;} .blog-single-layout1 .blog .blog-bottom{padding-bottom: 40px;} .blog-single-layout1 .blog .share-links{padding-top: 30px; padding-bottom: 30px; border-top: 1px solid #ededed; border-bottom: 1px solid #ededed;} .blog-single-layout1 .blog .share-links .links-title{font-size: 22px; margin-bottom: 0; display: inline-block; font-weight: 400; letter-spacing: 0.20px; margin-right: 10px; overflow: hidden; padding-top: 5px;} .blog-single-layout1 .blog .share-links .tagcloud{float: right; overflow: hidden;} .blog-single-layout1 .blog .share-links .tagcloud a{display: inline-block; border: 1px solid #d7e3fe; font-size: 14px; padding: 3px 17px; margin-right: 8px;} .blog-single-layout1 .blog .share-links .tagcloud a:hover{background-color: #0046e2; color: #ffffff; border-color: transparent;} .blog-single-layout1 .blog .share-links .tagcloud a:last-child{margin-right: 0;} .blog-single-layout1 .blog .share-links .social-links ul{width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); grid-column-gap: 15px; grid-row-gap: 15px; margin-top: 30px; padding-bottom: 0; padding-top: 30px; border-top: 1px solid #ededed;} .blog-single-layout1 .blog .share-links .social-links ul li{margin-bottom: 0; padding-left: 0;} .blog-single-layout1 .blog .share-links .social-links ul li:before{display: none;} .blog-single-layout1 .blog .share-links .social-links ul li a{display: block; background-color: #0046e2; color: #ffffff; padding: 12px 20px;} .blog-single-layout1 .blog .share-links .social-links ul li a i{margin-right: 10px;} .blog-single-layout1 .blog .share-links .social-links ul li a.facebook{background-color: #3b5998;} .blog-single-layout1 .blog .share-links .social-links ul li a.twitter{background-color: #38a1f3;} .blog-single-layout1 .blog .share-links .social-links ul li a.linkedin{background-color: #0e76a8;} .blog-single-layout1 .blog .share-links .social-links ul li a.youtube{background-color: #ff0000;} .blog-single-layout1 .post-pagination-wrap{padding-top: 30px; background-color: #ffffff;} .blog-single-layout1 .pagination-layout1{padding-top: 40px; padding-bottom: 40px;} .blog-single-layout1 .related-post-area{padding-bottom: 10px;} .blog-single-layout1 .related-post-area .inner-title{text-transform: capitalize; padding-top: 60px !important; margin-bottom: 40px !important;} .blog-single-layout1 .related-post-area .blog{box-shadow: 0 0 45px -13px rgba(0, 0, 0, 0.1);} .blog-single-layout1 .related-post-area .blog .blog-meta{padding: 0 0;} .blog-single-layout1 .related-post-area .blog .blog-meta span{margin-right: 25px;} .blog-single-layout1 .related-post-area .blog .blog-meta{border-bottom: 1px solid #edf2f4; padding-bottom: 16px; margin-bottom: 18px;} .blog-single-layout1 .related-post-area .blog .blog-title{font-size: 21px; line-height: 32px; margin-bottom: 15px; letter-spacing: 0px;} .blog-single-layout1 .related-post-area .blog .blog-text{margin-bottom: 0;} .blog-single-layout1 .related-post-area .blog .blog-content{padding: 38px 30px;} .blog-single-layout1 .blog-author{background-color: #f2f4f9; display: flex; padding: 40px; margin-bottom: 50px;} .blog-single-layout1 .blog-author .author-img{width: 170px; height: 170px; margin-right: 30px;} .blog-single-layout1 .blog-author .author-content{width: calc(100% - 200px); padding-top: 10px;} .blog-single-layout1 .blog-author .author-content span{font-size: 14px; font-weight: 700; color: #0046e2; display: block; margin-bottom: 10px;} .blog-single-layout1 .blog-author .author-content .name{font-size: 36px; letter-spacing: 0;} .blog-single-layout1 .blog-author .author-content .text{margin-bottom: 0;} .blog-single-layout1 .blog-comment-area .inner-title{padding-top: 0 !important; border-top: none !important; margin-top: 0 !important; margin-bottom: 30px !important;} .blog-single-layout1 .blog-comment-area .single-comment{padding: 40px 0; border-top: 1px solid #ededed;} .blog-single-layout1 .blog-comment-area .single-comment:last-of-type{border-bottom: 1px solid #ededed;} .blog-single-layout1 .blog-comment-area .single-comment:first-of-type{border-top: 0; padding-top: 0;} .blog-single-layout1 .blog-comment-area .single-comment.replay-comment{margin-left: 125px;} .blog-single-layout1 .blog-comment-area .single-comment .comment-author{width: 90px; height: 90px; margin-right: 30px;} .blog-single-layout1 .blog-comment-area .single-comment .comment-author img{width: 100%;} .blog-single-layout1 .blog-comment-area .single-comment .comment-top{display: flex; justify-content: space-between; margin-bottom: 20px;} .blog-single-layout1 .blog-comment-area .single-comment .comment-content{width: calc(100% - 110px);} .blog-single-layout1 .blog-comment-area .single-comment .comment-content .text{margin-bottom: 0; line-height: 26px; letter-spacing: 0;} .blog-single-layout1 .blog-comment-area .single-comment .author-name .name{font-size: 22px; letter-spacing: 0; margin-bottom: 5px;} .blog-single-layout1 .blog-comment-area .single-comment .author-name span{font-size: 14px; display: block; color: #0046e2;} .blog-single-layout1 .blog-comment-area .single-comment .reply-btn{width: 110px; height: 40px; font-size: 14px; display: inline-block; text-align: center; line-height: 40px; font-weight: 700; background-color: #0046e2; color: #ffffff; border-radius: 50px; margin-top: 5px;} .blog-single-layout1 .blog-comment-area .single-comment .reply-btn:hover{background-color: #ef0f3a; color: #ffffff;} .blog-single-layout1 .blog-comment-area .single-comment .reply-btn i{margin-right: 5px; font-weight: 300;} .blog-single-layout1 .blog-comment-form{padding-top: 50px; padding-bottom: 40px;} .blog-single-layout1 .blog-comment-form .inner-title{border-top: none !important; margin-top: 0 !important; padding-top: 0 !important; margin-bottom: 33px !important;} .blog-single-layout1 .blog-comment-form form{background-color: #f2f4f9; padding: 40px;} .blog-single-layout1 .blog-comment-form form .form-group{margin-bottom: 20px;} .blog-single-layout1 .blog-comment-form form .form-group input, .blog-single-layout1 .blog-comment-form form .form-group textarea{border-color: #d7e3fe;} .blog-single-layout1 .blog-comment-form form .notice{display: block; padding-top: 10px; padding-bottom: 25px;} /*------------------- 6.16. Subscribe Area -------------------*/ .subscribe-sec-wrapper.background-image, .subscribe-sec-wrapper .background-image{position: relative;} .subscribe-sec-wrapper.background-image:before, .subscribe-sec-wrapper .background-image:before{content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: 0.7; z-index: 0; background-color: #0f1729;} .subscribe-sec-wrapper .subscribe-content .title{font-size: 40px; color: #ffffff; text-transform: uppercase; font-weight: 600; margin-bottom: 10px;} .subscribe-sec-wrapper .subscribe-content .text{color: #ffffff; margin-bottom: 0; line-height: 25px;} .subscribe-sec-wrapper .subscribe-content .text a{display: inline-block; line-height: inherit;} .subscribe-sec-wrapper .subscribe-content .text a:hover{color: #ffffff; text-decoration: underline;} .subscribe-sec-wrapper form.subsc-form{padding-left: 70px;} .subscribe-sec-wrapper form.subsc-form .form-group{margin-bottom: 0; width: 100%;} .subscribe-sec-wrapper form.subsc-form .form-group input{width: calc(100% - 220px); display: inline-block; margin-right: 20px; border: none;} .subscribe-layout1 form.subsc-form{padding-top: 33px; padding-left: 0;} .subscribe-layout2.background-image:before{background-color: #0a1224;} .subscribe-layout2 form.subsc-form{padding-top: 0;} .subscribe-layout2 form.subsc-form div.skew{width: calc(100% - 248px); background-color: #fff; margin-right: 20px; transform: skewX(-10deg);} .subscribe-layout2 form.subsc-form div.skew input{width: 100%; margin-right: 0; transform: skewX(10deg); padding-left: 30px; background-color: transparent;} .subscribe-layout3.background-image:before{background-color: #0a1224;} .subscribe-layout3 form.subsc-form{padding-top: 0; padding-left: 100px;} .subscribe-layout3 form.subsc-form input{background-color: #fff; border: none; width: calc(100% - 248px); margin-right: 0; padding-left: 30px;} /*------------------- 6.17. Brand -------------------*/ .brand-area-wrapper .brand-box{box-shadow: 0 10px 85px -20px rgba(0, 0, 0, 0.1); text-align: center; padding: 30px 0; margin: 30px 0; background-color: #ffffff; transform: translateY(0); transition: all ease-in-out 0.4s;} .brand-area-wrapper .brand-box:hover{box-shadow: none; transform: translateY(-5px);} .brand-layout1{position: relative;} .brand-layout1 .bg-shape{position: absolute; bottom: 0; right: 0;} .brand-layout2{background-color: #fff;} .brand-layout2 .brand-box{background-color: #f9f9f9; box-shadow: none;} .brand-layout2 .brand-box:hover{box-shadow: 0 10px 85px -20px rgba(0, 0, 0, 0.1); background-color: #fff;} .brand-layout3{background-color: #ffffff; padding-left: 35px; padding-right: 35px;} .brand-layout3 .brand-box{padding: 0; margin: 20px 0; box-shadow: none;} .brand-layout4{padding-top: 45px; padding-bottom: 45px; position: relative;} .brand-layout4 .background-image{position: absolute; right: 0; top: 0; width: 100%; max-width: 790px; height: 100%; clip-path: polygon(100% 0%, 100% 52%, 100% 100%, 0 100%, 10% 50%, 0 0);} .brand-layout4 .background-image:before{content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: 0.68; z-index: 0; background-color: #0046e2;} .brand-layout4 .brand-area-title .title{font-size: 48px; text-transform: uppercase; margin-bottom: 0; line-height: 1;} .brand-layout4 .slick-slide .brand-box{box-shadow: none;} .brand-layout4 .slick-slide.slick-active .brand-box{box-shadow: 0 10px 71px -20px rgba(0, 0, 0, 0.1);} /*------------------- 6.18. CTA Area -------------------*/ .cta-wrapper .cta-content{padding: 0 35px;} .cta-wrapper .cta-content .cta-title{text-transform: uppercase; font-size: 48px; line-height: 60px; font-weight: 600; margin-bottom: 25px;} .cta-wrapper .cta-content .cta-text{font-size: 18px; margin-bottom: 35px;} .cta-layout1{position: relative;} .cta-layout1.pb-200{padding-bottom: 200px;} .cta-layout1:before{content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: 0.75; z-index: 0; background-color: #071323;} .cta-layout1 .cta-content .cta-title, .cta-layout1 .cta-content .cta-text{color: #fff;} /*------------------- 6.19. Gallery -------------------*/ .gallery-layout1 .gallery-item{position: relative; overflow: hidden;} .gallery-layout1 .gallery-item:before{content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0.60; z-index: 1; background-color: #0046e2; transition-delay: 0s; transform-origin: right top; transition: transform linear 0.3s; transform: scale(0, 1);} .gallery-layout1 .gallery-item img{width: 100%;} .gallery-layout1 .gallery-item a{position: absolute; top: 50%; left: 50%; display: inline-block; width: 80px; height: 80px; line-height: 80px; z-index: 2; background-color: #ffffff; text-align: center; font-size: 39px; margin-left: -40px; margin-top: -40px; border-radius: 50%; transform: scale(0); transition: transform 0.3s;} .gallery-layout1 .gallery-item:hover:before{transform: scale(1, 1); transform-origin: left top;} .gallery-layout1 .gallery-item:hover a{opacity: 1; visibility: visible; transition-delay: 0.45s; transform: scale(1);} /*------------------- 6.20. Breadcumb -------------------*/ .breadcumb-layout1{position: relative;} .breadcumb-layout1:before{content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: 0.55; z-index: 0; background-color: #010818;} .breadcumb-layout1 .breadcumb-content{padding-top: 135px; padding-bottom: 140px; position: relative;} .breadcumb-layout1 .breadcumb-content .breadcumb-title{color: #ffffff; font-size: 60px; text-transform: uppercase; font-weight: 600; margin-bottom: 0; line-height: 1;} .breadcumb-layout1 .breadcumb-content ul{position: absolute; bottom: 0; right: 0; display: inline-block; background-color: #ffffff; padding: 10px 67px;} .breadcumb-layout1 .breadcumb-content ul li{display: inline-block; font-size: 18px; font-weight: 500; line-height: 60px; position: relative;} .breadcumb-layout1 .breadcumb-content ul li:after{content: '|'; position: relative; margin-left: 7px; margin-right: 3px;} .breadcumb-layout1 .breadcumb-content ul li:last-child:after{display: none;} .breadcumb-layout1 .breadcumb-content ul li a{display: inline-block; font-weight: inherit; font-size: inherit; font-family: inherit; line-height: inherit;} .breadcumb-layout1 .breadcumb-content ul li.active{color: #0046e2;} /*------------------- 6.21. FAQ Area -------------------*/ .faq-layout1 .faq-banner{margin: 65px 0; height: calc(100% - 130px); position: relative; text-align: center; display: flex; align-items: center; justify-content: center; margin-right: 30px;} .faq-layout1 .faq-banner:before{content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: 1; z-index: 0; background-color: rgba(2, 6, 16, 0.3);} .faq-layout1 .faq-area{background-color: #0046e2; background-image: url("../img/faq/faq-pattern-1.png"); background-position: center center; background-repeat: no-repeat; background-size: 100% 100%; min-height: 775px; padding-left: 100px; padding-right: 275px; padding-top: 125px; padding-bottom: 100px; margin-left: -30px;} .faq-layout1 .faq-area .section-title{padding: 0 0; padding-bottom: 38px;} .faq-layout1 .faq-area .section-title .title{color: #ffffff; margin-bottom: 22px;} .faq-layout1 .faq-area .section-title .sub-title{color: #ffffff; font-size: 18px; line-height: 30px; margin-bottom: 0; font-weight: 500;} .faq-layout1 .faq-area .single-faq{margin-bottom: 18px;} .faq-layout1 .faq-area .single-faq .faq-header h3.faq-title{position: relative; margin-bottom: 0;} .faq-layout1 .faq-area .single-faq .faq-header h3.faq-title button{background-color: #ffffff; color: #01133c; border: 1px solid transparent; display: block; width: 100%; text-align: left; font-size: 16px; line-height: 30px; padding: 9px 25px; font-weight: 700; border-radius: 3px; transition: all ease 0.4s;} .faq-layout1 .faq-area .single-faq .faq-header h3.faq-title button:after{content: '\f068'; position: relative; float: right; font-family: "Font Awesome 5 Pro"; font-weight: 300;} .faq-layout1 .faq-area .single-faq .faq-header h3.faq-title button.collapsed{border-color: rgba(255, 255, 255, 0.3); color: #ffffff; background-color: transparent;} .faq-layout1 .faq-area .single-faq .faq-header h3.faq-title button.collapsed:after{content: '\f067';} .faq-layout1 .faq-area .single-faq .faq-body{padding: 27px 25px; padding-bottom: 8px; padding-right: 20px;} .faq-layout1 .faq-area .single-faq .faq-body .faq-text{color: #ffffff; margin-bottom: 0; font-weight: 400;} .faq-layout2 .faq-banner{margin: 65px 0; height: calc(100% - 130px); position: relative; text-align: center; display: flex; align-items: center; justify-content: center; margin-right: 30px;} .faq-layout2 .faq-banner:before{content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: 1; z-index: 0; background-color: rgba(2, 6, 16, 0.3);} .faq-layout2 .faq-area{background-color: #0046e2; background-image: url("../img/faq/faq-pattern-1.png"); background-position: center center; background-repeat: no-repeat; background-size: 100% 100%; min-height: 775px; padding-left: 100px; padding-right: 200px; padding-top: 125px; padding-bottom: 90px; margin-left: -30px;} .faq-layout2 .faq-area .section-title{padding: 0 0; padding-bottom: 22px;} .faq-layout2 .faq-area .section-title .title{color: #ffffff; margin-bottom: 22px;} .faq-layout2 .faq-area .section-title .sub-title{color: #ffffff; margin-bottom: 0;} .faq-layout2 .faq-area .single-faq{border-bottom: 2px solid #fff; padding-bottom: 35px; padding-top: 26px;} .faq-layout2 .faq-area .single-faq .faq-header .faq-title{font-size: 22px; color: #fff; line-height: 32px; letter-spacing: 0; text-transform: none; margin-bottom: 20px;} .faq-layout2 .faq-area .single-faq .faq-body .faq-text{color: #fff; margin-bottom: 0;} .faq-layout2 .faq-area .row > div:last-child .single-faq, .faq-layout2 .faq-area .row > div:nth-last-child(2) .single-faq{border-bottom: none;} .faq-layout3{position: relative;} .faq-layout3 .faq-area{padding-right: 80px;} .faq-layout3 .single-faq{background-color: #ffffff; border: 1px solid #f3f4f9; padding: 0 30px; margin-bottom: 20px; transition: all ease 0.4s;} .faq-layout3 .single-faq.open{border-color: #0046e2; box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);} .faq-layout3 .single-faq .faq-header .faq-title{margin-bottom: 0;} .faq-layout3 .single-faq .faq-header .faq-title button{color: #0046e2; font-size: 18px; font-family: "Roboto", sans-serif; width: 100%; text-align: left; border: none; padding: 5px 0; line-height: 60px; font-weight: 500; display: inline-block; position: relative; text-transform: none; background-color: transparent;} .faq-layout3 .single-faq .faq-header .faq-title button:after{content: '\f068'; position: relative; float: right; font-family: "Font Awesome 5 Pro"; font-weight: 400;} .faq-layout3 .single-faq .faq-header .faq-title button.collapsed{color: #01133c;} .faq-layout3 .single-faq .faq-header .faq-title button.collapsed:after{content: '\f067';} .faq-layout3 .single-faq .faq-body{border-top: 1px solid #d9ddee; padding-top: 25px; padding-bottom: 30px;} .faq-layout3 .single-faq .faq-body .faq-text{margin-bottom: 0;} .faq-layout3 .shape1{top: 35%; right: 0; animation: upDown 10s alternate infinite;} .faq-layout3 .shape2{top: 40%; left: 0; animation: downUp 10s alternate infinite;} /*------------------- 6.22. Contact Form -------------------*/ .contact-form-layout1{background-color: #f7f7f7; position: relative;} .contact-form-layout1:before{content: ''; position: absolute; right: 0; top: 0; height: 100%; width: 48%; background-color: #ffffff;} .contact-form-layout1 .contact-form-slider{width: 100%; height: 100%; position: relative;} .contact-form-layout1 .contact-form-slider:before{content: ''; position: absolute; top: -4px; bottom: -3px; left: 0; width: 100%; opacity: 1; max-width: 350px; background-image: url("../img/contact-us/contact-img-shape-1-1.png"); z-index: 2;} .contact-form-layout1 .contact-form-slider div{height: 100%; z-index: 1;} .contact-form-layout1 .contact-form-slider .single-slide{height: 100%; width: 100%; position: relative;} .contact-form-layout1 .contact-form-slider .single-slide img{position: absolute; bottom: 0; right: 0;} .contact-form-layout1 .contact-form-slider ul.slick-dots{position: absolute; top: 50%; right: -27.5%; transform: translateY(-50%);} .contact-form-layout1 .contact-form-slider ul.slick-dots li{margin: 10px 0;} .contact-form-layout1 .contact-form-slider ul.slick-dots li button{padding: 0; border: none; line-height: 0; font-size: 0; display: inline-block; width: 25px; height: 25px; background-color: transparent; border: 2px solid transparent; position: relative; border-radius: 50%; transition: all ease 0.4s;} .contact-form-layout1 .contact-form-slider ul.slick-dots li button:before{content: ''; position: relative; width: 10px; height: 10px; display: inline-block; background-color: #0046e2; border-radius: 50%;} .contact-form-layout1 .contact-form-slider ul.slick-dots li.slick-active button{border-color: #0046e2;} .contact-form-layout2{position: relative;} .contact-form-layout2 .notice{background-color: #0046e2; text-align: center; padding-bottom: 90px; margin-top: 45px; position: relative; z-index: 1;} .contact-form-layout2 .notice .notice-icon{display: inline-block; width: 90px; height: 90px; background-color: #0046e2; border: 5px solid #ffffff; text-align: center; line-height: 83px; color: #ffffff; font-size: 44px; position: relative; margin-top: -45px; margin-bottom: 43px; border-radius: 50%;} .contact-form-layout2 .notice .notice-icon i{animation: cscale 1s infinite alternate;} .contact-form-layout2 .notice .notice-text{color: #ffffff; margin-bottom: 0; font-size: 24px; font-weight: 500;} .contact-form-layout2 .shape1{top: 200px; left: 0;} .contact-form-layout2 .shape2{right: 0; bottom: 17%; animation: downUp 10s alternate infinite;} .contact-form-layout3{position: relative;} .contact-form-layout3 .shape-bg{right: 0; bottom: -250px; animation: upDown 10s alternate infinite;} .contact-form-layout3 .contact-form-area{padding: 40px; border: 1px solid #e2e2e2; margin-bottom: 30px;} .contact-form-layout3 .contact-form-area .form-title{font-size: 80px; text-transform: uppercase; line-height: 32px; letter-spacing: 0; font-weight: 600; opacity: 0.07; margin-top: 10px;} .contact-form-layout3 .contact-form-area .sub-title{font-size: 22px; text-transform: none; line-height: 32px; margin-bottom: 0; margin-top: -28px; position: relative; z-index: 1; margin-bottom: 27px;} .contact-form-layout3 .contact-information-area{background-color: #01133c; margin-bottom: 30px; position: relative; height: calc(100% - 30px); padding: 40px; padding-top: 35px;} .contact-form-layout3 .contact-information-area:before{content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: 0.8; z-index: 0; background-color: #0f1728;} .contact-form-layout3 .contact-information-area .area-title{position: relative; z-index: 1;} .contact-form-layout3 .contact-information-area .area-title .title{color: #fff; font-size: 22px; margin-bottom: 8px;} .contact-form-layout3 .contact-information-area .area-title .text{line-height: 26px; color: #fff; margin-bottom: 0;} .contact-form-layout3 .contact-information-area .info-box{position: relative; z-index: 1; display: flex; align-items: center; padding: 28px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07);} .contact-form-layout3 .contact-information-area .info-box .icon span{width: 60px; height: 60px; line-height: 60px; display: inline-block; color: #ffffff; text-align: center; font-size: 21px; margin-right: 20px; border: 1px solid #ffffff; text-transform: capitalize; border-radius: 50%;} .contact-form-layout3 .contact-information-area .info-box .content{width: calc(100% - 75px);} .contact-form-layout3 .contact-information-area .info-box .content span{color: #ffffff; font-weight: 500; font-size: 18px;} .contact-form-layout3 .contact-information-area .info-box .content .text{margin-bottom: 0; line-height: 23px; font-size: 16px; color: #ffffff; max-width: 220px;} .contact-form-layout3 .contact-information-area .info-box:last-child{border-bottom: none;} /*------------------- 6.23. Mission Vision -------------------*/ .axivis-mission-layout4 .axivis-mission{text-align: center; margin-bottom: 30px; padding-top: 40px; transition: all ease 0.4s; transform: translateY(0);} .axivis-mission-layout4 .axivis-mission:before{content: ''; position: absolute; width: 180px; height: 180px; margin-left: -90px; top: 0; left: 0; z-index: -1; left: 50%; background-color: #ffffff; box-shadow: 0 0 49px -10px rgba(0, 0, 0, 0.09); border-radius: 50%;} .axivis-mission-layout4 .axivis-mission .shape{width: 140px; height: 140px; margin-left: -70px; border: 3px solid #0046e2; display: inline-block; position: absolute; left: 50%; top: 20px; border-radius: 50%; animation: cspine 20s linear infinite;} .axivis-mission-layout4 .axivis-mission .shape:before, .axivis-mission-layout4 .axivis-mission .shape:after{content: ''; position: absolute; width: 10px; height: 10px; left: -5.5px; top: 50%; background-color: #0046e2; margin-top: -5px; box-shadow: 0 0 0 5px #ffffff; border-radius: 50%;} .axivis-mission-layout4 .axivis-mission .shape:after{left: auto; right: -5.5px;} .axivis-mission-layout4 .axivis-mission .mission-icon{position: relative; margin-bottom: -50px;} .axivis-mission-layout4 .axivis-mission .mission-icon span{width: 100px; height: 100px; line-height: 100px; font-size: 52px;} .axivis-mission-layout4 .axivis-mission .mission-icon span:hover{color: #ffffff;} .axivis-mission-layout4 .axivis-mission .mission-icon span i{transition-delay: 0.2s; transform: rotateY(0); transition: transform ease 0.4s;} .axivis-mission-layout4 .axivis-mission .mission-content{background-color: #ffffff; padding: 0 25px; padding-top: 110px; padding-bottom: 30px; box-shadow: 0 0 49px -10px rgba(0, 0, 0, 0.09);} .axivis-mission-layout4 .axivis-mission .mission-content .title{margin-bottom: 20px;} .axivis-mission-layout4 .axivis-mission .mission-content p{color: #494f5b;} .axivis-mission-layout4 .axivis-mission:hover{transform: translateY(10px);} .axivis-mission-layout4 .axivis-mission:hover .shape{border-color: #ef0f3a;} .axivis-mission-layout4 .axivis-mission:hover .shape:before, .axivis-mission-layout4 .axivis-mission:hover .shape:after{background-color: #ef0f3a;} .axivis-mission-layout4 .axivis-mission:hover .mission-icon span{background-color: #ef0f3a;} .axivis-mission-layout4 .axivis-mission:hover .mission-icon span i{transition-delay: 0.45s; transform: rotateY(360deg);} .axivis-mission-layout4 .slick-slide .axivis-mission .mission-content{box-shadow: none;} .axivis-mission-layout4 .slick-slide.slick-active .axivis-mission .mission-content{box-shadow: 0 0 49px -10px rgba(0, 0, 0, 0.09);} /*------------------- 6.24. Appointment Form -------------------*/ .appointment-form-layout1{position: relative; overflow: hidden;} .appointment-form-layout1 .form-title{font-size: 80px; text-transform: uppercase; line-height: 32px; margin-bottom: 0; font-weight: 600; color: rgba(0, 0, 0, 0.05); letter-spacing: 0;} .appointment-form-layout1 .sub-title{font-size: 22px; line-height: 32px; margin-bottom: 0; text-transform: capitalize; margin-bottom: 20px;} .appointment-form-layout1 form{background-color: rgba(255, 255, 255, 0.95); padding: 80px; padding-top: 90px;} .appointment-form-layout1 form .form-group i{color: #0046e2;} .appointment-form-layout1 form .form-group .select2-container .select2-selection--single .select2-selection__arrow b{border-color: #0046e2 transparent transparent transparent;} .appointment-form-layout1 form .form-group .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color: transparent transparent #0046e2 transparent;} .appointment-form-layout1 .shape-bg{z-index: -1;} .appointment-form-layout1 .shape1{top: 30%; left: 0;} .appointment-form-layout1 .shape2{right: 0; top: -225px;} /*------------------- 6.25. Error Page -------------------*/ .error-wrapper{position: relative; overflow: hidden;} .error-wrapper .shape1{bottom: 0; left: 0;} .error-wrapper .shape2{top: 0; right: 0;} .error-wrapper .shape3{bottom: 0; right: 0;} .error-wrapper .error-content{position: relative; z-index: 1;} .error-wrapper .error-content > span{font-size: 150px; font-weight: 700; line-height: 1; display: inline-block; margin-bottom: 12px; color: #696e78;} .error-wrapper .error-content .title{font-size: 400px; line-height: 1; margin-bottom: 42px;} .error-wrapper .error-content .title span{color: #ef0f3a;} .error-wrapper .error-content .sub-title{color: #696e78; font-size: 48px; line-height: 60px; font-weight: 500; text-transform: none; max-width: 690px; margin: 0 auto; margin-bottom: 37px;} /*------------------- 6.26. Pricing Details -------------------*/ .price-plan-layout1{background-color: #fbfbfb;} .price-plan-layout1 .price-plan-area .price-title{font-size: 44px; line-height: 54px; letter-spacing: 0; text-transform: none; font-family: "Roboto", sans-serif; font-weight: 700;} .price-plan-layout1 .price-plan-area > .text{padding-right: 10px;} .price-plan-layout1 .price-plan-area > .text:last-of-type{margin-bottom: 25px;} .price-plan-layout1 .price-plan-area .features-list .features-title{font-size: 24px; margin-bottom: 11px;} .price-plan-layout1 .price-plan-area .features-list ul li{position: relative; margin-bottom: 4px;} .price-plan-layout1 .price-plan-area .features-list ul li:last-child{margin-bottom: 0;} .price-plan-layout1 .price-plan-area .features-list ul li:before{content: '\f111'; position: relative; left: 0; top: -4px; font-size: 18px; font-family: "Font Awesome 5 Pro"; font-weight: 900; font-size: 5px; width: 15px; height: 15px; display: inline-block; text-align: center; box-shadow: inset 0 0 6px -2px #0046e2; line-height: 15px; margin-right: 15px; color: #0046e2; border-radius: 50%;} .price-plan-layout1 .price-action-box{background-color: #0046e2; background-image: url("../img/bg-img/pricing-action-box-bg-1.png"); text-align: center; padding: 75px 50px; padding-top: 70px; margin-top: 145px; position: relative; margin-left: 35px;} .price-plan-layout1 .price-action-box .text{font-size: 18px; font-weight: 500; color: #fff; font-style: italic;} .price-plan-layout1 .price-action-box .primary-btn{color: #0046e2;} .price-plan-layout1 .price-action-box .primary-btn:hover{color: #ffffff;} .price-plan-layout1 .price-action-box .shape{position: absolute;} .price-plan-layout1 .price-action-box .shape:before, .price-plan-layout1 .price-action-box .shape:after{position: absolute; content: ''; display: inline-block; width: 7px; height: 7px; background-color: #fff; box-shadow: 0 0 0 3px #0046e2; border-radius: 50%;} .price-plan-layout1 .price-action-box .shape1{background-image: url("../img/bg-img/pricing-action-box-line-1.png"); top: -165px; left: 0; height: 115px; width: 100%;} .price-plan-layout1 .price-action-box .shape1:before{left: 0; bottom: 50px;} .price-plan-layout1 .price-action-box .shape1:after{right: 0;} .price-plan-layout1 .price-action-box span.shape.shape2{height: 60px; top: -54px; width: 2px; left: 50%; margin-left: -1px; background-color: #0046e2;} .price-plan-layout1 .price-action-box span.shape.shape2:before{left: -1.5px; top: -3.5px;} .price-plan-layout1 .price-action-box span.shape.shape2:after{bottom: 2px; left: -1.5px;} /*------------------- 6.27. Project -------------------*/ .project-layout1{position: relative;} .project-layout1 .shape2{bottom: 40%; left: 0; animation: downUp 10s alternate infinite;} .project-layout1 .shape1{top: 5%; right: 0; max-width: 700px; animation: upDown 10s alternate infinite;} .project-layout1:before{content: ''; position: absolute; right: 0; bottom: -75px; width: 100%; height: 100%; max-width: 625px; max-height: 410px; background-image: url(../img/featured/bg-shape-2-1.png);} .project-layout1 .axivis-project{margin-bottom: 30px;} .project-layout1 .axivis-project .project-img{overflow: hidden;} .project-layout1 .axivis-project .project-img img{width: 100%; transition: all ease 0.4s; transform: scale(1.001);} .project-layout1 .axivis-project .project-content{margin: 0 30px; padding: 0 30px; padding-top: 35px; padding-bottom: 0; background-color: #fff; margin-top: -80px; position: relative; overflow: hidden; box-shadow: 0 10px 54px -4px rgba(0, 0, 0, 0.1);} .project-layout1 .axivis-project .project-content:before{content: ''; position: absolute; background-color: #0046e2; left: 50%; top: -225px; opacity: 0.20; z-index: 1; width: 250px; height: 250px; border-radius: 50%; transform: translateX(-50%); transition: all 0.4s;} .project-layout1 .axivis-project .project-content > span{font-weight: 500; color: #0046e2; display: inline-block; margin-bottom: 10px;} .project-layout1 .axivis-project .project-content > span i{margin-right: 10px; font-size: 18px;} .project-layout1 .axivis-project .project-content .project-title{font-size: 22px; line-height: 30px; font-weight: 500; text-transform: none; margin-bottom: 21px; letter-spacing: 0.20px;} .project-layout1 .axivis-project .project-content .primary-btn{width: 150px;} .project-layout1 .axivis-project .project-content .content-bottom{padding-top: 20px; padding-bottom: 20px; display: flex; align-items: center; justify-content: space-between; position: relative;} .project-layout1 .axivis-project .project-content .content-bottom span{margin-bottom: 0;} .project-layout1 .axivis-project .project-content .content-bottom::before{content: ''; position: absolute; left: -41px; right: -41px; top: 0; height: 1px; background-color: #edf2f4;} .project-layout1 .axivis-project .project-content .price{font-size: 22px; display: inline-block; padding-top: 10px; font-weight: 700;} .project-layout1 .axivis-project:hover .project-img img{transform: scale(1.05);} .project-layout1 .axivis-project:hover .project-content:before{background-color: #ef0f3a;} .project-details-layout1 .project-details-area .twentytwenty-wrapper{margin-bottom: 35px; overflow: hidden;} .project-details-layout1 .project-details-area .sub-title{font-size: 28px; font-family: "Roboto", sans-serif; font-weight: 500; letter-spacing: 0.20px; margin-bottom: 20px; line-height: 1; margin-top: 30px;} .project-details-layout1 .project-details-area .middle-img{margin-bottom: 30px;} .project-details-layout1 .project-details-area .middle-img img{width: 100%;} .project-details-layout1 .project-details-area > ul{display: grid; grid-template-columns: 1fr 1fr 1fr; grid-row-gap: 25px; margin-bottom: 30px;} .project-details-layout1 .project-details-area > ul li{line-height: 30px;} .project-details-layout1 .project-details-area > ul li:before{content: "\f00c"; font-family: "Font Awesome 5 Pro"; width: 50px; height: 50px; line-height: 50px; background-color: #ebeffc; display: inline-block; text-align: center; font-size: 22px; margin-right: 20px; color: #0046e2; border-radius: 50%;} .project-details-layout1 .share-links{border-top: 1px solid #ededed; border-bottom: 1px solid #ededed; padding: 30px 0; margin: 60px 0;} .project-details-layout1 .share-links .links-title{display: inline-block; margin-bottom: 0; font-size: 22px; line-height: 1; margin-right: 25px;} .project-details-layout1 .share-links .tagcloud{display: inline-block;} .project-details-layout1 .share-links .tagcloud a{font-size: 14px; display: inline-block; background-color: #ffffff; color: #696e78; line-height: 1; padding: 9px 17px; border: 1px solid #d7e3fe; margin-right: 7px;} .project-details-layout1 .share-links .tagcloud a:last-child{margin-right: 0;} .project-details-layout1 .share-links .tagcloud a:hover{background-color: #0046e2; color: #ffffff; border-color: transparent;} .project-details-layout1 .share-links .social-links ul li{display: inline-block; margin-right: 8px;} .project-details-layout1 .share-links .social-links ul li:last-child{margin-right: 0;} .project-details-layout1 .share-links .social-links ul li a i{display: inline-block; width: 50px; height: 50px; line-height: 50px; background-color: #0046e2; color: #ffffff; text-align: center; font-size: 16px; transition: all ease 0.4s;} .project-details-layout1 .share-links .social-links ul li a > [class*="facebook"]{background-color: #3b5998;} .project-details-layout1 .share-links .social-links ul li a > [class*="facebook"]:hover{background-color: #0547d2;} .project-details-layout1 .share-links .social-links ul li a > [class*="twitter"]{background-color: #38a1f3;} .project-details-layout1 .share-links .social-links ul li a > [class*="twitter"]:hover{background-color: #045ea5;} .project-details-layout1 .share-links .social-links ul li a > [class*="linkedin"]{background-color: #0e76a8;} .project-details-layout1 .share-links .social-links ul li a > [class*="linkedin"]:hover{background-color: #00557d;} .project-details-layout1 .share-links .social-links ul li a > [class*="youtube"]{background-color: #ff0000;} .project-details-layout1 .share-links .social-links ul li a > [class*="youtube"]:hover{background-color: #bf0202;} /*------------------- 6.28. Pagination -------------------*/ .post-pagination-layout1 .post-pagination{margin-bottom: 30px;} .post-pagination-layout1 .post-pagination .pagi-content{background:linear-gradient(0deg,#fff,#f3f5f8); box-shadow: 8px 8px 20px 0 rgba(55,99,170,.1), -8px -8px 20px 0 #fff;border: 2px solid #fff;border-radius: 4px;padding: 40px; padding-top: 35px;} .post-pagination-layout1 .post-pagination .pagi-content .pagi-title{font-size: 30px; line-height: 40px; font-weight: 500; text-transform: none; letter-spacing: 0.20px;} .post-pagination-layout1 .post-pagination .pagi-content .pagi-btn{display: inline-block; width: 150px; height: 50px; text-transform: uppercase; text-align: center; line-height: 47px; background-color: #0046e2; color: #ffffff; font-size: 14px; border: 1px solid transparent; letter-spacing: 0.60px; font-weight: 700;} .post-pagination-layout1 .post-pagination .pagi-content .pagi-btn:hover{background-color: #ef0f3a;} .post-pagination-layout1 .post-pagination .pagi-content .pagi-btn i{font-size: 21px; position: relative; top: 3px;} .post-pagination-layout1 .post-pagination .pagi-content .pagi-btn.btn-prev i{margin-right: 9px;} .post-pagination-layout1 .post-pagination .pagi-content .pagi-btn.btn-next i{margin-left: 5px;} .post-pagination-layout2 .post-pagination{margin-bottom: 30px; position: relative;} .post-pagination-layout2 .post-pagination:before{content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: 0.7; z-index: 0; background-color: #060f22;} .post-pagination-layout2 .post-pagination .pagi-content{padding: 40px; padding-top: 35px; background-color: #f2f4f9; position: relative; z-index: 2; transition: all ease 0.6s;} .post-pagination-layout2 .post-pagination .pagi-content .pagi-title{font-size: 22px; line-height: 30px; font-weight: 500; text-transform: none; margin-bottom: 15px; letter-spacing: 0.20px;} .post-pagination-layout2 .post-pagination .pagi-content .pagi-title a:Hover{color: inherit;} .post-pagination-layout2 .post-pagination .pagi-content span{font-size: 14px; display: block; margin-bottom: 30px; transition: all ease 0.4s;} .post-pagination-layout2 .post-pagination .pagi-content span i{color: #0046e2; transition: all ease 0.4s; font-size: 16px; margin-right: 10px;} .post-pagination-layout2 .post-pagination .pagi-content .pagi-btn{display: inline-block; width: 150px; height: 50px; text-transform: uppercase; text-align: center; line-height: 47px; background-color: #0046e2; color: #ffffff; font-size: 14px; border: 1px solid transparent; letter-spacing: 0.60px; font-weight: 700;} .post-pagination-layout2 .post-pagination .pagi-content .pagi-btn:hover{background-color: #ef0f3a;} .post-pagination-layout2 .post-pagination .pagi-content .pagi-btn i{font-size: 21px; position: relative; top: 3px;} .post-pagination-layout2 .post-pagination .pagi-content .pagi-btn.btn-prev i{margin-right: 9px;} .post-pagination-layout2 .post-pagination .pagi-content .pagi-btn.btn-next i{margin-left: 5px;} .post-pagination-layout2 .post-pagination:hover .pagi-content{background-color: transparent;} .post-pagination-layout2 .post-pagination:hover .pagi-content span i, .post-pagination-layout2 .post-pagination:hover .pagi-content .pagi-title, .post-pagination-layout2 .post-pagination:hover .pagi-content span{color: #ffffff;} .pagination-layout1{text-align: center;} .pagination-layout1 ul li{display: inline-block; margin: 0 3px;} .pagination-layout1 ul li:last-child{margin-right: 0;} .pagination-layout1 ul li:first-child{margin-left: 0;} .pagination-layout1 ul li a{display: inline-block; border: 1px solid #cbdafc; color: #01133c; font-weight: 700; background-color: #ffffff; font-size: 16px; width: 80px; height: 50px; line-height: 50px;} .pagination-layout1 ul li a:hover{background-color: #0046e2; color: #ffffff; border-color: transparent;} /*------------------- 6.29. Branch Information -------------------*/ .branch-information-layout1 .inner-wrapper{box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.07); position: relative; margin-bottom: -185px; z-index: 99; background-color: #ffffff;} .branch-information-layout1 .single-branch-info{padding: 30px; position: relative;} .branch-information-layout1 .single-branch-info .branch-info-head{padding-right: 20px;} .branch-information-layout1 .single-branch-info .branch-info-body{padding-left: 10px; padding-bottom: 10px; position: relative;} .branch-information-layout1 .single-branch-info .branch-info-body .branch-title{font-size: 30px; font-weight: 500; font-family: "Roboto", sans-serif; text-transform: none; margin-bottom: 8px;} .branch-information-layout1 .single-branch-info .branch-info-body .branch-location{color: #3454d1; line-height: 26px; margin-bottom: 0;} .branch-information-layout1 .single-branch-info .branch-info-body .branch-location i{font-size: 18px; margin-right: 5px;} .branch-information-layout1 .single-branch-info .branch-info-body .branch-info{padding: 40px 0; padding-top: 35px;} .branch-information-layout1 .single-branch-info .branch-info-body .branch-info .info-box{display: flex; align-items: center; margin-bottom: 20px;} .branch-information-layout1 .single-branch-info .branch-info-body .branch-info .info-box:last-of-type{margin-bottom: 0;} .branch-information-layout1 .single-branch-info .branch-info-body .branch-info .info-box .icon span{display: inline-block; width: 60px; height: 60px; line-height: 60px; text-align: center; border: 1px solid #0046e2; border-radius: 50%; color: #0046e2; font-size: 26px; margin-right: 20px;} .branch-information-layout1 .single-branch-info .branch-info-body .branch-info .info-box .content{padding-top: 5px;} .branch-information-layout1 .single-branch-info .branch-info-body .branch-info .info-box .content span{display: inline-block; font-size: 18px; text-transform: capitalize; color: #01133c; font-weight: 500; letter-spacing: 0.20px;} .branch-information-layout1 .single-branch-info .branch-info-body .branch-info .info-box .content .text{margin-bottom: 0;} .branch-information-layout1 .single-branch-info .branch-info-body .primary-btn{width: 160px;} .branch-information-layout1 .single-branch-info .button{z-index: 1;} .branch-information-layout1 .single-branch-info .button i{display: inline-block; width: 60px; height: 60px; line-height: 58px; background-color: #0046e2; text-align: center; color: #ffffff; font-size: 21px; position: relative; z-index: 2; border: 1px solid transparent; border-radius: 50%; transition: all ease 0.4s;} .branch-information-layout1 .single-branch-info .button:hover i{background-color: #ffffff; color: #0046e2; border-color: #0046e2;} .branch-information-layout1 .single-branch-info .map-button{position: absolute; right: 30px; bottom: -5px;} .branch-information-layout1 .single-branch-info .officer-info-toggler.button{position: absolute; top: 50px; left: 65px;} .branch-information-layout1 .single-branch-info .branch-officer-info .officer-info-box{position: absolute; left: 195px; top: 20px; background-color: #ffffff; width: 100%; max-width: 370px; text-align: center; z-index: 99; padding-top: 60px; padding-bottom: 55px; opacity: 0; visibility: hidden; margin-left: 40px; transition: all ease 0.4s;} .branch-information-layout1 .single-branch-info .branch-officer-info .officer-info-box.show{opacity: 1; visibility: visible; margin-left: 0;} .branch-information-layout1 .single-branch-info .branch-officer-info .officer-info-box:before{content: ''; position: absolute; left: -20px; top: 40px; width: 40px; height: 40px; background-color: #fff; transform: rotate(45deg);} .branch-information-layout1 .single-branch-info .branch-officer-info .officer-info-box .avater{width: 120px; height: 120px; margin: 0 auto; margin-bottom: 28px;} .branch-information-layout1 .single-branch-info .branch-officer-info .officer-info-box .avater img{width: 100%; height: 100%;} .branch-information-layout1 .single-branch-info .branch-officer-info .officer-info-box .name{font-size: 22px; letter-spacing: 0; margin-bottom: 5px;} .branch-information-layout1 .single-branch-info .branch-officer-info .officer-info-box .degi{display: inline-block; margin-bottom: 20px;} .branch-information-layout1 .single-branch-info .branch-officer-info .officer-info-box .contact-info{font-size: 18px; line-height: 26px; color: #01133c; font-weight: 500; max-width: 250px; text-align: left; margin: 0 auto; margin-bottom: 10px;} .branch-information-layout1 .single-branch-info .branch-officer-info .officer-info-box .contact-info:last-of-type{margin-bottom: 0;} .branch-information-layout1 .single-branch-info .branch-officer-info .officer-info-box .contact-info i{font-size: 22px; margin-right: 10px; color: #0046e2;} .branch-information-layout1 ul.slick-dots{position: absolute; right: 21%; bottom: 25px;} .branch-information-layout1 ul.slick-dots li{display: inline-block; margin-right: 12px;} .branch-information-layout1 ul.slick-dots li:last-child{margin-right: 0;} .branch-information-layout1 ul.slick-dots li button{border: none; font-size: 0; padding: 0; line-height: 0; display: inline-block; width: 65px; height: 3px; background-color: #dfe1e5; border-radius: 50px;} .branch-information-layout1 ul.slick-dots li.slick-active button{background-color: #0046e2;} /*------------------- 6.30. Contact Map -------------------*/ .contact-map-wrap{height: 640px; width: 100%;} .contact-map-wrap .contact-map{width: 100%; height: 100%;} /*------------------- 6.31. axivis Founder -------------------*/ .founder-layout1{background-color: #fbfbfb;} .founder-layout1.background-image{position: relative;} .founder-layout1.background-image:after, .founder-layout1.background-image:before{content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: 0.95; z-index: 2; background-color: #f7f7f7;} .founder-layout1.background-image:after{background-color: #ffffff; z-index: 1; opacity: 0.50;} .founder-layout1 .axivis-founder{margin-bottom: 100px; position: relative; z-index: 4;} .founder-layout1 .axivis-founder:nth-child(odd) .row{flex-direction: row-reverse;} .founder-layout1 .axivis-founder:nth-child(odd) .founder-content{padding-left: 0; padding-right: 45px;} .founder-layout1 .axivis-founder .founder-img{position: relative;} .founder-layout1 .axivis-founder .founder-img img{width: 100%;} .founder-layout1 .axivis-founder .social-links{position: absolute; bottom: 0; left: 0; width: 100%; text-align: center; margin-bottom: -22.5px;} .founder-layout1 .axivis-founder .social-links ul li{display: inline-block; margin: 0 5px;} .founder-layout1 .axivis-founder .social-links ul li a{display: inline-block; width: 45px; height: 45px; background-color: #ffffff; line-height: 46px; color: #0046e2; box-shadow: 0 7px 28px -12px #0046e2; border-radius: 50%;} .founder-layout1 .axivis-founder .social-links ul li a:hover{background-color: #0046e2; color: #ffffff;} .founder-layout1 .axivis-founder .founder-content{padding-left: 45px;} .founder-layout1 .axivis-founder .founder-content span.degi{font-size: 18px; font-weight: 500; color: #0046e2; display: inline-block;} .founder-layout1 .axivis-founder .founder-content .name{font-weight: 500; font-family: "Roboto", sans-serif; font-size: 40px; letter-spacing: 0.20px; margin-bottom: 15px;} /*------------------- 6.32. Team Details -------------------*/ .team-details-layout1 .team-member .member-details-area{box-shadow: 0 0 60px -24px rgba(0, 70, 226, 0.3); margin-bottom: 160px; border: 1px solid #c7d8ff;} .team-details-layout1 .team-member .inner-title{letter-spacing: 0.20px; margin-bottom: 25px;} .team-details-layout1 .team-member .member-img{position: relative; bottom: -100px; padding-left: 100px;} .team-details-layout1 .team-member .member-details{padding-left: 60px; padding-right: 50px;} .team-details-layout1 .team-member .member-details .degi{font-size: 18px; color: #0046e2; font-weight: 500; letter-spacing: 0.20px; display: inline-block; margin-bottom: 10px;} .team-details-layout1 .team-member .member-details .name{font-weight: 500; font-family: "Roboto", sans-serif; letter-spacing: 0.20px; font-size: 40px; line-height: 1; margin-bottom: 10px;} .team-details-layout1 .team-member .member-details .member-information{margin-bottom: 20px;} .team-details-layout1 .team-member .member-details .member-information ul li{border-bottom: 1px solid #e5f0ea; padding: 15px 0;} .team-details-layout1 .team-member .member-details .member-information ul li:last-child{border-bottom: none;} .team-details-layout1 .team-member .member-details .member-information ul li span{font-size: 18px; color: #01133c; font-weight: 500; text-transform: capitalize; display: inline-block; margin-right: 15px;} .team-details-layout1 .team-member .member-details .social-links li{display: inline-block; margin: 0 5px;} .team-details-layout1 .team-member .member-details .social-links li:last-child{margin-right: 0;} .team-details-layout1 .team-member .member-details .social-links li:first-child{margin-left: 0;} .team-details-layout1 .team-member .member-details .social-links li a{width: 45px; height: 45px; line-height: 45px; display: inline-block; text-align: center; background-color: #ffffff; color: #0046e2; font-size: 15px; border-radius: 50%; box-shadow: 0 7px 28px -12px #0046e2;} .team-details-layout1 .team-member .member-details .social-links li a:hover{color: #ffffff; background-color: #0046e2;} .team-details-layout1 .team-member .member-content{margin-bottom: 50px;} .team-details-layout1 .team-member .member-skill{margin-bottom: 45px;} .team-details-layout1 .team-member .member-skill .bar-progress-area .single-bar-progress{margin-bottom: 16px;} .team-details-layout1 .team-member .member-skill .bar-progress-area .progress-title{font-size: 16px; margin-bottom: 0; font-weight: 700; color: #000; margin-bottom: 5px;} .team-details-layout1 .team-member .member-skill .bar-progress-area .bar-progress{height: 7px; background-color: #c7d8ff; width: 100%;} .team-details-layout1 .team-member .member-skill .bar-progress-area .bar-progress .progress-value{background-color: #0046e2; height: 7px; position: relative;} .team-details-layout1 .team-member .member-skill .bar-progress-area .bar-progress .progress-value span{position: absolute; top: -35px; right: -11px; font-size: 14px; color: #0046e2;} .team-details-layout1 .team-member .member-skill .bar-progress-area .bar-progress .progress-value span i{font-style: normal;} .team-details-layout1 .team-member .member-skill .bar-progress-area .bar-progress .progress-value span:before, .team-details-layout1 .team-member .member-skill .bar-progress-area .bar-progress .progress-value span:after{content: ''; position: absolute;} .team-details-layout1 .team-member .member-skill .bar-progress-area .bar-progress .progress-value span:before{left: 0; bottom: 0; width: 100%; height: 1px; background-color: #0046e2;} .team-details-layout1 .team-member .member-skill .bar-progress-area .bar-progress .progress-value span:after{left: 50%; bottom: -4px; border-top: 4px solid #0046e2; border-left: 4px solid transparent; border-right: 4px solid transparent; margin-left: -2.5px;} .team-details-layout1 .team-member .member-skill .circle-progress-area{display: grid; grid-template-columns: auto auto;} .team-details-layout1 .team-member .member-skill .single-circle-progress{display: flex; align-items: center; padding-left: 50px;} .team-details-layout1 .team-member .member-skill .single-circle-progress .progress-title{font-size: 22px; line-height: 30px; font-weight: 500; margin-bottom: 0; color: #01133c; padding-left: 30px;} .team-details-layout1 .team-member .member-skill .single-circle-progress .circle-progress{position: relative;} .team-details-layout1 .team-member .member-skill .single-circle-progress .circle-progress span{position: absolute; left: 50%; top: 50%; font-size: 36px; font-weight: 700; line-height: 1; color: #0046e2; transform: translate(-50%, -50%);} /*------------------- 6.33. Service Details -------------------*/ .service-details-layout1.background-image{position: relative; background-size: cover;} .service-details-layout1.background-image:after{content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: 0.85; z-index: 0; background-color: #ffffff;} .service-details-layout1 .inner-title{letter-spacing: 0.20px;} .service-details-layout1 .container{position: relative; z-index: 1;} .service-details-layout1 .mb-20{margin-bottom: 20px;} .service-details-layout1 .mb-25{margin-bottom: 25px;} .service-details-layout1 .mb-30{margin-bottom: 30px;} .service-details-layout1 .widget{border: 1px solid #f0f0f0;} .service-details-layout1 .service-details .service-img{margin-bottom: 15px;} .service-details-layout1 .service-details .service-thumb-image{margin-left: -7.5px; margin-right: -7.5px; overflow: hidden; margin-bottom: 35px;} .service-details-layout1 .service-details .service-thumb-image img{padding-left: 7.5px; padding-right: 7.5px;} .service-details-layout1 .service-details .service-title{font-family: "Roboto", sans-serif; font-size: 40px; font-weight: 500; letter-spacing: 0.20px; margin-bottom: 15px;} .service-details-layout1 .service-details .service-content{border-bottom: 1px solid #ededed; padding-bottom: 9px; margin-bottom: 40px;} .service-details-layout1 .service-details .service-content:last-child{border-bottom: none; margin-bottom: 0; padding-bottom: 0;} .service-details-layout1 .service-details .service-middle-box .inner-title{letter-spacing: 0.20px; text-transform: none; margin-bottom: 15px;} .service-details-layout1 .service-details .service-middle-box .middle-img{margin-bottom: 25px;} .service-details-layout1 .service-details .service-middle-box .middle-img img{width: 100%;} .service-details-layout1 .service-details ul{padding-bottom: 10px;} .service-details-layout1 .service-details ul li{font-size: 16px; line-height: 28px; padding-left: 25px; position: relative; margin-bottom: 18px;} .service-details-layout1 .service-details ul li:before{content: ''; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; background-color: #0046e2; border-radius: 50%;} .service-details-layout1 .service-details .service-video-box{position: relative; margin-bottom: 40px;} .service-details-layout1 .service-details .service-video-box:before{content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: 0.5; z-index: 1; background-color: #01040c;} .service-details-layout1 .service-details .service-video-box .box-btn{position: absolute; top: 50%; left: 50%; z-index: 3; margin-left: 15px; transform: translate(-50%, -50%);} .service-details-layout1 .service-details .service-video-box .box-btn a.text{color: #ffffff; font-size: 18px; letter-spacing: 0.20px; font-weight: 500; position: relative; top: -6px; z-index: 4; left: -15px;} .service-details-layout1 .service-details .single-faq{background-color: #fff; border-color: #d9ddee; box-shadow: none;} .service-details-layout1 .service-details .single-faq.open{border-color: #0046e2;} /*------------------- 6.34. Popup Search Box -------------------*/ .popup-search-box{position: fixed; top: 0; left: 50%; background-color: rgba(0, 0, 0, 0.95); height: 0; width: 0; overflow: hidden; z-index: 99999; opacity: 0; visibility: hidden; cursor: url("../img/cancel.png"), auto; border-radius: 50%; transform: translateX(-50%); transition: all ease 0.4s;} .popup-search-box button.searchClose{width: 60px; height: 60px; position: absolute; top: 40px; right: 40px; border: 1px solid #0046e2; background-color: transparent; color: #0046e2; font-size: 22px; border-radius: 50%; transition: all ease 0.4s; transform: rotate(0);} .popup-search-box button.searchClose:hover{color: #fff; background-color: #0046e2; border-color: transparent; transform: rotate(90deg);} .popup-search-box form{position: absolute; top: 50%; left: 50%; display: inline-block; padding-bottom: 40px; cursor: auto; width: 100%; max-width: 900px; transform: translate(-50%, -50%) scale(0); transition: transform ease 0.4s;} .popup-search-box form input{font-size: 18px; height: 70px; width: 100%; border: none; border-bottom: 2px solid #0046e2; background-color: transparent; padding-left: 30px; color: #fff; border-radius: 50px;} .popup-search-box form input::placeholder{color: #fff;} .popup-search-box form button{position: absolute; top: 0px; background-color: transparent; border: none; color: #fff; font-size: 24px; right: 12px; color: #ffffff; cursor: pointer; width: 70px; height: 70px; transition: all ease 0.4s; transform: scale(1.001);} .popup-search-box form button:hover{transform: scale(1.1);} .popup-search-box.show{opacity: 1; visibility: visible; width: 100.1%; height: 100%; transition: all ease 0.4s; border-radius: 0;} .popup-search-box.show form{transition-delay: 0.5s; transform: translate(-50%, -50%) scale(1);} .popup-search-box.layout2{cursor: url("../img/cancel2.png"), auto;} .popup-search-box.layout2 button.searchClose{border-color: #ef0f3a; color: #ef0f3a;} .popup-search-box.layout2 button.searchClose:hover{background-color: #ef0f3a; color: #ffffff;} .popup-search-box.layout2 form input{border-color: #ef0f3a;} /*------------------- 6.35. Popup Side Menu -------------------*/ .sidemenu-wrapper{position: fixed; z-index: 99999; right: 0; top: 0; height: 100%; width: 0; background-color: rgba(0, 0, 0, 0.75); opacity: 0; visibility: hidden; cursor: url("../img/cancel.png"), auto; transition: all ease 0.8s;} .sidemenu-wrapper .closeButton{display: inline-block; width: 50px; height: 50px; line-height: 50px; font-size: 24px; padding: 0; position: absolute; top: 20px; right: 20px; background-color: #ffffff; border: 1px solid #0046e2; color: #0046e2; border-radius: 50%; transform: rotate(0); transition: all ease 0.4s;} .sidemenu-wrapper .closeButton:hover{background-color: #0046e2; color: #ffffff; border-color: transparent; transform: rotate(90deg);} .sidemenu-wrapper .sidemenu-content{background-color: #ffffff; width: 450px; margin-left: auto; padding: 80px 30px; height: 100%; overflow: scroll; position: relative; right: -500px; cursor: auto; transition-delay: 1s; transition: right ease 1s;} .sidemenu-wrapper .sidemenu-content::-webkit-scrollbar-track{box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.1); background-color: #F5F5F5;} .sidemenu-wrapper .sidemenu-content::-webkit-scrollbar{width: 2px; background-color: #F5F5F5;} .sidemenu-wrapper .sidemenu-content .widget{padding: 0 !important;} .sidemenu-wrapper .sidemenu-content .widget_about{padding: 0;} .sidemenu-wrapper .sidemenu-content .widget_about img{margin-bottom: 25px;} .sidemenu-wrapper .sidemenu-content .widget_about .text{margin-bottom: 0;} .sidemenu-wrapper .sidemenu-content .widget.widget_admin{padding-top: 0; padding-bottom: 0;} .sidemenu-wrapper .sidemenu-content .widget.widget_admin .admin-content .admin-img{margin-bottom: 35px;} .sidemenu-wrapper .sidemenu-content .widget_contact p{margin-bottom: 20px; font-weight: 500; font-size: 18px; color: #000;} .sidemenu-wrapper .sidemenu-content .widget_contact p:last-child{margin-bottom: 0;} .sidemenu-wrapper .sidemenu-content .widget_contact i{display: inline-block; width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 15px; background-color: #0046e2; margin-right: 15px; color: #ffffff; border-radius: 50%; transition: all ease 0.4s;} .sidemenu-wrapper.show{opacity: 1; visibility: visible; width: 100%; transition: all ease 0.8s;} .sidemenu-wrapper.show .sidemenu-content{right: 0; opacity: 1; visibility: visible;} .sidemenu-layout2{cursor: url("../img/cancel2.png"), auto;} .sidemenu-layout2 .closeButton{border-color: #ef0f3a; color: #ef0f3a;} .sidemenu-layout2 .closeButton:hover{background-color: #ef0f3a;} .sidemenu-layout2 .sidemenu-content .widget_contact i{background-color: #ef0f3a; color: #ffffff;} .sidemenu-layout2 .sidemenu-content .widget_recent_entries .blog .blog-content span i{color: #ef0f3a !important;} .sidemenu-layout2 .sidemenu-content .widget .widget_title:before{background-color: #ef0f3a;} /*------------------- 6.36 Widget -------------------*/ /*联系*/ .footer{background-color:#182029;color: #B8B8B8;font-size: 12px;padding: 50px 0 0} .footer a{color: #B8B8B8} .footer a:hover{color: #fff} .footer .cidaohang, .address{line-height: 35px} .footer .container{width: 1200px;padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto;} .footer h3{font-size: 16px; font-weight: bold; color: #FFF; padding: 0 0 30px 0; margin: 0;} .footer .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-13{float: left;} .footer .col-md-5{width: 41.66666667%;} .footer .col-lg-6{width: 44%;line-height: 40px;} .footer input, button, select, textarea{font-family: inherit; font-size: inherit; line-height: inherit;} .footer .list-unstyled{padding-left: 0;font-style: normal;} #dh, #xm{height: 40px; width: 260px; background-color: #FFF; color: #666; border-width: 0; margin-bottom: 25px; vertical-align: middle; padding-right: 10px; padding-left: 10px; border-radius: 0;} #xm{background-image: url(../images/input-bg.png); background-repeat: no-repeat; background-position: right 0;} #dh{background-image: url(../images/input-bg.png); background-repeat: no-repeat; background-position: right -40px;} #nr{font-size: 12px; height: 36px; width: 260px; background-color: #fff; color: #666; border-width: 0px; margin-bottom: 25px; vertical-align: middle; padding-right: 10px; padding-left: 10px; border-radius: 0px;} #nr{height: 80px; padding-top: 10px; vertical-align: top; background-image: url(../images/foot-form-bg.png); background-repeat: no-repeat; background-position: right -160px;} #button{height: 44px; width: 260px; text-align: center; vertical-align: middle; border-width: 0; background-color: #253E4D; color: #FFF; font-size: 14px; border-radius: 0;} button, input, optgroup, select, textarea{margin: 0; font: inherit; color: inherit;} .footer .z15{padding-left:12%; padding-right: 0;} .footer .address{background-image: url(../images/address-bg.png); background-repeat: no-repeat; background-position: -7px top; margin-bottom: 15px;} .footer .sns a{margin-right: 5px;} .footer .col-lg-3{width: 21.5%;} .footer .col-lg-4{width: 33.33333333%;} .footer .copy{text-transform: uppercase;} .footer .copy hr{border-color: #384251; width: 100%; display: -webkit-inline-box; margin-top: 30px; margin-bottom: 25px;} .footer .banquan{float: left;margin-top: 6px;} .footer .renzheng{float: right;margin-top: -5px} .footer .renzheng img{margin-right: 12px;} .footer .pull-right{float: right!important;} .footer .qixia{background-image: url(../images/en-logo.png); background-repeat: no-repeat; background-position: left top; padding-left: 120px;} .footer .ylw-img-responsive{height: auto; max-width: 100%;padding-top: 10px;} #indexPage #mcontact{background-color:#f3f3f3} #indexPage #mcontact .content{width:1200px; margin:0 auto; padding:80px 0 68px; height:auto;} #indexPage #mcontact .content:after{content:''; display:block; clear: both;} #indexPage #mcontact .content .header{width:480px; float:left;} #indexPage #mcontact .content .header p.title{color: #666; text-align:left;} #indexPage #mcontact .content .header .subtitle{text-align:left; font-family:"Times New Roman", Times, serif, HELVETICANEUELTPRO-THEX, "微软雅黑";} #indexPage #mcontact .content #contactlist{width:720px; float:left;} #mcontact .content #contactform{display:none;} #mcontact .content #contactinfo{width:720px; float:left; position:relative;} #mcontact .content #contactinfo p{float:left; width:290px; padding-right:60px; margin-top:14px; height:auto; color:#999; font-size:12px; line-height:inherit;} #mcontact .content #contactinfo h3{color:#696969;} #mcontact #contactinfo div{position: absolute; top:35px; left:-250px;} #mcontact #contactinfo div:after{content:'关注'; color: #696969; height: 20px; font-size: 16px; line-height: 20px; overflow: hidden; position: absolute; top:-56px; left:0px;} #mcontact #contactinfo div a{background-color: transparent; color:#9b9b9b; font-size:16px; border:2px solid rgba(0, 0, 0, 0)} #mcontact #contactinfo div a:hover{background-color:#007af1; border:2px solid #007af1; border-radius:0px;} #mcontact #contactinfo div a:hover i{color:#fff;} /*footer*/ #indexPage .module.bgShow .bgmask{display:none;} #footer{background:#fff;} #footer a path{fill: rgb(148, 148, 148);} #footer p{width:1200px; margin:0 auto; line-height:44px; padding:0; text-align:left;} .widget:not(.footer-widget){padding: 40px; margin-bottom: 40px; padding-top: 35px; background-color: #ffffff;} .widget:not(.footer-widget) .widget_title{font-size: 22px; font-weight: 500; letter-spacing: 0.20px; position: relative; border-bottom: 1px solid #e5e5e5; padding-bottom: 25px; margin-bottom: 30px;} .widget:not(.footer-widget) .widget_title:before{content: ''; position: absolute; left: 0; bottom: 0; width: 80px; height: 1px; background-color: #0046e2;} .widget:not(.footer-widget).widget_categories ul li{margin-bottom: 15px;} .widget:not(.footer-widget).widget_categories ul li:last-child{margin-bottom: 0;} .widget:not(.footer-widget).widget_categories ul li a{display: block; width: 100%; position: relative; padding: 11.5px 25px; border: 1px solid #e5e5e5; padding-left: 70px;} .widget:not(.footer-widget).widget_categories ul li a:hover{background-color: #0046e2; color: #ffffff;} .widget:not(.footer-widget).widget_categories ul li a:before{content: '\f07c'; font-family: "Font Awesome 5 Pro"; font-weight: 300; display: inline-block; width: 50px; height: 100%; position: absolute; left: 0; top: 0; line-height: 50px; text-align: center; background-color: #0046e2; color: #ffffff; font-size: 18px; border-right: 1px solid #ffffff;} .widget:not(.footer-widget).widget_categories ul li a span{float: right;} .widget:not(.footer-widget).widget_file_link ul li{margin-bottom: 10px;} .widget:not(.footer-widget).widget_file_link ul li:last-child{margin-bottom: 0;} .widget:not(.footer-widget).widget_file_link ul li a{display: block; position: relative; font-weight: 700; padding: 16px 20px; background-color: #0046e2; color: #ffffff; padding-left: 74px;} .widget:not(.footer-widget).widget_file_link ul li a:hover{background-color: #ef0f3a;} .widget:not(.footer-widget).widget_file_link ul li a:after, .widget:not(.footer-widget).widget_file_link ul li a:before{content: '\f33d'; font-family: "Font Awesome 5 Pro"; font-weight: 300; font-size: 30px; position: absolute; left: 20px; top: 50%; transform: translateY(-50%);} .widget:not(.footer-widget).widget_file_link ul li a:after{content: attr(data-type); font-family: "Roboto", sans-serif; font-size: 24px; color: #ffffff; opacity: 0.15; font-weight: 700; text-transform: uppercase; left: 15px;} .widget:not(.footer-widget).widget_search .search-form{display: flex; align-items: center;} .widget:not(.footer-widget).widget_search .search-form input{height: 50px; padding-left: 20px; border-color: #d7e3fe; border-right: none; width: calc(100% - 50px);} .widget:not(.footer-widget).widget_search .search-form button{width: 50px; height: 50px; color: #ffffff; border: none; background-color: #0046e2;} .widget:not(.footer-widget).widget_admin{text-align: center; padding-top: 60px; padding-bottom: 60px;} .widget:not(.footer-widget).widget_admin .admin-content .admin-img{width: 130px; height: 130px; margin: 0 auto; position: relative; border-radius: 50%; margin-bottom: 48px; margin-top: 10px;} .widget:not(.footer-widget).widget_admin .admin-content .admin-img img{width: 100%; height: 100%; border-radius: 50%;} .widget:not(.footer-widget).widget_admin .admin-content .admin-img:before, .widget:not(.footer-widget).widget_admin .admin-content .admin-img:after{content: ''; position: absolute; border-radius: 50%;} .widget:not(.footer-widget).widget_admin .admin-content .admin-img:before{left: -10px; top: -10px; right: -10px; bottom: -10px; border: 1px dashed #0046e2; animation: cspine 20s linear infinite;} .widget:not(.footer-widget).widget_admin .admin-content .admin-img:after{content: '\f0e7'; font-family: "Font Awesome 5 Pro"; width: 38px; height: 38px; background-color: #0046e2; color: #ffffff; text-align: center; line-height: 39px; box-shadow: 0 0 0 8px #ffffff; right: -16px; animation: cscale 1s infinite alternate;} .widget:not(.footer-widget).widget_admin .admin-content .admin-title{font-size: 22px; margin-bottom: 2px;} .widget:not(.footer-widget).widget_admin .admin-content .degi{display: inline-block; margin-bottom: 17px;} .widget:not(.footer-widget).widget_admin .admin-content .admin-text{max-width: 300px; margin: 0 auto; margin-bottom: 25px;} .widget:not(.footer-widget).widget_admin .admin-content ul li{display: inline-block; margin: 0 5px;} .widget:not(.footer-widget).widget_admin .admin-content ul li:last-child{margin-right: 0;} .widget:not(.footer-widget).widget_admin .admin-content ul li:first-child{margin-left: 0;} .widget:not(.footer-widget).widget_admin .admin-content ul li a{display: inline-block; width: 40px; height: 40px; line-height: 40px; background-color: #0046e2; color: #ffffff; text-align: center; font-size: 14px; border-radius: 50%;} .widget:not(.footer-widget).widget_admin .admin-content ul li a:hover{background-color: #ef0f3a; color: #ffffff;} .widget:not(.footer-widget).widget_recent_entries .blog{display: flex; margin-bottom: 0; padding: 20px 0; border-bottom: 1px solid #f2f2f2;} .widget:not(.footer-widget).widget_recent_entries .blog:last-of-type{padding-bottom: 0; border-bottom: none;} .widget:not(.footer-widget).widget_recent_entries .blog:first-of-type{padding-top: 0;} .widget:not(.footer-widget).widget_recent_entries .blog .blog-img{margin-right: 20px; width: 200px; height:auto;} .widget:not(.footer-widget).widget_recent_entries .blog .blog-img img{width: 100%;} .widget:not(.footer-widget).widget_recent_entries .blog .blog-content{width: calc(100% - 100px); padding: 0; border: none; margin: 0;} .widget:not(.footer-widget).widget_recent_entries .blog .blog-content .blog-title{font-size: 16px; line-height: 22px; text-transform: none; font-weight: 700; margin-bottom: 10px; letter-spacing: 0.03em;} .widget:not(.footer-widget).widget_recent_entries .blog .blog-content .blog-title a{line-height: inherit;} .widget:not(.footer-widget).widget_recent_entries .blog .blog-content span{font-size: 14px;} .widget:not(.footer-widget).widget_recent_entries .blog .blog-content span i{font-size: 15px; margin-right: 7px; color: #0046e2;} .widget:not(.footer-widget).widget_social_links ul li{margin-bottom: 15px;} .widget:not(.footer-widget).widget_social_links ul li:last-child{margin-bottom: 0;} .widget:not(.footer-widget).widget_social_links ul li a{display: block; height: 50px; line-height: 50px; background-color: #0046e2; color: #fff; padding: 0 20px;} .widget:not(.footer-widget).widget_social_links ul li a span{float: right; margin-left: 5px;} .widget:not(.footer-widget).widget_social_links ul li a i{margin-right: 10px;} .widget:not(.footer-widget).widget_social_links ul li a.facebook{background-color: #3b5998;} .widget:not(.footer-widget).widget_social_links ul li a.twitter{background-color: #38a1f3;} .widget:not(.footer-widget).widget_social_links ul li a.youtube{background-color: #ff0000;} .widget:not(.footer-widget).widget_social_links ul li a.linkedin{background-color: #0e76a8;} .widget:not(.footer-widget).widget_recent_comments .widget_title{margin-bottom: 24px;} .widget:not(.footer-widget).widget_recent_comments .recentcomments{padding-top: 24px; padding-bottom: 28px; border-bottom: 1px solid #f2f2f2;} .widget:not(.footer-widget).widget_recent_comments .recentcomments:last-of-type{padding-bottom: 0; border-bottom: none;} .widget:not(.footer-widget).widget_recent_comments .recentcomments:first-of-type{padding-top: 0;} .widget:not(.footer-widget).widget_recent_comments .recentcomments .comment-text{font-style: italic; margin-bottom: 10px;} .widget:not(.footer-widget).widget_recent_comments .recentcomments .comment-text i{margin-left: 10px; color: #0046e2; font-size: 18px; font-weight: 300;} .widget:not(.footer-widget).widget_recent_comments .recentcomments .rating i{color: #ffa800; margin-right: 2px;} .widget:not(.footer-widget).widget_newsletter form input{border-color: #d7e3fe; padding-left: 20px; height: 50px; margin-bottom: 20px;} .widget:not(.footer-widget).widget_newsletter form button{max-width: 150px;} .widget:not(.footer-widget).widget_tag_cloud .tagcloud{margin-left: -5px; margin-right: -5px;} .widget:not(.footer-widget).widget_tag_cloud .tagcloud a{display: inline-block; border: 1px solid #d7e3fe; font-size: 16px; text-transform: capitalize; letter-spacing: 0.20px; padding: 5px 23px; margin-right: 5px; margin-bottom: 10px;} .widget:not(.footer-widget).widget_tag_cloud .tagcloud a:hover{background-color: #0046e2; border-color: transparent; color: #ffffff;} .widget:not(.footer-widget).widget_offer_banner{padding: 0 0;} .widget_offer_banner{position: relative; z-index: 1; padding: 0;} .widget_offer_banner img{width: 100%;} .widget_offer_banner .link-overlay{position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: 1; z-index: 3;} .widget_offer_banner .price-box{position: absolute;top: 25px;right: 25px;width: 70px;height: 70px;background-color: #ffffff8a;text-align: center;padding: 0 5px;z-index: 1;padding-top: 5px;border-radius: 50%;transition: all ease-in-out 0.3s;} .widget_offer_banner .price-box:before{content: ''; position: absolute; left: -5px; bottom: -5px; right: -5px; top: -5px; border: 2px dotted #ffffff8a; border-radius: 50%; animation: cspine 20s linear infinite;} .widget_offer_banner .price-box span{line-height: 1;} .widget_offer_banner .price-box span.text{font-size: 18px; font-weight: 500; color: #ffffff; font-weight: 500; text-transform: lowercase;} .widget_offer_banner .price-box span.price{display: block; color: #ffffff; font-size: 30px; font-weight: 700; line-height: 32px; margin: 15px 0;} .widget_offer_banner .price-box span.price sup{font-size: 23px; font-weight: 500;} .widget_offer_banner .price-box span.sub{font-size: 15px; font-weight: 400; display: block; text-align: right; color: #ffffff; padding-right: 7px;} .widget_offer_banner .title{position: absolute; top: 50%; left: 20px; color: #ef0f3a; transform: translateY(-50%); text-transform: uppercase; font-size: 60px; max-width: 141px; line-height: 36px; font-family: "Oswald", sans-serif; font-weight: 600;} .widget_offer_banner .title span{margin: 7px 0; display: inline-block;} .widget_offer_banner .title .f-34{font-size: 34px;} .widget_offer_banner .title .f-65{font-size: 65px;} .widget_offer_banner .title .f-39{font-size: 39px;} .widget_offer_banner .title .f-47{font-size: 47px;} .widget_offer_banner .title .f-48{font-size: 48px;} .widget_offer_banner_horizontal{position: relative; padding: 0 0 !important;} .widget_offer_banner_horizontal img{width: 100%;} .widget_offer_banner_horizontal .link-overlay{position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: 1; z-index: 3;} .widget_offer_banner_horizontal .title{font-family: "Oswald", sans-serif; font-weight: 600; color: #ffffff; position: absolute; top: 60%; left: 50px; text-transform: uppercase; line-height: 1.3; margin-bottom: 0; max-width: 51%; font-size: 30px; transform: translateY(-50%);} .widget_offer_banner_horizontal .title span{display: inline-block; line-height: 36px; background-color: #fff; color: #ef0f3a; padding: 0 7px; border-top-left-radius: 12px; border-bottom-left-radius: 9px; border-top-right-radius: 14px; border-bottom-right-radius: 10px;} .widget_offer_banner_horizontal .price-box{position: absolute; bottom: 25px; right: 30px; width: 110px; height: 110px; background-color: #ef0f3a; text-align: center; padding: 0 25px; z-index: 1; padding-top: 10px; border-radius: 50%; transition: all ease-in-out 0.3s;} .widget_offer_banner_horizontal .price-box:before{content: ''; position: absolute; left: -5px; bottom: -5px; right: -5px; top: -5px; border: 2px dotted #ef0f3a; border-radius: 50%; animation: cspine 20s linear infinite;} .widget_offer_banner_horizontal .price-box span{line-height: 1;} .widget_offer_banner_horizontal .price-box span.text{font-size: 18px; font-weight: 500; color: #ffffff; font-weight: 500; text-transform: lowercase;} .widget_offer_banner_horizontal .price-box span.price{display: block; color: #ffffff; font-size: 36px; font-weight: 700; line-height: 32px; margin: 5px 0;} .widget_offer_banner_horizontal .price-box span.price sup{font-size: 23px; font-weight: 500;} .widget_offer_banner_horizontal .price-box span.sub{font-size: 15px; font-weight: 400; display: block; text-align: right; color: #ffffff; padding-right: 7px;} /*------------------- 6.37 Footer -------------------*/ .footer-layout1{background-color: #0a1229; background-image: url("../img/bg-img/footer-bg-1-1.png"); background-size: 100% 100%; background-position: center center; background-repeat: no-repeat;} .footer-layout1 .footer-wid-wrap .footer-widget h3.widget_title{color: #ffffff; font-size: 24px; font-weight: 500; position: relative; margin-bottom: 20px; padding-bottom: 10px; margin-top: -5px;} .footer-layout1 .footer-wid-wrap .footer-widget h3.widget_title:before, .footer-layout1 .footer-wid-wrap .footer-widget h3.widget_title:after{content: ''; position: absolute; width: 40px; height: 3px; bottom: 0; left: 15px; background-color: #0046e2;} .footer-layout1 .footer-wid-wrap .footer-widget h3.widget_title:after{left: 0; width: 10px;} .footer-layout1 .footer-wid-wrap .widget_contact p{color: #ffffff; margin-bottom: 20px; font-weight: 500; font-size: 18px;} .footer-layout1 .footer-wid-wrap .widget_contact p:last-child{margin-bottom: 0;} .footer-layout1 .footer-wid-wrap .widget_contact p i{display: inline-block; width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 15px; background-color: #0046e2; margin-right: 15px; border-radius: 50%; transition: all ease 0.4s;} .footer-layout1 .footer-wid-wrap .widget_contact p a{color: inherit;} .footer-layout1 .footer-wid-wrap .widget_contact p:hover i{background-color: #ef0f3a;} .footer-layout1 .footer-wid-wrap .widget_contact p:hover a{text-decoration: underline;} .footer-layout1 .footer-wid-wrap .widget-links ul li{margin-bottom: 15px;} .footer-layout1 .footer-wid-wrap .widget-links ul li:last-child{margin-bottom: 0;} .footer-layout1 .footer-wid-wrap .widget-links ul li a{display: inline-block; color: #ffffff; font-size: 16px; position: relative;} .footer-layout1 .footer-wid-wrap .widget-links ul li a:before{content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background-color: #0046e2; transition: 0.4s;} .footer-layout1 .footer-wid-wrap .widget-links ul li a:hover:before{width: 100%;} .footer-layout1 .footer-wid-wrap .google-map{width: 100%; height: 235px;} .footer-layout1 .copyright-area{background-color: #f4f5f8; padding: 30px 0;} .footer-layout1 .copyright-area .copyright .text{color: #696e78; margin-bottom: 0;} .footer-layout1 .copyright-area .copyright .text a{color: #0046e2;} .footer-layout1 .copyright-area .copyright .text a:hover{color: #ef0f3a;} .footer-layout1 .copyright-area .social-links li{display: inline-block; margin-right: 10px;} .footer-layout1 .copyright-area .social-links li:last-child{margin-right: 0;} .footer-layout1 .copyright-area .social-links li a{display: inline-block; width: 40px; height: 40px; line-height: 41px; background-color: #0046e2; color: #ffffff; text-align: center; font-size: 15px; border-radius: 50%;} .footer-layout1 .copyright-area .social-links li a:hover{background-color: #ef0f3a;} .footer-layout2{background-color: #fff5f7;} .footer-layout2 p{color: #494f5b;} .footer-layout2 .footer-widget{margin-bottom: 30px;} .footer-layout2 .widget_about img{margin-bottom: 40px;} .footer-layout2 .widget_about ul{padding-top: 10px;} .footer-layout2 .widget_about ul li{display: inline-block; margin-right: 7px;} .footer-layout2 .widget_about ul li:last-child{margin-right: 0;} .footer-layout2 .widget_about ul li a{display: inline-block; width: 45px; height: 45px; line-height: 45px; text-align: center; background-color: #ffffff; color: #ef0f3a; font-size: 16px; box-shadow: 0px 16px 32px 0px rgba(249, 163, 146, 0.2); border-radius: 50%;} .footer-layout2 .widget_about ul li a:hover{color: #ffffff; background-color: #ef0f3a;} .footer-layout2 .widget_contact{background-color: #ffffff; text-align: center; width: 100%; padding: 60px 0; box-shadow: 0px 25px 47.5px 2.5px rgba(239, 15, 58, 0.1);} .footer-layout2 .widget_contact p{margin-bottom: 0; line-height: 36px; max-width: 205px; margin: 0 auto;} .footer-layout2 .widget_contact a.primary-btn{margin-top: 35px; box-shadow: 0px 10px 28.5px 1.5px rgba(146, 0, 28, 0.25);} .footer-layout2 .widget_recent_entries{padding: 0 50px;} .footer-layout2 .widget_recent_entries .widget_title{margin-bottom: 31px;} .footer-layout2 .widget_recent_entries .blog{display: flex; align-items: center; border-bottom: 1px solid #fddee4; padding-bottom: 24px; padding-top: 26px;} .footer-layout2 .widget_recent_entries .blog a:hover{color: #ef0f3a;} .footer-layout2 .widget_recent_entries .blog .blog-img{width: 70px; height: 70px; margin-right: 20px; overflow: hidden;} .footer-layout2 .widget_recent_entries .blog .blog-img img{width: 100%; height: 100%;} .footer-layout2 .widget_recent_entries .blog .blog-content{width: calc(100% - 90px);} .footer-layout2 .widget_recent_entries .blog .blog-content span{font-size: 14px; display: inline-block; margin-bottom: 8px; color: #494f5b;} .footer-layout2 .widget_recent_entries .blog .blog-content span i{color: #ef0f3a; margin-right: 10px;} .footer-layout2 .widget_recent_entries .blog .blog-content .blog-title{font-size: 18px; line-height: 28px; text-transform: none; font-weight: 500; margin-bottom: 0;} .footer-layout2 .widget_recent_entries .blog:first-of-type{padding-top: 0;} .footer-layout2 .widget_recent_entries .blog:last-of-type{padding-bottom: 0; border-bottom: none;} .footer-layout2 .copyright-area{border-top: 1px solid #fddee4; padding: 21px 0;} .footer-layout2 .copyright-area p{margin-bottom: 0; color: #01133c;} .footer-layout2 .copyright-area p a{margin: 0 3px;} .footer-layout2 .copyright-area .copyright .text a{color: #ef0f3a;} .footer-layout3{background-color: #11192c; margin-top: -1px;} .footer-layout3 .footer-wid-wrap .widget_title{color: #ffffff; font-size: 22px; line-height: 1; margin-bottom: 35px;} .footer-layout3 .footer-wid-wrap .footer-widget{margin-bottom: 30px;} .footer-layout3 .footer-wid-wrap .widget_about .about-text{color: #ffffff; letter-spacing: 0; margin-bottom: 25px;} .footer-layout3 .footer-wid-wrap .widget_about .action-box .icon span{border: 2px solid #0046e2; padding: 3px; display: inline-block; margin-right: 15px; border-radius: 50%;} .footer-layout3 .footer-wid-wrap .widget_about .action-box .icon span i{display: inline-block; width: 35px; height: 35px; line-height: 35px; background-color: #0046e2; text-align: center; color: #ffffff; font-size: 12px; border-radius: 50%;} .footer-layout3 .footer-wid-wrap .widget_about .action-box .content span{color: #ffffff; font-size: 14px; text-transform: capitalize; display: inline-block; line-height: 1;} .footer-layout3 .footer-wid-wrap .widget_about .action-box .content .text{font-size: 20px; font-weight: 600; color: #ffffff; margin-bottom: 0; line-height: 1;} .footer-layout3 .footer-wid-wrap .widget_about .action-box .content .text a{line-height: inherit;} .footer-layout3 .footer-wid-wrap .widget-links{padding-left: 30px;} .footer-layout3 .footer-wid-wrap .widget-links ul li{margin-bottom: 2px;} .footer-layout3 .footer-wid-wrap .widget-links ul li:last-child{margin-bottom: 0;} .footer-layout3 .footer-wid-wrap .widget-links ul li a{color: #ffffff; font-size: 16px;} .footer-layout3 .footer-wid-wrap .widget-links ul li a:before{content: '\f058'; font-family: "Font Awesome 5 Pro"; margin-right: 10px; position: relative; font-weight: 300;} .footer-layout3 .footer-wid-wrap .widget_recent_entries .blog{display: flex; align-items: center; margin-bottom: 20px;} .footer-layout3 .footer-wid-wrap .widget_recent_entries .blog:last-child{margin-bottom: 0;} .footer-layout3 .footer-wid-wrap .widget_recent_entries .blog .blog-img{width: 65px; height: 65px; margin-right: 15px;} .footer-layout3 .footer-wid-wrap .widget_recent_entries .blog .blog-img img{width: 100%; height: 100%;} .footer-layout3 .footer-wid-wrap .widget_recent_entries .blog .blog-content{width: calc(100% - 80px);} .footer-layout3 .footer-wid-wrap .widget_recent_entries .blog .blog-content .blog-title{font-size: 16px; color: #ffffff; font-weight: 700; display: block; margin-bottom: 3px; text-transform: none;} .footer-layout3 .footer-wid-wrap .widget_recent_entries .blog .blog-content span{color: #ffffff; font-size: 12px; display: block;} .footer-layout3 .footer-wid-wrap .widget-newsletter .text{color: #ffffff; line-height: 24px; letter-spacing: 0; margin-bottom: 25px;} .footer-layout3 .footer-wid-wrap .widget-newsletter .form-group{position: relative; margin-bottom: 20px; border: 1px solid rgba(255, 255, 255, 0.15); transform: skewX(-10deg);} .footer-layout3 .footer-wid-wrap .widget-newsletter .form-group input{background-color: transparent; width: 100%; padding-left: 20px; font-size: 14px; color: #ffffff; font-weight: 300; border: none; transform: skewX(10deg);} .footer-layout3 .footer-wid-wrap .widget-newsletter .form-group i{position: absolute; top: 50%; color: #ffffff; right: 20px; font-size: 14px; transform: translateY(-55%) skewX(10deg);} .footer-layout3 .copyright-area{position: relative;} .footer-layout3 .copyright-area .copyright-logo{position: relative; top: -10px;} .footer-layout3 .copyright-area:before{content: ''; position: absolute; left: 0; bottom: 0; top: -20px; width: 100%; background-color: #ffffff; max-width: 585px; clip-path: polygon(100% 0%, 93% 50%, 100% 100%, 0 100%, 0 50%, 0 0%);} .footer-layout3 .copyright-area .inner-wrapper{border-top: 1px solid rgba(255, 255, 255, 0.2); padding: 29px 0;} .footer-layout3 .copyright-area .copyright .text{color: #ffffff; margin-bottom: 0; font-size: 16px;} .footer-layout3 .copyright-area .social-links ul li{display: inline-block; margin-right: 6px;} .footer-layout3 .copyright-area .social-links ul li:last-child{margin-right: 0;} .footer-layout3 .copyright-area .social-links ul li a{display: inline-block; width: 45px; height: 45px; line-height: 45px; background-color: #ffffff; text-align: center; color: #0046e2; line-height: 45px; font-size: 14px; border-radius: 50%;} .footer-layout3 .copyright-area .social-links ul li a:hover{background-color: #0046e2; color: #ffffff;} /*------------------- 6.38. Shop -------------------*/ .vs-product-layout1 .product-sort-bar{display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;} .vs-product-layout1 .product-sort-bar .sort-box{width: 210px;} .vs-product-layout1 .product-sort-bar .bar-title{font-size: 16px; font-family: "Roboto", sans-serif; font-weight: 500; margin-bottom: 0; color: #01133c; letter-spacing: 0;} .vs-product-layout1 .product-sort-bar .sort-bar-left, .vs-product-layout1 .product-sort-bar .sort-bar-right{margin-bottom: 20px;} .vs-product-layout1 .vs-product{margin-bottom: 30px; border: 1px solid #eee; position: relative;} .vs-product-layout1 .vs-product .product-header{position: relative; overflow: hidden;} .vs-product-layout1 .vs-product .product-header .slick-arrow{top: 50%; left: -50px; opacity: 0; visibility: hidden; z-index: 2; width: 35px; height: 35px; font-size: 14px; line-height: 35px; transform: translateY(-50%); transition: all ease 0.4s;} .vs-product-layout1 .vs-product .product-header .slick-arrow:after{display: none;} .vs-product-layout1 .vs-product .product-header .slick-arrow:hover{background-color: #0046e2; color: #fff;} .vs-product-layout1 .vs-product .product-header .slick-arrow.slick-next{left: auto; right: -50px;} .vs-product-layout1 .vs-product .product-header ul.slick-dots{position: absolute; right: 20px; top: 20px; z-index: 3; line-height: 0; margin: 0; padding: 0;} .vs-product-layout1 .vs-product .product-header ul.slick-dots li{display: inline-block; margin-right: 7px; line-height: 0;} .vs-product-layout1 .vs-product .product-header ul.slick-dots li.slick-active button{width: 15px;} .vs-product-layout1 .vs-product .product-header ul.slick-dots li button{font-size: 0; border: none; background-color: #0046e2; line-height: 0; padding: 0; width: 9px; height: 9px;} .vs-product-layout1 .vs-product .product-header:after, .vs-product-layout1 .vs-product .product-header:before{content: ''; position: absolute; left: 0; top: 0; width: 0%; height: 100%; background-color: rgba(0, 0, 0, 0.15); z-index: 1; transition: all ease 0.4s;} .vs-product-layout1 .vs-product .product-header:after{left: auto; right: 0;} .vs-product-layout1 .vs-product .product-img{overflow: hidden;} .vs-product-layout1 .vs-product .product-img img{width: 100%; height: 320px;transform: scale(1.001); transition: all ease 0.4s;} .vs-product-layout1 .vs-product .product-body{padding: 20px;} .vs-product-layout1 .vs-product .discount{background-color: #0046e2; color: #ffffff; display: inline-block; line-height: 1; padding: 7px 10px; font-size: 14px; z-index: 2; border-radius: 3px; position: absolute; left: 20px; top: 20px;} .vs-product-layout1 .vs-product .action-buttons{position: absolute; left: 50%; bottom: -50px; z-index: 3; transform: translateX(-50%); transition: all ease 0.4s; opacity: 0; visibility: hidden;} .vs-product-layout1 .vs-product .action-buttons a{display: inline-block; width: 40px; height: 40px; margin-right: 7px; background-color: #0046e2; color: #fff; font-size: 14px; line-height: 40px; text-align: center;} .vs-product-layout1 .vs-product .action-buttons a:hover{background-color: #fff; color: #0046e2;} .vs-product-layout1 .vs-product .action-buttons a:last-child{margin-right: 0;} .vs-product-layout1 .vs-product .price{color: #01133c; font-weight: 700; margin-bottom: 5px;} .vs-product-layout1 .vs-product .price del{color: #696e78; font-size: 14px; margin-right: 5px;} .vs-product-layout1 .vs-product .product-title{font-size: 22px; text-transform: none; margin-bottom: 5px; letter-spacing: 0; line-height: 1;} .vs-product-layout1 .vs-product .rating span{margin-right: 0; font-size: 14px;} .vs-product-layout1 .vs-product .rating span i{color: #ffd200; font-size: 14px;} .vs-product-layout1 .vs-product:hover .product-header .slick-arrow{left: 15px; opacity: 1; visibility: visible;} .vs-product-layout1 .vs-product:hover .product-header .slick-arrow.slick-next{left: auto; right: 15px;} .vs-product-layout1 .vs-product:hover .product-header:after, .vs-product-layout1 .vs-product:hover .product-header:before{width: 50%;} .vs-product-layout1 .vs-product:hover .product-img img{transform: scale(1.05);} .vs-product-layout1 .vs-product:hover .action-buttons{opacity: 1; visibility: visible; bottom: 20px; transition-delay: 0.4s;} .vs-product-layout1 .widget{border: 1px solid #eee;} @media (max-width: 1500px){.vs-product-layout1 .vs-product .product-title{font-size: 20px;} .vs-product-layout1 .vs-product .price{margin-bottom: 0;}} @media (max-width: 1199px){.vs-product-layout1 .vs-product .product-title{font-size: 18px;} .vs-product-layout1 .vs-product .rating span i{font-size: 12px;}} @media (max-width: 600px){.vs-product-layout1 .product-sort-bar{display: block; text-align: center;} .vs-product-layout1 .product-sort-bar .bar-title{line-height: 1;} .vs-product-layout1 .product-sort-bar .sort-box{width: 210px; margin: 0 auto;}} /*------------------- 6.39. Shop Details -------------------*/ @media (min-width: 1200px){.meizuo {-ms-flex: 0 0 60%;flex: 0 0 60%;max-width: 60%;}} @media (min-width: 1200px){.meiyou {-ms-flex: 0 0 40%;flex: 0 0 40%;max-width: 40%;}} .product-details-layout1 .widget{border: 1px solid #eee;} .product-details-layout1 .slick-slide img, .product-details-layout1 .product-img img{width: 100%;height: 500px;} .product-details-layout1 .product-details-img{overflow: hidden; position: relative;} .product-details-layout1 .product-details-img .slick-arrow{top: 50%; left: -50px; opacity: 0; visibility: hidden; z-index: 2; width: 35px; height: 35px; font-size: 14px; line-height: 35px; transform: translateY(-50%); transition: all ease 0.4s; background-color: #0046e2; color: #fff;} .product-details-layout1 .product-details-img .slick-arrow:after{display: none;} .product-details-layout1 .product-details-img .slick-arrow:hover{background-color: #fff; color: #0046e2;} .product-details-layout1 .product-details-img .slick-arrow.slick-next{left: auto; right: -50px;} .product-details-layout1 .product-details-img ul.slick-dots{position: absolute; right: 20px; top: 20px; z-index: 3; line-height: 0; margin: 0; padding: 0;} .product-details-layout1 .product-details-img ul.slick-dots li{display: inline-block; margin-right: 7px; line-height: 0;} .product-details-layout1 .product-details-img ul.slick-dots li.slick-active button{width: 15px;} .product-details-layout1 .product-details-img ul.slick-dots li button{font-size: 0; border: none; background-color: #0046e2; line-height: 0; padding: 0; width: 9px; height: 9px;} .product-details-layout1 .product-details-img:hover .slick-arrow{left: 20px; opacity: 1; visibility: visible;} .product-details-layout1 .product-details-img:hover .slick-arrow.slick-next{left: auto; right: 20px;} .product-details-layout1 .product-details-thumb{margin-left: -5px; margin-right: -5px; margin-top: 10px;} .product-details-layout1 .product-details-thumb .slick-slide{padding-left: 5px; padding-right: 5px; cursor: pointer;} .product-details-layout1 .product-details-thumb .slick-slide img{padding: 0; border: 1px solid transparent; transition: all ease 0.4s; width: 100%;height: 100px;} .product-details-layout1 .product-details-thumb .slick-current img{padding: 1px; border-color: #0046e2;} .product-details-layout1 .product-header{position: relative;} .product-details-layout1 .discount{background-color: #0046e2; color: #ffffff; display: inline-block; line-height: 1; padding: 7px 10px; font-size: 14px; z-index: 2; border-radius: 3px; position: absolute; left: 20px; top: 20px;} .product-details-layout1 .product-title{font-size: 26px; letter-spacing: 0; margin-bottom: 15px; font-family: "Roboto", sans-serif; font-weight: 500; line-height: 1;} .product-details-layout1 .price{color: #01133c; font-weight: 700; margin-bottom: 8px; font-size: 22px;} .product-details-layout1 .price del{color: #696e78; font-size: 18px; margin-right: 5px;} .product-details-layout1 .rating{margin-bottom: 20px;} .product-details-layout1 .rating span{margin-right: 0; font-size: 14px;} .product-details-layout1 .rating span i{color: #ffd200; font-size: 14px;} .product-details-layout1 .product-features{padding-bottom: 27px; margin-bottom: 25px; border-bottom: 1px solid #eee;} .product-details-layout1 .product-features ul li{margin-bottom: 5px;} .product-details-layout1 .product-features ul li i{color: #0046e2; margin-right: 10px;} .product-details-layout1 .product-features ul li:last-child{margin-bottom: 0;} .product-details-layout1 .text{color: #494f5b; margin-bottom: 25px;} .product-details-layout1 .action-buttons{display: flex; padding-bottom: 30px;} .product-details-layout1 .action-buttons > a{box-shadow: none; max-width: 50px;} .product-details-layout1 .action-buttons .cart-btn{max-width: 140px;} .product-details-layout1 .quantity-box{display: flex; margin-right: 15px;} .product-details-layout1 .quantity-box input, .product-details-layout1 .quantity-box button{width: 50px; height: 50px; text-align: center; border: none; font-size: 16px; line-height: 50px; background-color: rgba(0, 70, 226, 0.1); color: #01133c;} .product-details-layout1 .quantity-box input{background-color: #0046e2; color: #fff;} .product-details-layout1 .product-body .inner-title{font-size: 16px; letter-spacing: 0; font-weight: 600; margin-bottom: 0;} .product-details-layout1 .product-categories{padding: 10px 0; border-top: 1px solid #eee;} .product-details-layout1 .product-categories .inner-title{display: inline-block; margin-right: 7px; vertical-align: middle;} .product-details-layout1 .product-categories ul{margin: 0; padding: 0; display: inline-block;} .product-details-layout1 .product-categories ul li{list-style: none; display: inline-block; margin-right: 5px;} .product-details-layout1 .product-categories ul li:last-child{margin-right: 0;} .product-details-layout1 .product-share{padding: 10px 0; border-top: 1px solid #eee;} .product-details-layout1 .product-share .inner-title{display: inline-block; margin-right: 7px; vertical-align: middle;} .product-details-layout1 .product-share ul{display: inline-block; margin: 0; padding: 0;} .product-details-layout1 .product-share ul li{list-style: none; display: inline-block; margin-right: 10px;} .product-details-layout1 .product-share ul li:last-child{margin-right: 0;} .product-details-layout1 .product-tab-nav{margin: 0; padding: 0; margin-bottom: 25px; border-bottom: 1px solid #eee;} .product-details-layout1 .product-tab-nav li{list-style-type: none; display: inline-block; margin-right: 30px;} .product-details-layout1 .product-tab-nav li:last-child{margin-right: 0;} .product-details-layout1 .product-tab-nav li a{display: inline-block; font-size: 20px; font-weight: 500; text-transform: capitalize; color: #01133c; padding-bottom: 20px; position: relative;} .product-details-layout1 .product-tab-nav li a:before{content: ''; position: absolute; left: 0; bottom: -1px; width: 0; height: 1px; background-color: #0046e2; transition: all ease 0.4s;} .product-details-layout1 .product-tab-nav li a.active{color: #0046e2;} .product-details-layout1 .product-tab-nav li a.active:before{width: 100%;} .product-details-layout1 .vs-product-review{margin-bottom: 40px;} .product-details-layout1 .vs-product-review .single-review{display: flex; align-items: center; border-bottom: 1px solid #eee; padding-bottom: 25px; margin-bottom: 25px;} .product-details-layout1 .vs-product-review .single-review:last-of-type, .product-details-layout1 .vs-product-review .single-review:last-child{margin-bottom: 0; border-bottom: none; padding-bottom: 0;} .product-details-layout1 .vs-product-review .single-review .author-img{width: 100px; height: 100px; margin-right: 20px; overflow: hidden;} .product-details-layout1 .vs-product-review .single-review .author-img img{max-width: 110%; height: 100%;} .product-details-layout1 .vs-product-review .single-review .review-content{width: calc(100% - 150px);} .product-details-layout1 .vs-product-review .single-review .review-content .meta{font-size: 12px; font-weight: 700; color: #0046e2; display: inline-block;} .product-details-layout1 .vs-product-review .single-review .review-content .name{font-size: 18px; margin-bottom: 0; letter-spacing: 0; vertical-align: middle;} .product-details-layout1 .vs-product-review .single-review .review-content .name .rating{margin-left: 5px; font-size: 10px; color: #fec624; vertical-align: middle;} .product-details-layout1 .vs-product-review .single-review .review-content .text{margin-bottom: 0;} .product-details-layout1 .review-form{padding-top: 50px;} .product-details-layout1 .review-form .form-group{margin-bottom: 30px;} .product-details-layout1 .review-form .form-title{font-size: 22px; font-weight: 500; letter-spacing: 0.02em; position: relative; border-bottom: 1px solid #eee; padding-bottom: 15px; margin-bottom: 35px;} .product-details-layout1 .review-form .form-title:before{content: ''; position: absolute; left: 0; bottom: 0; width: 80px; height: 1px; background-color: #0046e2;} .product-details-layout1 .review-form .vs-rating-input i{position: static; font-size: 16px; transform: none; cursor: pointer;} .product-details-layout1 .review-form .vs-rating-input .active i{color: #fec624;} @media (max-width: 768px){.product-details-layout1 .product-title{font-size: 20px; margin-bottom: 10px;} .product-details-layout1 .action-buttons{display: block;} .product-details-layout1 .quantity-box{margin-bottom: 15px;} .product-details-layout1 .product-tab-nav li a{font-size: 16px; padding-bottom: 15px;} .product-details-layout1 .vs-product-review .single-review{display: block;} .product-details-layout1 .vs-product-review .single-review .author-img{margin-right: 0; margin-bottom: 15px;} .product-details-layout1 .vs-product-review .single-review .review-content{width: calc(100%);}} /*------------------- 6.40. Inner Form Design -------------------*/ .inner-form-wrap .form-title{text-align: center; font-weight: 500; font-family: "Roboto", sans-serif; letter-spacing: 0; font-size: 26px;} .inner-form-wrap h2.form-title{margin-top: -10px;} .inner-form-wrap .form-group{margin-bottom: 20px;} .inner-form-wrap form{border: 1px solid #eee; padding: 40px;} .inner-form-wrap a{display: inline-block;} .inner-form-wrap button{display: block; margin-bottom: 20px; margin-left: auto; margin-right: auto !important; box-shadow: none;} /*------------------- 6.41. Shopping Cart -------------------*/ .vs-cart-wrapper .cart-table{text-align: center;} .vs-cart-wrapper .cart-table img{max-width: 120px; border: 1px solid #eee;} .vs-cart-wrapper .cart-table td{vertical-align: middle;} .vs-cart-wrapper .cart-table .quantity-box{display: flex; justify-content: center;} .vs-cart-wrapper .cart-table .quantity-box input, .vs-cart-wrapper .cart-table .quantity-box button{width: 50px; height: 50px; text-align: center; border: none; font-size: 16px; line-height: 50px; background-color: rgba(0, 70, 226, 0.1); color: #01133c;} .vs-cart-wrapper .cart-table .quantity-box input{background-color: #0046e2; color: #fff;} .vs-cart-wrapper .cart-table .cart-removeproduct{border: none; color: #01133c; font-size: 20px; background-color: transparent; padding: 0; display: inline-block;} .vs-cart-wrapper .cart-table .actions{text-align: right; vertical-align: middle; padding: 0.7rem 1rem; padding-top: 1rem;} .vs-cart-wrapper .cart-table .actions form{float: left; margin-bottom: 0;} .vs-cart-wrapper .vs-cart-summary{text-align: right;} .vs-cart-wrapper .vs-cart-summary .summary-title{letter-spacing: 0; font-size: 26px; margin-bottom: 10px; text-align: right; font-weight: 700;} .vs-cart-wrapper .vs-cart-summary .table-totals tfoot tr, .vs-cart-wrapper .vs-cart-summary .table-totals tbody tr{border: none;} .vs-cart-wrapper .vs-cart-summary .table-totals tfoot tr td, .vs-cart-wrapper .vs-cart-summary .table-totals tbody tr td{padding: 0; border: none; padding-bottom: 10px; text-align: right;} .vs-cart-wrapper .vs-cart-summary .table-totals tfoot tr td{font-weight: 700;} .vs-cart-wrapper .vs-cart-coupon{display: flex; flex-wrap: wrap; margin-bottom: 30px;} .vs-cart-wrapper .vs-cart-coupon label{font-size: 22px; font-weight: 500; margin-top: -10px; color: #01133c; display: block;} .vs-cart-wrapper .vs-cart-coupon input{border-radius: 0; height: 50px; padding-left: 20px; font-size: 14px; color: #01133c; display: inline-block; width: calc(100% - 120px); border-right: none;} .vs-cart-wrapper .vs-cart-coupon input::placeholder{color: #01133c;} .vs-cart-wrapper .vs-cart-coupon button{width: 120px; box-shadow: none;} @media (max-width: 992px){.vs-cart-wrapper .cart-table .actions{text-align: center;} .vs-cart-wrapper .cart-table .actions form{float: none; margin-bottom: 20px;} .vs-cart-wrapper .cart-table img{max-width: 70px;} .vs-cart-wrapper .cart-table td{font-size: 14px;} .vs-cart-wrapper .cart-table .cart-removeproduct{font-size: 14px;} .vs-cart-wrapper .cart-table .quantity-box input, .vs-cart-wrapper .cart-table .quantity-box button{width: 35px; height: 35px; line-height: 34px; font-size: 12px;}} @media (max-width: 786px){.vs-cart-wrapper{text-align: center;} .vs-cart-wrapper .primary-btn{display: block; margin: 0 auto; margin-bottom: 20px;} .vs-cart-wrapper .actions form{margin-bottom: 0;} .vs-cart-wrapper .cart-table table{min-width: 700px;} .vs-cart-wrapper .vs-cart-summary{text-align: center;} .vs-cart-wrapper .vs-cart-summary .summary-title{font-size: 22px; text-align: center;} .vs-cart-wrapper .vs-cart-summary .table-totals{text-align: center;} .vs-cart-wrapper .vs-cart-summary .table-totals tfoot tr td, .vs-cart-wrapper .vs-cart-summary .table-totals tbody tr td{text-align: left;} .vs-cart-wrapper .vs-cart-summary .table-totals tfoot tr td + td, .vs-cart-wrapper .vs-cart-summary .table-totals tbody tr td + td{text-align: right;}} /*------------------- 6.42. Checkout -------------------*/ .vs-checkout-area .vs-cart-coupon label{font-size: 24px; line-height: 1; margin-bottom: 20px; text-transform: none; color: #01133c; font-weight: 600;} .vs-checkout-area .vs-billing-differentAddress{display: none;} .vs-checkout-area table td + td, .vs-checkout-area table th + th{text-align: right;} .vs-checkout-area .vs-orderinfo-wrap{background-color: #f2f4f9; padding: 30px; padding-top: 10px;} .vs-checkout-area .vs-orderinfo-wrap table.checkout-ordertable td, .vs-checkout-area .vs-orderinfo-wrap table.checkout-ordertable th{padding: 0; padding-bottom: 10px; padding-top: 10px;} .vs-checkout-area .vs-orderinfo-wrap table.checkout-ordertable tr{border-bottom: 1px solid rgba(0, 0, 0, 0.1);} .vs-checkout-area .vs-orderinfo-wrap table.checkout-ordertable thead th{font-size: 18px;} .vs-checkout-area .vs-orderinfo-wrap table.checkout-ordertable tfoot td{font-weight: 700;} .vs-checkout-area .vs-orderinfo-wrap table.checkout-ordertable tfoot tr:last-child{border-bottom: none;} .vs-checkout-area .vs-orderinfo-wrap table.checkout-ordertable tfoot tr:last-child td{font-size: 22px;} .vs-checkout-area .vs-orderinfo-wrap .vs-checkout-payment .form-group{margin-bottom: 10px;} .vs-checkout-area .vs-orderinfo-wrap .vs-checkout-submit .text{margin-bottom: 10px;} @media (max-width: 768px){.vs-checkout-area .form-title{font-size: 22px; margin-bottom: 10px;} .vs-checkout-area .vs-orderinfo-wrap{padding: 20px; padding-top: 10px;} .vs-checkout-area .vs-checkout-payment{font-size: 14px;} .vs-checkout-area .vs-checkout-payment .title{font-size: 20px; margin-bottom: 10px;} .vs-checkout-area .vs-orderinfo-wrap table.checkout-ordertable td, .vs-checkout-area .vs-orderinfo-wrap table.checkout-ordertable th{padding: 0; padding-bottom: 10px; padding-top: 10px; font-size: 12px;} .vs-checkout-area .vs-orderinfo-wrap table.checkout-ordertable table.checkout-ordertable thead th{font-size: 15px;} .vs-checkout-area .vs-orderinfo-wrap table.checkout-ordertable tfoot tr:last-child td{font-size: 16px;}} /*================================= 07. Helper Classes ==================================*/ /*------------------- 7.1. Background -------------------*/ .primary-bg1{background-color: #0046e2;} .primary-bg2{background-color: #ef0f3a;} .secondary-bg1{background-color: #f2f4f9;} .secondary-bg2{background-color: #f7f7f7;} .background-image{background-size: 100% 100%; background-position: center; background-repeat: no-repeat;} .background-image.bg-cover{background-size: cover;} .shape-bg-100, .service-layout3 .inner-wrapper:before, .service-layout4, .work-process-layout1:before, .work-process-layout1.wrap-layout2:after, .pricing-table-layout4, .testomonial-layout5, .contact-form-layout1 .contact-form-slider:before, .price-plan-layout1 .price-action-box, .price-plan-layout1 .price-action-box .shape1, .project-layout1:before{background-size: 100% 100%; background-repeat: no-repeat; background-position: center center;} .shape-bg-cover{background-size: cover; background-repeat: no-repeat; background-position: center center;} .shape-bg{position: absolute; width: auto; height: auto;} .shape-bg.shape-br{bottom: 0; right: 0;} .bg-shape-none .shape-bg, .bg-shape-none:before, .bg-shape-none:after{display: none !important;} .no-shadow{box-shadow: none;} /*------------------- 7.2 Padding -------------------*/ .pt-5{padding-top: 5px;} .pt-10{padding-top: 10px;} .pt-15{padding-top: 15px;} .pt-20{padding-top: 20px;} .pt-25{padding-top: 25px;} .pt-30{padding-top: 30px;} .pt-35{padding-top: 35px;} .pt-40{padding-top: 40px;} .pt-45{padding-top: 45px;} .pt-50{padding-top: 50px;} .pt-55{padding-top: 55px;} .pt-60{padding-top: 60px;} .pt-65{padding-top: 65px;} .pt-70{padding-top: 70px;} .pt-75{padding-top: 75px;} .pt-80{padding-top: 80px;} .pt-85{padding-top: 85px;} .pt-90{padding-top: 90px;} .pt-95{padding-top: 95px;} .pt-100{padding-top: 100px;} .pt-105{padding-top: 105px;} .pt-110{padding-top: 110px;} .pt-115{padding-top: 115px;} .pt-120{padding-top: 120px;} .pt-125{padding-top: 125px;} .pt-130{padding-top: 130px;} .pt-135{padding-top: 135px;} .pt-140{padding-top: 140px;} .pt-145{padding-top: 145px;} .pt-150{padding-top: 150px;} .pt-155{padding-top: 155px;} .pt-160{padding-top: 160px;} .pt-165{padding-top: 165px;} .pt-170{padding-top: 170px;} .pt-175{padding-top: 175px;} .pt-180{padding-top: 180px;} .pt-185{padding-top: 185px;} .pt-190{padding-top: 190px;} .pt-195{padding-top: 195px;} .pt-200{padding-top: 200px;} /*-- Padding Bottom --*/ .pb-5{padding-bottom: 5px;} .pb-10{padding-bottom: 10px;} .pb-15{padding-bottom: 15px;} .pb-20{padding-bottom: 20px;} .pb-25{padding-bottom: 25px;} .pb-30{padding-bottom: 30px;} .pb-35{padding-bottom: 35px;} .pb-40{padding-bottom: 40px;} .pb-45{padding-bottom: 45px;} .pb-50{padding-bottom: 50px;} .pb-55{padding-bottom: 55px;} .pb-60{padding-bottom: 60px;} .pb-65{padding-bottom: 65px;} .pb-70{padding-bottom: 70px;} .pb-75{padding-bottom: 75px;} .pb-80{padding-bottom: 80px;} .pb-85{padding-bottom: 85px;} .pb-90{padding-bottom: 90px;} .pb-95{padding-bottom: 95px;} .pb-100{padding-bottom: 100px;} .pb-105{padding-bottom: 105px;} .pb-110{padding-bottom: 110px;} .pb-115{padding-bottom: 115px;} .pb-120{padding-bottom: 120px;} .pb-125{padding-bottom: 125px;} .pb-130{padding-bottom: 130px;} .pb-135{padding-bottom: 135px;} .pb-140{padding-bottom: 140px;} .pb-145{padding-bottom: 145px;} .pb-150{padding-bottom: 150px;} .pb-155{padding-bottom: 155px;} .pb-160{padding-bottom: 160px;} .pb-165{padding-bottom: 165px;} .pb-170{padding-bottom: 170px;} .pb-175{padding-bottom: 175px;} .pb-180{padding-bottom: 180px;} .pb-185{padding-bottom: 185px;} .pb-190{padding-bottom: 190px;} .pb-195{padding-bottom: 195px;} .pb-200{padding-bottom: 200px;} /*------------------- 7.3 Margin -------------------*/ /*-- Margin Top --*/ .mt-5{margin-top: 5px;} .mt-10{margin-top: 10px;} .mt-15{margin-top: 15px;} .mt-20{margin-top: 20px;} .mt-25{margin-top: 25px;} .mt-30{margin-top: 30px;} .mt-35{margin-top: 35px;} .mt-40{margin-top: 40px;} .mt-45{margin-top: 45px;} .mt-50{margin-top: 50px;} .mt-55{margin-top: 55px;} .mt-60{margin-top: 60px;} .mt-65{margin-top: 65px;} .mt-70{margin-top: 70px;} .mt-75{margin-top: 75px;} .mt-80{margin-top: 80px;} .mt-85{margin-top: 85px;} .mt-90{margin-top: 90px;} .mt-95{margin-top: 95px;} .mt-100{margin-top: 100px;} .mt-105{margin-top: 105px;} .mt-110{margin-top: 110px;} .mt-115{margin-top: 115px;} .mt-120{margin-top: 120px;} .mt-125{margin-top: 125px;} .mt-130{margin-top: 130px;} .mt-135{margin-top: 135px;} .mt-140{margin-top: 140px;} .mt-145{margin-top: 145px;} .mt-150{margin-top: 150px;} .mt-155{margin-top: 155px;} .mt-160{margin-top: 160px;} .mt-165{margin-top: 165px;} .mt-170{margin-top: 170px;} .mt-175{margin-top: 175px;} .mt-180{margin-top: 180px;} .mt-185{margin-top: 185px;} .mt-190{margin-top: 190px;} .mt-195{margin-top: 195px;} .mt-200{margin-top: 200px;} /*-- Margin Bottom --*/ .mb-5{margin-bottom: 5px;} .mb-10{margin-bottom: 10px;} .mb-15{margin-bottom: 15px;} .mb-20{margin-bottom: 20px;} .mb-25{margin-bottom: 25px;} .mb-30{margin-bottom: 30px;} .mb-35{margin-bottom: 35px;} .mb-40{margin-bottom: 40px;} .mb-45{margin-bottom: 45px;} .mb-50{margin-bottom: 50px;} .mb-55{margin-bottom: 55px;} .mb-60{margin-bottom: 60px;} .mb-65{margin-bottom: 65px;} .mb-70{margin-bottom: 70px;} .mb-75{margin-bottom: 75px;} .mb-80{margin-bottom: 80px;} .mb-85{margin-bottom: 85px;} .mb-90{margin-bottom: 90px;} .mb-95{margin-bottom: 95px;} .mb-100{margin-bottom: 100px;} .mb-105{margin-bottom: 105px;} .mb-110{margin-bottom: 110px;} .mb-115{margin-bottom: 115px;} .mb-120{margin-bottom: 120px;} .mb-125{margin-bottom: 125px;} .mb-130{margin-bottom: 130px;} .mb-135{margin-bottom: 135px;} .mb-140{margin-bottom: 140px;} .mb-145{margin-bottom: 145px;} .mb-150{margin-bottom: 150px;} .mb-155{margin-bottom: 155px;} .mb-160{margin-bottom: 160px;} .mb-165{margin-bottom: 165px;} .mb-170{margin-bottom: 170px;} .mb-175{margin-bottom: 175px;} .mb-180{margin-bottom: 180px;} .mb-185{margin-bottom: 185px;} .mb-190{margin-bottom: 190px;} .mb-195{margin-bottom: 195px;} .mb-200{margin-bottom: 200px;}