Spaces:
Build error
Build error
| html, | |
| body { | |
| margin: 0; | |
| font-size: 100%; | |
| background: #fff; | |
| font-family: 'Thasadith', sans-serif; | |
| } | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| body a { | |
| text-decoration: none; | |
| transition: 0.5s all; | |
| -webkit-transition: 0.5s all; | |
| -moz-transition: 0.5s all; | |
| -o-transition: 0.5s all; | |
| -ms-transition: 0.5s all; | |
| font-family: 'Thasadith', sans-serif; | |
| } | |
| body img { | |
| max-width: 100%; | |
| } | |
| a:hover { | |
| text-decoration: none; | |
| } | |
| input[type="button"], | |
| input[type="submit"], | |
| input[type="text"], | |
| input[type="email"], | |
| input[type="search"] { | |
| transition: 0.5s all; | |
| -webkit-transition: 0.5s all; | |
| -moz-transition: 0.5s all; | |
| -o-transition: 0.5s all; | |
| -ms-transition: 0.5s all; | |
| } | |
| h1, | |
| h2, | |
| h3, | |
| h4, | |
| h5, | |
| h6 { | |
| margin: 0; | |
| color: #323648; | |
| } | |
| li { | |
| list-style-type: none; | |
| } | |
| p { | |
| margin: 0; | |
| font-size: 17px; | |
| line-height: 2em; | |
| letter-spacing: 2px; | |
| color: #707579; | |
| font-weight: 600; | |
| } | |
| ul { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| /*-- header --*/ | |
| header { | |
| position: absolute; | |
| z-index: 9; | |
| width: 100%; | |
| } | |
| .toggle, | |
| [id^=drop] { | |
| display: none; | |
| } | |
| /* Giving a background-color to the nav container. */ | |
| nav { | |
| margin:0; | |
| padding: 0; | |
| /* position: relative; */ | |
| } | |
| #logo a { | |
| float: left; | |
| font-size: .8em; | |
| display: initial; | |
| margin: 0; | |
| letter-spacing: 1px; | |
| color: #fff; | |
| font-weight: 600; | |
| padding: 3px 0; | |
| border: none; | |
| } | |
| #logo a span.fa { | |
| color: #e8cd30; | |
| } | |
| /* 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; | |
| } | |
| /* Positioning the navigation items inline */ | |
| nav ul li { | |
| margin: 0px; | |
| display:inline-block; | |
| /* float: left; */ | |
| } | |
| /* Styling the links */ | |
| nav a { | |
| color: #ddd; | |
| text-transform: capitalize; | |
| letter-spacing: 1px; | |
| padding-left: 0; | |
| padding-right: 0; | |
| padding: 10px 0; | |
| font-weight: 700; | |
| } | |
| nav ul li ul li:hover { background: #f8f9fa; } | |
| /* Background color change on Hover */ | |
| nav a:hover { | |
| color: #ddd; | |
| } | |
| .menu li.active a{ | |
| color: #fff; | |
| } | |
| /* 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: 30px; | |
| background: #fff; | |
| padding: 10px; | |
| } | |
| /* 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; | |
| } | |
| nav ul li span { | |
| color: #ddd; | |
| text-transform: capitalize; | |
| letter-spacing: 1px; | |
| padding-left: 0; | |
| padding-right: 0; | |
| font-weight: 700; | |
| } | |
| ul.menu li span.fa { | |
| color: #e8cd30; | |
| } | |
| /* 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 : 991px) { | |
| #logo { | |
| display: block; | |
| padding: 0; | |
| width: 100%; | |
| text-align: center; | |
| float: none; | |
| } | |
| .menu li.active a { | |
| color: #009f4d; | |
| } | |
| nav ul li span { | |
| color: #333; | |
| } | |
| nav { | |
| margin: 0; | |
| } | |
| nav a { | |
| color: #333; | |
| } | |
| /* Hide the navigation menu by default */ | |
| /* Also hide the */ | |
| .toggle + a, | |
| .menu { | |
| display: none; | |
| } | |
| /* Stylinf the toggle lable */ | |
| .toggle { | |
| display: block; | |
| padding: 5px 15px; | |
| font-size: 20px; | |
| text-decoration: none; | |
| border: none; | |
| float: right; | |
| background-color: #009f4d; | |
| color: #fff; | |
| } | |
| .menu .toggle { | |
| float: none; | |
| text-align: center; | |
| margin: auto; | |
| width: 30%; | |
| padding: 5px; | |
| font-weight: normal; | |
| font-size: 15px; | |
| letter-spacing: 1px; | |
| } | |
| .toggle:hover { | |
| color:#333; | |
| background-color: #fff; | |
| } | |
| /* Display Dropdown when clicked on Parent Lable */ | |
| [id^=drop]:checked + ul { | |
| display: block; | |
| background: #fff; | |
| padding: 15px 0; | |
| width:100%; | |
| text-align: center; | |
| } | |
| /* Change menu item's width to 100% */ | |
| nav ul li { | |
| display: block; | |
| width: 100%; | |
| padding: 7px 0; | |
| } | |
| nav a{ | |
| padding: 5px 0; | |
| } | |
| nav a:hover { | |
| color: #333; | |
| } | |
| .login-icon { | |
| text-align: center; | |
| } | |
| nav ul ul .toggle, | |
| nav ul ul a { | |
| padding: 0 40px; | |
| } | |
| nav ul ul ul a { | |
| padding: 0 80px; | |
| } | |
| 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; | |
| } | |
| nav ul li ul li .toggle, | |
| nav ul ul a { | |
| background-color: #fff; | |
| } | |
| nav ul ul li a { | |
| font-size: 15px; | |
| } | |
| ul.inner-ul{ | |
| padding: 0; | |
| } | |
| /* 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" */ | |
| } | |
| /* Hide menus on hover */ | |
| nav ul ul li:hover > ul, | |
| nav ul li:hover > ul { | |
| display: none; | |
| } | |
| /* 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" */ | |
| } | |
| } | |
| @media all and (max-width : 330px) { | |
| nav ul li { | |
| display:block; | |
| width: 94%; | |
| } | |
| } | |
| .user span.fa { | |
| font-size: 25px; | |
| color: #fff; | |
| } | |
| /*-- //header --*/ | |
| /* banner style */ | |
| .banner_w3lspvt { | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .banner-top { | |
| background: url(../images/3.jpg) no-repeat center; | |
| background-size: cover; | |
| -webkit-background-size: cover; | |
| -moz-background-size: cover; | |
| -o-background-size: cover; | |
| -moz-background-size: cover; | |
| } | |
| .banner-top1 { | |
| background: url(../images/1.jpg) no-repeat center; | |
| background-size: cover; | |
| -webkit-background-size: cover; | |
| -moz-background-size: cover; | |
| -o-background-size: cover; | |
| -moz-background-size: cover; | |
| } | |
| .banner-top2 { | |
| background: url(../images/5.jpg) no-repeat center; | |
| background-size: cover; | |
| -webkit-background-size: cover; | |
| -moz-background-size: cover; | |
| -o-background-size: cover; | |
| -moz-background-size: cover; | |
| } | |
| .banner-top3 { | |
| background: url(../images/2.jpg) no-repeat center; | |
| background-size: cover; | |
| -webkit-background-size: cover; | |
| -moz-background-size: cover; | |
| -o-background-size: cover; | |
| -moz-background-size: cover; | |
| } | |
| .w3layouts-banner-info { | |
| padding-top: 16em; | |
| } | |
| .w3layouts-banner-info h3 { | |
| font-size: 4em; | |
| text-shadow: 3px 4px 6px rgba(45, 45, 45, 0.15); | |
| font-weight: 600; | |
| color: #fff; | |
| letter-spacing: 10px; | |
| text-transform: uppercase; | |
| } | |
| .w3layouts-banner-info p { | |
| max-width: 650px; | |
| color: #fff; | |
| } | |
| .w3layouts-banner-info h4 { | |
| color: #eee; | |
| letter-spacing: 5px; | |
| line-height: 35px; | |
| text-transform: capitalize; | |
| } | |
| .w3layouts-banner-info i { | |
| vertical-align: middle; | |
| } | |
| .banner-top, | |
| .banner-top1, | |
| .banner-top2, | |
| .banner-top3 { | |
| min-height: 770px; | |
| } | |
| .overlay { | |
| min-height: 770px; | |
| background: rgba(0, 0, 0, 0.4); | |
| } | |
| .overlay1 { | |
| min-height: 770px; | |
| background: rgba(0, 0, 0, 0.5); | |
| } | |
| .button-style { | |
| padding: 15px 40px; | |
| color: #fff; | |
| font-size: 16px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 3px; | |
| border: 2px solid #ccc; | |
| background: none; | |
| display: inline-block; | |
| } | |
| .button-style:hover { | |
| color: #fff; | |
| } | |
| /*-- //banner style --*/ | |
| /*-- about --*/ | |
| h3.heading { | |
| font-size: 40px; | |
| letter-spacing: 2px; | |
| font-weight: 600; | |
| } | |
| p.about-text { | |
| width: 80%; | |
| } | |
| .feature-grids .f-icon { | |
| vertical-align: middle; | |
| background: #009f4d; | |
| width: 70px; | |
| height: 70px; | |
| line-height: 70px; | |
| margin: 0.5em auto 0; | |
| border-radius: 50%; | |
| } | |
| .feature-grids span.fa { | |
| color: #fff; | |
| font-size: 20px; | |
| line-height: 70px; | |
| } | |
| .feature-grids h3 { | |
| font-size: 22px; | |
| font-weight: 600; | |
| letter-spacing: 3px; | |
| line-height: 30px; | |
| text-transform: uppercase; | |
| } | |
| .feature-grids p { | |
| letter-spacing: 1px; | |
| } | |
| /*-- //about --*/ | |
| /*-- core grids --*/ | |
| .core-grids p { | |
| letter-spacing: 1px; | |
| } | |
| .core-right h3 { | |
| font-size: 24px; | |
| line-height: 42px; | |
| letter-spacing: 2px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| } | |
| /*-- //core grids --*/ | |
| /*-- works --*/ | |
| .serives-agile { | |
| background: #009f4d; | |
| } | |
| .serives-agile h3.heading{ | |
| color: #fff; | |
| } | |
| .welcome-grid { | |
| width: 20%; | |
| float: left; | |
| } | |
| .welcome-grid h4 { | |
| font-size: 22px; | |
| letter-spacing: 2px; | |
| color: #fff; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| } | |
| .welcome-grid span.fa { | |
| color: #5eca9f; | |
| color: #e8cd30; | |
| font-size: 50px; | |
| margin-bottom: 10px; | |
| } | |
| .welcome-grid p { | |
| color: #ccc; | |
| line-height: 1.8em; | |
| font-size: 16px; | |
| } | |
| /*-- //works --*/ | |
| /*-- bg --*/ | |
| .background-img { | |
| background: url(../images/5.jpg) no-repeat center; | |
| background-size: cover; | |
| -webkit-background-size: cover; | |
| -moz-background-size: cover; | |
| -o-background-size: cover; | |
| -moz-background-size: cover; | |
| } | |
| .overlay-clr { | |
| background: rgba(0, 0, 0, 0.5); | |
| } | |
| .bg-middle p { | |
| letter-spacing: 1px; | |
| color: #ccc; | |
| line-height: 28px; | |
| } | |
| .bg-right ul li { | |
| letter-spacing: 1px; | |
| color: #ddd; | |
| line-height: 30px; | |
| font-size: 17px; | |
| font-weight: 600; | |
| text-transform: capitalize; | |
| } | |
| .bg-left h4 { | |
| font-size: 26px; | |
| line-height: 42px; | |
| letter-spacing: 2px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| color: #fff; | |
| } | |
| /*-- //bg --*/ | |
| /*-- blog info --*/ | |
| .blog-grids { | |
| margin-bottom: 120px; | |
| } | |
| .blog-left,.blog-middle,.blog-right{ | |
| position: relative; | |
| } | |
| .blog-info { | |
| background: #fff; | |
| padding: 30px; | |
| margin-top: -2em; | |
| position: absolute; | |
| left: 6%; | |
| right: 6%; | |
| top: 200px; | |
| box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.08), 0 5px 8px 0 rgba(0, 0, 0, 0.12), 0 1px 14px 0 rgba(0, 0, 0, 0.06); | |
| } | |
| .blog-info p { | |
| letter-spacing: 1px; | |
| line-height: 28px; | |
| } | |
| .blog-info h4 { | |
| font-size: 22px; | |
| line-height: 42px; | |
| letter-spacing: 2px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| } | |
| .blog-info h4 span.fa { | |
| color: #009f4d; | |
| } | |
| /*-- //blog info --*/ | |
| /*-- text --*/ | |
| .text { | |
| background: url(../images/2.jpg) no-repeat center; | |
| background-size: cover; | |
| position: relative; | |
| } | |
| .text:before { | |
| content: ''; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| top: 0; | |
| left: 0; | |
| opacity: 0.6; | |
| background: #000; | |
| } | |
| .text h3.heading{ | |
| color: #fff; | |
| } | |
| .text h3.heading span { | |
| color: #e8cd30; | |
| } | |
| .text p { | |
| color: #ccc; | |
| width: 80%; | |
| margin: auto; | |
| letter-spacing: 1px; | |
| } | |
| .text a.btn { | |
| font-size: 17px; | |
| letter-spacing: 2px; | |
| color: #333; | |
| font-weight: 700; | |
| padding: 12px 25px; | |
| margin-top: 30px; | |
| border-radius: 4px; | |
| background: #e8cd30; | |
| display: inline-block; | |
| } | |
| .text a.btn1 { | |
| font-size: 17px; | |
| letter-spacing: 2px; | |
| color: #fff; | |
| font-weight: 700; | |
| padding: 12px 25px; | |
| margin-top: 30px; | |
| border-radius: 4px; | |
| background: #009f4d; | |
| display: inline-block; | |
| } | |
| /*-- //text --*/ | |
| /*-- footer --*/ | |
| p.footer-para { | |
| max-width: 650px; | |
| font-size: 15px; | |
| } | |
| /*-- footer logo --*/ | |
| .logo2 { | |
| position: relative; | |
| } | |
| .logo2 a { | |
| font-size: 36px; | |
| font-weight: 600; | |
| color: #fff; | |
| letter-spacing: 1px; | |
| } | |
| .logo2 a span.fa { | |
| color: #e8cd30; | |
| } | |
| /*-- //footer logo --*/ | |
| /*-- footer home dashboard about --*/ | |
| .homelogo { | |
| position: relative; | |
| } | |
| .homelogo a { | |
| font-size: 18px; | |
| font-weight: 300; | |
| color: #fff; | |
| letter-spacing: 1px; | |
| } | |
| .homelogo a span.fa { | |
| color: #e8cd30; | |
| } | |
| /*-- //footer logo --*/ | |
| /*-- social icons --*/ | |
| .footercopy-social ul li, | |
| .contact-left-footer ul li { | |
| display: inline-block; | |
| } | |
| footer{ | |
| background: #191818; | |
| } | |
| .footercopy-social ul li a { | |
| color: #333; | |
| text-align: center; | |
| } | |
| .footercopy-social ul li a span.fa { | |
| width: 20px; | |
| font-size: 20px; | |
| color: #666; | |
| transition: 0.5s all; | |
| -webkit-transition: 0.5s all; | |
| -moz-transition: 0.5s all; | |
| -o-transition: 0.5s all; | |
| -ms-transition: 0.5s all; | |
| } | |
| /*-- //social icons --*/ | |
| /*-- address --*/ | |
| .contact-left-footer ul li p span.fa { | |
| color: #aaa; | |
| } | |
| .contact-left-footer ul li p a, | |
| .contact-left-footer ul li p { | |
| color: #707579; | |
| font-size: 16px; | |
| font-weight: 600; | |
| } | |
| /*-- //address --*/ | |
| /*-- copyright --*/ | |
| .w3l-copy p { | |
| letter-spacing: 1px; | |
| } | |
| .w3l-copy p a { | |
| color: #aaa; | |
| } | |
| /*-- //copyright --*/ | |
| /*-- //footer --*/ | |
| /*-- inner banner --*/ | |
| .inner-banner{ | |
| background: url(../images/2.jpg) no-repeat center; | |
| background-size: cover; | |
| min-height: 250px; | |
| position: relative; | |
| } | |
| .inner-banner:before { | |
| content: ''; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| top: 0; | |
| left: 0; | |
| opacity: 0.6; | |
| background: #000; | |
| } | |
| /*-- //inner banner --*/ | |
| /*-- about page --*/ | |
| .about-left h5 { | |
| color: #009f4d; | |
| font-weight: 600; | |
| letter-spacing: 1px; | |
| font-size: 24px; | |
| } | |
| .about-left h3 { | |
| font-size: 32px; | |
| line-height: 44px; | |
| letter-spacing: 2px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| } | |
| .about-left h4 { | |
| line-height: 1.5; | |
| font-size: 25px; | |
| letter-spacing: 2px; | |
| font-weight: 600; | |
| text-transform: capitalize; | |
| } | |
| .about-right p{ | |
| letter-spacing: 1px; | |
| } | |
| .about span.fa-quote-left { | |
| font-size: 20px; | |
| vertical-align: top; | |
| color: #009f4d; | |
| } | |
| .banner-bottom { | |
| background: #f8f9fa; | |
| } | |
| .wthree_banner_bottom_grid_left span { | |
| background: #ffc168; | |
| color: #fff; | |
| width: 80px; | |
| height: 80px; | |
| border-radius: 50%; | |
| text-align: center; | |
| font-size: 38px; | |
| line-height: 2; | |
| } | |
| .wthree_banner_bottom_grid_left.icons-w3pvt2 span { | |
| background: #ff4f81; | |
| } | |
| .wthree_banner_bottom_grid_left.icons-w3pvt3 span { | |
| background: #2dde98 | |
| } | |
| /* about bottom */ | |
| h4.abt-text { | |
| font-size: 2.5em; | |
| letter-spacing: 2px; | |
| color: #fff; | |
| line-height: 1.4em; | |
| } | |
| .abt_bottom{ | |
| background: #009f4d; | |
| } | |
| .abt_bottom a.serv_link { | |
| font-size: 17px; | |
| letter-spacing: 2px; | |
| color: #333; | |
| font-weight: 700; | |
| padding: 12px 25px; | |
| border-radius: 4px; | |
| background: #e8cd30; | |
| display: inline-block; | |
| margin-top:10px; | |
| } | |
| /* //about bottom */ | |
| /* stats */ | |
| section.w3_stats { | |
| background: url(../images/1.jpg) no-repeat center; | |
| background-size: cover; | |
| position: relative; | |
| } | |
| section.w3_stats h3.heading { | |
| color: #fff; | |
| } | |
| .counter span.fa { | |
| color: #fff; | |
| font-size: 3em; | |
| } | |
| .timer { | |
| font-size: 3em; | |
| font-weight: 300; | |
| color: #fff; | |
| } | |
| p.count-text { | |
| letter-spacing: 2px; | |
| font-weight: 600; | |
| color: #fff; | |
| } | |
| /* //stats */ | |
| /* news */ | |
| .news{ | |
| background: #f8f9fa; | |
| } | |
| .feedback-info h4 { | |
| font-size: 22px; | |
| line-height: 34px; | |
| letter-spacing: 1px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| } | |
| .feedback-info p { | |
| letter-spacing: 1px; | |
| line-height: 1.8em; | |
| } | |
| .feedback-info h4 a { | |
| letter-spacing: 1px; | |
| line-height: 1.4; | |
| } | |
| .feedback-img { | |
| float: left; | |
| width: 25%; | |
| } | |
| .feedback-img-info { | |
| float: right; | |
| width: 68%; | |
| margin: 1.5em 0 0 1em; | |
| } | |
| .feedback-img-info h5 { | |
| color: #504e4e; | |
| font-size: 17px; | |
| letter-spacing: 1px; | |
| font-weight: 600; | |
| } | |
| .feedback-info { | |
| background: #fff; | |
| } | |
| /* //news */ | |
| /*-- team --*/ | |
| .team-text h4 { | |
| font-size: 22px; | |
| letter-spacing: 2px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| margin-top: 1em; | |
| } | |
| .caption ul li { | |
| display: inline-block; | |
| margin: 0 5px; | |
| } | |
| .caption ul li a { | |
| color: #aaa; | |
| font-size: 14px; | |
| } | |
| /*-- //team --*/ | |
| /*-- //about page --*/ | |
| /*-- services page --*/ | |
| /* home grid */ | |
| .home-grid { | |
| padding: 1.5em; | |
| border: 1px solid #555; | |
| position: relative; | |
| text-align: center; | |
| } | |
| .home-grid span { | |
| color: #009f4d; | |
| font-size: 1.5em; | |
| font-weight: 700; | |
| position: absolute; | |
| top: 0; | |
| left: 0px; | |
| padding: 2px 7px; | |
| } | |
| .wthree-bnr-btn { | |
| display: inline-block; | |
| border-top: 1px solid #1dc6bc; | |
| border-radius: 0; | |
| margin-top: 1em; | |
| padding: 10px 0; | |
| color: #5341b4; | |
| text-transform: capitalize; | |
| font-size: 14px; | |
| letter-spacing: 0.5px; | |
| font-weight: 800; | |
| } | |
| h4.home-title { | |
| font-size: 22px; | |
| line-height: 42px; | |
| letter-spacing: 2px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| } | |
| .home-grid p { | |
| letter-spacing: 1px; | |
| } | |
| .title-w3ls { | |
| margin-bottom: 3em; | |
| } | |
| /* //home grid */ | |
| /* newsletter */ | |
| .newsletter_right_w3.py-5 { | |
| background: #f8f9fa; | |
| } | |
| p.sub-tittle { | |
| max-width: 700px; | |
| margin: 0 auto; | |
| font-size: 15px; | |
| letter-spacing: 1px; | |
| } | |
| .n-right-w3ls { | |
| width: 65%; | |
| margin: auto; | |
| } | |
| form.newsletter { | |
| background: #fff; | |
| padding: 0.3em; | |
| border-radius: 4px; | |
| box-shadow: 0 12px 60px rgba(0, 0, 0, .2); | |
| -webkit-box-shadow: 0 12px 60px rgba(0, 0, 0, .2); | |
| -o-box-shadow: 0 12px 60px rgba(0, 0, 0, .2); | |
| -moz-box-shadow: 0 12px 60px rgba(0, 0, 0, .2); | |
| -ms-box-shadow: 0 12px 60px rgba(0, 0, 0, .2); | |
| } | |
| .newsletter .email { | |
| outline: none; | |
| padding: 12px 15px; | |
| color: #777; | |
| width: 68%; | |
| background: transparent; | |
| text-transform: capitalize; | |
| border: none; | |
| letter-spacing: 2px; | |
| font-weight: 600; | |
| } | |
| .newsletter button.btn { | |
| color: #fff; | |
| border: none; | |
| padding: 12px 15px; | |
| text-transform: uppercase; | |
| text-decoration: none; | |
| background: #009f4d; | |
| -webkit-transition: 0.5s all; | |
| -moz-transition: 0.5s all; | |
| -o-transition: 0.5s all; | |
| -ms-transition: 0.5s all; | |
| transition: 0.5s all; | |
| float: right; | |
| cursor: pointer; | |
| width: 27%; | |
| border-radius: 4px; | |
| font-weight: 600; | |
| letter-spacing: 2px; | |
| } | |
| /* //newsletter */ | |
| /*-- //services page --*/ | |
| /*-- contact --*/ | |
| .contact-left input[type="text"],.contact-left input[type="email"]{ | |
| border: 1px solid #ccc; | |
| font-size: 1em; | |
| color: #828282; | |
| background: none; | |
| width: 100%; | |
| font-weight: 600; | |
| letter-spacing: 1px; | |
| padding: 15px 20px; | |
| outline: none; | |
| } | |
| .contact-right textarea{ | |
| border:1px solid #ccc; | |
| font-size:1em; | |
| color:#828282; | |
| background:none; | |
| width:100%; | |
| font-weight: 600; | |
| letter-spacing: 1px; | |
| padding: 15px 20px; | |
| outline:none; | |
| min-height: 8.5em; | |
| resize:none; | |
| } | |
| .contact-left input[type="email"]{ | |
| margin:1.5em 0; | |
| } | |
| .contact-right button.btn { | |
| padding: .8em 1em; | |
| color: #fff; | |
| font-weight: 600; | |
| letter-spacing: 1px; | |
| font-size: 1em; | |
| background: #009f4d; | |
| -webkit-transition: 0.5s all; | |
| -moz-transition: 0.5s all; | |
| -o-transition: 0.5s all; | |
| -ms-transition: 0.5s all; | |
| transition: 0.5s all; | |
| outline: none; | |
| margin: 1em 0 0; | |
| border-radius: 0px; | |
| width: 100%; | |
| border:1px solid #4caf50; | |
| letter-spacing: 2px; | |
| text-transform: uppercase; | |
| } | |
| .address-row { | |
| margin:0 0 2em; | |
| } | |
| .address-right { | |
| text-align: left; | |
| padding-left: 2em; | |
| } | |
| .contact-w3lsright h6 { | |
| font-size: 1.8em; | |
| color: #595c65; | |
| font-weight: 300; | |
| line-height: 1.8em; | |
| text-transform: uppercase; | |
| } | |
| .contact-w3lsright h6 span { | |
| color: #03A9F4; | |
| } | |
| .address-row .contact-icon { | |
| background: #009f4d; | |
| width:60px; | |
| height:60px; | |
| line-height: 60px; | |
| text-align: center; | |
| -webkit-transition:.5s all; | |
| -moz-transition:.5s all; | |
| transition:.5s all; | |
| border-radius: 50%; | |
| } | |
| .address-row span.fa { | |
| font-size: 1.2em; | |
| line-height: 60px; | |
| color: #fff; | |
| } | |
| .address-row h5 { | |
| font-size: 1.6em; | |
| margin-bottom: .3em; | |
| font-weight: 700; | |
| } | |
| .address-row p{ | |
| letter-spacing: 1px; | |
| } | |
| .address-row p a { | |
| color: #707579; | |
| } | |
| .address h4 { | |
| font-size: 1.8em; | |
| color: #00BCD4; | |
| margin-bottom: 0.6em; | |
| text-transform: uppercase; | |
| } | |
| .map iframe { | |
| outline: none; | |
| border: none; | |
| width: 100%; | |
| height: 350px; | |
| } | |
| /*-- //contact --*/ | |
| /*-- coming sooon page --*/ | |
| .comingsoon { | |
| background: url(../images/comingsoon.jpg) no-repeat center; | |
| background-size: cover; | |
| min-height: 250px; | |
| position: relative; | |
| } | |
| .comingsoon h4 { | |
| font-size: 40px; | |
| font-weight: 600; | |
| letter-spacing: 2px; | |
| } | |
| .comingsoon p { | |
| letter-spacing: 1px; | |
| } | |
| /*-- //coming sooon page --*/ | |
| /*-- move top --*/ | |
| a.move-top { | |
| width: 34px; | |
| height: 34px; | |
| background: url(../images/move-top.png) no-repeat; | |
| display: inline-block; | |
| position: fixed; | |
| bottom: 4%; | |
| right: 2%; | |
| z-index: 0; | |
| } | |
| /*-- //move top --*/ | |
| /*-- Responsive design --*/ | |
| @media(max-width:1366px) { | |
| .banner-top, .banner-top1, .banner-top2, .banner-top3,.overlay,.overlay1 { | |
| min-height: 750px; | |
| } | |
| } | |
| @media(max-width:1280px) { | |
| .banner-top, .banner-top1, .banner-top2, .banner-top3,.overlay,.overlay1 { | |
| min-height: 720px; | |
| } | |
| } | |
| @media(max-width:1080px) { | |
| .w3layouts-banner-info h3 { | |
| font-size: 3.5em; | |
| } | |
| .w3layouts-banner-info { | |
| padding-top: 14em; | |
| } | |
| .banner-top, .banner-top1, .banner-top2, .banner-top3,.overlay,.overlay1 { | |
| min-height: 650px; | |
| } | |
| p.about-text { | |
| width: 85%; | |
| } | |
| .core-right h4 { | |
| font-size: 23px; | |
| } | |
| .bg-left h4 { | |
| font-size: 21px; | |
| } | |
| .blog-grids { | |
| margin-bottom: 160px; | |
| } | |
| .feedback-info h4 { | |
| letter-spacing: 3px; | |
| } | |
| h4.abt-text { | |
| font-size: 2.2em; | |
| } | |
| .feedback-info h4 { | |
| letter-spacing: 2px; | |
| } | |
| .inner-banner { | |
| min-height: 200px; | |
| } | |
| } | |
| @media(max-width:991px) { | |
| .w3layouts-banner-info { | |
| padding-top: 12em; | |
| } | |
| h3.heading { | |
| font-size: 36px; | |
| } | |
| .welcome-grid { | |
| width: 33.33%; | |
| float: left; | |
| } | |
| .blog-grids { | |
| margin-bottom: 100px; | |
| } | |
| .text p { | |
| width: 100%; | |
| } | |
| .w3layouts-banner-info h4 { | |
| font-size: 22px; | |
| letter-spacing: 3px; | |
| line-height: 25px; | |
| } | |
| .banner-top, .banner-top1, .banner-top2, .banner-top3,.overlay,.overlay1 { | |
| min-height: 600px; | |
| } | |
| .about-left h3 { | |
| font-size: 29px; | |
| letter-spacing: 1px; | |
| } | |
| .about-left h4 { | |
| font-size: 23px; | |
| letter-spacing: 1px; | |
| } | |
| h4.abt-text { | |
| font-size: 2em; | |
| letter-spacing: 1px; | |
| } | |
| .feedback-img { | |
| width: 10%; | |
| } | |
| .feedback-img-info { | |
| width: 86%; | |
| } | |
| .counter span.fa,.timer { | |
| font-size: 2.5em; | |
| } | |
| .n-right-w3ls { | |
| width: 80%; | |
| } | |
| } | |
| @media(max-width:800px) { | |
| h3.heading { | |
| font-size: 33px; | |
| } | |
| .logo2 a { | |
| font-size: 30px; | |
| } | |
| .text a.btn1,.text a.btn { | |
| font-size: 15px; | |
| padding: 10px 25px; | |
| letter-spacing: 1px; | |
| } | |
| .w3layouts-banner-info h3 { | |
| font-size: 3em; | |
| } | |
| #logo a { | |
| font-size: .7em; | |
| } | |
| .address-row h5 { | |
| font-size: 1.4em; | |
| } | |
| .address-row .contact-icon { | |
| width: 55px; | |
| height: 55px; | |
| line-height: 55px; | |
| } | |
| .address-row span.fa { | |
| font-size: 1em; | |
| line-height: 55px; | |
| } | |
| .map iframe { | |
| height: 300px; | |
| } | |
| } | |
| @media(max-width:736px) { | |
| .w3layouts-banner-info h4 { | |
| font-size: 18px; | |
| letter-spacing: 2px; | |
| line-height: 25px; | |
| } | |
| p.about-text { | |
| width: 100%; | |
| letter-spacing: 1px; | |
| } | |
| .welcome-grid { | |
| width: 50%; | |
| } | |
| .blog img { | |
| width: 100%; | |
| } | |
| .blog-info { | |
| top: 280px; | |
| } | |
| .w3l-copy p { | |
| font-size: 16px; | |
| } | |
| .blog-info h4 { | |
| font-size: 20px; | |
| line-height: 35px; | |
| } | |
| .welcome-grid span.fa { | |
| font-size: 40px; | |
| } | |
| .inner-banner { | |
| min-height: 150px; | |
| } | |
| .about-left h3 { | |
| font-size: 24px; | |
| } | |
| .about-left h4 { | |
| font-size: 20px; | |
| letter-spacing: 1px; | |
| } | |
| .n-right-w3ls { | |
| width: 100%; | |
| } | |
| .comingsoon h4 { | |
| font-size: 35px; | |
| } | |
| } | |
| @media(max-width:600px) { | |
| .core-right h4 { | |
| font-size: 21px; | |
| line-height: 38px; | |
| } | |
| p { | |
| font-size: 16px; | |
| } | |
| .w3layouts-banner-info p { | |
| font-size: 15px; | |
| } | |
| .w3layouts-banner-info h3 { | |
| font-size: 2.7em; | |
| letter-spacing: 5px; | |
| } | |
| .button-style { | |
| padding: 13px 35px; | |
| font-size: 14px; | |
| } | |
| .w3layouts-banner-info { | |
| padding-top: 10em; | |
| } | |
| .feature-grids h3,.welcome-grid h4 { | |
| font-size: 20px; | |
| letter-spacing: 2px; | |
| } | |
| .banner-top, .banner-top1, .banner-top2, .banner-top3, .overlay, .overlay1 { | |
| min-height: 570px; | |
| } | |
| .team-text h4 { | |
| font-size: 18px; | |
| letter-spacing: 1px; | |
| } | |
| h4.abt-text { | |
| font-size: 1.8em; | |
| letter-spacing: 1px; | |
| } | |
| .feedback-img { | |
| width: 15%; | |
| } | |
| .feedback-img-info { | |
| width: 81%; | |
| } | |
| h4.home-title { | |
| font-size: 21px; | |
| line-height: 35px; | |
| } | |
| } | |
| @media(max-width:568px) { | |
| .blog-left, .blog-middle { | |
| margin-bottom: 2em; | |
| } | |
| .banner-top, .banner-top1, .banner-top2, .banner-top3, .overlay, .overlay1 { | |
| min-height: 520px; | |
| } | |
| .blog-grids { | |
| margin-bottom: 70px; | |
| } | |
| .about-left h5 { | |
| font-size: 18px; | |
| } | |
| } | |
| @media(max-width:480px) { | |
| .logo2 a { | |
| font-size: 25px; | |
| } | |
| h3.heading { | |
| font-size: 28px; | |
| } | |
| .w3layouts-banner-info h3 { | |
| font-size: 2.2em; | |
| } | |
| .banner-top, .banner-top1, .banner-top2, .banner-top3, .overlay, .overlay1 { | |
| min-height: 500px; | |
| } | |
| .w3layouts-banner-info { | |
| padding-top: 8em; | |
| } | |
| .bg-left h4 { | |
| font-size: 20px; | |
| line-height: 36px; | |
| } | |
| .blog-info { | |
| top: 180px; | |
| } | |
| .about-left h3 { | |
| font-size: 22px; | |
| line-height: 34px; | |
| } | |
| .feedback-img { | |
| width: 18%; | |
| } | |
| .feedback-img-info { | |
| width: 76%; | |
| } | |
| .newsletter button.btn { | |
| width: 31%; | |
| } | |
| .comingsoon h4 { | |
| font-size: 30px; | |
| letter-spacing: 1px; | |
| } | |
| } | |
| @media(max-width:414px) { | |
| .csslider>.arrows label { | |
| padding: 8px ; | |
| } | |
| #logo a { | |
| font-size: .65em; | |
| } | |
| .toggle { | |
| font-size: 17px; | |
| } | |
| .w3layouts-banner-info h3 { | |
| font-size: 2em; | |
| } | |
| .welcome-grid p { | |
| font-size: 15px; | |
| } | |
| .welcome-grid span.fa { | |
| font-size: 35px; | |
| margin-bottom: 0px; | |
| } | |
| .core-right h4 { | |
| font-size: 19px; | |
| letter-spacing: 1px; | |
| line-height: 36px; | |
| } | |
| .blog-left, .blog-middle { | |
| margin-bottom: 4em; | |
| } | |
| .blog-grids { | |
| margin-bottom: 85px; | |
| } | |
| .bg-left h4 { | |
| font-size: 19px; | |
| line-height: 36px; | |
| letter-spacing: 1px; | |
| } | |
| .contact-left-footer ul li p a, .contact-left-footer ul li p { | |
| font-size: 15px; | |
| } | |
| .blog-grids { | |
| margin-bottom: 90px; | |
| } | |
| h4.abt-text { | |
| font-size: 1.6em; | |
| } | |
| .abt_bottom a.serv_link { | |
| font-size: 15px; | |
| letter-spacing: 1px; | |
| padding: 10px 25px; | |
| } | |
| .counter span.fa, .timer { | |
| font-size: 2em; | |
| } | |
| p.count-text { | |
| letter-spacing: 2px; | |
| font-size: 13px; | |
| } | |
| .feedback-info h4 { | |
| letter-spacing: 2px; | |
| font-size: 18px; | |
| } | |
| h4.home-title { | |
| font-size: 19px; | |
| } | |
| .newsletter .email { | |
| width: 64%; | |
| font-size: 15px; | |
| } | |
| .newsletter button.btn { | |
| width: 35%; | |
| font-size: 15px; | |
| } | |
| .address-row h5 { | |
| font-size: 1.2em; | |
| } | |
| .address-right { | |
| padding-left: 1em; | |
| } | |
| } | |
| @media(max-width:384px) { | |
| .feature-grids h3, .welcome-grid h4 { | |
| font-size: 18px; | |
| letter-spacing: 2px; | |
| } | |
| .w3layouts-banner-info p { | |
| letter-spacing: 1px; | |
| } | |
| .blog-left, .blog-middle { | |
| margin-bottom: 6em; | |
| } | |
| .csslider>.arrows label { | |
| padding: 7px; | |
| } | |
| .blog-grids { | |
| margin-bottom: 100px; | |
| } | |
| .about-left h4 { | |
| font-size: 18px; | |
| } | |
| h4.abt-text { | |
| font-size: 1.4em; | |
| } | |
| .newsletter .email { | |
| width: 62%; | |
| font-size: 14px; | |
| } | |
| .newsletter button.btn { | |
| width: 38%; | |
| font-size: 14px; | |
| } | |
| .inner-banner { | |
| min-height: 130px; | |
| } | |
| .address-right { | |
| padding-left: 1.5em; | |
| } | |
| .contact-left input[type="text"], .contact-left input[type="email"],.contact-right textarea { | |
| padding: 12px 15px; | |
| } | |
| .contact-left input[type="email"] { | |
| margin: 1em 0; | |
| } | |
| } | |
| @media(max-width:375px) { | |
| } | |
| @media(max-width:320px) { | |
| } | |
| /*-- //Responsive design --*/ | |