html, body { margin: 0; font-size: 100%; background: #fff; scroll-behavior: smooth; } body a { text-decoration: none; } html { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } a:hover { text-decoration: none; } input[type="button"]:hover, input[type="submit"]:hover { transition: .5s ease-in; -webkit-transition: .5s ease-in; -moz-transition: .5s ease-in; -o-transition: .5s ease-in; -ms-transition: .5s ease-in; } h1, h2, h3, h4, h5, h6 { margin: 0 !important; font-weight: 600; } p { margin-top: 8px!important; font-size: 1em; color: #777; line-height: 1.8em; } ul { margin: 0; padding: 0; } body img { border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; } /* navigation */ .toggle, [id^=drop] { display: none; } /* Giving a background-color to the nav container. */ nav { margin: 0; padding: 0; } a.navbar-brand { font-size: 0.8em; font-weight: 100; letter-spacing: 1px; line-height: 0.8em; text-transform: uppercase; color: #fff; } #logo a { float: left; display: initial; } #logo a img { height: 28px; } /* Since we'll have the "ul li" "float:left" * we need to add a clear after the container. */ nav:after { content: ""; display: table; clear: both; } /* Removing padding, margin and "list-style" from the "ul", * and adding "position:reltive" */ nav ul { float: right; padding: 0; margin: 0; list-style: none; position: relative; } ul.menu { margin-top: 0.4em; } /* Positioning the navigation items inline */ nav ul li { margin: 0px; display: inline-block; } /* Styling the links */ nav a { color: #fff; font-size: 13px; letter-spacing: 1px; padding: 0 14px; font-weight: 600; margin: 0 0.5em; text-transform: uppercase; } nav ul li ul li:hover { background: #f8f9fa; } li.log-vj a { display: inline-block; } li.social-icons a span { margin: 0 3px; font-size: 1.4em; } /* Background color change on Hover */ .menu li a:hover { color: #43c3ea; } .menu li.active a { color: #43c3ea; } /* Hide Dropdowns by Default * and giving it a position of absolute */ nav ul ul { display: none; position: absolute; /* has to be the same number as the "line-height" of "nav a" */ top: 25px; padding: 10px; background: #fff; padding: 10px; z-index: 999; border: 1px solid #ddd; text-align: left; } .menu_ul_product { left: 80px; } .menu_ul_solution { left: 165px; } .menu_ul_business { left: 255px; } /* Display Dropdowns on Hover */ nav ul li:hover>ul { display: inherit; } /* Fisrt Tier Dropdown */ nav ul ul li { width: 170px; float: none; display: list-item; position: relative; } nav ul ul li a { color: #333; padding: 5px 10px; display: block; } /* Second, Third and more Tiers * We move the 2nd and 3rd etc tier dropdowns to the left * by the amount of the width of the first tier. */ nav ul ul ul li { position: relative; top: -60px; /* has to be the same number as the "width" of "nav ul ul li" */ left: 170px; } /* Change ' +' in order to change the Dropdown symbol */ li>a:only-child:after { content: ''; } /* Media Queries --------------------------------------------- */ @media all and (max-width:992px) { #logo { display: block; padding: 0; width: 100%; text-align: center; float: none; } nav { margin: 0; } /* Hide the navigation menu by default */ /* Also hide the */ .toggle+a, .menu { display: none; } /* Stylinf the toggle lable */ .toggle { display: block; padding: 7px 20px; font-size: 14px; text-decoration: none; border: none; float: right; background-color: #212529; color: #fff; cursor: pointer !important; margin-bottom: 0; text-transform: uppercase; margin-top: 0em; } .menu .toggle { float: none; text-align: left; margin: auto; width: 80%; padding: 5px; font-weight: normal; font-size: 16px; letter-spacing: 1px; } .toggle:hover { color: #333; background-color: #fff; } /* Display Dropdown when clicked on Parent Lable */ [id^=drop]:checked+ul { display: block; background: rgba(16, 16, 16, 0.85); padding: 15px 0; text-align: left; width: 100%; z-index: 99999; border: none; } /* Change menu item's width to 100% */ nav ul li { display: block; width: 100%; padding: 5px 0; } nav a:hover, nav ul ul ul a { background-color: transparent; } nav ul li ul li .toggle, nav ul ul a, nav ul ul ul a { padding: 14px 20px; color: #FFF; font-size: 17px; } label.toggle.toggle-2 { width: 94%; font-size: 13px; } nav ul li ul li .toggle, nav ul ul a { background-color: #343a40; } /* Hide Dropdowns by Default */ nav ul ul { float: none; position: static; color: #ffffff; /* has to be the same number as the "line-height" of "nav a" */ text-align: left; } /* Hide menus on hover */ nav ul ul li:hover>ul, nav ul li:hover>ul { display: none; } nav ul { margin-left: 0em; } /* Fisrt Tier Dropdown */ nav ul ul li { display: block; width: 100%; padding: 0; } nav ul ul ul li { position: static; /* has to be the same number as the "width" of "nav ul ul li" */ } nav ul ul li a { color: #fff; font-size: 0.8em; } nav ul li ul li:hover { background: none; } nav ul li.social-icons { display: inline-block; float: left; width: 32.3%; margin: 0 auto; text-align: center; } .tooltip { top: 0; left: 50%; padding: 0.2rem 0.5rem; } } @media all and (max-width: 330px) { nav ul li { display: block; width: 94%; } } /* header */ /* banner */ .top_w3pvt_main { position: relative; z-index: 1; } .nav_w3pvt { position: absolute; left: 0; right: 0; z-index: 99; margin: 0 auto; background: transparent; margin-top: 1.2em; } /* banner-hny-info */ .banner-hny-info { padding: 18em 0 14em; margin: 0 auto; position: absolute; top: 0; left: 0; right: 0; } /* banner slider */ #homepage-slider { position: relative; } .radio { display: none; } .images { overflow: hidden; top: 0; bottom: 0; left: 0; right: 0; width: 100%; } .images-inner { width: 500%; transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); } .image-slide { width: 20%; float: left; } .image-slide, .fake-radio, .radio-btn { transition: all 0.5s ease-out; } .fake-radio { text-align: center; position: absolute; bottom: 5%; right: 2%; z-index: 9; } /* Move slides overflowed container */ #slide1:checked~.images .images-inner { margin-left: 0; } #slide2:checked~.images .images-inner { margin-left: -100%; } #slide3:checked~.images .images-inner { margin-left: -200%; } /* Color of bullets */ #slide1:checked~div .fake-radio .radio-btn:nth-child(1), #slide2:checked~div .fake-radio .radio-btn:nth-child(2), #slide3:checked~div .fake-radio .radio-btn:nth-child(3) { background: #43c3ea; } .radio-btn { width: 10px; height: 10px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #fff; display: inline-block !important; margin: 0 5px; cursor: pointer; } /* Color of bullets - END */ /* Text of slides */ #slide1:checked~.labels .label:nth-child(1), #slide2:checked~.labels .label:nth-child(2), #slide3:checked~.labels .label:nth-child(3) { opacity: 1; } .label { opacity: 0; position: absolute; } /* Text of slides - END */ /* Calculate AUTOPLAY for BULLETS */ @keyframes bullet { 0%, 33.32333333333334% { background: #43c3ea; } 33.333333333333336%, 100% { background: #fff; } } #play1:checked~div .fake-radio .radio-btn:nth-child(1) { animation: bullet 12300ms infinite -1000ms; } #play1:checked~div .fake-radio .radio-btn:nth-child(2) { animation: bullet 12300ms infinite 3100ms; } #play1:checked~div .fake-radio .radio-btn:nth-child(3) { animation: bullet 12300ms infinite 7200ms; } /* Calculate AUTOPLAY for BULLETS - END */ /* Calculate AUTOPLAY for SLIDES */ @keyframes slide { 0%, 25.203252032520325% { margin-left: 0; } 33.333333333333336%, 58.53658536585366% { margin-left: -100%; } 66.66666666666667%, 91.869918699187% { margin-left: -200%; } } .st-slider>#play1:checked~.images .images-inner { animation: slide 12300ms infinite; } /* Calculate AUTOPLAY for SLIDES - END */ /* //banner slider */ /* background images for banner */ .banner-w3pvt-1 { background: url(../images/index/banner1.jpg) no-repeat top; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; -ms-background-size: cover; min-height: 800px; } .banner-w3pvt-2 { background: url(../images/index/banner2.jpg) no-repeat center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; -ms-background-size: cover; min-height: 800px; } .banner-w3pvt-3 { background: url(../images/index/banner3.jpg) no-repeat center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; -ms-background-size: cover; min-height: 800px; } .overlay-w3ls { background: rgba(0, 0, 0, 0.55); min-height: 800px; } .images-inner { position: relative; } .banner-hny-info h3 { font-size: 4em; font-weight: 700; letter-spacing: 2px; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); text-align: center; color: #fff; } .btn { border: 2px solid #fff; padding: 11px 30px; color: #fff; font-size: 16px; letter-spacing: 1px; text-transform: capitalize; display: inline-block; } .btn:hover { background: #43c3ea; border: 2px solid #43c3ea; color: #333; transition: .5s ease-in; -webkit-transition: .5s ease-in; -moz-transition: .5s ease-in; -o-transition: .5s ease-in; -ms-transition: .5s ease-in; } .btn.more { background: #43c3ea; border: 2px solid #43c3ea; color: #fff; } .btn.more.black:hover { background: #2cb4dd; border: 2px solid #2cb4dd; color: #fff; } .wthree-w3ls { border-bottom: 1px solid rgba(221, 221, 221, 0.25); padding-bottom: 1em; } /* Color Variables */ /* Social Icon Mixin */ /* Social Icons */ .social-icon { display: flex; align-items: center; justify-content: center; position: relative; /* width: 80px; */ /* height: 80px; */ /* margin: 0 0.5rem; */ /* border-radius: 50%; */ cursor: pointer; /* font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; */ /* font-size: 2.5rem; */ text-decoration: none; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); transition: all 0.15s ease; } .social-icon:hover { color: #fff; } .social-icon:hover .tooltip { visibility: visible; opacity: 1; -webkit-transform: translate(-50%, -150%); transform: translate(-50%, -150%); } .social-icon:active { box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5) inset; } .social-icon { background: linear-gradient(tint(#000, 5%), shade(#000, 5%)); border-bottom: 1px solid shade(#000, 20%); color: tint(#000, 50%); } .social-icon:hover { color: tint(#000, 80%); text-shadow: 0px 1px 0px shade(#000, 20%); } .social-icon .tooltip { background: #fff; background: linear-gradient(tint(#000, 15%), #000); color: tint(#000, 80%); } .social-icon .tooltip:after { border-top-color: #fff; } .social-icon span { position: relative; top: 1px; } /* Tooltips */ .tooltip { display: block; position: absolute; top: 45%; left: 50%; padding: 0.2rem 1rem; border-radius: 0px; font-size: 0.8rem; font-weight: 600; opacity: 0; pointer-events: none; -webkit-transform: translate(-50%, -100%); transform: translate(-50%, -100%); transition: all 0.3s ease; z-index: 1; color: #000; letter-spacing: 1px; } .tooltip:after { display: block; position: absolute; bottom: 0; left: 50%; width: 0; height: 0; content: ""; border: solid; border-width: 6px 6px 0 6px; border-color: transparent; -webkit-transform: translate(-50%, 100%); transform: translate(-50%, 100%); } /* //background images for banner */ /* /stats */ h5.counter { color: #fff; font-size: 2em; font-weight: 700; margin: 0; } p.para-w3pvt { color: #fff; font-size: 1.4em; margin-left: 1em; font-weight: 300; } .hny-stats-inf { margin: 2em auto 0; width: 60%; text-align: center; } /* //stats */ /* //banner text */ .banner_bottom { background: #f7f7f7; } p.sub-tittle { /* font-size: 1.1em; font-weight: 400; color: #555; */ } .pink { color: #43c3ea; } h3.tittle-w3ls, h3.tittle-w3ls.two { color: hsl(0, 0%, 9%); font-size: 2.5em; font-weight: 700; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.05); } h3.tittle-w3ls.two { color: #fff; } /*--/about--*/ .banner_bottom_left h4 { font-size: 1.5em; color: #3c3c3c; letter-spacing: 1px; position: relative; font-weight: 600; line-height: 1.6em; margin-bottom: 0.3em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } /*--/features--*/ .features-w3pvt-main { border-top: 1px solid #ddd; margin-top: 3em; padding-top: 4em; } .icon_left_grid { text-align: center; } .featured_grid_right_info h4 { font-size: 1.2em; margin-bottom: .7em; font-weight: 600; color: #222222; letter-spacing: 1px; } .icon_left_grid span { font-size: 2em; color: #43c3ea; margin-top: 0.1em; } /*--//features--*/ .services { background: url(../images/index/index_banner1.jpg) no-repeat top; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; -ms-background-size: cover; } .over-lay-blue { background: rgba(10, 10, 10, 0.67); } .services-grid-inf h4, .services-grid-inf span, .services-grid-inf .link-hny, .services-innfo p.sub-tittle { color: #fff; } .services-grid-inf p { color: #d5d7d8; } .services-grid-inf span { line-height: 40px; } /*--//services--*/ /*--/team --*/ .team-info h3 { font-size: 1.2em; color: #1b1b1b; margin: 0 0 0.5em 0; } .team-info h3 a { color: #1b1b1b; } .team-info h3 a:hover { color: #444; } .sub-tittle-team { font-size: 1em; color: #495057; } .team-info p { padding: 0 1em; } .icon-social.team a { color: #333; } ul.list-right-w3pvt-book.team-sing li { color: #777; } ul.list-right-w3pvt-book.team-sing span { font-size: 0.6em; margin-right: 1em; } .team-gd { cursor: pointer; } .team-gd img:hover { opacity: 0.8; } /*--//team --*/ /*-- /gallery --*/ section#gallery { position: relative; } .gal-img img { padding: 6px; background: #f0f0f1; } .gal-info { background: #fff; margin-bottom: 1em; padding: 1em; text-align: left; } .gal-info:hover { background: #212529; transition: .5s ease-in; -webkit-transition: .5s ease-in; -moz-transition: .5s ease-in; -o-transition: .5s ease-in; -ms-transition: .5s ease-in; } .gal-info:hover h5 { color: #43c3ea; } .gal-info h5 { text-align: left; font-size: 0.9em; color: #3a4045; font-weight: 600; text-transform: uppercase; } span.decription { text-transform: uppercase; display: block; font-size: 0.8em; color: #888; letter-spacing: 2px; margin-top: 0.5em; } .gal-info:hover span.decription { color: #43c3ea; } .gal-infoa h5 { text-align: left; font-size: 0.9em; color: #000; font-weight: 600; text-transform: uppercase; } /*-- popup --*/ .pop-overlay { position: fixed; top: 0px; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); transition: opacity 0ms; visibility: hidden; opacity: 0; z-index: 99; } .pop-overlay:target { visibility: visible; opacity: 1; } .popup { background: #fff; border-radius: 5px; width: 35%; position: relative; margin: 8em auto; padding: 3em 1em; } .popup p { font-size: 15px; color: #666; letter-spacing: .5px; line-height: 30px; } .popup .close { position: absolute; top: 5px; right: 15px; transition: all 200ms; font-size: 30px; font-weight: bold; text-decoration: none; color: #000; } .popup .close:hover { color: #30c39e; } /*-- //popup --*/ /*-- /newss--*/ .news-grid-img img { border-radius: 0px; } .news-grid-info { background: #212529; } .date-post { padding: 3em; } .date-post .link-hny { font-size: 0.9em; font-weight: 600; color: #fff; letter-spacing: 1px; } .date-post p { color: #fff; margin-bottom: 0; font-size: 0.9em; } .date-post h4 { margin: 0.3em 0; } h6.date { font-size: 0.8em; color: #43c3ea; } /*-- //newss--*/ .login label { color: #777879; font-weight: 600; font-size: 0.9em; text-transform: capitalize; letter-spacing: 1px; } .link-hny { color: #222222; } .link-hny:hover { color: #ffc107; transition: .5s ease-in; -webkit-transition: .5s ease-in; -moz-transition: .5s ease-in; -o-transition: .5s ease-in; -ms-transition: .5s ease-in; } .apply-main .form-control { display: block; width: 100%; padding: 0.375rem 0.75rem; font-size: 1rem; line-height: 1.5; color: #495057; background-color: #fff; background-clip: padding-box; border: none; border-radius: 0; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; border-bottom: 2px solid #ddd; } /*-- //gallery --*/ .con-gd .form-control { padding: 15px 15px; border: 0; border: none; outline: none; background: rgba(247, 247, 247, 0.29); color: #fff; border-radius: 0; font-size: 0.9em; letter-spacing: 2px; border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border: 1px solid #ddd; } .con-gd button.btn { background: #43c3ea; border: 2px solid #43c3ea; color: #222; cursor: pointer; padding: 13px 0; width: 100%; } .con-gd button.btn:hover { background: #212529; border: 2px solid #212529; color: #43c3ea; } p.news-para { margin: 0.5em 0 0 0; font-size: 1.1em; font-weight: 600; color: #555; } /*--placeholder-color--*/ .con-gd ::-webkit-input-placeholder { color: #777; } .con-gd :-moz-placeholder { /* Firefox 18- */ color: #777; } .con-gd ::-moz-placeholder { /* Firefox 19+ */ color: #777; } .con-gd :-ms-input-placeholder { color: #777; } /*--//placeholder-color--*/ /* testimonials */ .testmonials { background: url(../images/index/index_banner2.jpg) no-repeat top; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; -ms-background-size: cover; } .testimonials-gd-vj { box-shadow: 0px 0px 18.69px 2.31px rgba(98, 98, 103, 0); background: #fff; } p.sub-test { color: #666; font-size: 14px; } p.sub-test span { font-size: 1.7em; margin-right: 0.3em; color: #ddd; } .testi_grid h5 { color: #2f2e31; letter-spacing: 1px; font-size: 0.9em; font-weight: 600; } .testi_grid p { font-size: 13px; line-height: 0.5em; } section.hand-crafted p { color: #6e7275; } .testi-img-res img { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; } /* //testimonials */ /*--/inner-w3pvt-page-- */ .inner-w3pvt-page { /* background: url(../images/banner1.jpg) no-repeat center; */ background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; -moz-background-size: cover; min-height: 11em; } .overlay-innerpage { min-height: 11em; background: rgba(0, 0, 0, 0.44); } .inner-w3pvt-page-info { padding-top: 7em; } .breadcrumb { background-color: transparent; } ol.breadcrumb { margin: 0; padding: 0; } ol.breadcrumb li { padding: 0; color: #555; font-weight: 600; letter-spacing: 2px; font-size: 13px; text-transform: uppercase; background: rgba(140, 156, 171, 0.22); margin-right: 0.5em; color: #fff; border-radius: 0; background: transparent; } ol.breadcrumb li a { color: #43c3ea; } .breadcrumb-item.active { color: #fff; } .breadcrumb { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 0.75rem 1rem; margin-bottom: 1rem; list-style: none; /* background: none; */ border-radius: 0; } .breadcrumb-item+.breadcrumb-item::before { display: inline-block; padding-right: 0.5rem; padding-left: 0.5rem; color: #fff; content: "/"; } /*--/contact-- */ .contact-hny-form input, .contact-hny-form textarea { padding: 13px 15px; border: 0; border: none; outline: none; background: rgba(247, 247, 247, 0.29); color: #fff; border-radius: 0; font-size: 0.9em; letter-spacing: 2px; border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border: 1px solid #ddd; width: 100%; } .contact-hny-form textarea { min-height: 257px; } .more.black.con-submit { padding: 0.7em 3em; } .form-group label { color: #555; font-size: 0.9em; } .map-w3pvt { background: #d7d7d7; padding: 0.5em; } .map-w3pvt iframe { width: 100%; min-height: 400px; border: none; } /*--/single --*/ h4.title-hny { color: #3e3b3b; font-size: 1.2em; line-height: 1.5em; text-transform: capitalize; font-weight: 500; } .social-icons-footer ul li { display: inline-block; color: #555; list-style: none; } .social-icons-footer ul li a { margin: 0 0.5em; color: #333; } .social-icons-footer ul li a:hover { color: #43c3ea; } .comments-grid-right h4 { font-size: 17px; font-weight: 600; } .comments-grid-right ul li { display: inline-block; color: #888; font-size: 14px; letter-spacing: 1px; } .comments-grid-right ul li a { color: #43c3ea; } .single-page-form {} /*--//single --*/ /*--//contact-- */ /*--//inner-w3pvt-page-- */ /*--/timeline--*/ /* Media Queries */ /* Card sizing */ /* Colors */ /* Calculations */ /* Placeholders */ @media (min-width: 1000px) { #timeline .demo-card:nth-child(odd) .head::after, #timeline .demo-card:nth-child(even) .head::after { position: absolute; content: ""; width: 0; height: 0; border-top: 15px solid transparent; border-bottom: 15px solid transparent; } #timeline .demo-card:nth-child(odd) .head::before, #timeline .demo-card:nth-child(even) .head::before { position: absolute; content: ""; width: 9px; height: 9px; background-color: #bdbdbd; border-radius: 9px; box-shadow: 0px 0px 2px 8px #f7f7f7; } } /* Some Cool Stuff */ .demo-card:nth-child(1) { order: 1; } .demo-card:nth-child(2) { order: 4; } .demo-card:nth-child(3) { order: 2; } .demo-card:nth-child(4) { order: 5; } .demo-card:nth-child(5) { order: 3; } .demo-card:nth-child(6) { order: 6; } /* Border Box */ * { box-sizing: border-box; } #timeline { /* Fonts * padding: 100px 0; background: #f7f7f7; border-top: 1px solid rgba(191, 191, 191, 0.4); border-bottom: 1px solid rgba(191, 191, 191, 0.4); /* Fonts */ } #timeline h1 { text-align: center; font-size: 3rem; font-weight: 200; margin-bottom: 20px; } #timeline p.leader { text-align: center; max-width: 90%; margin: auto; margin-bottom: 45px; } #timeline .demo-card-wrapper { position: relative; margin: auto; } #timeline .title-card-wrapper { position: relative; margin: auto; max-width: 94%; } @media (min-width: 1000px) { #timeline .demo-card-wrapper { display: flex; flex-flow: column wrap; width: 1170px; height: 1650px; margin: 0 auto; } #timeline .title-card-wrapper { display: flex; flex-flow: column wrap; width: 1170px; margin: 0 auto; } } #timeline .demo-card-wrapper::after { z-index: 1; content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px solid rgba(191, 191, 191, 0.4); } @media (min-width: 1000px) { #timeline .demo-card-wrapper::after { border-left: 1px solid #bdbdbd; } #timeline .title-card-wrapper::after { border-left: 1px solid #bdbdbd; } } #timeline .demo-card { position: relative; display: block; margin: 10px auto 80px; max-width: 94%; z-index: 2; } @media (min-width: 480px) { #timeline .demo-card { max-width: 60%; box-shadow: 0px 1px 22px 4px rgba(0, 0, 0, 0.07); } } @media (min-width: 720px) { #timeline .demo-card { max-width: 40%; } } @media (min-width: 1000px) { #timeline .demo-card { max-width: 450px; height: 400px; margin: 90px; margin-top: 45px; margin-bottom: 45px; } #timeline .demo-card:nth-child(odd) { margin-right: 45px; } #timeline .demo-card:nth-child(odd) .head::after { border-left-width: 15px; border-left-style: solid; left: 100%; } #timeline .demo-card:nth-child(odd) .head::before { left: 491.5px; } #timeline .demo-card:nth-child(even) { margin-left: 45px; } #timeline .demo-card:nth-child(even) .head::after { border-right-width: 15px; border-right-style: solid; right: 100%; } #timeline .demo-card:nth-child(even) .head::before { right: 489.5px; } #timeline .demo-card:nth-child(2) { margin-top: 180px; } } #timeline .demo-card .head { position: relative; display: flex; align-items: center; color: #fff; font-weight: 400; } #timeline .demo-card .head .number-box { display: inline; float: left; margin: 15px; padding: 10px; font-size: 35px; line-height: 35px; font-weight: 600; background: rgba(0, 0, 0, 0.17); } #timeline .demo-card .head h3 { text-transform: uppercase; font-size: 1.3rem; font-weight: inherit; letter-spacing: 2px; margin: 0; padding-bottom: 6px; line-height: 1rem; color: #ddd; } @media (min-width: 480px) { #timeline .demo-card .head h3 { line-height: 1.2rem; } } #timeline .demo-card .head h3 span { display: block; font-size: 0.6rem; margin: 0; } @media (min-width: 480px) { #timeline .demo-card .head h3 span { font-size: 0.8rem; } } #timeline .demo-card .body { background: #fff; border: 1px solid rgba(191, 191, 191, 0.4); border-top: 0; padding: 15px; } @media (min-width: 1000px) { #timeline .demo-card .body {} } #timeline .demo-card .body p { font-size: 14px; line-height: 1.5em; margin-bottom: 15px; } #timeline .demo-card .body img { display: block; width: 100%; } #timeline .demo-card--step1 { background-color: #3c3d3e; } #timeline .demo-card--step1 .head::after { border-color: #3c3d3e; } #timeline .demo-card--step2 { background-color: #3c3d3e; } #timeline .demo-card--step2 .head::after { border-color: #3c3d3e; } #timeline .demo-card--step3 { background-color: #3c3d3e; } #timeline .demo-card--step3 .head::after { border-color: #3c3d3e; } #timeline .demo-card--step4 { background-color: #3c3d3e; } #timeline .demo-card--step4 .head::after { border-color: #3c3d3e; } #timeline .demo-card--step5 { background-color: #3c3d3e; } #timeline .demo-card--step5 .head::after { border-color: #3c3d3e; } #timeline .demo-card--step6 { background-color: #3c3d3e; } #timeline .demo-card--step6 .head::after { border-color: #3c3d3e; } /* typography */ .typo-wthree h4.typo { color: #333; font-size: 1.5em; text-transform: uppercase; } .grid-bg { border: 2px solid #f7f7f7; } .sub-code { padding: 2em; background: #f7f7f7; } .highlight.sub-code span { color: #777; } .bd-example { padding: 1.5rem; margin-right: 0; margin-left: 0; border-width: .2rem; } .bd-example-container { min-width: 16rem; max-width: 25rem; margin-right: auto; margin-left: auto; } .bd-example-container-body { height: 8rem; margin-right: 4.5rem; background-color: #f7f7f7; border-radius: .25rem; } .bd-example-container-sidebar { float: right; width: 4rem; height: 8rem; background-color: #2f2e41; border-radius: .25rem; } .media span { font-size: 4em; color: #555; } .media-body h5 { font-size: 1.2em; color: #444; margin-bottom: 1em; } .bread-w3ls .breadcrumb { background: #eee; } .bread-w3ls .breadcrumb-item.active { color: #6c757d; } .bread-w3ls .breadcrumb-item+.breadcrumb-item::before { display: inline-block; padding-right: 0.5rem; padding-left: 0.5rem; color: #555; content: "/"; } .bread-w3ls li.breadcrumb-item a { color: #777; } .bread-w3ls nav a { padding: 0; } /* //typography */ /*--//typography--*/ @media screen and (max-width: 600px) {} @media screen and (max-width: 480px) {} @media screen and (max-width: 375px) {} @media screen and (max-width: 320px) {} /*--/error--*/ .error-w3pvt h3 { font-size: 10em; font-weight: bold; } .error-w3pvt h4 { text-transform: uppercase; font-size: 2em; font-weight: lighter; letter-spacing: 30px; } .error-w3pvt h5 { text-transform: uppercase; font-size: 1.2em; margin: 1em 0; font-weight: lighter; letter-spacing: 4px; color: #777; } /*--//error--*/ @media screen and (max-width: 991px) { .error-w3pvt h3 { font-size: 7em; } .error-w3pvt h4 { font-size: 1.1em; letter-spacing: 11px; } .error-w3pvt h5 { font-size: 1em; } .copy_right p { font-size: 14px; margin: 0; margin-top: 0.5em; } } @media screen and (max-width: 375px) { .error-w3pvt h3 { font-size: 6em; } .error-w3pvt h4 { font-size: 1em; letter-spacing: 11px; } .error-w3pvt h5 { font-size: 0.9em; } } @media screen and (max-width: 320px) {} /*-- footer --*/ footer, .copy_right { background: #152545; } .footer-grids h4 { color: #fff; font-size: 1.2em; } .footer-grids h5 { color: #666; } .footer-grids h5 span { color: #43c3ea; } .footer-grids p, .footer-grids p a, .copyright p, .copyright p a { font-size: 15px; color: #c1c1c1; font-weight: normal; letter-spacing: .5px; } .footer-grids ul li a { font-size: 15px; color: #c1c1c1; font-weight: normal; letter-spacing: 1px; } .footer-grids ul li { list-style-type: none; } .footer-grids input[type="email"] { background: #fff; box-shadow: none !important; padding: 12px 15px; color: #777; font-size: 14px; border: none; letter-spacing: 1px; outline: none; } .footer-grids button.btn { background: #43c3ea; color: #fff; font-size: 14px; letter-spacing: 1px; padding: 12px; display: inline-block; border: none; outline: none; cursor: pointer; border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; -ms-border-radius: 0px; -o-border-radius: 0px; } .footer-grids { border-bottom: 1px solid #101c34; } footer .footer-bottom { background: #101c34; padding-top: 15px; padding-left: 0px; } footer .footer-bottom a { color: #259ad6; } h2 a.navbar-brand { color: #fff; } .icon-social a { color: #fff; margin-right: 0.5em; } ul.list-info-wthree li a { display: block; margin: 1em 0; } ul.list-info-wthree li a:hover { color: #555; } .ad-info p { display: block; margin: 1em 0; } .ad-info p span { margin-right: 0.5em; } /*-- //footer --*/ /*--/copy_right--*/ .copy_right { border-top: 1px solid rgba(221, 221, 221, 0.12); } .copy_right p a { color: #fff; } .copy_right p a:hover { opacity: .8; } .copy_right p { letter-spacing: 1px; font-size: 16px; margin: 0; color: #fff; margin-top: 0.5em; } /*--//copy_right--*/ /* /move-top */ a.move-top span { color: #ddd; width: 36px; height: 36px; border: transparent; background: transparent; } /* //move-top */ /*--responsive--*/ @media(max-width:1280px) { .tooltip { display: block; position: absolute; top: 0; left: 8%; padding: 0.2rem 0.5rem; } .hny-stats-inf { margin: 6em auto 0; width: 67%; } .date-post { padding: 2em; } .banner-w3pvt-1, .banner-w3pvt-2, .banner-w3pvt-3, .overlay-w3ls { min-height: 700px; } .banner-hny-info { padding: 14em 0 12em; } .banner-hny-info h3 { font-size: 3.5em; } } @media(max-width:1080px) { .date-post { padding: 1em; } .inner-w3pvt-page, .overlay-innerpage { min-height: 10em; } } @media(max-width:1024px) { .banner-hny-info { padding: 11em 0 9em; } .banner-w3pvt-1, .banner-w3pvt-2, .banner-w3pvt-3, .overlay-w3ls { min-height: 656px; } .inner-w3pvt-page, .overlay-innerpage { min-height: 11em; } } @media(max-width:991px) { .hny-stats-inf { margin: 6em auto 0; width: 85%; } .featured_grid_right_info h4 { font-size: 1em; } .date-post { padding: 2em; } .con-gd .form-control { margin: 1em 0; } } @media(max-width:768px) { .banner_bottom_left h4 { font-size: 1.2em; } p { font-size: 0.9em; } } @media(max-width:767px) { .inner-w3pvt-page, .overlay-innerpage { min-height: 10em; } .featured_grid_right_info, .featured_grid_right_info { text-align: center; margin-top: 0.5em; } .team-gd { margin-bottom: 1.5em; } .team-info h3 { font-size: 1em; } } @media(max-width:667px) { .hny-stats-inf { margin: 6em auto 0; width: 95%; } .banner-w3pvt-1, .banner-w3pvt-2, .banner-w3pvt-3, .overlay-w3ls { min-height: 600px; } .banner-hny-info h3 { font-size: 2.5em; } .banner-hny-info { padding: 10em 0 5em; } .banner-hny-info h3 { font-size: 2em; } .btn { padding: 7px 23px; } .banner-hny-info { padding: 8em 0 1em; } h3.tittle-w3ls, h3.tittle-w3ls.two { font-size: 2em; letter-spacing: 1px; } p.sub-tittle { font-size: 1em; } .copy_right p { font-size: 14px; } .map-w3pvt iframe { min-height: 200px; } .contact-hny-form textarea { min-height: 130px; } h3.title-hny { font-size: 1.4em; } } @media(max-width:640px) { h5.counter { font-size: 1.5em; margin: 0; } p.para-w3pvt { font-size: 1em; margin-left: 0.5em; } .banner-w3pvt-1, .banner-w3pvt-2, .banner-w3pvt-3, .overlay-w3ls { min-height: 550px; } .hny-stats-inf { margin: 4em auto 0; width: 95%; } .tooltip { display: block; position: absolute; top: 0; left: 50%; padding: 0.2rem 0.5rem; } .banner-hny-info { padding: 7em 0 1em; } } @media(max-width:600px) { .banner-w3pvt-1, .banner-w3pvt-2, .banner-w3pvt-3, .overlay-w3ls { min-height: 470px; } h3.tittle-w3ls, h3.tittle-w3ls.two { font-size: 1.8em; letter-spacing: 1px; } .nav_w3pvt { padding: 0 1em; } .inner-w3pvt-page-info { padding-top: 5em; } .inner-w3pvt-page, .overlay-innerpage { min-height: 7em; } } @media(max-width:414px) { .hny-stats-inf { margin: 3em auto 0; width: 95%; } .banner-w3pvt-1, .banner-w3pvt-2, .banner-w3pvt-3, .overlay-w3ls { min-height: 485px; } .nav_w3pvt { margin-top: 1em; padding: 0 1em; } } @media(max-width:384px) { h3.tittle-w3ls, h3.tittle-w3ls.two { font-size: 1.6em; } .banner-hny-info h3 { font-size: 1.8em; } .banner-w3pvt-1, .banner-w3pvt-2, .banner-w3pvt-3, .overlay-w3ls { min-height: 430px; } .hny-stats-inf { margin: 1em auto 0; width: 95%; } } @media(max-width:375px) { h3.tittle-w3ls, h3.tittle-w3ls.two { font-size: 1.5em; } .banner-w3pvt-1, .banner-w3pvt-2, .banner-w3pvt-3, .overlay-w3ls { min-height: 395px; } } @media(max-width:320px) { .banner-w3pvt-1, .banner-w3pvt-2, .banner-w3pvt-3, .overlay-w3ls { min-height: 350px; } h3.tittle-w3ls, h3.tittle-w3ls.two { font-size: 1.4em; } .banner-hny-info h3 { font-size: 1.6em; } .btn { padding: 7px 20px; } } .business_line { color: #fff; font-size: 13px; letter-spacing: 1px; padding: 0 14px; font-weight: 600; margin: 0 0.5em; } .content-w3ls-inn form input { color: #000; } .content-w3ls-inn form textarea { color: #000; } .content-w3ls-inn .icon-box, .content-w3ls-inn .text-box { display: table-cell; vertical-align: top; } .content-w3ls-inn .text-box { padding-left: 20px } .content-w3ls-inn .text-box h3 { font-size: 1.35rem; } .content-w3ls-inn .icon-box .inner-box { background: #43c3ea none repeat scroll 0 0; color: #fff; font-size: 20px; height: 50px; padding-top: 10px; text-align: center; width: 50px; } .friendship_links { padding-left: 0px; } .friendship_links li { margin-top: 10px; margin-bottom: 10px; } .friendship_links span { color: #c1c1c1; font-size: 15px; line-height: 30px; height: 35px; } .font-weight-7 { font-weight: 700; } .index-banner { background: url(../images/banner1.jpg) no-repeat center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; -moz-background-size: cover; min-height: 11em; } .contact-banner { background: url(../images/contact/contact_banner.jpg) no-repeat center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; -moz-background-size: cover; min-height: 11em; } .oemodm-banner { background: url(../images/business/odm_banner.jpg) no-repeat center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; -moz-background-size: cover; min-height: 11em; } .service-banner { background: url(../images/business/service_banner.jpg) no-repeat center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; -moz-background-size: cover; min-height: 11em; } .law-banner { background: url(../images/law/law_banner.jpg) no-repeat center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; -moz-background-size: cover; min-height: 11em; } .about-banner { background: url(../images/about/about_banner.jpg) no-repeat center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; -moz-background-size: cover; min-height: 11em; } .platform-banner { background: url(../images/platform/platform_banner.jpg) no-repeat center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; -moz-background-size: cover; min-height: 11em; } .product-banner { background: url(../images/product/product_banner.jpg) no-repeat center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; -moz-background-size: cover; min-height: 11em; } .solution-banner { background: url(../images/solution/solution_banner.jpg) no-repeat center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; -moz-background-size: cover; min-height: 11em; } .business-banner { background: url(../images/business/business_banner.jpg) no-repeat center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; -moz-background-size: cover; min-height: 11em; } .news-banner { background: url(../images/news/news_banner.jpg) no-repeat center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; -moz-background-size: cover; min-height: 11em; } /*--//responsive--*/ /*** ============================================= news Area style ============================================= ***/ #news-area .news-post { border-right: 1px solid #f7f7f7; margin-bottom: -80px; padding-bottom: 80px; margin-right: -25px; padding-right: 25px; margin-top: -80px; padding-top: 80px; } .news-with-sidebar-area .news-post .single-news-item { border-bottom: 1px solid #f7f7f7; padding-bottom: 20px; } .single-news-item { overflow: hidden; } .single-news-item .img-holder { overflow: hidden; position: relative; overflow: hidden; } .single-news-item .img-holder img { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; width: 100%; } .single-news-item .overlay .box .content a i { background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0; border-radius: 3%; color: #ffffff; display: inline-block; font-size: 20px; height: 55px; line-height: 55px; transition: all 500ms ease 0s; width: 55px; } .single-news-item:hover .img-holder .overlay { -webkit-transform: scale(1); transform: scale(1); } .single-news-item:hover .img-holder img { -webkit-transform: scale(1.3); transform: scale(1.3); } .single-news-item .overlay .box .content a:hover i { background: #152545; color: #43c3ea; } .single-news-item .text-holder { padding-left: 70px; position: relative; } .single-news-item .text-holder .date-box { left: 0; position: absolute; top: 30px; } .single-news-item .text-holder .date-box h4 { background: #43c3ea none repeat scroll 0 0; color: #ffffff; display: block; font-size: 24px; font-weight: 700; height: 70px; line-height: 26px; padding: 8px 15px; text-align: center; width: 70px; } .single-news-item .text-holder .text-box { margin-left: 20px; padding-top: 23px; } .single-news-item .text-holder .text-box .news-title { color: #3d3d3d; font-size: 20px; font-weight: 700; line-height: 28px; margin: 0 0 6px; text-transform: uppercase; transition: all 500ms ease 0s; } .single-news-item .text-holder .text-box .news-title:hover { color: #43c3ea; } .single-news-item .text-holder .text-box .meta-info { margin-left: -8px; margin-right: -8px; overflow: hidden; margin-bottom: 16px; } .single-news-item .text-holder .text-box .meta-info li { display: inline-block; margin: 0 8px; } .single-news-item .text-holder .text-box .meta-info li a { color: #999999; font-size: 14px; font-weight: 400; text-transform: capitalize; transition: all 500ms ease; } .single-news-item .text-holder .text-box .meta-info li a:hover { color: #43c3ea; } .single-news-item .text-holder .text-box .meta-info li i { color: #999999; font-size: 14px; font-weight: 400; display: inline-block; padding-right: 8px; } .single-news-item .text-holder .text-box .text { overflow: hidden; } .single-news-item .text-holder .text-box .text p { margin: 0; } .single-news-item .text-holder .text-box .text .bottom { overflow: hidden; margin-top: 18px; } .single-news-item .text-holder .text-box .text .bottom .readmore a { color: #3d3d3d; font-size: 14px; font-weight: 700; text-transform: uppercase; transition: all 500ms ease; } .single-news-item .text-holder .text-box .text .bottom .readmore a:hover { color: #43c3ea; } .single-news-item .text-holder .text-box .text .bottom .readmore a i { display: inline-block; padding-left: 7px; font-size: 15px; } .sidebar-wrapper { padding-left: 20px; } .sidebar-wrapper .single-sidebar { overflow: hidden; margin-bottom: 60px; position: relative; margin-top: 30px; } .sidebar-wrapper .single-sidebar .sidebar-title { overflow: hidden; padding-bottom: 36px; margin-top: -4px; } .sidebar-wrapper .single-sidebar .sidebar-title h1 { color: #3d3d3d; font-size: 20px; font-weight: 700; text-transform: uppercase; } .sidebar-wrapper .single-sidebar form.search-form { position: relative } .sidebar-wrapper .single-sidebar .search-form input[type="text"] { background: #fff; border: 1px solid #f7f7f7; color: #999999; display: block; font-size: 14px; font-weight: 500; height: 50px; letter-spacing: 1px; padding-left: 15px; padding-right: 55px; position: relative; -webkit-transition: all 500ms ease 0s; transition: all 500ms ease 0s; width: 100%; } .sidebar-wrapper .single-sidebar .search-form button { background: #43c3ea none repeat scroll 0 0; border: medium none; color: #fff; display: block; height: 50px; padding: 11px 0; position: absolute; right: 0; text-align: center; top: 0; -webkit-transition: all 500ms ease 0s; transition: all 500ms ease 0s; width: 50px; } .sidebar-wrapper .single-sidebar .search-form button i { font-size: 14px } .sidebar-wrapper .single-sidebar .search-form input[type="text"]:focus { border: 1px solid #152545; background: #3eb9de; color: #fff; } .sidebar-wrapper .single-sidebar .search-form input[type="text"]:focus+button, .sidebar-wrapper .single-sidebar .search-form button:hover { background: #152545 none repeat scroll 0 0; color: #fff; } .single-sidebar .categories { margin-top: -7px; } .single-sidebar .categories li { border-bottom: 1px solid #f7f7f7; margin-bottom: 20px; padding-bottom: 11px; } .single-sidebar .categories li:last-child { margin-bottom: 0; } .single-sidebar .categories li a { color: #999999; transition: all 500ms ease; font-size: 14px; font-weight: 400; padding-left: 0px; position: relative; } .single-sidebar .categories li a span i { display: inline-block; font-size: 16px; position: relative; } .single-sidebar .categories li a:hover { color: #43c3ea; } .single-sidebar .categories li a:hover:before { color: #43c3ea; } .single-sidebar .recent-post { margin-top: -6px; } .single-sidebar .recent-post li { margin-bottom: 14px; position: relative; border-bottom: 1px solid #f7f7f7; padding-bottom: 17px; } .single-sidebar .recent-post li:last-child { margin-bottom: 0; } .single-sidebar .recent-post li a .post-title { color: #43c3ea; font-size: 14px; font-weight: 400; line-height: 26px; font-family: 'Roboto', sans-serif; transition: all 500ms ease; margin: 0 0 10px; } .single-sidebar .recent-post li a .post-title:hover { color: #152545; } .single-sidebar .recent-post li .post-date { color: #999999; font-size: 14px; font-weight: 400; } .single-sidebar .recent-post li .post-date i { display: inline-block; padding-right: 3px; color: #43c3ea; font-size: 14px; } .single-sidebar .news-archive { margin-top: -8px; } .single-sidebar .news-archive li { border-bottom: 1px solid #f7f7f7; margin-bottom: 12px; padding-bottom: 13px; } .single-sidebar .news-archive li:last-child { margin-bottom: 0; } .single-sidebar .news-archive li a { color: #999999; font-size: 14px; font-weight: 400; padding-left: 25px; position: relative; transition: all 500ms ease; } .single-sidebar .news-archive li a:before { content: "\f00c"; font-family: FontAwesome; color: #999999; font-size: 16px; position: absolute; top: -2px; left: 0; transition: all 500ms ease; } .single-sidebar .news-archive li a:hover { color: #43c3ea; } .single-sidebar .news-archive li a:hover:before { color: #43c3ea; } .single-sidebar .popular-tag { margin-left: -3px; margin-right: -3px; margin-top: -5px; } .single-sidebar.popular-tag .sidebar-title { padding-bottom: 41px; } .single-sidebar .popular-tag li { display: inline-block; margin: 0 3px 10px; } .single-sidebar .popular-tag li a { border: 1px solid #ececec; color: #999999; display: block; font-size: 14px; font-weight: 400; padding: 2px 10px 2px; transition: all 500ms ease 0s; } .single-sidebar .popular-tag li a:hover { background: #43c3ea; border-color: #43c3ea; color: #fff; } .single-sidebar.facebook { margin-top: -10px; } .pull-right-m { margin-right: 55px; } .news_body { padding-top: 35px; padding-bottom: 65px; background-color: #fff; margin-bottom: 50px; padding-left: 90px; padding-right: 90px; } /* Post pagination styles */ .post-pagination li { display: inline-block; margin: 0 3px; } .post-pagination li a { background: #fff none repeat scroll 0 0; border: 1px solid #f7f7f7; color: #3d3d3d; display: block; font-size: 18px; font-weight: 700; height: 55px; padding: 14px 0; transition: all 500ms ease 0s; width: 80px; font-family: 'Roboto', sans-serif; border-radius: 3px; } .post-pagination li.active a, .post-pagination li:hover a { background: #43c3ea; color: #fff; border: 1px solid #43c3ea; } .white { color: #fff !important; } .pinka { color: #43c3ea !important; } .platform-services { background: url(../images/platform/platform04.jpg) no-repeat top; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; -ms-background-size: cover; } .platform-services_f { background: url(../images/platform/platform02.jpg) no-repeat top; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; -ms-background-size: cover; } .section-header_team_b { text-align: left; color: #969595; font-size: 12px; padding: 0 20px; margin: 0 0 40px 0; font-family: "Microsoft YaHei", serif; margin-top: -125px; margin-left: 8px; } .hui { color: #969595 !important; } /*-------------------------------------------------------------- # Service Details --------------------------------------------------------------*/ .service-details { padding-bottom: 10px; } .service-details .card { border: 0; padding: 0 30px; margin-bottom: 60px; position: relative; } .service-details .card-img { width: calc(100% + 60px); margin-left: -30px; overflow: hidden; z-index: 9; border-radius: 0; } .service-details .card-img img { max-width: 100%; transition: all 0.3s ease-in-out; } .service-details .card-body { z-index: 10; background: #fff; border-top: 4px solid #fff; padding: 30px; box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1); margin-top: -60px; transition: 0.3s; } .service-details .card-title { font-weight: 700; text-align: center; margin-bottom: 20px; } .service-details .card-title a { color: #1e4356; transition: 0.3s; } .service-details .card-text { color: #5e5e5e; } .service-details .read-more a { color: #777777; text-transform: uppercase; font-weight: 600; font-size: 12px; transition: 0.3s; } .service-details .read-more a:hover { color: #43c3ea; } .service-details .card:hover img { transform: scale(1.1); } .service-details .card:hover .card-body { border-color: #43c3ea; } .service-details .card:hover .card-body .card-title a { color: #43c3ea; } /*-------------------------------------------------------------- # Sections General --------------------------------------------------------------*/ section { /* padding: 60px 0; */ } .section-bg { background-color: #f3f8fa; } .section-title { text-align: center; padding-bottom: 30px; } .section-title h2 { font-size: 28px; font-weight: 400; margin-bottom: 20px; padding-bottom: 20px; position: relative; } .section-title h2::before { content: ''; position: absolute; display: block; width: 120px; height: 1px; background: #ddd; bottom: 1px; left: calc(50% - 60px); } .section-title h2::after { content: ''; position: absolute; display: block; width: 40px; height: 3px; background: #43c3ea; bottom: 0; left: calc(50% - 20px); } .section-title p { margin-bottom: 0; } .m-top { margin-top: -1rem; } .fots { font-size: 25px !important; }