/*------------------------------------------------------------------ [Master Stylesheet] Theme Name: Mikago - Logistics & Transportation HTML Template Version: 1.0.0 Author: blue_design URL: http://themeforest.net/user/blue_design -------------------------------------------------------------------*/ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- #0.1 Theme Reset Style #0.2 Global Elements #0.3 header #0.4 hero-slider #0.5 footer #0.6 features-section #0.7 about-section #0.8 services-section #0.9 track-contact #1.0 faq-achievement-section #1.1 testimonials-section #1.2 fun-fact-section #1.3 portfolio-section #1.4 partners-section #1.5 blog-section #1.5 cta-section-s2 -------------------------------------------------------------- #home style 2 -------------------------------------------------------------- #2.1 features-section-s2 #2.2 about-section-s2 #2.3 services-section-s2 #2.4 track-contact-s2 #2.5 testimonials-section-s2 -------------------------------------------------------------- #home style 3 -------------------------------------------------------------- #3.1 features-section-s3 -------------------------------------------------------------- #about page -------------------------------------------------------------- #4.1 mission-vision-section -------------------------------------------------------------- #contact page -------------------------------------------------------------- #5.1 contact-pg-section -------------------------------------------------------------- #project single page -------------------------------------------------------------- #6.1 project-sigle-section -------------------------------------------------------------- #service single page -------------------------------------------------------------- #7.1 service-single-section -------------------------------------------------------------- #blog page -------------------------------------------------------------- #8.1 blog-pg-section -------------------------------------------------------------- #blog single page -------------------------------------------------------------- #9.1 blog-single-section -------------------------------------------------------------- #404 page -------------------------------------------------------------- #10.1 error-404-section ----------------------------------------------------------------*/ /*--------------------------- Fonts ----------------------------*/ @import url("https://fonts.googleapis.com/css?family=Muli:400,400i,600,700,800&display=swap"); /*-------------------------------------------------------------- #0.1 Theme Reset Style --------------------------------------------------------------*/ html { font-size: 16px; } body { font-family: Helvetica, 'Microsoft Yahei', '微软雅黑', Arial, sans-serif; background-color: #fff; font-size: 16px; font-size: 1rem; -webkit-font-smoothing: antialiased; overflow-x: hidden; margin: 0; padding: 0; } @media (max-width: 767px) { body { font-size: 14px; } } p { color: #2a3e5d; line-height: 2em; } h1, h2, h3, h4, h5, h6 { font-weight: bold; color: #102541; } ul { list-style-type: none; padding-left: 0; margin: 0; } a { text-decoration: none; color: #011628; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; -ms-transition: all 0.2s; transition: all 0.2s; } a:hover { text-decoration: none; } img { max-width: 100%; } @font-face { ß src: url("/fonts/Flaticon.woff2") format("woff2"), url("/fonts/themify.woff") format("woff"); } /*-------------------------------------------------------------- #0.2 Global Elements --------------------------------------------------------------*/ .page-wrapper { position: relative; overflow: hidden; } .wow { visibility: hidden; } .fi:before { margin: 0; } .section-padding { padding: 50px 0; } @media (max-width: 991px) { .section-padding { padding: 90px 0; } } @media (max-width: 767px) { .section-padding { padding: 80px 0; } } #header{z-index: 99;position: fixed} /*** contact form error handling ***/ .contact-validation-active .error-handling-messages { width: 100% !important; margin-top: 15px !important; } .contact-validation-active label.error { color: red; font-size: 0.875rem; font-weight: normal; margin: 5px 0 0 0; text-align: left; display: block; } .contact-validation-active #loader { display: none; margin-top: 10px; } .contact-validation-active #loader i { font-size: 30px; font-size: 1.875rem; color: #1481ff; display: inline-block; -webkit-animation: rotating linear 2s infinite; animation: rotating linear 2s infinite; } .contact-validation-active #success, .contact-validation-active #error { width: 100%; color: #fff; padding: 5px 10px; font-size: 16px; text-align: center; display: none; } @media (max-width: 767px) { .contact-validation-active #success, .contact-validation-active #error { font-size: 15px; } } .contact-validation-active #success { background-color: #009a00; border-left: 5px solid green; margin-bottom: 5px; } .contact-validation-active #error { background-color: #ff1a1a; border-left: 5px solid red; } @-webkit-keyframes rotating { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotating { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .rotating { -webkit-animation: rotating 5s alternate infinite; animation: rotating 5s alternate infinite; } /** for popup image ***/ .mfp-wrap { background-color: rgba(0, 0, 0, 0.9); z-index: 99999; } .mfp-with-zoom .mfp-container, .mfp-with-zoom.mfp-bg { opacity: 0; -webkit-backface-visibility: hidden; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .mfp-with-zoom.mfp-ready .mfp-container { opacity: 1; } .mfp-with-zoom.mfp-ready.mfp-bg { opacity: 0.8; } .mfp-with-zoom.mfp-removing .mfp-container, .mfp-with-zoom.mfp-removing.mfp-bg { opacity: 0; } /*** for fancybox video ***/ .fancybox-overlay { background: rgba(0, 0, 0, 0.9); z-index: 9999 !important; } .fancybox-wrap { z-index: 99999 !important; } .section-title, .section-title-s2, .section-title-s3 { margin-bottom: 30px; } @media (max-width: 767px) { .section-title, .section-title-s2, .section-title-s3 { margin-bottom: 20px; } } .section-title > span, .section-title-s2 > span, .section-title-s3 > span { font-size: 14px; font-size:1.275rem; font-weight: bold; color:#1481ff; text-transform: uppercase; display: block; margin-top: -0.2em; margin-bottom: 0.8rem; } .section-title > span, .section-title-s2 > span, .section-title-s4 > span { font-size: 14px; font-size:1.275rem; text-transform: uppercase; display: block; margin-bottom: 0.5em; margin-top: 0.8rem; } @media (max-width: 767px) { .section-title > span, .section-title-s2 > span, .section-title-s3 > span { font-size: 12px; font-size: 0.75rem; } .section-title > span, .section-title-s2 > span, .section-title-s4 > span { font-size: 12px; font-size: 0.75rem; } } .section-title h2, .section-title-s2 h2, .section-title-s3 h2 { font-size: 36px; font-size: 2.25rem; margin: 0.2em 0 0; } .section-title h2, .section-title-s2 h2, .section-title-s4 h2 { font-size: 36px; font-size: 2.25rem; margin: 0.2em 0 0; } @media (max-width: 991px) { .section-title h2, .section-title-s2 h2, .section-title-s3 h2 { font-size: 30px; font-size: 1.875rem; } .section-title h2, .section-title-s2 h2, .section-title-s4 h2 { font-size: 30px; font-size: 1.875rem; } } @media (max-width: 767px) { .section-title h2, .section-title-s2 h2, .section-title-s3 h2 { font-size: 25px; font-size: 1.5625rem; } } .section-title-s2, .section-title-s3 { margin-bottom: 45px; } @media (max-width: 991px) { .section-title-s2, .section-title-s3 { margin-bottom: 30px; } } .section-title-s3 { text-align: center; } .section-title-s4 { text-align: center; } .theme-btn, .theme-btn-s2, .theme-btn-s3 { background-color: #1481ff; color: #fff; font-weight: 600; padding: 14px 53px 14px 28px; border-radius: 50px; display: inline-block; position: relative; text-transform: capitalize; } @media (max-width: 991px) { .theme-btn, .theme-btn-s2, .theme-btn-s3 { font-size: 14px; font-size: 0.875rem; padding: 13px 22px; } } .theme-btn:after, .theme-btn-s2:after, .theme-btn-s3:after { font-family: "Themify"; content: "\e65d"; position: absolute; right: 28px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } @media (max-width: 991px) { .theme-btn:after, .theme-btn-s2:after, .theme-btn-s3:after { display: none; } } .theme-btn:hover, .theme-btn-s2:hover, .theme-btn-s3:hover, .theme-btn:focus, .theme-btn-s2:focus, .theme-btn-s3:focus, .theme-btn:active, .theme-btn-s2:active, .theme-btn-s3:active { background-color: #005dc8; color: #fff; text-decoration: none; } @media (max-width: 767px) { .theme-btn, .theme-btn-s2, .theme-btn-s3 { padding: 12px 17px; } } .theme-btn-s2, .theme-btn-s3 { padding: 17px 53px 17px 28px; } @media (max-width: 991px) { .theme-btn-s2, .theme-btn-s3 { font-size: 14px; font-size: 0.875rem; padding: 13px 22px; } } @media (max-width: 767px) { .theme-btn-s2, .theme-btn-s3 { font-size: 13px; font-size: 0.8125rem; padding: 12px 17px; } } .theme-btn-s3 { background-color: #1481ff; } .theme-btn-s3:hover, .theme-btn-s3:focus, .theme-btn-s3:active { background-color: #0552af; color: #fff; text-decoration: none; } .hero-video-btn { display: inline-block; font-size: 16px; font-size: 1rem; color: #fff; } .hero-video-btn i { display: inline-block; padding-right: 10px; position: relative; top: 15px; } @media (max-width: 767px) { .hero-video-btn i { top: 12px; } } .hero-video-btn .fi:before { font-size: 50px; font-size: 3.125rem; color: #fff; } @media (max-width: 767px) { .hero-video-btn .fi:before { font-size: 40px; font-size: 2.5rem; } } @media (max-width: 991px) { .hero-video-btn { font-size: 14px; font-size: 0.875rem; } } .hero-video-btn:hover { color: #fff; } .form input, .form textarea, .form select { border-color: #bfbfbf; border-radius: 0; outline: 0; -webkit-box-shadow: none; box-shadow: none; color: #595959; } .form input:focus, .form textarea:focus, .form select:focus { border-color: #1481ff; -webkit-box-shadow: 0 0 5px 0 #fd8149; -moz-box-shadow: 0 0 5px 0 #fd8149; -o-box-shadow: 0 0 5px 0 #fd8149; -ms-box-shadow: 0 0 5px 0 #fd8149; box-shadow: 0 0 5px 0 #fd8149; } .form ::-webkit-input-placeholder { font-style: 14px; font-style: italic; color: #595959; } .form :-moz-placeholder { font-style: 14px; font-style: italic; color: #595959; } .form ::-moz-placeholder { font-style: 14px; font-style: italic; color: #595959; } .form :-ms-input-placeholder { font-style: 14px; font-style: italic; color: #595959; } .form select { font-style: italic; background: url(../images/select-icon.png) no-repeat right center; display: inline-block; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none; cursor: pointer; } .form select::-ms-expand { /* for IE 11 */ display: none; } .social-links { overflow: hidden; } .social-links li { float: left; width: 35px; height: 35px; margin-right: 1px; } .social-links li a { background-color: #fd8149; width: 35px; height: 35px; line-height: 35px; display: block; color: #fff; text-align: center; } .social-links li a:hover { background-color: #1481ff; } .bottom{margin-bottom: 20px;} .page-title { background: url("../images/page-title2.jpg") center center/cover no-repeat local; width: 100%; height: 330px; position: relative; text-align: center; } .page-title1 { background: url("../images/top_banner4.jpg") center center/cover no-repeat local; width: 100%; height: 330px; position: relative; text-align: center; } .page-title2 { background: url("../images/page-title2.jpg") center center/cover no-repeat local; width: 100%; height: 330px; position: relative; text-align: center; } .page-title3 { background: url("../images/page-title3.jpg") center center/cover no-repeat local; width: 100%; height: 330px; position: relative; text-align: center; } .page-title4 { background: url("../images/page-title4.jpg") center center/cover no-repeat local; width: 100%; height: 330px; position: relative; text-align: center; } .page-title5 { background: url("../images/page-title6.jpg") center center/cover no-repeat local; width: 100%; height: 330px; position: relative; text-align: center; } .page-title6 { background: url("../images/page-title6.png") center center/cover no-repeat local; width: 100%; height: 330px; position: relative; text-align: center; } @media (max-width: 991px) { .page-title { height: 300px; } } .page-title .container { height: 100%; display: table; } @media screen and (min-width: 992px) { .page-title .container { padding-top: 100px; } } .page-title .container > .row { vertical-align: middle; display: table-cell; } .page-title h2 { font-size: 55px; font-size: 2.4375rem; font-weight: 900; color: #fff; margin: 0em 0 0.30em; } .page-title p { font-size: 16px; font-size: 1.3rem; /*font-weight: 900;*/ color: #fff; margin: 0.5em 0 0.30em; } @media (max-width: 991px) { .page-title h2 { font-size: 45px; font-size: 2.8125rem; } } @media (max-width: 767px) { .page-title h2 { font-size: 40px; font-size: 2.5rem; } } .preloader { background-color: #fff; width: 100%; height: 100%; position: fixed; z-index: 1000; } .preloader .sk-folding-cube { margin: 20px auto; width: 60px; height: 60px; position: absolute; left: calc(50% - 30px); top: calc(50% - 50px); -webkit-transform: rotateZ(45deg); -ms-transform: rotate(45deg); transform: rotateZ(45deg); } .preloader .sk-folding-cube .sk-cube { float: left; width: 50%; height: 50%; position: relative; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .preloader .sk-folding-cube .sk-cube:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #1481ff; -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both; animation: sk-foldCubeAngle 2.4s infinite linear both; -webkit-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; transform-origin: 100% 100%; } .preloader .sk-folding-cube .sk-cube2 { -webkit-transform: scale(1.1) rotateZ(90deg); -ms-transform: scale(1.1) rotate(90deg); transform: scale(1.1) rotateZ(90deg); } .preloader .sk-folding-cube .sk-cube3 { -webkit-transform: scale(1.1) rotateZ(180deg); -ms-transform: scale(1.1) rotate(180deg); transform: scale(1.1) rotateZ(180deg); } .preloader .sk-folding-cube .sk-cube4 { -webkit-transform: scale(1.1) rotateZ(270deg); -ms-transform: scale(1.1) rotate(270deg); transform: scale(1.1) rotateZ(270deg); } .preloader .sk-folding-cube .sk-cube2:before { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .preloader .sk-folding-cube .sk-cube3:before { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .preloader .sk-folding-cube .sk-cube4:before { -webkit-animation-delay: 0.9s; animation-delay: 0.9s; } @-webkit-keyframes sk-foldCubeAngle { 0%, 10% { -webkit-transform: perspective(140px) rotateX(-180deg); transform: perspective(140px) rotateX(-180deg); opacity: 0; } 25%, 75% { -webkit-transform: perspective(140px) rotateX(0deg); transform: perspective(140px) rotateX(0deg); opacity: 1; } 90%, 100% { -webkit-transform: perspective(140px) rotateY(180deg); transform: perspective(140px) rotateY(180deg); opacity: 0; } } @keyframes sk-foldCubeAngle { 0%, 10% { -webkit-transform: perspective(140px) rotateX(-180deg); transform: perspective(140px) rotateX(-180deg); opacity: 0; } 25%, 75% { -webkit-transform: perspective(140px) rotateX(0deg); transform: perspective(140px) rotateX(0deg); opacity: 1; } 90%, 100% { -webkit-transform: perspective(140px) rotateY(180deg); transform: perspective(140px) rotateY(180deg); opacity: 0; } } .theme-accordion-s1 { margin-bottom: 0; } .theme-accordion-s1 .panel-default { background: transparent; border: 0; border-radius: 0; -webkit-box-shadow: none; box-shadow: none; } .theme-accordion-s1 .panel-heading { background-color: transparent; padding: 0; border-radius: 0; } .theme-accordion-s1 .panel + .panel { margin-top: 15px; } .theme-accordion-s1 .panel-heading a { background: #1481ff; font-size: 16px; font-size: 1rem; font-weight: 600; color: #fff; display: block; padding: 18px 25px; position: relative; } @media (max-width: 991px) { .theme-accordion-s1 .panel-heading a { font-size: 15px; font-size: 0.9375rem; padding: 15px 25px; } } @media (max-width: 767px) { .theme-accordion-s1 .panel-heading a { padding: 12px 15px; } } .theme-accordion-s1 .panel-heading a:before { font-family: Helvetica, 'Microsoft Yahei', '微软雅黑', Arial, sans-serif; content: "\e64b"; font-size: 15px; font-size: 0.9375rem; position: absolute; right: 25px; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s; } @media (max-width: 991px) { .theme-accordion-s1 .panel-heading a:before { font-size: 18px; font-size: 1.125rem; right: 20px; } } .theme-accordion-s1 .panel-heading a:focus { text-decoration: none; } .theme-accordion-s1 .panel-heading .collapsed { background-color: #fff; color: #102541; -webkit-box-shadow: 0px 5px 15px 0px rgba(68, 68, 68, 0.1); box-shadow: 0px 5px 15px 0px rgba(68, 68, 68, 0.1); } .theme-accordion-s1 .panel-heading .collapsed:before { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); } .theme-accordion-s1 .panel-heading + .panel-collapse > .panel-body { background-color: #fff; border: 0; padding: 40px 25px 15px; -webkit-box-shadow: 0px 5px 15px 0px rgba(68, 68, 68, 0.1); box-shadow: 0px 5px 15px 0px rgba(68, 68, 68, 0.1); } @media (max-width: 991px) { .theme-accordion-s1 .panel-heading + .panel-collapse > .panel-body { padding: 20px 25px 10px; font-size: 15px; font-size: 0.9375rem; } } @media (max-width: 767px) { .theme-accordion-s1 .panel-heading + .panel-collapse > .panel-body { padding: 15px 15px 8px; } } .theme-accordion-s1 .panel-heading + .panel-collapse > .panel-body p { margin-bottom: 1.3em; } /*-------------------------------------- service tab navigation ----------------------------------------*/ .service-tab-nav { margin-bottom: 40px; background: #fff; } .service-tab-nav .service-list-widget ul { list-style: none; display: flex; flex-wrap: wrap; margin: 0; padding: 0; border-bottom: 2px solid #f2f7fd; } .service-tab-nav .service-list-widget ul li { flex: 1; min-width: 200px; text-align: center; } .service-tab-nav .service-list-widget a { font-size: 16px; font-size: 1rem; background: transparent; font-weight: 500; display: block; color: #0a172b; padding: 20px 25px; transition: all 0.3s ease; text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -2px; } .service-tab-nav .service-list-widget a:hover { color: #1481ff; background-color: #f8fbff; } .service-tab-nav .service-list-widget .current a { color: #1481ff; background-color: transparent; border-bottom-color: #1481ff; font-weight: 600; } /* 响应式样式 */ @media (max-width: 767px) { .service-tab-nav .service-list-widget ul { border: 2px solid #f2f7fd; } .service-tab-nav .service-list-widget ul li { flex: 1 1 100%; border-bottom: 1px solid #ebf3fd; } .service-tab-nav .service-list-widget ul li:last-child { border-bottom: none; } .service-tab-nav .service-list-widget a { font-size: 14px; font-size: 0.875rem; padding: 15px 24px; border-bottom: none; } .service-tab-nav .service-list-widget a:hover, .service-tab-nav .service-list-widget .current a { background-color: #1481ff; color: #fff; } } /*-------------------------------------- service single section custom padding ----------------------------------------*/ .service-single-section { padding-top: 0; padding-bottom: 50px; } /*-------------------------------------- service tab nav fullwidth ----------------------------------------*/ .service-tab-nav-fullwidth { width: 100%; background: #fff; border-bottom: 2px solid #f2f7fd; position: relative; } .service-tab-nav-fullwidth .service-tab-nav { margin-bottom: 0; background: transparent; max-width: 1140px; margin: 0 auto; padding: 0 15px; } .service-tab-nav-fullwidth .service-tab-nav .service-list-widget ul { border-bottom: none; } /* page title with no bottom padding for seamless connection */ .page-title.page-title2 { padding-bottom: 0; } /* Ensure no spacing between sections */ .page-title2 + .service-tab-nav-fullwidth { margin-top: 0; } /* Remove default margins from page-wrapper */ .page-wrapper > * { margin-top: 0; } /*-------------------------------------- service single sidebar ----------------------------------------*/ .service-sidebar { /*** service-list-widget ***/ /*** download-widget ***/ /*** contact-widget ***/ /*** service-features-widget ***/ } @media (max-width: 991px) { .service-sidebar { max-width: 300px; margin-top: 80px; } } .service-sidebar > .widget + .widget { margin-top: 60px; } .service-sidebar .service-list-widget ul { list-style: none; border-bottom: 0; border: 2px solid #f2f7fd; } .service-sidebar .service-list-widget ul li { border-bottom: 1px solid #ebf3fd; } .service-sidebar .service-list-widget ul > li:last-child { border-bottom: 0; } .service-sidebar .service-list-widget a { font-size: 14px; font-size: 0.875rem; background: #fff; font-weight: bold; display: block; color: #0a172b; padding: 15px 24px; } .service-sidebar .service-list-widget a:hover, .service-sidebar .service-list-widget .current a { background-color:#1481ff; color: #fff; } .service-sidebar .download-widget ul { list-style: none; } .service-sidebar .download-widget ul > li + li { margin-top: 5px; } .service-sidebar .download-widget ul a { background: #1481ff; color: #fff; padding: 18px 25px; font-weight: 600; display: block; } .service-sidebar .download-widget ul i { display: inline-block; padding-right: 10px; color: #fff; } .service-sidebar .download-widget ul a:hover { background: #0071f3; } .service-sidebar .contact-widget { background: url("../images/single-contact-widget-bg.jpg") center center/cover no-repeat local; padding: 45px 40px; position: relative; text-align: center; } .service-sidebar .contact-widget:before { content: ""; background: #1481ff; width: 100%; height: 100%; position: absolute; left: 0; top: 0; opacity: 0.9; } .service-sidebar .contact-widget > div { position: relative; z-index: 1; } .service-sidebar .contact-widget h5 { font-size: 20px; font-size: 1.25rem; line-height: 1.4em; color: #fff; margin: 1em 0; text-transform: capitalize; } .service-sidebar .contact-widget a { background-color: #fff; font-size: 14px; font-size: 0.875rem; font-weight: 550; color: #334055; padding: 10px 15px; display: inline-block; margin-top: 25px; border-radius: 50px; } .service-sidebar .contact-widget a:hover { color: #1481ff; } .service-sidebar .service-features-widget { padding: 45px 30px; position: relative; border: 2px solid #f7f7f7; } .service-sidebar .service-features-widget:before { font-family: Helvetica, 'Microsoft Yahei', '微软雅黑', Arial, sans-serif; content: "\e61f"; font-size: 25px; font-size: 1.5625rem; color: #1481ff; position: absolute; right: 30px; top: 40px; opacity: 0.5; } .service-sidebar .service-features-widget h3 { font-size: 18px; font-size: 1.125rem; margin: 0 0 0.8em; text-transform: capitalize; } .service-sidebar .service-features-widget ol { list-style-position: inside; padding-left: 0; margin: 0; } .service-sidebar .service-features-widget ol > li + li { margin-top: 8px; } /*------------------------------------ blog sidebar ------------------------------------*/ .blog-sidebar { /*** search-widget ***/ /*** about-widget ***/ /*** category-widget ***/ /*** recent-post-widget ***/ /*** tag-widget ***/ } @media screen and (min-width: 992px) { .blog-sidebar { padding-left: 45px; } } @media (max-width: 991px) { .blog-sidebar { margin-top: 80px; max-width: 400px; } } @media (max-width: 767px) { .blog-sidebar { margin-top: 60px; max-width: 400px; } } .blog-sidebar .widget { padding: 35px 28px; border-radius: 5px; -webkit-box-shadow: 0px 4px 21px 0px rgba(33, 49, 182, 0.09); box-shadow: 0px 4px 21px 0px rgba(33, 49, 182, 0.09); } .blog-sidebar .widget h3 { font-size: 18px; font-size: 1.125rem; margin: 0 0 1.3em; position: relative; text-transform: capitalize; } .blog-sidebar .widget h3:before { content: ""; background-color: #1481ff; width: 4px; height: 16px; position: absolute; left: -28px; top: 1px; } .blog-sidebar > .widget + .widget { margin-top: 65px; } .blog-sidebar .search-widget form div { position: relative; } .blog-sidebar .search-widget input { background-color: rgba(253, 94, 22, 0.05); height: 50px; font-size: 16px; font-size: 1rem; padding: 6px 50px 6px 20px; border: 0; border-radius: 5px; -webkit-box-shadow: none; box-shadow: none; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s; } .blog-sidebar .search-widget input:focus { background-color: rgba(253, 94, 22, 0.1); } .blog-sidebar .search-widget form button { background: transparent; font-size: 20px; font-size: 1.25rem; color: #1481ff; border: 0; outline: 0; position: absolute; right: 10px; top: 55%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .blog-sidebar .about-widget { text-align: center; } .blog-sidebar .about-widget .img-holder { margin-bottom: 25px; } .blog-sidebar .about-widget .img-holder img { border-radius: 50%; } .blog-sidebar .about-widget p { font-size: 15px; font-size: 0.9375rem; margin-bottom: 1.2em; } .blog-sidebar .about-widget a { font-size: 14px; font-size: 0.875rem; font-weight: bold; color: #102541; text-decoration: underline; } .blog-sidebar .about-widget a:hover { color: #1481ff; } .blog-sidebar .category-widget ul { list-style: none; } .blog-sidebar .category-widget ul li { font-size: 15px; font-size: 0.9375rem; position: relative; } @media (max-width: 767px) { .blog-sidebar .category-widget ul li { font-size: 14px; font-size: 0.875rem; } } .blog-sidebar .category-widget ul li span { position: absolute; right: 0; } .blog-sidebar .category-widget ul > li + li { margin-top: 12px; padding-top: 12px; border-top: 1px dashed #e4e4e4; } .blog-sidebar .category-widget ul a { display: block; color: #57667e; } .blog-sidebar .category-widget ul a:hover, .blog-sidebar .category-widget ul li:hover:before { color: #1481ff; } .blog-sidebar .recent-post-widget .post { overflow: hidden; } .blog-sidebar .recent-post-widget .posts > .post + .post { margin-top: 15px; padding-top: 15px; border-top: 1px dashed #e4e4e4; } .blog-sidebar .recent-post-widget .post .img-holder { width: 68px; float: left; } .blog-sidebar .recent-post-widget .post .img-holder img { border-radius: 50%; } .blog-sidebar .recent-post-widget .post .details { width: calc(100% - 68px); float: left; padding-left: 20px; } .blog-sidebar .recent-post-widget .post h4 { font-size: 14px; font-size: 0.875rem; line-height: 1.3em; margin: 0 0 0.3em; } @media (max-width: 1199px) { .blog-sidebar .recent-post-widget .post h4 { margin: 0; } } .blog-sidebar .recent-post-widget .post h4 a { display: inline-block; color: #102541; } .blog-sidebar .recent-post-widget .post h4 a:hover { color: #1481ff; } .blog-sidebar .recent-post-widget .post .details .date { font-size: 13px; font-size: 0.8125rem; color: #57667e; } .blog-sidebar .recent-post-widget .post .details .date i { display: inline-block; padding-right: 7px; } .blog-sidebar .tag-widget ul { overflow: hidden; list-style: none; } .blog-sidebar .tag-widget ul li { float: left; margin: 0 8px 8px 0; } .blog-sidebar .tag-widget ul li a { font-size: 13px; font-size: 0.8125rem; display: inline-block; padding: 5px 14px; color: #57667e; border: 2px solid rgba(253, 94, 22, 0.1); border-radius: 50px; } .blog-sidebar .tag-widget ul li a:hover { background: #1481ff; color: #fff; } /**** pagination ****/ .pagination-wrapper { text-align: center; margin-top: 60px; } @media (max-width: 991px) { .pagination-wrapper { text-align: left; margin-top: 40px; } } .pagination-wrapper .pg-pagination { display: inline-block; overflow: hidden; list-style-type: none; text-align: center; } .pagination-wrapper .pg-pagination li { float: left; margin-right: 10px; } @media (max-width: 767px) { .pagination-wrapper .pg-pagination li { margin-right: 5px; } } .pagination-wrapper .pg-pagination li:last-child { margin-right: 0; } .pagination-wrapper .pg-pagination li a { background-color: transparent; width: 50px; height: 50px; line-height: 47px; font-size: 16px; font-size: 1rem; font-weight: bold; color: #a9b8c4; border: 2px solid #c9cfd4; display: block; border-radius: 50%; } @media (max-width: 991px) { .pagination-wrapper .pg-pagination li a { width: 40px; height: 40px; line-height: 37px; font-size: 15px; font-size: 0.9375rem; } } .pagination-wrapper .pg-pagination .active a, .pagination-wrapper .pg-pagination li a:hover { background: #1481ff; border-color: #1481ff; color: #fff; } .pagination-wrapper .pg-pagination .fi:before { font-size: 15px; font-size: 0.9375rem; } .pagination-wrapper-left { text-align: left; } .pagination-wrapper-right { text-align: right; } @media screen and (min-width: 1200px) { .pagination-wrapper-right { padding-right: 50px; } } @media (max-width: 991px) { .pagination-wrapper-right { margin-top: 45px; text-align: left; } } /*-------------------------------------------------------------- #0.3 header --------------------------------------------------------------*/ .site-header { /* navigation open and close btn hide for width screen */ /* style for navigation less than 992px */ /*navbar collaps less then 992px*/ width: 100%; } .site-header .navigation { background-color: #fff!important; box-shadow: 0 0 5px 2px rgba(0,0,0,.1); margin-bottom: 0; border: 0; position: relative; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0; border-radius: 0; } .site-header .navigation > .container { position: relative; } .site-header #navbar { -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s; background-color: #fff; transition: all 0.5s; /*** mega-menu style ***/ } .site-header #navbar > ul li a{ text-decoration: none; color: #333 !important; } .site-header #navbar > ul li a:hover, .site-header #navbar > ul li a:focus { text-decoration: none; color: #1481ff !important; } @media screen and (min-width: 992px) { .site-header #navbar { /*** hover effect ***/ } .site-header #navbar li { position: relative; } .site-header #navbar > ul > li > a { font-size: 16px; font-size: 1rem; } .site-header #navbar > ul .sub-menu { background-color: #fff; width: 220px; position: absolute; left: 0; top: 100%; z-index: 10; visibility: hidden; opacity: 0; pointer-events: none !important; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s; -webkit-box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1); box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1); } .site-header #navbar > ul .sub-menu::before { content: ''; position: absolute; top: -10px; left: 0; width: 100%; height: 10px; } .site-header #navbar > ul > li .sub-menu li { border-bottom: 1px solid #efefef; } .site-header #navbar > ul > li .sub-menu a { font-size: 14px; font-size: 0.875rem; font-weight: 600; color: #102541; display: block; padding: 13px 20px; } .site-header #navbar > ul > li > .sub-menu .sub-menu { left: 100%; top: 0; } .site-header #navbar > ul > li > .sub-menu > .menu-item-has-children > a { position: relative; } /* .site-header #navbar > ul > li > .sub-menu > .menu-item-has-children > a:before { font-family: "themify"; content: "\e649"; font-size: 11px; font-size: 0.6875rem; position: absolute; right: 15px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } */ .site-header #navbar > ul > li:hover > .sub-menu { top: 100%; visibility: visible; opacity: 1; pointer-events: auto !important; } .site-header #navbar .sub-menu > li:hover > .sub-menu { left: 100%; visibility: visible; opacity: 1; pointer-events: auto !important; } /* 产品中心下拉菜单 */ .site-header #navbar > ul > li.product-menu > a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background-color: #1481ff; transform: scaleX(0); transition: transform 0.3s; } .site-header #navbar > ul > li.product-menu:hover > a::after { transform: scaleX(1); } .site-header #navbar > ul > li.product-menu { position: static; } .site-header #navbar > ul > li.product-menu > .sub-menu { width: 100vw; left: 0; right: 0; margin-left: calc(-50vw + 50%); padding: 20px 5%; display: flex; flex-wrap: wrap; justify-content: center; } .site-header #navbar > ul > li.product-menu:hover > .sub-menu { visibility: visible !important; opacity: 1 !important; top: 100%; pointer-events: auto; } /* 二级分类 */ .site-header #navbar .product-menu > .sub-menu > li { width: 280px; border-bottom: none; padding: 0 15px; } .site-header #navbar .product-menu > .sub-menu > li > a { padding: 10px 0; font-weight: 600; font-size: 22px; color: #102541 !important; border-bottom: 1px solid #eee; margin-bottom: 5px; } /* 三级菜单 - 直接显示在二级下方 */ .site-header #navbar .product-menu > .sub-menu .sub-menu { position: static; display: block; visibility: visible; opacity: 1; width: auto; background: transparent; box-shadow: none; padding: 0; pointer-events: auto; } .site-header #navbar .product-menu > .sub-menu .sub-menu li { border-bottom: none; } .site-header #navbar .product-menu > .sub-menu .sub-menu li::before { content: "•"; margin-right: 8px; } .site-header #navbar .product-menu > .sub-menu .sub-menu a { display: inline-block; padding: 8px 0; font-weight: normal; font-size: 18px; color: #666 !important; } .site-header #navbar .product-menu > .sub-menu .sub-menu a:hover { color: #1481ff !important; } } @media (max-width: 991px) { .site-header #navbar > ul > li a { display: block; font-size: 14px; font-size: 0.875rem; } .site-header #navbar > ul > li .sub-menu li { border-bottom: 1px solid #e6e6e6; } .site-header #navbar > ul .sub-menu > li:last-child { border-bottom: 0; } .site-header #navbar > ul > li > .sub-menu a { padding: 20px 15px 20px 45px; background: #f9f9f9; } .site-header #navbar > ul > li > .sub-menu .sub-menu a { padding: 15px 15px 15px 65px; background: #f1f1f1; color:#333; } .site-header #navbar > ul .menu-item-has-children > a { position: relative; } .site-header #navbar > ul .menu-item-has-children > a:before { font-family: "themify"; content: "\e61a"; font-size: 11px; font-size: 0.6875rem; position: absolute; right: 15px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } /* 移动端隐藏产品中心的子菜单和箭头 */ .site-header #navbar .product-menu > .sub-menu { display: none !important; } .site-header #navbar .product-menu > a:before { display: none; } } @media screen and (min-width: 992px) { .site-header #navbar { /*** hover effect ***/ } .site-header #navbar .has-mega-menu { position: static; } .site-header #navbar .mega-menu, .site-header #navbar .half-mega-menu { background-color: #fff; padding: 20px; border-top: 2px solid #1481ff; position: absolute; right: 0; top: 100%; z-index: 10; visibility: hidden; opacity: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s; } .site-header #navbar .mega-menu { width: 1140px; right: 15px; } .site-header #navbar .half-mega-menu { width: 585px; } .site-header #navbar .mega-menu-box-title { font-size: 14px; font-size: 0.875rem; text-transform: uppercase; font-weight: bold; display: block; padding-bottom: 7px; margin-bottom: 7px; border-bottom: 1px solid #e6e6e6; } .site-header #navbar .mega-menu-list-holder li a { font-size: 14px; font-size: 0.875rem; display: block; padding: 7px 8px; margin-left: -8px; } .site-header #navbar .has-mega-menu:hover > ul { top: 100%; visibility: visible; opacity: 1; } } @media (max-width: 1199px) { .site-header #navbar > ul .mega-menu { width: 950px; right: 15px; } .site-header #navbar > ul .half-mega-menu { width: 485px; } } @media (max-width: 991px) { .site-header #navbar > ul .mega-menu, .site-header #navbar > ul .half-mega-menu { width: auto; } .site-header #navbar > ul .mega-menu .row, .site-header #navbar > ul .half-mega-menu .row { margin: 0; } .site-header #navbar .mega-menu-content > .row > .col { margin-bottom: 25px; } } @media (max-width: 991px) { .site-header #navbar .mega-menu .mega-menu-list-holder a { padding: 5px 15px 5px 40px; } .site-header #navbar .mega-menu .mega-menu-box-title { font-size: 14px; font-size: 0.875rem; text-transform: uppercase; display: block; border-bottom: 1px dotted #b3b3b3; padding: 0 0 4px 5px; margin: 0 25px 8px 25px; } } @media screen and (min-width: 992px) { .site-header .navbar-header .open-btn { display: none; } .site-header #navbar .close-navbar { display: none; } } @media (max-width: 991px) { .site-header { /* class for show hide navigation */ } .site-header .container { width: 100%; } .site-header .navbar-header button { background-color:#1481ff; width: 40px; height: 35px; border: 0; padding: 5px 10px; outline: 0; position: absolute; right: 15px; top: 12px; z-index: 20; } .site-header .navbar-header button span { background-color: #fff; display: block; height: 2px; margin-bottom: 5px; } .site-header .navbar-header button span:last-child { margin: 0; } .site-header #navbar { background: #fff; display: block !important; width: 280px; height: 100% !important; margin: 0; padding: 0; border-left: 1px solid #cccccc; border-right: 1px solid #cccccc; position: fixed; right: -330px; top: 0; z-index: 100; } .site-header #navbar ul a { color: #000; } .site-header #navbar ul a:hover, .site-header #navbar ul li.current a { color: #1481ff; } .site-header #navbar .navbar-nav { height: 100%; overflow: auto; } .site-header #navbar .close-navbar { background-color: #fff; width: 40px; height: 40px; color: #000; border: 0; outline: none; position: absolute; left: -41px; top: 90px; z-index: 20; } .site-header #navbar .close-navbar .ti-close { position: relative; top: 1px; } .site-header #navbar > ul > li { border-bottom: 1px solid #f2f2f2; } .site-header #navbar > ul > li > a { padding: 20px 15px 20px 35px; } .site-header .slideInn { right: 0 !important; } } @media (max-width: 767px) { .site-header .navbar-header .navbar-brand { font-size: 24px; } .site-header #navbar .navbar-nav { margin: 0; } } @media (max-width: 991px) { .site-header .navbar-collapse.collapse { display: none; } .site-header .navbar-collapse.collapse.in { display: block; } .site-header .navbar-header .collapse, .site-header .navbar-toggle { display: block; } .site-header .navbar-header { float: none; } .site-header .navbar-right { float: none; } .site-header .navbar-nav { float: none; } .site-header .navbar-nav > li { float: none; } } @media (max-width: 991px) { .page-wrapper { -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s; } .body-overlay:before { content: ""; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.9); position: absolute; left: 0; top: 0; z-index: 10; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s; } } /*-------------------------------------------------------------- #header-style-1 --------------------------------------------------------------*/ .header-style-1, .header-style-2, .header-style-3 { /*** search-contact ***/ } .header-style-1 .topbar, .header-style-2 .topbar, .header-style-3 .topbar { background-color: #fff; padding: 10px 0; } @media (max-width: 767px) { .header-style-1 .topbar, .header-style-2 .topbar, .header-style-3 .topbar { padding: 20px 0; } } @media (max-width: 767px) { .header-style-1 .topbar, .header-style-2 .topbar, .header-style-3 .topbar { text-align: center; } } .header-style-1 .topbar .social ul, .header-style-2 .topbar .social ul, .header-style-3 .topbar .social ul { overflow: hidden; padding-top: 2px; } @media (max-width: 767px) { .header-style-1 .topbar .social ul, .header-style-2 .topbar .social ul, .header-style-3 .topbar .social ul { display: inline-block; } } .header-style-1 .topbar .social li, .header-style-2 .topbar .social li, .header-style-3 .topbar .social li { float: left; } .header-style-1 .topbar .social ul > li + li, .header-style-2 .topbar .social ul > li + li, .header-style-3 .topbar .social ul > li + li { margin-left: 15px; } .header-style-1 .topbar .social a, .header-style-2 .topbar .social a, .header-style-3 .topbar .social a { font-size: 14px; font-size: 0.875rem; color: #57667e; } .header-style-1 .topbar .social a:hover, .header-style-2 .topbar .social a:hover, .header-style-3 .topbar .social a:hover { color: #1481ff; } .header-style-1 .topbar .text, .header-style-2 .topbar .text, .header-style-3 .topbar .text { text-align: right; } @media (max-width: 767px) { .header-style-1 .topbar .text, .header-style-2 .topbar .text, .header-style-3 .topbar .text { text-align: center; } } .header-style-1 .topbar .text span, .header-style-2 .topbar .text span, .header-style-3 .topbar .text span { font-weight: bold; color: #1481ff; text-decoration: underline; } .header-style-1 .topbar .text p, .header-style-2 .topbar .text p, .header-style-3 .topbar .text p { margin: 0; } @media screen and (min-width: 992px) { .header-style-1, .header-style-2, .header-style-3 { width: 100%; position: absolute; left: 0; top: 0; z-index: 100; } .header-style-1 .navigation, .header-style-2 .navigation, .header-style-3 .navigation { /*background-color: transparent;*/ } .header-style-1 #navbar, .header-style-2 #navbar, .header-style-3 #navbar { margin-right: 200px; } .header-style-1 #navbar > ul > li > a, .header-style-2 #navbar > ul > li > a, .header-style-3 #navbar > ul > li > a { font-size: 15px; font-size: 1.1rem; color: #333; padding: 40px 12px; } .header-style-1 .navigation .container, .header-style-2 .navigation .container, .header-style-3 .navigation .container { position: relative; } .header-style-1 .navigation .container .separator, .header-style-2 .navigation .container .separator, .header-style-3 .navigation .container .separator { background-color: rgba(255, 255, 255, 0.1); width: calc(100% - 30px); height: 1px; position: absolute; bottom: 0; left: 15px; } } @media screen and (min-width: 1200px) { .header-style-1 #navbar > ul > .menu-item-has-children > a:before, .header-style-2 #navbar > ul > .menu-item-has-children > a:before, .header-style-3 #navbar > ul > .menu-item-has-children > a:before { font-family: "themify"; content: "\e64b"; font-size: 8px; font-size: 0.5rem; position: absolute; right: 4px; top: 41%; } .header-style-1 #navbar > ul > li > a, .header-style-2 #navbar > ul > li > a, .header-style-3 #navbar > ul > li > a { padding: 30px 20px; } } .header-style-1 .navbar-brand, .header-style-2 .navbar-brand, .header-style-3 .navbar-brand { /*margin-top: 6px;*/ position: relative; /*top: 5px;*/ } @media (max-width: 991px) { .header-style-1 .navbar-brand, .header-style-2 .navbar-brand, .header-style-3 .navbar-brand { margin-top: 0; padding-top: 0; margin-bottom: 10px; } } .header-style-1 .navbar-brand img, .header-style-2 .navbar-brand img, .header-style-3 .navbar-brand img { max-width: 190px; } @media (max-width: 991px) { .header-style-1 .navigation, .header-style-2 .navigation, .header-style-3 .navigation { background-color: #fff; padding: 15px 0; } } .header-style-1 .search-contact, .header-style-2 .search-contact, .header-style-3 .search-contact { position: absolute; right: 15px; top: 32px; } @media (max-width: 991px) { .header-style-1 .search-contact, .header-style-2 .search-contact, .header-style-3 .search-contact { right: 75px; top: 12px; } } @media (max-width: 450px) { .header-style-1 .search-contact, .header-style-2 .search-contact, .header-style-3 .search-contact { display: none; } } .header-style-1 .search-contact > div, .header-style-2 .search-contact > div, .header-style-3 .search-contact > div { display: inline-block; } .header-style-1 .search-contact .open-btn, .header-style-2 .search-contact .open-btn, .header-style-3 .search-contact .open-btn { background-color: transparent; color: #fff; padding: 0; border: 0; margin-right: 22px; position: relative; top: -4px; } @media (max-width: 1199px) { .header-style-1 .search-contact .open-btn, .header-style-2 .search-contact .open-btn, .header-style-3 .search-contact .open-btn { margin-right: 20px; } } @media (max-width: 991px) { .header-style-1 .search-contact .open-btn, .header-style-2 .search-contact .open-btn, .header-style-3 .search-contact .open-btn { margin-right: 10px; } } .header-style-1 .search-contact .open-btn:focus, .header-style-2 .search-contact .open-btn:focus, .header-style-3 .search-contact .open-btn:focus { border: 0; outline: 0; -webkit-box-shadow: none; box-shadow: none; } .header-style-1 .search-contact .contact, .header-style-2 .search-contact .contact, .header-style-3 .search-contact .contact { position: relative; top: -5px; } /*-------------------------------------------------------------- #header-style-2 --------------------------------------------------------------*/ .header-style-2, .header-style-3 { /*** search-social ***/ } @media screen and (min-width: 992px) { .header-style-2, .header-style-3 { position: relative; } .header-style-2 .navigation, .header-style-3 .navigation { background-color: #fff; } .header-style-2 #navbar > ul > li > a, .header-style-3 #navbar > ul > li > a { color: #102541; padding: 40px 12px; } .header-style-2 .navigation .container, .header-style-3 .navigation .container { position: relative; } .header-style-2 .navigation .container .separator, .header-style-3 .navigation .container .separator { background-color: #ececec; top: 2px; } } @media screen and (min-width: 1200px) { .header-style-2 #navbar > ul > li > a, .header-style-3 #navbar > ul > li > a { padding: 40px 20px; } } @media (max-width: 991px) { .header-style-2 .navigation, .header-style-3 .navigation { background-color: #fff; padding: 15px 0; border-top: 1px solid #eaeaea; } } .header-style-2 .search-contact .open-btn, .header-style-3 .search-contact .open-btn { color: #102541; top: -6px; } /*-------------------------------------------------------------- #header-style-3 --------------------------------------------------------------*/ .header-style-3 .topbar { background-color: #102541; } .header-style-3 .topbar .social a { font-size: 14px; font-size: 0.875rem; color: #fff; } .header-style-3 .topbar .social a:hover { color: #1481ff; } .header-style-3 .topbar .text p { margin: 0; color: #fff; } .header-search-form { width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 9999; background: rgba(0, 0, 0, 0.65); } .header-search-form form { width: 500px; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @media (max-width: 767px) { .header-search-form form { width: 300px; } } .header-search-form form input { height: 60px; font-size: 16px; padding: 15px 25px; border: 0; -webkit-box-shadow: none; box-shadow: none; border-radius: 60px; } @media (max-width: 767px) { .header-search-form form input { height: 45px; font-size: 17px; } } .header-search-form form input:focus { -webkit-box-shadow: none; box-shadow: none; } .header-search-form form .btn { background-color: #1481ff; width: 60px; height: 100%; color: #fff; position: absolute; right: 0; top: 0; border: 0; border-radius: 0 60px 60px 0; } .header-search-form form .btn:focus, .header-search-form form .btn:active { outline: none; -webkit-box-shadow: none; box-shadow: none; } /*-------------------------------------------------------------- #0.4 hero slider --------------------------------------------------------------*/ .hero-slider { width: 100%; height: 700px; display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; z-index: 0; } @media (max-width: 991px) { .hero-slider { height: 600px; } } @media (max-width: 767px) { .hero-slider { height: 500px; } } .hero-slider .swiper-slide { overflow: hidden; color: #fff; } .hero-slider .swiper-container { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .hero-slider .slide-inner { width: 100%; height: 100%; position: absolute; background-size: cover; left: 0; top: 0; z-index: 1; background-position: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: left; } .hero-slider .swiper-button-prev, .hero-slider .swiper-button-next { background: rgba(255, 255, 255, 0.2); width: 60px; height: 60px; line-height: 60px; margin-top: -30px; text-align: center; border-radius: 60px; } @media (max-width: 767px) { .hero-slider .swiper-button-prev, .hero-slider .swiper-button-next { display: none; } } .hero-slider .swiper-button-prev { left: 25px; } @media (max-width: 991px) { .hero-slider .swiper-button-prev { display: none; } } .hero-slider .swiper-button-prev:before { font-family: "Flaticon"; content: "\f103"; font-size: 20px; color: #fff; } .hero-slider .swiper-button-next { right: 25px; } @media (max-width: 991px) { .hero-slider .swiper-button-next { display: none; } } .hero-slider .swiper-button-next:before { font-family: "Flaticon"; content: "\f104"; font-size: 20px; color: #fff; } .hero-slider .swiper-pagination-bullet { width: 12px; height: 12px; text-align: center; line-height: 12px; font-size: 12px; color: #000; opacity: 1; background: rgba(255, 255, 255, 0.2); } .hero-slider .swiper-pagination-bullet-active { color: #fff; background: #1481ff; } .hero-slider .swiper-container-horizontal > .swiper-pagination-bullets, .hero-slider .swiper-pagination-custom, .hero-slider .swiper-pagination-fraction { bottom: 30px; } @media screen and (min-width: 992px) { .hero-slider .swiper-container-horizontal > .swiper-pagination-bullets, .hero-slider .swiper-pagination-custom, .hero-slider .swiper-pagination-fraction { display: none; } } /*-------------------------------------------------------------- #hero-style-1 --------------------------------------------------------------*/ .hero-style-1, .hero-style-2, .hero-style-3 { height: 800px; } @media (max-width: 991px) { .hero-style-1, .hero-style-2, .hero-style-3 { height: 600px; } } @media (max-width: 767px) { .hero-style-1, .hero-style-2, .hero-style-3 { height: 500px; } } @media screen and (min-width: 992px) { .hero-style-1 .container, .hero-style-2 .container, .hero-style-3 .container { padding-top: 15px; } } .hero-style-1 .slide-title, .hero-style-2 .slide-title, .hero-style-3 .slide-title { max-width: 750px; } .hero-style-1 .slide-title h2, .hero-style-2 .slide-title h2, .hero-style-3 .slide-title h2 { font-size: 55px; font-size: 3.4375rem; font-weight: 800; color: #fff; margin: 0 0 0.45em; } @media (max-width: 991px) { .hero-style-1 .slide-title h2, .hero-style-2 .slide-title h2, .hero-style-3 .slide-title h2 { font-size: 45px; font-size: 2.8125rem; } } @media (max-width: 767px) { .hero-style-1 .slide-title h2, .hero-style-2 .slide-title h2, .hero-style-3 .slide-title h2 { font-size: 35px; font-size: 2.1875rem; } } .hero-style-1 .slide-text, .hero-style-2 .slide-text, .hero-style-3 .slide-text { max-width: 600px; } .hero-style-1 .slide-text p, .hero-style-2 .slide-text p, .hero-style-3 .slide-text p { font-size: 20px; font-size: 1.25rem; font-weight: 600; color: #fff; margin: 0 0 0.75em; } @media (max-width: 991px) { .hero-style-1 .slide-text p, .hero-style-2 .slide-text p, .hero-style-3 .slide-text p { font-size: 18px; font-size: 1.125rem; } } @media (max-width: 767px) { .hero-style-1 .slide-text p, .hero-style-2 .slide-text p, .hero-style-3 .slide-text p { font-size: 16px; font-size: 1rem; } } .hero-style-1 .slide-btns > a:first-child, .hero-style-2 .slide-btns > a:first-child, .hero-style-3 .slide-btns > a:first-child { margin-right: 15px; } /*-------------------------------------------------------------- #hero-style-2 --------------------------------------------------------------*/ .hero-style-2, .hero-style-3 { height: 700px; } @media (max-width: 991px) { .hero-style-2, .hero-style-3 { height: 600px; } } @media (max-width: 767px) { .hero-style-2, .hero-style-3 { height: 500px; } } @media screen and (min-width: 992px) { .hero-style-2 .container, .hero-style-3 .container { padding-top: 0; } } /*-------------------------------------------------------------- #hero-style-3 --------------------------------------------------------------*/ .hero-style-3 .slide-title, .hero-style-3 .slide-text, .hero-style-3 .slide-btns { margin: 0 auto; text-align: center; } /*-------------------------------------------------------------- #0.5 footer --------------------------------------------------------------*/ .site-footer { background-color: #102541; position: relative; font-size: 15px; overflow: hidden; /*** about-widget ***/ /*** link-widget ***/ /*** contact-widget ***/ /*** newsletter-widget ***/ /*** lower-footer ***/ } .site-footer ul { list-style: none; } .site-footer p, .site-footer li { color: #fff; } .site-footer .upper-footer { padding: 50px 0 30px 0; } @media (max-width: 991px) { .site-footer .upper-footer { padding: 90px 0 20px; } } @media (max-width: 767px) { .site-footer .upper-footer { padding: 80px 0 10px; } } @media (max-width: 991px) { .site-footer .upper-footer .col { min-height: 235px; margin-bottom: 70px; } } @media (max-width: 767px) { .site-footer .upper-footer .col { min-height: auto; margin-bottom: 60px; } } .site-footer .widget-title { margin-bottom: 30px; } @media (max-width: 767px) { .site-footer .widget-title { margin-bottom: 20px; } } .site-footer .widget-title h3 { font-size: 18px; font-size: 1.125rem; font-weight: bold; color: #fff; margin: 0; padding-bottom: 0.4em; text-transform: capitalize; position: relative; } @media (max-width: 991px) { .site-footer .widget-title h3 { padding-bottom: 0; } } .site-footer .about-widget .logo { max-width: 180px; } .site-footer .about-widget p { margin-bottom: 0.8em; line-height: 1.9em; } .site-footer .about-widget p:last-child { margin-bottom: 0; } .site-footer .link-widget { overflow: hidden; } @media screen and (min-width: 1200px) { .site-footer .link-widget { padding-left: 20px; } } @media (max-width: 1199px) { .site-footer .link-widget { padding-left: 20px; } } @media (max-width: 991px) { .site-footer .link-widget { padding-left: 0; } } @media (max-width: 767px) { .site-footer .link-widget { max-width: 350px; } } .site-footer .link-widget ul { width: 50%; float: left; } .site-footer .link-widget ul li { position: relative; } .site-footer .link-widget ul a { color: #eaeaea; } .site-footer .link-widget ul a:hover, .site-footer .link-widget ul li:hover:before { text-decoration: underline; } .site-footer .link-widget ul > li + li { margin-top: 15px; } @media screen and (min-width: 1200px) { .site-footer .contact-widget { padding-left: 25px; } } .site-footer .contact-widget ul { margin-top: 25px; } .site-footer .contact-widget ul li { position: relative; } .site-footer .contact-widget ul > li + li { margin-top: 15px; } .site-footer .contact-widget li span { font-weight: 600; } .site-footer .newsletter-widget form { margin-top: 25px; position: relative; } .site-footer .newsletter-widget form input { background-color: #fff; height: 50px; color: #57667e; padding: 6px 20px; border-radius: 5px; border: none; -webkit-box-shadow: none; box-shadow: none; } .site-footer .newsletter-widget form .submit { position: absolute; right: 20px; top: 55%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .site-footer .newsletter-widget form .submit button { background: transparent; border: 0; outline: 0; font-size: 20px; color: #1481ff; margin-top: -2px; position: relative; right: -5px; } .site-footer .lower-footer { text-align: center; position: relative; } .site-footer .lower-footer .row { padding: 10px 0; position: relative; } .site-footer .lower-footer .row .separator { background: rgba(255, 255, 255, 0.05); width: calc(100% - 30px); height: 1px; position: absolute; left: 15px; top: 0; } .site-footer .lower-footer .copyright { display: inline-block; float: left; font-size: 14px; font-size: 0.875rem; margin: 0; } @media (max-width: 991px) { .site-footer .lower-footer .copyright { float: none; display: block; margin: 0 0 20px; } } .site-footer .lower-footer .copyright a { color: #fff; text-decoration: underline; } .site-footer .lower-footer .extra-link { display: inline-block; float: right; overflow: hidden; } @media (max-width: 991px) { .site-footer .lower-footer .extra-link { float: none; display: block; text-align: center; } } .site-footer .lower-footer .extra-link ul { overflow: hidden; list-style: none; } @media (max-width: 991px) { .site-footer .lower-footer .extra-link ul { display: inline-block; } } .site-footer .lower-footer .extra-link ul li { float: left; } .site-footer .lower-footer .extra-link ul > li + li { margin-left: 35px; position: relative; } @media (max-width: 767px) { .site-footer .lower-footer .extra-link ul > li + li { margin-left: 15px; } } .site-footer .lower-footer .extra-link ul > li + li:before { content: ""; background: #fff; width: 15px; height: 1px; position: absolute; left: -25px; top: 11px; } @media (max-width: 767px) { .site-footer .lower-footer .extra-link ul > li + li:before { display: none; } } .site-footer .lower-footer .extra-link ul a { font-size: 14px; font-size: 0.875rem; color: #fff; } .site-footer .lower-footer .extra-link ul a:hover { text-decoration: underline; } .sticky-header { width: 100%; position: fixed; left: 0; top: -200px; z-index: 9999; opacity: 0; pointer-events: none; -webkit-transition: all 0.7s; -moz-transition: all 0.7s; -o-transition: all 0.7s; -ms-transition: all 0.7s; transition: all 0.7s; } .sticky-header .sub-menu { pointer-events: none !important; } .sticky-on { opacity: 1; top: 0; pointer-events: auto; } .sticky-on .sub-menu { pointer-events: auto !important; } .header-style-1 .sticky-header, .header-style-2 .sticky-header, .header-style-3 .sticky-header { background-color:#006dff; } .header-style-2 .sticky-header, .header-style-3 .sticky-header { background-color: #fff; -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); } /*-------------------------------------------------------------- #0.6 features-section --------------------------------------------------------------*/ @media screen and (min-width: 992px) { .features-section { margin-top: -121px; } } @media (max-width: 991px) { .features-section { padding: 90px 0 60px; } } @media (max-width: 767px) { .features-section { padding: 80px 0 50px; } } .features-section .feature-grids { margin: 0 -15px 30px -15px; } @media (max-width: 991px) { .features-section .feature-grids { margin: 0 -7.5px; } } .features-section .feature-grids .grid { width: calc(25% - 30px); margin: 0 15px 30px; float: left; } @media (max-width: 991px) { .features-section .feature-grids .grid { width: calc(50% - 15px); margin: 0 7.5px 30px; } } @media (max-width: 600px) { .features-section .feature-grids .grid { width: calc(100% - 15px); float: none; } } .features-section .header { background-color: rgba(0, 100, 255, 1); padding: 25px 30px; text-align: center; border-radius: 10px 10px 0 0; } @media (max-width: 767px) { .features-section .header { padding: 15px 30px; } } .features-section .header .fi:before { font-size: 50px; font-size: 3.125rem; color: #fff; } .features-section .details { background-color: #fff; padding: 30px 30px; -webkit-box-shadow: 0px 0px 36.8px 9.2px rgba(16, 37, 65, 0.1); box-shadow: 0px 0px 36.8px 9.2px rgba(16, 37, 65, 0.1); border-radius: 0 0 10px 10px; min-height: 300px; } @media (max-width: 767px) { .features-section .details { padding: 25px 25px 35px; } } .features-section .details h3 { font-size: 20px; font-size: 1.65rem; margin: 0 0 0.7em; } @media (max-width: 767px) { .features-section .details h3 { font-size: 18px; font-size: 1.125rem; } } .features-section .details p { margin: 0 0 1em; } .features-section .details .read-more { font-weight: bold; color: #1481ff; text-decoration: none; } .features-section .details .read-more:hover { color: #0552af; } /*-------------------------------------------------------------- #0.7 about-section --------------------------------------------------------------*/ .about-section, .about-section-s2 { background: #ebf4fd url("../images/index/map_bk.jpg") center center; background-size: 100% 100%; padding: 100px 0 50px 0; } @media (max-width: 991px) { .about-section, .about-section-s2 { padding-top: 0; } } .about-section .img-holder, .about-section-s2 .img-holder { position: relative; max-width: 550px; } @media (max-width: 991px) { .about-section .img-holder, .about-section-s2 .img-holder { margin-bottom: 60px; } } /*.about-section .img-holder img, .about-section-s2 .img-holder img {*/ /*border: 10px solid #fff;*/ /*-webkit-box-shadow: 0px 0px 36.8px 9.2px rgba(16, 37, 65, 0.1);*/ /*box-shadow: 0px 0px 36.8px 9.2px rgba(16, 37, 65, 0.1);*/ /*}*/ .about-section .video-holder, .about-section-s2 .video-holder { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .about-section .video-holder a, .about-section-s2 .video-holder a { background: #1481ff; width: 85px; height: 85px; line-height: 85px; text-align: center; border: 2px solid #fff; border-radius: 85px; display: inline-block; } .about-section .video-holder .fi:before, .about-section-s2 .video-holder .fi:before { font-size: 30px; font-size: 1.875rem; color: #fff; } .about-section .details, .about-section-s2 .details { /*padding-left: 40px;*/ } @media (max-width: 1199px) { .about-section .details, .about-section-s2 .details { padding-left: 0; } } .about-section .contact-info, .about-section-s2 .contact-info { /*border: 1px solid #e6e8eb;*/ overflow: hidden; margin: 30px 0 20px 0; } .about-section .contact-info > div, .about-section-s2 .contact-info > div { /*width: 50%;*/ float: left; /*padding: 35px 35px 35px 105px;*/ position: relative; } @media (max-width: 600px) { .about-section .contact-info > div, .about-section-s2 .contact-info > div { width: 100%; float: none; } } .about-section .contact-info img, .about-section-s2 .contact-info img { position: absolute; left: 20px; top: 40px; } .about-section .contact-info p, .about-section-s2 .contact-info p { font-size: 14px; font-size: 0.875rem; } .about-section .contact-info > div:last-child, .about-section-s2 .contact-info > div:last-child { /*border-left: 1px solid #e6e8eb;*/ } @media (max-width: 600px) { .about-section .contact-info > div:last-child, .about-section-s2 .contact-info > div:last-child { border-left: 0; border-top: 1px solid #e6e8eb; } } .about-section .btns > a:first-child, .about-section-s2 .btns > a:first-child { margin-right: 15px; } @media (max-width: 600px) { .about-section .btns > a:first-child, .about-section-s2 .btns > a:first-child { margin-bottom: 15px; } } .about-pg-about-section { padding-top: 55px; padding-bottom: 0; } @media (max-width: 991px) { .about-pg-about-section { padding-top: 0; } } /*-------------------------------------------------------------- #0.8 services-section --------------------------------------------------------------*/ .services-section { background-color:#f5f8f9; padding-bottom: 105px; } .services-section1 { background-color: #ffffff; padding-bottom: 105px; } @media (max-width: 991px) { .services-section { padding-bottom: 85px; } } @media (max-width: 767px) { .services-section { padding-bottom: 75px; } } .services-section .section-title-text p { font-size: 18px; font-size: 1rem; margin: 0; text-align: right; padding-top: 20px; } @media (max-width: 991px) { .services-section .section-title-text p { text-align: left; padding-top: 0; margin-bottom: 50px; } } .services-section .service-grids { margin: 0 -15px; } @media (max-width: 991px) { .services-section .service-grids { margin: 0 -7.5px; } } .services-section .service-grids1 { margin: 0 -15px; } @media (max-width: 991px) { .services-section .service-grids1 { margin: 0 -7.5px; } } .services-section .service-grids .grid { background-color: #fff; width: calc(25% - 30px); margin: 0 15px 30px; float: left; text-align: center; padding: 35px 35px; -webkit-box-shadow: 0px 0px 32px 0px rgba(16, 37, 65, 0.1); box-shadow: 0px 0px 32px 0px rgba(16, 37, 65, 0.1); border-radius: 10px; } .services-section .service-grids .grid1 { background-color: #fff; width: calc(25% - 30px); margin: 0 15px 30px; float: left; text-align: center; /*padding: 35px 35px;*/ } @media (max-width: 991px) { .services-section .service-grids .grid { width: calc(50% - 15px); margin: 0 7.5px 30px; } } @media (max-width: 600px) { .services-section .service-grids .grid { width: calc(100% - 15px); float: none; } } @media (max-width: 991px) { .services-section .service-grids .grid1 { width: calc(50% - 15px); margin: 0 7.5px 30px; } } @media (max-width: 600px) { .services-section .service-grids .grid1 { width: calc(100% - 15px); float: none; } } .services-section .icon .fi:before { font-size: 45px; font-size: 2.8125rem; color: #1481ff; } .services-section .grid h3 { font-size: 20px; font-size: 1.25rem; margin: 0.4em 0 0.7em; } @media (max-width: 767px) { .services-section .grid h3 { font-size: 18px; font-size: 1.125rem; } } .services-section .grid h3 a { color: #102541; } .services-section .grid h3 a:hover { color: #1481ff; } .services-section .grid p { margin: 0; } .services-section .grid1 h3 { font-size: 20px; font-size: 1.25rem; margin: 0.4em 0 0.7em; } @media (max-width: 767px) { .services-section .grid1 h3 { font-size: 18px; font-size: 1.125rem; } } .services-section .grid1 h3 a { color: #102541; } .services-section .grid1 h3 a:hover { color: #1481ff; } .services-section .grid1 p { margin: 0; margin-top: 10px; } .services-section .all-services { text-align: center; } .services-section .all-services p { font-size: 18px; font-size: 1.125rem; font-weight: 600; color: #102541; margin: 0; padding-top: 10px; } .services-section .all-services p a { text-decoration: underline; color: #1481ff; } .services-pg-section { padding-bottom: 80px; } @media (max-width: 991px) { .services-pg-section { padding-bottom: 60px; } } @media (max-width: 767px) { .services-pg-section { padding-bottom: 50px; } } /*-------------------------------------------------------------- #0.9 track-contact --------------------------------------------------------------*/ .track-contact, .track-contact-s2 { background: url("../images/track-contact-bg.png") center bottom/cover no-repeat local; padding-bottom: 0; } .track-contact .track-trace, .track-contact-s2 .track-trace, .track-contact .quote-form, .track-contact-s2 .quote-form { width: 50%; float: left; } @media (max-width: 650px) { .track-contact .track-trace, .track-contact-s2 .track-trace, .track-contact .quote-form, .track-contact-s2 .quote-form { width: 100%; float: none; } } .track-contact .track-trace h3, .track-contact-s2 .track-trace h3, .track-contact .quote-form h3, .track-contact-s2 .quote-form h3 { font-size: 20px; font-size: 1.25rem; margin: 0 0 1em; } @media (max-width: 991px) { .track-contact .track-trace h3, .track-contact-s2 .track-trace h3, .track-contact .quote-form h3, .track-contact-s2 .quote-form h3 { font-size: 18px; font-size: 1.125rem; } } .track-contact .track-trace label, .track-contact-s2 .track-trace label, .track-contact .quote-form label, .track-contact-s2 .quote-form label { font-size: 14px; font-size: 0.875rem; font-weight: bold; color: #57667e; display: block; margin-bottom: 8px; } @media (max-width: 991px) { .track-contact .track-trace label, .track-contact-s2 .track-trace label, .track-contact .quote-form label, .track-contact-s2 .quote-form label { font-size: 12px; font-size: 0.75rem; } } .track-contact .track-trace input, .track-contact-s2 .track-trace input, .track-contact .track-trace select, .track-contact-s2 .track-trace select, .track-contact .quote-form input, .track-contact-s2 .quote-form input, .track-contact .quote-form select, .track-contact-s2 .quote-form select { height: 45px; border: 1px solid #dde0e4; -webkit-box-shadow: none; box-shadow: none; color: #57667e; border-radius: 0; } .track-contact .track-trace form ::-webkit-input-placeholder, .track-contact-s2 .track-trace form ::-webkit-input-placeholder, .track-contact .quote-form form ::-webkit-input-placeholder, .track-contact-s2 .quote-form form ::-webkit-input-placeholder { font-style: 16px; font-style: normal; color: #57667e; } .track-contact .track-trace form :-moz-placeholder, .track-contact-s2 .track-trace form :-moz-placeholder, .track-contact .quote-form form :-moz-placeholder, .track-contact-s2 .quote-form form :-moz-placeholder { font-style: 16px; font-style: normal; color: #57667e; } .track-contact .track-trace form ::-moz-placeholder, .track-contact-s2 .track-trace form ::-moz-placeholder, .track-contact .quote-form form ::-moz-placeholder, .track-contact-s2 .quote-form form ::-moz-placeholder { font-style: 16px; font-style: normal; color: #57667e; } .track-contact .track-trace form :-ms-input-placeholder, .track-contact-s2 .track-trace form :-ms-input-placeholder, .track-contact .quote-form form :-ms-input-placeholder, .track-contact-s2 .quote-form form :-ms-input-placeholder { font-style: 16px; font-style: normal; color: #57667e; } .track-contact .track-trace form > div + div, .track-contact-s2 .track-trace form > div + div, .track-contact .quote-form form > div + div, .track-contact-s2 .quote-form form > div + div { margin-top: 30px; } .track-contact .track-trace .submit-btn, .track-contact-s2 .track-trace .submit-btn, .track-contact .quote-form .submit-btn, .track-contact-s2 .quote-form .submit-btn { background-color: #1481ff; width: 100%; height: 45px; font-size: 14px; font-size: 0.875rem; font-weight: bold; color: #fff; text-align: center; border: 0; border-radius: 5px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s; } .track-contact .track-trace .submit-btn:hover, .track-contact-s2 .track-trace .submit-btn:hover, .track-contact .quote-form .submit-btn:hover, .track-contact-s2 .quote-form .submit-btn:hover { background-color: #ed4b02; } .track-contact .track-trace, .track-contact-s2 .track-trace { background-color: #fff; height: 663px; padding: 55px 45px; -webkit-box-shadow: 0px 0px 32px 0px rgba(16, 37, 65, 0.1); box-shadow: 0px 0px 32px 0px rgba(16, 37, 65, 0.1); position: relative; } @media (max-width: 991px) { .track-contact .track-trace, .track-contact-s2 .track-trace { height: 652px; } } @media (max-width: 767px) { .track-contact .track-trace, .track-contact-s2 .track-trace { height: 612px; padding: 35px 25px; } } @media (max-width: 650px) { .track-contact .track-trace, .track-contact-s2 .track-trace { height: auto; } } .track-contact .track-trace p, .track-contact-s2 .track-trace p { font-size: 14px; font-size: 0.875rem; margin: 0; position: absolute; bottom: 55px; } @media (max-width: 991px) { .track-contact .track-trace p, .track-contact-s2 .track-trace p { font-size: 12px; font-size: 0.75rem; } } @media (max-width: 650px) { .track-contact .track-trace p, .track-contact-s2 .track-trace p { position: static; margin: 20px 0 0; } } .track-contact .quote-form, .track-contact-s2 .quote-form { background-color: #102541; padding: 55px 45px; } @media (max-width: 767px) { .track-contact .quote-form, .track-contact-s2 .quote-form { padding: 35px 25px; } } .track-contact .quote-form h3, .track-contact-s2 .quote-form h3, .track-contact .quote-form label, .track-contact-s2 .quote-form label { color: #fff; } .track-contact .quote-form label, .track-contact-s2 .quote-form label { font-weight: 600; } .track-contact .quote-form input, .track-contact-s2 .quote-form input, .track-contact .quote-form select, .track-contact-s2 .quote-form select { background-color: #1d3452; border: 0; margin-bottom: 20px; color: #a8aeb6; } .track-contact .quote-form form ::-webkit-input-placeholder, .track-contact-s2 .quote-form form ::-webkit-input-placeholder { font-style: 16px; font-style: normal; color: #a8aeb6; } .track-contact .quote-form form :-moz-placeholder, .track-contact-s2 .quote-form form :-moz-placeholder { font-style: 16px; font-style: normal; color: #a8aeb6; } .track-contact .quote-form form ::-moz-placeholder, .track-contact-s2 .quote-form form ::-moz-placeholder { font-style: 16px; font-style: normal; color: #a8aeb6; } .track-contact .quote-form form :-ms-input-placeholder, .track-contact-s2 .quote-form form :-ms-input-placeholder { font-style: 16px; font-style: normal; color: #a8aeb6; } /*-------------------------------------------------------------- #1.0 faq-achievement-section --------------------------------------------------------------*/ .faq-achievement-section { /*** skills progress bar ***/ } @media screen and (min-width: 1200px) { .faq-achievement-section .achievement-container { padding-left: 50px; } } @media (max-width: 991px) { .faq-achievement-section .achievement-container { margin-top: 70px; } .faq-achievement-section .achievement-container p { margin-top: -15px; } } .faq-achievement-section .skills { padding-top: 30px; } .faq-achievement-section .skills .skill { margin-bottom: 35px; } .faq-achievement-section .skills .skill:last-child { margin-bottom: 0; } .faq-achievement-section .skills .skill:last-child .progress { margin-bottom: 0; } .faq-achievement-section .skills h6 { font-size: 14px; font-size: 0.875rem; margin: 0 0 0.6em; text-transform: capitalize; } @media (max-width: 991px) { .faq-achievement-section .skills h6 { font-size: 14px; font-size: 0.875rem; } } .faq-achievement-section .skills .progress { background-color: #e6e6e6; height: 5px; -webkit-box-shadow: none; box-shadow: none; overflow: visible; box-shadow: none; position: relative; border-radius: 3px; } .faq-achievement-section .skills .progress > span { font-size: 14px; font-size: 0.875rem; font-weight: bold; color: #57667e; padding: 2px 6px; text-align: center; position: absolute; right: 20px; top: -32px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; } @media (max-width: 991px) { .faq-achievement-section .skills .progress > span { padding: 0 6px; } } .faq-achievement-section .skills .progress-bar { background: #1481ff; position: relative; -webkit-box-shadow: none; box-shadow: none; border-radius: 3px; } .faq-achievement-section .skills .progress-bar:after { content: ""; width: 10px; height: 10px; background-color:#1481ff; border-radius: 50%; position: absolute; right: 0; top: -3px; -webkit-box-shadow: 0 0 5px #969696; box-shadow: 0 0 5px #969696; } /*-------------------------------------------------------------- #1.1 testimonials-section --------------------------------------------------------------*/ .testimonials-section { background-color: #f0fbff; padding-bottom: 40px; position: relative; } .testimonials-section:before { background: url("../images/testimonials-bg.png") left bottom/cover no-repeat local; content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; } @media (max-width: 991px) { .testimonials-section { padding-bottom: 30px; } } @media (max-width: 767px) { .testimonials-section { padding-bottom: 10px; } } .testimonials-section .testimonial-grids { margin: 0 -15px; } .testimonials-section .testimonial-grids .grid { width: calc(50% - 30px); float: left; margin: 0 15px 50px; } @media (max-width: 991px) { .testimonials-section .testimonial-grids .grid { width: calc(50% - 30px); } } @media (max-width: 600px) { .testimonials-section .testimonial-grids .grid { width: calc(100% - 30px); float: none; } } .testimonials-section .quote { background: #fff; padding: 45px; height: 400px; overflow: hidden; position: relative; border-radius: 5px; } @media (max-width: 767px) { .testimonials-section .quote { padding: 30px 25px; overflow: hidden; height: 480px; } } .testimonials-section .quote p { /*font-style: italic;*/ font-size:14px; } .testimonials-section .quote:before { content: ""; border-right: 30px solid transparent; border-top: 20px solid #fff; position: absolute; left: 35px; bottom: -20px; } .testimonials-section .client-info { margin-top: 15px; margin-bottom: 35px; position: relative; padding-left: 75px; } .testimonials-section .client-info .img-holder { position: absolute; left: 0; top: 0; } .testimonials-section .client-info .img-holder img { border-radius: 50%; width: 64px; } } .testimonials-section .client-info h5 { font-size: 16px; font-size: 1rem; margin: 0 0 0.3em; padding: 0.8em 0 0; } @media (max-width: 767px) { .testimonials-section .client-info h5 { font-size: 14px; font-size: 0.875rem; } } .testimonials-section .client-info p { font-size: 12px; font-size: 0.95rem; color: #fc4e04; margin: 0; line-height: 1.7em; } /*-------------------------------------------------------------- #1.2 fun-fact-section --------------------------------------------------------------*/ .fun-fact-section { background: url("../images/dotted-map.png") center bottom/70% no-repeat local; text-align: center; } @media (max-width: 767px) { .fun-fact-section { padding-bottom: 30px; } } .fun-fact-section h2 { font-size: 36px; font-size: 2.25rem; margin: 0 0 1.8em; } @media (max-width: 991px) { .fun-fact-section h2 { font-size: 26px; font-size: 1.625rem; } } @media (max-width: 767px) { .fun-fact-section h2 { font-size: 25px; font-size: 1.5625rem; } } .fun-fact-section .fun-fact-grids .grid { width: 25%; float: left; } @media (max-width: 767px) { .fun-fact-section .fun-fact-grids .grid { width: 50%; margin-bottom: 50px; } } .fun-fact-section .grid h3 { font-size: 48px; font-size: 3rem; font-weight: 300; margin: 0 0 0.2em; } @media (max-width: 991px) { .fun-fact-section .grid h3 { font-size: 40px; font-size: 2.5rem; } } @media (max-width: 767px) { .fun-fact-section .grid h3 { font-size: 30px; font-size: 1.875rem; } } .fun-fact-section .grid h3 + p { font-size: 16px; font-size: 1rem; margin: 0; } @media (max-width: 991px) { .fun-fact-section .grid h3 + p { font-size: 15px; font-size: 0.9375rem; } } /*-------------------------------------------------------------- #1.3 portfolio-section --------------------------------------------------------------*/ .portfolio-section { position: relative; padding-top: 0; } .portfolio-section:before { content: ""; width: 100%; height: 50%; background: #f0fbff; position: absolute; left: 0; bottom: 0; } .portfolio-section .portfolio-grids .grid { position: relative; /*overflow: hidden;*/ } .portfolio-section .portfolio-grids .grid:hover { cursor: -webkit-grab; cursor: grab; } .portfolio-section .portfolio-grids .grid .details { background-color: rgba(16, 37, 65, 0.9); width: 100%; height: 100%; position: absolute; left: 0; top: 30%; opacity: 0; visibility: hidden; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s; transition: all 0.5s; } .portfolio-section .portfolio-grids .grid .details:before { content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; opacity: 0.85; } .portfolio-section .portfolio-grids .grid .inner { width: 100%; padding: 25px; position: absolute; left: 0; bottom: 25px; } .portfolio-section .portfolio-grids .grid h3 { font-size: 17px; font-size: 1.0625rem; margin: 0 0 0.3em; text-transform: capitalize; } @media (max-width: 991px) { .portfolio-section .portfolio-grids .grid h3 { font-size: 15px; font-size: 0.9375rem; } } .portfolio-section .portfolio-grids .grid h3 a { color: #fff; font-size: 1.75rem; } .portfolio-section .portfolio-grids .grid p { font-size: 14px; font-size: 1.25rem; font-weight: 600; color: #1481ff; margin: 0; } @media (max-width: 991px) { .portfolio-section .portfolio-grids .grid p { font-size: 12px; font-size: 0.75rem; } } .portfolio-section .portfolio-grids .grid:hover .details { opacity: 1; top: 0; visibility: visible; } .portfolio-section .all-portfolio { text-align: center; margin-top: 55px; } .portfolio-pg-section { padding: 110px 0 100px; } @media (max-width: 991px) { .portfolio-pg-section { padding: 90px 0 80px; } } @media (max-width: 767px) { .portfolio-pg-section { padding: 80px 0 70px; } } /*-------------------------------------------------------------- #1.4 partners-section --------------------------------------------------------------*/ .partners-section .container { position: relative; padding: 65px 15px 35px 15px; } .partners-section .separator { background: #f4f4f4; width: calc(100% - 30px); height: 1px; position: absolute; left: 15px; bottom: 0; } .partners-section .grid { text-align: center; } .partners-section .grid img { height: 80px; margin: auto 0 ; display: inline-block; } /*-------------------------------------------------------------- #1.5 blog-section --------------------------------------------------------------*/ .blog-section { padding-bottom: 50px; } @media (max-width: 991px) { .blog-section { padding-bottom: 40px; } } @media (max-width: 767px) { .blog-section { padding-bottom: 30px; } } .blog-section .blog-grids { margin: 0 -15px; position: relative; } @media (max-width: 767px) { .blog-section .blog-grids { margin: 0 -7.5px; } } .blog-section .blog-grids .grid { width: calc(33% - 30px); float: left; margin: 0 15px 50px; border: 1px solid #ebf4fd; padding: 45px 35px; position: relative; overflow: hidden; } @media (max-width: 991px) { .blog-section .blog-grids .grid { width: calc(50% - 30px); } } @media (max-width: 767px) { .blog-section .blog-grids .grid { width: calc(50% - 15px); margin: 0 7.5px 50px; padding: 35px 20px; } } @media (max-width: 550px) { .blog-section .blog-grids .grid { width: calc(100% - 15px); float: none; } } .blog-section .grid .overlay { background: #1481ff; width: 100%; height: 100%; text-align: center; position: absolute; left: 0; top: -10%; display: table; opacity: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s; visibility: hidden; } .blog-section .grid .overlay .middle { display: table-cell; vertical-align: middle; } .blog-section .grid .overlay a:hover { background: #fff; color: #102541; } .blog-section .grid:hover .overlay { opacity: 1; visibility: visible; top: 0; } .blog-section .entry-meta { position: relative; padding-left: 88px; min-height: 70px; margin-bottom: 30px; } .blog-section .entry-meta .author { position: absolute; left: 0; } .blog-section .entry-meta img { border-radius: 50%; } .blog-section .entry-meta h4 { font-size: 18px; font-size: 1.125rem; font-weight: bold; margin: 0 0 0.3em; padding-top: 0.7em; } @media (max-width: 767px) { .blog-section .entry-meta h4 { font-size: 16px; font-size: 1rem; } } .blog-section .entry-meta .date { font-size: 14px; font-size: 0.875rem; margin: 0; } .blog-section .entry-details h3 { font-size: 20px; font-size: 1.25rem; font-weight: bold; margin: 0 0 0.8em; line-height: 1.3em; } @media (max-width: 767px) { .blog-section .entry-details h3 { font-size: 18px; font-size: 1.125rem; } } .blog-section .entry-details h3 a { color: #102541; } .blog-section .entry-details p { margin-bottom: 0; } /*-------------------------------------------------------------- #1.5 cta-section-s2 --------------------------------------------------------------*/ .cta-section-s2 { background: #ebf4fd url("../images/dotted-map.png") center center; padding: 50px 0; } @media (max-width: 767px) { .cta-section-s2 { text-align: center; } } .cta-section-s2 h2 { font-size: 30px; font-size: 1.575rem; margin: 0 0 0.5em; line-height: 2em; } @media (max-width: 991px) { .cta-section-s2 h2 { font-size: 25px; font-size: 1.5625rem; } } @media (max-width: 767px) { .cta-section-s2 h2 { font-size: 20px; font-size: 1.25rem; } } .cta-section-s2 p { font-size: 18px; font-size: 1rem; margin-bottom: 0; } .cta-section-s2 .contact-info { float: right; text-align: center; } @media (max-width: 767px) { .cta-section-s2 .contact-info { float: none; margin-top: 40px; } } .cta-section-s2 .fi:before { font-size: 60px; font-size: 3.75rem; color: #1481ff; } @media (max-width: 991px) { .cta-section-s2 .fi:before { font-size: 50px; font-size: 3.125rem; } } .cta-section-s2 h5 { font-size: 18px; font-size: 1.125rem; margin: 1em 0 1.7em; } @media (max-width: 767px) { .cta-section-s2 h5 { font-size: 16px; font-size: 1rem; } } /*-------------------------------------------------------------- #home style 2 --------------------------------------------------------------*/ /*-------------------------------------------------------------- #2.1 features-section-s2 --------------------------------------------------------------*/ .features-section-s2, .features-section-s3, .features-section-s4 { padding-bottom: 0; } .features-section-s2 .feature-grids,.features-section-s2 .feature-grids2, .features-section-s3 .feature-grids , .features-section-s4 .feature-grids{ margin: 0 -15px; } @media (max-width: 991px) { .features-section-s2 .feature-grids, .features-section-s3 .feature-grids, .features-section-s4 .feature-grids { margin: 0 -7.5px; } } .features-section-s2 .feature-grids .grid, .features-section-s3 .feature-grids .grid, { width: calc(33.33% - 30px); margin: 0 15px 30px; float: left; padding: 50px 40px; text-align: center; border-radius: 10px; -webkit-box-shadow: 0px 0px 36.8px 9.2px rgba(16, 37, 65, 0.1); box-shadow: 0px 0px 36.8px 9.2px rgba(16, 37, 65, 0.1); } .features-section-s2 .feature-grids2 .grid { width: calc(50% - 30px); margin: 0 15px 30px; float: left; padding: 50px 40px; text-align: left; } .features-section-s4 .feature-grids .grid, { width: calc(33.33% - 30px); margin: 0 15px 30px; float: left; padding: 50px 40px; text-align: center; } @media (max-width: 991px) { .features-section-s2 .feature-grids .grid, .features-section-s2 .feature-grids .grid,.features-section-s3 .feature-grids .grid,.features-section-s4 .feature-grids.grid { width: calc(48% - 15px); margin: 0 7.5px 30px; } .features-section-s2 .feature-grids2 .grid, { width: 49%; margin: 0 7.5px 30px; } } @media (max-width: 600px) { .features-section-s2 .feature-grids .grid, .features-section-s3 .feature-grids .grid, .features-section-s4 .feature-grids .grid ,.features-section-s2 .feature-grids2 .grid { width: calc(100% - 15px); float: none; } } .features-section-s2 .feature-grids2 .grid { /*width: 47.2%;*/ /*margin: 0 15px 30px;*/ float: left; text-align: left; padding: 20px 20px; /*text-align: center;*/ } .features-section-s2 .fi:before, .features-section-s3 .fi:before { font-size: 50px; font-size: 3.125rem; color: #1481ff; } .features-section-s2 .details h3, .features-section-s3 .details h3 { font-size: 20px; font-size: 1.25rem; margin: 0.3em 0 0.7em; } @media (max-width: 767px) { .features-section-s2 .details h3, .features-section-s3 .details h3 { font-size: 18px; font-size: 1.125rem; } } .features-section-s2 .details p, .features-section-s3 .details p { margin: 0 0 1em; } .features-section-s2 .details .read-more, .features-section-s3 .details .read-more { font-weight: bold; color: #1481ff; text-decoration: underline; } .features-section-s2 .details .read-more:hover, .features-section-s3 .details .read-more:hover { text-decoration: none; } /*-------------------------------------------------------------- #2.2 about-section-s2 --------------------------------------------------------------*/ .about-section-s2 h4 { font-size: 20px; font-size: 1.25rem; font-weight: 600; color: #57667e; line-height: 1.4em; margin: 1em 0; } @media (max-width: 767px) { .about-section-s2 h4 { font-size: 18px; font-size: 1.125rem; } } .about-section-s2 .quoter p { font-size: 17px; font-size: 1.0625rem; font-weight: 600; color: #102541; margin: 1.5em 0 2em; } .about-section-s2 .quoter p span { font-size: 15px; font-size: 0.9375rem; font-weight: normal; color: #57667e; } /*-------------------------------------------------------------- #2.3 services-section-s2 --------------------------------------------------------------*/ .services-section-s2 { background-color: #f0fbff; padding-bottom: 105px; } @media (max-width: 991px) { .services-section-s2 { padding-bottom: 85px; } } @media (max-width: 767px) { .services-section-s2 { padding-bottom: 75px; } } .services-section-s2 .section-title-text p { font-size: 18px; font-size: 1.125rem; margin: 0; text-align: right; padding-top: 20px; } @media (max-width: 991px) { .services-section-s2 .section-title-text p { text-align: left; padding-top: 0; margin-bottom: 50px; } } .services-section-s2 .grid { background-color: #ebf8fc; padding: 45px 35px; border: 1px solid #d0dde4; } .services-section-s2 .icon .fi:before { font-size: 45px; font-size: 2.8125rem; color: #1481ff; } .services-section-s2 .grid h3 { font-size: 20px; font-size: 1.25rem; margin: 0.4em 0 0.7em; } @media (max-width: 767px) { .services-section-s2 .grid h3 { font-size: 18px; font-size: 1.125rem; } } .services-section-s2 .grid h3 a { color: #102541; } .services-section-s2 .grid h3 a:hover { color: #1481ff; } .services-section-s2 .grid p { margin: 0; } .services-section-s2 .all-services { text-align: center; } .services-section-s2 .all-services p { font-size: 18px; font-size: 1.125rem; font-weight: 600; color: #102541; margin: 0; padding-top: 20px; } .services-section-s2 .all-services p a { text-decoration: underline; color: #1481ff; } .services-section-s2 .owl-theme .owl-controls { margin-top: 25px; } .services-section-s2 .owl-theme .owl-dots .owl-dot span { background: #a6b5c0; } .services-section-s2 .owl-theme .owl-dots .owl-dot.active span { background: #1481ff; } .services-pg-section-s2 { padding-bottom: 95px; } @media (max-width: 991px) { .services-pg-section-s2 { padding-bottom: 80px; } } @media (max-width: 767px) { .services-pg-section-s2 { padding-bottom: 70px; } } /*-------------------------------------------------------------- #2.4 track-contact-s2 --------------------------------------------------------------*/ .track-contact-s2 { background: url("../images/slider/slide-2.jpg") center bottom/cover no-repeat local; } /*-------------------------------------------------------------- #2.5 testimonials-section-s2 --------------------------------------------------------------*/ .testimonials-section-s2 { background-color: #f0fbff; position: relative; padding-top: 110px; } @media (max-width: 991px) { .testimonials-section-s2 { padding: 90px 0 80px; } } @media (max-width: 767px) { .testimonials-section-s2 { padding: 80px 0 70px; } } .testimonials-section-s2:before { background: url("../images/testimonials-bg-2.png") left bottom/cover no-repeat local; content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .testimonials-section-s2 .testimonial-grids img { width: auto; } .testimonials-section-s2 .testimonial-grids { padding-left: 60px; } @media (max-width: 991px) { .testimonials-section-s2 .testimonial-grids { padding-left: 0; } } .testimonials-section-s2 .grid .fi:before { font-size: 60px; font-size: 3.75rem; color: #1481ff; display: block; padding-left: 3px; margin: 1em 0 0.3em; } @media (max-width: 991px) { .testimonials-section-s2 .grid .fi:before { font-size: 50px; font-size: 3.125rem; margin: 0 0 0.3em; } } @media (max-width: 767px) { .testimonials-section-s2 .grid .fi:before { font-size: 40px; font-size: 2.5rem; } } .testimonials-section-s2 .quote p { font-size: 19px; font-size: 1.1875rem; color: #102541; font-style: italic; } @media (max-width: 767px) { .testimonials-section-s2 .quote p { font-size: 16px; font-size: 1rem; } } .testimonials-section-s2 .client-info { margin-top: 35px; position: relative; padding-left: 75px; height: 65px; } .testimonials-section-s2 .client-info .img-holder { position: absolute; left: 0; top: 0; } .testimonials-section-s2 .client-info .img-holder img { border-radius: 50%; } .testimonials-section-s2 .client-info h5 { font-size: 16px; font-size: 1rem; margin: 0 0 0.3em; padding: 0.8em 0 0; } @media (max-width: 767px) { .testimonials-section-s2 .client-info h5 { font-size: 14px; font-size: 0.875rem; } } .testimonials-section-s2 .client-info p { font-size: 12px; font-size: 0.75rem; margin: 0; line-height: 1.7em; } .testimonials-section-s2 .owl-theme .owl-controls { margin-top: 25px; text-align: left; } .testimonials-section-s2 .owl-theme .owl-dots .owl-dot span { background: #a6b5c0; } .testimonials-section-s2 .owl-theme .owl-dots .owl-dot.active span { background: #1481ff; } @media (max-width: 991px) { .testimonials-section-s2 .testimonial-left-img-holder { display: none; } } /*-------------------------------------------------------------- #home style 3 --------------------------------------------------------------*/ /*-------------------------------------------------------------- #3.1 features-section-s3 --------------------------------------------------------------*/ .features-section-s3 .feature-grids .grid { -webkit-box-shadow: none; box-shadow: none; border: 2px solid #ecf3fd; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s; } .features-section-s3 .feature-grids .grid:hover { -webkit-box-shadow: 0px 0px 36.8px 9.2px rgba(16, 37, 65, 0.1); box-shadow: 0px 0px 36.8px 9.2px rgba(16, 37, 65, 0.1); } /*-------------------------------------------------------------- #about page --------------------------------------------------------------*/ /*-------------------------------------------------------------- #4.1 mission-vision-section --------------------------------------------------------------*/ .mission-vision-section { padding-bottom: 0; } @media (max-width: 991px) { .mission-vision-section { padding-bottom: 35px; } } @media (max-width: 767px) { .mission-vision-section { padding-bottom: 25px; } } .mission-vision-section .mission-vision-grids { margin: 0 -15px; } @media (max-width: 767px) { .mission-vision-section .mission-vision-grids { margin: 0 -7.5px; } } .mission-vision-section .mission-vision-grids .grid { width: calc(33.33% - 30px); float: left; margin: 0 15px 50px; } @media (max-width: 991px) { .mission-vision-section .mission-vision-grids .grid { width: calc(50% - 30px); } } @media (max-width: 767px) { .mission-vision-section .mission-vision-grids .grid { width: calc(50% - 15px); margin: 0 7.5px 50px; } } @media (max-width: 600px) { .mission-vision-section .mission-vision-grids .grid { width: calc(100% - 15px); float: none; } } .mission-vision-section .title-area { text-align: center; margin-bottom: 50px; } .mission-vision-section .title-area h2 { font-size: 24px; font-size: 1.5rem; font-weight: 600; line-height: 1.4em; margin: -0.38em 0 0; } @media (max-width: 991px) { .mission-vision-section .title-area h2 { font-size: 22px; font-size: 1.375rem; } } .mission-vision-section .grid .img-holder { margin-bottom: 30px; } .mission-vision-section .grid h3 { font-size: 22px; font-size: 1.375rem; margin: 0 0 0.6em; } @media (max-width: 991px) { .mission-vision-section .grid h3 { font-size: 18px; font-size: 1.125rem; } } .mission-vision-section .grid p { margin-bottom: 0; } /*-------------------------------------------------------------- #contact page --------------------------------------------------------------*/ /*-------------------------------------------------------------- #5.1 contact-pg-section --------------------------------------------------------------*/ .contact-pg-section .section-title-s3 p { font-size: 16px; font-size: 1rem; margin: 1em 0 0; line-height: 2em; } .contact-pg-section .submit-btn-wrapper { text-align: center; } .contact-pg-section .submit-btn-wrapper button { border: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s; } .contact-pg-section form { overflow: hidden; margin: 0 -15px; } @media (max-width: 767px) { .contact-pg-section form { margin: 0 0 0 -15px; } } .contact-pg-section form .one-third-col { width: 33.33%; float: left; } @media (max-width: 600px) { .contact-pg-section form .one-third-col { width: 100%; float: left; } } .contact-pg-section form div { padding: 0 15px 30px; } @media (max-width: 767px) { .contact-pg-section form div { padding: 0 0 15px 15px; } } .contact-pg-section form .submit-btn-wrapper { padding-bottom: 0; } .contact-pg-section form input, .contact-pg-section form textarea { background: #fff; font-size: 16px; font-size: 1rem; height: 55px; padding: 6px 15px; border: 2px solid #ebeff3; border-radius: 0; -webkit-box-shadow: none; box-shadow: none; } @media (max-width: 767px) { .contact-pg-section form input, .contact-pg-section form textarea { height: 45px; border: 1px solid #ebeff3; } } .contact-pg-section form input:focus, .contact-pg-section form textarea:focus { -webkit-box-shadow: none; box-shadow: none; border-color: #1481ff; } .contact-pg-section form textarea { height: 200px; padding: 15px; } .contact-pg-section .contact-info { margin-top: 75px; -webkit-box-shadow: 0px 9px 57px 0px rgba(0, 0, 0, 0.13); box-shadow: 0px 9px 57px 0px rgba(0, 0, 0, 0.13); text-align: center; } @media (max-width: 991px) { .contact-pg-section .contact-info { margin-top: 60px; } } @media (max-width: 767px) { .contact-pg-section .contact-info { margin-top: 50px; } } .contact-pg-section .contact-info > div { width: 33.33%; float: left; padding: 60px 35px; position: relative; border-left: 1px solid #efefef; } @media (max-width: 991px) { .contact-pg-section .contact-info > div { padding: 60px 35px 40px; margin-bottom: 20px; } } @media (max-width: 767px) { .contact-pg-section .contact-info > div { width: 100%; padding: 40px 25px 20px; border-left: 0; border-top: 1px solid #efefef; float: none; } } .contact-pg-section .contact-info .icon i { font-size: 50px; font-size: 3.125rem; color: #1481ff; } @media (max-width: 991px) { .contact-pg-section .contact-info .icon i { font-size: 40px; font-size: 2.5rem; } } @media (max-width: 767px) { .contact-pg-section .contact-info .icon i { font-size: 35px; font-size: 2.1875rem; } } .contact-pg-section .contact-info h5 { font-family: Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial, sans-serif; font-size: 18px; font-size: 1.125rem; margin: 1em 0 0.5em; } .contact-pg-section .contact-map { height: 450px; margin-top: 100px; } @media (max-width: 991px) { .contact-pg-section .contact-map { margin-top: 80px; } } @media (max-width: 767px) { .contact-pg-section .contact-map { height: 350px; margin-top: 70px; } } .contact-pg-section .contact-map iframe { width: 100%; height: 100%; border: 0; outline: 0; } /*-------------------------------------------------------------- #project single page --------------------------------------------------------------*/ /*-------------------------------------------------------------- #6.1 project-sigle-section --------------------------------------------------------------*/ .project-sigle-section .project-info { background-color: #e9f2fb; max-width: 485px; height: 443px; padding: 45px; border: 4px solid #dfeaf5; z-index: 1; } @media (max-width: 1199px) { .project-sigle-section .project-info { height: 364px; } } @media (max-width: 991px) { .project-sigle-section .project-info { margin: 50px 0 0; padding: 25px; height: auto; } } .project-sigle-section .project-info h3 { font-size: 22px; font-size: 1.375rem; margin: 0 0 1em; } @media (max-width: 991px) { .project-sigle-section .project-info h3 { font-size: 18px; font-size: 1.125rem; } } .project-sigle-section .project-info ul { list-style: none; } @media (max-width: 991px) { .project-sigle-section .project-info ul { font-size: 14px; font-size: 0.875rem; } } .project-sigle-section .project-info ul > li + li { margin-top: 12px; } .project-sigle-section .project-info li span { font-weight: bold; display: inline-block; padding-right: 5px; } .project-sigle-section .content-area h2 { font-size: 32px; font-size: 2rem; margin: 2em 0 0.8em; } @media (max-width: 991px) { .project-sigle-section .content-area h2 { font-size: 28px; font-size: 1.75rem; } } @media (max-width: 767px) { .project-sigle-section .content-area h2 { font-size: 25px; font-size: 1.5625rem; } } .project-sigle-section .content-area p { margin-bottom: 1.7em; } .project-sigle-section .challange-solution-section { margin-top: 70px; } .project-sigle-section .challange-solution-section ul { list-style: none; padding-bottom: 25px; } .project-sigle-section .challange-solution-section ul > li + li { margin-top: 8px; } .project-sigle-section .challange-solution-section li i { color: #1481ff; display: inline-block; padding-right: 7px; position: relative; top: 2px; } .project-sigle-section .prev-next-project { background: #fbfbfb; padding: 28px 22px; border: 2px solid #f7f7f7; margin-top: 80px; overflow: hidden; } @media (max-width: 767px) { .project-sigle-section .prev-next-project { text-align: center; padding: 35px 22px; } } .project-sigle-section .prev-next-project > div { display: inline-block; position: relative; padding-left: 75px; } @media (max-width: 767px) { .project-sigle-section .prev-next-project > div { display: block; float: none; padding: 0; } } .project-sigle-section .prev-next-project > div:first-child { float: left; } @media (max-width: 767px) { .project-sigle-section .prev-next-project > div:first-child { display: block; float: none; margin-bottom: 25px; } } .project-sigle-section .prev-next-project > div:last-child { float: right; padding: 0 75px 0 0; } @media (max-width: 767px) { .project-sigle-section .prev-next-project > div:last-child { display: block; float: none; padding: 0; } } .project-sigle-section .prev-next-project .icon { position: absolute; left: 0; top: 5px; border-right: 1px solid #e8e8e8; padding-right: 18px; } @media (max-width: 767px) { .project-sigle-section .prev-next-project .icon { display: none; } } .project-sigle-section .prev-next-project .icon .fi:before { font-size: 30px; font-size: 1.875rem; color: #1481ff; } .project-sigle-section .prev-next-project > div:last-child .icon { left: auto; right: 0; border-left: 1px solid #e8e8e8; padding-left: 18px; border-right: 0; padding-right: 0; } .project-sigle-section .prev-next-project a { display: block; } .project-sigle-section .prev-next-project a > span { color: #7b7b7b; } .project-sigle-section .prev-next-project a > h5 { font-size: 16px; font-size: 1rem; color: #102541; margin: 0.3em 0 0; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; -ms-transition: all 0.2s; transition: all 0.2s; } @media (max-width: 767px) { .project-sigle-section .prev-next-project a > h5 { font-size: 16px; font-size: 1rem; margin: 0.1em 0 0; } } .project-sigle-section .prev-next-project a:hover h5 { color: #1481ff; } /*-------------------------------------------------------------- #service single page --------------------------------------------------------------*/ /*-------------------------------------------------------------- #7.1 service-single-section --------------------------------------------------------------*/ .service-single-section { /*** service single tab ***/ } @media screen and (min-width: 1200px) { .service-single-section .service-single-content { padding-left: 20px; } } .service-single-section .service-single-content .theme-btn, .service-single-section .service-single-content .theme-btn-s2, .service-single-section .service-single-content .theme-btn-s3 { margin-top: 10px; } .service-single-section .service-single-content h2 { font-size: 30px; font-size: 1.875rem; margin: 0 0 0.7em; text-transform: capitalize; } @media (max-width: 991px) { .service-single-section .service-single-content h2 { font-size: 25px; font-size: 1.5625rem; } } @media (max-width: 767px) { .service-single-section .service-single-content h2 { font-size: 22px; font-size: 1.375rem; } } .service-single-section .service-single-content h3 { font-size: 22px; font-size: 1.375rem; text-transform: capitalize; margin: 0 0 1em; } @media (max-width: 991px) { .service-single-section .service-single-content h3 { font-size: 20px; font-size: 1.25rem; } } @media (max-width: 767px) { .service-single-section .service-single-content h3 { font-size: 20px; font-size: 1.25rem; } } .service-single-section .service-single-content p { margin-bottom: 1.3em; } .service-single-section .service-single-content blockquote { background: #f5f9ff; padding: 45px; margin: 55px 0 80px; border: 0; position: relative; font-size: 17px; font-size: 1.0625rem; color: #102541; font-weight: 600; border-left: 5px solid #e5eaf1; } @media (max-width: 991px) { .service-single-section .service-single-content blockquote { font-size: 14px; font-size: 0.875rem; padding: 35px 25px; margin: 45px 0 70px; } } .service-single-section .service-single-content blockquote p { margin-bottom: 0.5em; } .service-single-section .service-single-content blockquote > span { font-size: 13px; font-size: 0.8125rem; } .service-single-section .service-single-content .service-single-slider { position: relative; margin-bottom: 60px; } @media (max-width: 991px) { .service-single-section .service-single-content .service-single-slider { margin-bottom: 50px; } } .service-single-section .service-single-content .owl-controls { width: 100%; position: absolute; left: 0; bottom: 15px; } .service-single-section .service-single-content .owl-theme .owl-dots .owl-dot span { width: 13px; height: 13px; margin: 5px 7px; background: #ffffff; } .service-single-section .service-single-content .owl-theme .owl-dots .owl-dot.active span { background: #1481ff; } .service-single-section .service-single-content .benefit .details { width: calc(100% - 270px); float: left; padding-right: 25px; } @media (max-width: 767px) { .service-single-section .service-single-content .benefit .details { width: 100%; float: none; } } .service-single-section .service-single-content .benefit .img-holder { width: 270px; float: right; } @media (max-width: 767px) { .service-single-section .service-single-content .benefit .img-holder { width: 100%; float: none; margin: 45px 0; } } .service-single-section .service-single-content ul { margin-bottom: 30px; } .service-single-section .service-single-content ul li { position: relative; padding-left: 45px; font-weight: 600; } .service-single-section .service-single-content ul li span { background: #1481ff; width: 28px; height: 28px; line-height: 28px; color: #fff; border-radius: 30px; position: absolute; left: 0; top: -3px; text-align: center; } .service-single-section .service-single-content ul li .fi:before { font-size: 12px; font-size: 0.75rem; color: #fff; } .service-single-section .service-single-content ul > li + li { margin-top: 15px; } .service-single-section .service-single-tab { margin: 50px 0; } @media (max-width: 991px) { .service-single-section .service-single-tab { margin: 40px 0; } } .service-single-section .service-single-tab .nav { overflow: hidden; margin: 0; } .service-single-section .service-single-tab .nav li { float: left; padding-left: 0; } .service-single-section .service-single-tab .nav > li + li { margin-top: 0; margin-left: 3px; } @media (max-width: 767px) { .service-single-section .service-single-tab .nav > li + li { margin-left: 1px; } } .service-single-section .service-single-tab .nav a { background: #fff; font-size: 16px; font-size: 1rem; font-weight: bold; color: #102541; padding: 13px 25px; border: 1px solid rgba(253, 94, 22, 0.2); } @media (max-width: 767px) { .service-single-section .service-single-tab .nav a { font-size: 13px; font-size: 0.8125rem; padding: 8px 12px; text-transform: none; } } @media (max-width: 350px) { .service-single-section .service-single-tab .nav a { padding: 8px; } } .service-single-section .service-single-tab .nav .active a, .service-single-section .service-single-tab .nav a:hover { background: #1481ff; color: #fff; } .service-single-section .tab-content { padding: 35px 40px; border: 1px solid rgba(253, 94, 22, 0.2); margin-top: -1px; } @media (max-width: 767px) { .service-single-section .tab-content { padding: 25px 20px; } } .service-single-section .tab-content .tab-pane p { margin-bottom: 20px; } @media (max-width: 767px) { .service-single-section .tab-content .tab-pane p { margin-bottom: 15px; } } .service-single-section .tab-content .tab-pane p:last-child { margin-bottom: 0; } /*-------------------------------------------------------------- #blog page --------------------------------------------------------------*/ /*-------------------------------------------------------------- #8.1 blog-pg-section --------------------------------------------------------------*/ .blog-pg-section { /*** format-standard ***/ /*** format-gallery ***/ /*** format-quote ***/ /*** format-video ***/ } .blog-pg-section .blog-content .post { margin-bottom: 100px; } @media (max-width: 991px) { .blog-pg-section .blog-content .post { margin-bottom: 70px; } } @media (max-width: 767px) { .blog-pg-section .blog-content .post { margin-bottom: 60px; } } .blog-pg-section .entry-meta { list-style: none; overflow: hidden; margin: 15px 0; } @media (max-width: 767px) { .blog-pg-section .entry-meta { margin: 25px 0; } } .blog-pg-section .entry-meta li { font-weight: 500; font-size: 14px; font-size: 0.875rem; float: left; } @media (max-width: 767px) { .blog-pg-section .entry-meta li { font-size: 12px; font-size: 0.75rem; } } @media (max-width: 600px) { .blog-pg-section .entry-meta li { float: none; display: block; margin-bottom: 5px; } } .blog-pg-section .entry-meta li i { font-size: 16px; font-size: 1rem; display: inline-block; padding-right: 5px; } @media (max-width: 767px) { .blog-pg-section .entry-meta li i { font-size: 12px; font-size: 0.75rem; } } .blog-pg-section .entry-meta > li + li { margin-left: 20px; padding-left: 20px; position: relative; } @media (max-width: 600px) { .blog-pg-section .entry-meta > li + li { margin-left: 0; padding-left: 0; } } .blog-pg-section .entry-meta li a { color: #636893; } .blog-pg-section .entry-meta li a:hover { color: #1481ff; } .blog-pg-section .entry-meta li:last-child i { position: relative; top: 3px; } .blog-pg-section .post h3 { font-size: 30px; font-size: 1.875rem; line-height: 1.2em; margin: -0.27em 0 0.7em; } @media (max-width: 991px) { .blog-pg-section .post h3 { font-size: 25px; font-size: 1.5625rem; } } @media (max-width: 767px) { .blog-pg-section .post h3 { font-size: 22px; font-size: 1.375rem; } } .blog-pg-section .post h3 a { color: #102541; } .blog-pg-section .post h3 a:hover { color: #1481ff; } .blog-pg-section .post p { margin-bottom: 1em; } @media (max-width: 991px) { .blog-pg-section .post p { font-size: 16px; font-size: 1rem; } } .blog-pg-section .format-standard, .blog-pg-section .format-quote { background-color: #f5f9fd; padding: 25px 35px 25px; } @media (max-width: 767px) { .blog-pg-section .format-standard, .blog-pg-section .format-quote { padding: 25px 20px 45px; } } .blog-pg-section .format-gallery { position: relative; } .blog-pg-section .format-gallery .owl-controls { width: 100%; margin: 0; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .blog-pg-section .format-gallery .owl-controls .owl-nav [class*=owl-]:hover { background: #1481ff; } .blog-pg-section .format-gallery .owl-controls .owl-nav [class*=owl-] { background: rgba(133, 133, 133, 0.5); width: 50px; height: 50px; line-height: 50px; padding: 0; margin: 0; border-radius: 50%; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s; } .blog-pg-section .format-gallery .owl-controls .owl-nav .owl-prev, .blog-pg-section .format-gallery .owl-controls .owl-nav .owl-next { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .blog-pg-section .format-gallery .owl-controls .owl-nav .owl-prev { left: 15px; } .blog-pg-section .format-gallery .owl-controls .owl-nav .owl-next { right: 15px; } .blog-pg-section .format-quote { text-align: center; padding: 80px 60px; position: relative; } @media (max-width: 767px) { .blog-pg-section .format-quote { padding: 40px 20px; } } .blog-pg-section .format-quote p { margin-bottom: 0; } .blog-pg-section .format-quote:before { font-family: "Flaticon"; content: "\f114"; font-size: 200px; font-size: 12.5rem; color: #ecf3fb; margin-left: 0; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .blog-pg-section .format-quote h3, .blog-pg-section .format-quote p { position: relative; } .blog-pg-section .format-video .video-holder { position: relative; text-align: center; } .blog-pg-section .format-video .video-holder:before { content: ""; background-color: #102541; width: 100%; height: 100%; position: absolute; left: 0; top: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s; opacity: 0.5; } .blog-pg-section .format-video .video-holder:hover:before { opacity: 0.7; } .blog-pg-section .format-video .video-holder a { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .blog-pg-section .format-video .video-holder .fi:before { font-size: 80px; font-size: 5rem; color: #fff; } @media (max-width: 767px) { .blog-pg-section .format-video .video-holder .fi:before { font-size: 60px; font-size: 3.75rem; } } @media screen and (min-width: 1200px) { .blog-pg-left-sidebar .blog-sidebar { padding-right: 45px; padding-left: 0; } } @media screen and (min-width: 1200px) { .blog-pg-fullwidth .blog-content { padding: 0; } } /*-------------------------------------------------------------- #blog single page --------------------------------------------------------------*/ /*-------------------------------------------------------------- #9.1 blog-single-section --------------------------------------------------------------*/ .blog-single-section { /*** tag-share ***/ /*** author-box ***/ /*** more-posts ***/ /*** comments area ***/ /*** comment-respond ***/ } .blog-single-section .entry-meta { list-style: none; overflow: hidden; margin: 35px 0; } @media (max-width: 767px) { .blog-single-section .entry-meta { margin: 25px 0; } } .blog-single-section .entry-meta li { font-weight: 500; font-size: 14px; font-size: 0.875rem; float: left; } @media (max-width: 767px) { .blog-single-section .entry-meta li { font-size: 12px; font-size: 0.75rem; } } @media (max-width: 600px) { .blog-single-section .entry-meta li { float: none; display: block; margin-bottom: 5px; } } .blog-single-section .entry-meta li i { font-size: 16px; font-size: 1rem; display: inline-block; padding-right: 5px; } @media (max-width: 767px) { .blog-single-section .entry-meta li i { font-size: 12px; font-size: 0.75rem; } } .blog-single-section .entry-meta > li + li { margin-left: 20px; padding-left: 20px; position: relative; } @media (max-width: 600px) { .blog-single-section .entry-meta > li + li { margin-left: 0; padding-left: 0; } } .blog-single-section .entry-meta li a { color: #636893; } .blog-single-section .entry-meta li a:hover { color: #1481ff; } .blog-single-section .entry-meta li:last-child i { position: relative; top: 3px; } .blog-single-section .post h2 { font-size: 30px; font-size: 1.875rem; margin: -0.22em 0 0.7em; line-height: 1.3em; } @media (max-width: 991px) { .blog-single-section .post h2 { font-size: 30px; font-size: 1.875rem; } } @media (max-width: 767px) { .blog-single-section .post h2 { font-size: 25px; font-size: 1.5625rem; } } .blog-single-section .post p { margin-bottom: 1.5em; } .blog-single-section .post h3 { font-size: 24px; font-size: 1.5rem; line-height: 1.3em; margin: 1.8em 0 1em; } @media (max-width: 991px) { .blog-single-section .post h3 { font-size: 22px; font-size: 1.375rem; } } @media (max-width: 767px) { .blog-single-section .post h3 { font-size: 20px; font-size: 1.25rem; } } .blog-single-section .post blockquote { background-color: #1481ff; color: #fff; line-height: 1.6em; padding: 120px 45px 50px; margin-top: 60px; border: 0; text-align: center; position: relative; } @media (max-width: 767px) { .blog-single-section .post blockquote { padding: 55px 25px; } } .blog-single-section .post blockquote:before { font-family: "Flaticon"; content: "\f105"; font-size: 60px; font-size: 3.75rem; color: rgba(255, 255, 255, 0.5); position: absolute; left: 50%; top: 50px; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } @media (max-width: 767px) { .blog-single-section .post blockquote:before { display: none; } } .blog-single-section .post blockquote .quoter { font-size: 14px; font-size: 0.875rem; display: block; margin-top: 15px; } .blog-single-section .tag-share { border-top: 1px solid #e6f0fb; border-bottom: 1px solid #e6f0fb; margin: 75px 0 0; padding: 30px 0; color: #102541; } .blog-single-section .tag-share ul { list-style: none; display: inline-block; overflow: hidden; } .blog-single-section .tag-share ul li { float: left; } @media (max-width: 767px) { .blog-single-section .tag-share ul li { margin: 2px; } } .blog-single-section .tag-share ul > li + li { margin-left: 10px; } @media (max-width: 767px) { .blog-single-section .tag-share ul > li + li { margin: 2px; } } .blog-single-section .tag-share .tag { float: left; } .blog-single-section .tag-share .tag > span { color: #102541; font-weight: bold; display: inline-block; padding-right: 8px; } .blog-single-section .tag-share .tag ul { list-style: none; position: relative; top: 5px; } .blog-single-section .tag-share .tag li { position: relative; } .blog-single-section .tag-share .tag li:after { content: ","; position: absolute; right: -4px; bottom: 0; } .blog-single-section .tag-share .tag a { font-size: 14px; font-size: 0.875rem; color: #102541; } @media (max-width: 767px) { .blog-single-section .tag-share .tag a { font-size: 13px; font-size: 0.8125rem; } } .blog-single-section .tag-share .tag a:hover { color: #1481ff; } .blog-single-section .tag-share .share { float: right; position: relative; top: -15px; } .blog-single-section .tag-share .share > span { color: #102541; font-weight: 600; display: inline-block; padding-right: 8px; } .blog-single-section .tag-share .share ul { position: relative; top: 15px; } .blog-single-section .tag-share .share ul > li + li { margin-left: 10px; } @media (max-width: 767px) { .blog-single-section .tag-share .share ul > li + li { margin-left: 8px; } } @media (max-width: 767px) { .blog-single-section .tag-share .share ul > li { margin: 5px; } } .blog-single-section .tag-share .share a { width: 35px; height: 35px; line-height: 35px; text-align: center; border: 1px solid #eae6e6; border-radius: 50%; display: inline-block; font-size: 14px; font-size: 0.875rem; color: #627381; } @media (max-width: 767px) { .blog-single-section .tag-share .share a { font-size: 13px; font-size: 0.8125rem; } } .blog-single-section .tag-share .share a:hover { background: #1481ff; border-color: #1481ff; color: #fff !important; } .blog-single-section .tag-share .share ul > li:first-child a { color: #3c5ba4; } .blog-single-section .tag-share .share ul > li:nth-child(2) a { color: #47a0d9; } .blog-single-section .tag-share .share ul > li:nth-child(3) a { color: #0073b1; } .blog-single-section .tag-share .share ul > li:nth-child(4) a { color: #933f94; } .blog-single-section .author-box { padding: 35px 40px 25px; margin: 70px 0; border: 2px solid #dae9f9; } @media (max-width: 991px) { .blog-single-section .author-box { padding: 35px 40px; } } @media (max-width: 767px) { .blog-single-section .author-box { padding: 25px; } } .blog-single-section .author-box .author-avatar { float: left; } @media (max-width: 767px) { .blog-single-section .author-box .author-avatar { float: none; } } .blog-single-section .author-box .author-content { display: block; overflow: hidden; padding-left: 25px; } @media (max-width: 767px) { .blog-single-section .author-box .author-content { padding: 0; margin: 15px 0 0 0; } } .blog-single-section .author-box .author-content p { margin-bottom: 20px; } .blog-single-section .author-box .author-name { font-size: 16px; font-size: 1rem; font-weight: 600; display: inline-block; margin-bottom: 10px; color: #102541; } .blog-single-section .author-box .social-link { display: inline-block; list-style: none; } .blog-single-section .author-box .social-link li { float: left; margin-right: 12px; } .blog-single-section .author-box .social-link a { display: block; font-size: 13px; font-size: 0.8125rem; color: #102541; } .blog-single-section .author-box .social-link a:hover { color: #1481ff; } .blog-single-section .more-posts { overflow: hidden; border: 2px solid #dae9f9; padding: 0 25px; } .blog-single-section .more-posts > div { width: 50%; float: left; } @media (max-width: 767px) { .blog-single-section .more-posts > div { width: 100%; float: none; } } .blog-single-section .more-posts > div > a { display: inline-block; } .blog-single-section .more-posts .previous-post, .blog-single-section .more-posts .next-post { padding: 40px 0; } @media (max-width: 767px) { .blog-single-section .more-posts .previous-post, .blog-single-section .more-posts .next-post { padding: 25px 15px !important; } } .blog-single-section .more-posts .next-post { text-align: right; border-left: 1px solid #dae9f9; padding-left: 15px; padding-right: 5px; } @media (max-width: 767px) { .blog-single-section .more-posts .next-post { border-left: 0; text-align: left; border-top: 1px solid #dae9f9; } } .blog-single-section .more-posts .next-post .post-control-link { padding-right: 25px; position: relative; } @media (max-width: 767px) { .blog-single-section .more-posts .next-post .post-control-link { padding-right: 0; } } .blog-single-section .more-posts .next-post .post-control-link:before { font-family: "Flaticon"; content: "\f104"; position: absolute; right: 0; top: 0; } @media (max-width: 767px) { .blog-single-section .more-posts .next-post .post-control-link:before { display: none; } } .blog-single-section .more-posts .previous-post { padding-right: 15px; padding-left: 5px; } .blog-single-section .more-posts .previous-post .post-control-link { padding-left: 25px; position: relative; } @media (max-width: 767px) { .blog-single-section .more-posts .previous-post .post-control-link { padding-left: 0; } } .blog-single-section .more-posts .previous-post .post-control-link:before { font-family: "Flaticon"; content: "\f103"; position: absolute; left: 0; top: 0; } @media (max-width: 767px) { .blog-single-section .more-posts .previous-post .post-control-link:before { display: none; } } .blog-single-section .more-posts .previous-post > a > span, .blog-single-section .more-posts .next-post > a > span { display: block; } .blog-single-section .more-posts .post-control-link { font-size: 14px; font-size: 0.875rem; color: #57667e; } .blog-single-section .more-posts .post-name { font-size: 17px; font-size: 1.0625rem; color: #102541; margin: 0.7em 0 0; font-weight: 600; } @media (max-width: 991px) { .blog-single-section .more-posts .post-name { font-size: 18px; font-size: 1.125rem; } } .blog-single-section .more-posts a:hover .post-control-link { color: #1481ff; } .blog-single-section .comments-area { margin-top: 70px; } .blog-single-section .comments-area .comments { border: 2px solid #dae9f9; } .blog-single-section .comments-area li > div { border-bottom: 1px solid #dae9f9; padding: 35px; } @media (max-width: 991px) { .blog-single-section .comments-area li > div { padding: 35px 25px; } } .blog-single-section .comments-area ol { list-style-type: none; padding-left: 0; } .blog-single-section .comments-area ol ul { padding-left: 30px; list-style-type: none; } .blog-single-section .comments-area ol > li:last-child div { border-bottom: 0; } .blog-single-section .comments-area .comments-title { font-size: 22px; font-size: 1.375rem; font-weight: 600; margin: 0 0 1.5em; } @media (max-width: 991px) { .blog-single-section .comments-area .comments-title { font-size: 20px; font-size: 1.25rem; } } .blog-single-section .comments-area li > div { position: relative; } .blog-single-section .comments-area .comment-theme { position: absolute; left: 35px; } @media (max-width: 767px) { .blog-single-section .comments-area .comment-theme { position: static; } } .blog-single-section .comments-area .comment-theme img { border-radius: 50%; } .blog-single-section .comments-area .comment-main-area { padding-left: 100px; } @media (max-width: 767px) { .blog-single-section .comments-area .comment-main-area { padding-left: 0; margin-top: 25px; } } .blog-single-section .comments-area .comment-main-area p { margin-bottom: 20px; } .blog-single-section .comments-area .comments-meta h4 { font-size: 16px; font-size: 1rem; color: #102541; font-weight: bold; margin: 0 0 1em; } .blog-single-section .comments-area .comments-meta h4 span { font-size: 13px; font-size: 0.8125rem; color: #57667e; font-weight: normal; font-style: italic; text-transform: none; display: inline-block; padding-left: 5px; } @media (max-width: 767px) { .blog-single-section .comments-area .comments-meta h4 span { padding-left: 0; } } .blog-single-section .comments-area .comment-reply-link { background: #fe9262; font-size: 13px; font-size: 0.8125rem; width: 80px; height: 25px; line-height: 25px; font-weight: 600; color: #fff; text-align: center; border-radius: 50px; display: inline-block; } .blog-single-section .comments-area .comment-reply-link:hover { background-color: #1481ff; } .blog-single-section .comment-respond { margin-top: 70px; } .blog-single-section .comment-respond .comment-reply-title { font-size: 22px; font-size: 1.375rem; margin: 0 0 1.5em; } @media (max-width: 991px) { .blog-single-section .comment-respond .comment-reply-title { font-size: 20px; font-size: 1.25rem; } } .blog-single-section .comment-respond form input, .blog-single-section .comment-respond form textarea { background-color: #fff; width: 100%; height: 50px; border: 2px solid #dae9f9; padding: 6px 15px; margin-bottom: 15px; outline: 0; border-radius: 0; -webkit-box-shadow: none; box-shadow: none; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s; } .blog-single-section .comment-respond form input:focus, .blog-single-section .comment-respond form textarea:focus { -webkit-box-shadow: none; box-shadow: none; border-color: #1481ff; } @media (max-width: 991px) { .blog-single-section .comment-respond form input, .blog-single-section .comment-respond form textarea { height: 40px; } } .blog-single-section .comment-respond form textarea { height: 220px; padding: 15px; } @media (max-width: 991px) { .blog-single-section .comment-respond form textarea { height: 150px; } } .blog-single-section .comment-respond .form-inputs { overflow: hidden; } .blog-single-section .comment-respond .form-inputs > input:nth-child(2) { width: 49%; float: left; } @media (max-width: 767px) { .blog-single-section .comment-respond .form-inputs > input:nth-child(2) { width: 100%; float: none; } } .blog-single-section .comment-respond .form-inputs > input:nth-child(3) { width: 49%; float: right; } @media (max-width: 767px) { .blog-single-section .comment-respond .form-inputs > input:nth-child(3) { width: 100%; float: none; } } .blog-single-section .comment-respond .form-submit input { max-width: 180px; background-color: #1481ff; color: #fff; margin-bottom: 0; border: 0; outline: 0; text-transform: capitalize; font-weight: bold; border-radius: 50px; } .blog-single-section .comment-respond .form-submit input:hover { background-color: #102541; } @media screen and (min-width: 1200px) { .blog-single-left-sidebar-section .blog-sidebar { padding-right: 45px; padding-left: 0; } } /*-------------------------------------------------------------- #404 page --------------------------------------------------------------*/ /*-------------------------------------------------------------- #10.1 error-404-section --------------------------------------------------------------*/ .error-404-section .error { width: 50%; float: left; } @media (max-width: 991px) { .error-404-section .error { width: 100%; float: none; text-align: center; } } .error-404-section .error h2 { font-size: 200px; font-size: 12.5rem; margin: 0; } @media (max-width: 991px) { .error-404-section .error h2 { font-size: 150px; font-size: 9.375rem; } } @media (max-width: 767px) { .error-404-section .error h2 { font-size: 100px; font-size: 6.25rem; } } .error-404-section .error-message { width: 50%; float: left; margin-top: 40px; } @media (max-width: 991px) { .error-404-section .error-message { width: 100%; float: none; text-align: center; margin-top: 0; } } .error-404-section .error-message h3 { font-size: 20px; font-size: 1.25rem; margin: 0 0 0.8em; } .error-404-section .error-message p { margin-bottom: 1.8em; } /*# sourceMappingURL=style.css.map */ .main2,.main3 { padding: 40px 0 50px 0; } .main2 dl { width: 33%; margin: 0 1%; float: left; text-align: center; margin: 0 auto; } .main3 dl { width: 24%; margin: 0 1%; float: left; text-align: center; margin: 0 auto; } .main2 dl img,.main3 dl img { width: 80px; text-align: center; margin: 0 auto; } .main2 dl p,.main3 dl p { font-family: Helvetica, 'Microsoft Yahei', '微软雅黑', Arial, sans-serif; color: #0a1b36; font-size: 14px; width: 85%; text-align: center; margin: 10px auto; line-height: 26px; } .main2 dl .tit,.main3 dl .tit { font-size:24px; line-height: 50px; color: #102541; } /* Product Cards */ .product-cards { display: flex; flex-wrap: wrap; gap: 20px; } .product-card { width: calc(33.333% - 14px); display: flex; flex-direction: column; border: 1px solid #ebf4fd; border-radius: 4px; overflow: hidden; text-decoration: none; color: inherit; box-shadow: 0 4px 12px rgba(0,0,0,0.08); transition: box-shadow 0.3s, transform 0.3s, background 0.3s; } .product-card:hover { box-shadow: 0 10px 30px rgba(20,129,255,0.25); transform: translateY(-4px); background: #f8fbff; } .product-card .card-img { height: 0; padding-bottom: 44%; position: relative; overflow: hidden; } .product-card .card-img img { position: absolute; width: 100%; height: 100%; object-fit: cover; } .product-card .card-content { padding: 15px; flex: 1; } .product-card .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .product-card .card-header h4 { margin: 0; font-size: 16px; color: #102541; } .product-card .card-tag { background: #1481ff; color: #fff; padding: 2px 8px; border-radius: 3px; font-size: 12px; } .product-card .card-content p { margin: 0; font-size: 14px; color: #666; line-height: 1.5; } @media (max-width: 991px) { .product-card { width: calc(50% - 10px); } } @media (max-width: 550px) { .product-card { width: 100%; } }