/* =================================== Table of Content ====================================== */ /* - Google Fonts - General - Header And Navigation - Banner - Services - Portfolio - Reviews - Counter - Contact - Scroll Top - Loader - StandAlone - Media Queries */ /* =================================== Google font ====================================== */ @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Open sans:wght@300;400;500;700&display=swap'); .main-font{font-family: 'Oswald', sans-serif;} .alt-font{font-family: 'Open sans', sans-serif;} /* =================================== Scrollbar ====================================== */ ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { width: 12px; background: #ffffff; border-left: 0 solid white; border-right: 0 solid white; } ::-webkit-scrollbar-thumb { background: #008256; width: 0; height: 25%; } .borderless li { border: none; } /* =================================== General ====================================== */ body {font-family: 'Open sans', sans-serif; font-size: 20px;color: #202020;font-weight:normal;line-height:25px;width: 105%; overflow-x: hidden} a, input, button, .navbar, .fixedmenu, .tp-bullet, .owl-dot, .owl-prev, .owl-next {transition: ease-in-out 0.2s;-webkit-transition: ease-in-out 0.2s;-moz-transition: ease-in-out 0.2s;-ms-transition: ease-in-out 0.2s;-o-transition: ease-in-out 0.2s;} section,.section-padding {position: relative;overflow: hidden;} a {color:inherit;text-decoration: none;} .rev_slider_wrapper{width: 100% !important;} .btn.focus, .btn:focus{-webkit-box-shadow: none;box-shadow: none;} p:last-child{margin-bottom: 0 !important; font-family: 'Open sans', sans-serif;} .fa, .far, .fas{display: inline;} a:active, a:hover{color: #202020;} li{list-style: none;text-decoration: none;} blockquote {border-left: 2px solid;padding: 10px 15px 10px 35px;margin: 25px 0;font-size: 18px;line-height: 28px;margin-top: 32px;margin-bottom: 32px;} blockquote > cite {font-weight: 400;font-size: 14px;display: block;} .hidden{display: none;} section{padding: 7.5rem 0;} .padding-bottom {padding-bottom: 7.5rem;} .padding-top {padding-top: 7.5rem;} /* Transition none */ .no-transition *{transition-timing-function:initial; -moz-transition-timing-function:initial; -webkit-transition-timing-function:initial; -o-transition-timing-function:initial; -ms-transition-timing-function:initial; transition-duration: 0s; -moz-transition-duration: 0s; -webkit-transition-duration: 0s; -o-transition-duration: 0s; -ms-transition-duration: 0s;} /* Overlay */ .bg-overlay{position: absolute;top: 0;left: 0;width: 100%;height: 100%;} /* Opacity */ .opacity-full{opacity: 1;} .opacity-3{opacity: .3;} .opacity-4{opacity: .4;} .opacity-5{opacity: .5;} .opacity-6{opacity: .6;} .opacity-7{opacity: .7;} .opacity-8{opacity: .8;} .opacity-9{opacity: .9;} /* button */ .btn {-webkit-appearance: initial; overflow: hidden;position: -webkit-sticky;position: sticky; z-index: 2; display:inline-block; font-size: 12px; border:2px solid transparent; letter-spacing: .5px; line-height: inherit; border-radius: 0; text-transform:capitalize; width: auto;font-family: 'Open sans', sans-serif; font-weight: normal; -webkit-transition: all .5s ease;-o-transition: all .5s ease !important;transition: all .5s ease !important;} /* button size */ .btn.btn-small {font-size:12px; padding: 4px 1.8em;} .btn.btn-medium {font-size:16px; padding: 14px 36px; line-height: 1.8em} .btn.btn-large {font-size:16px; padding: 8px 35px;; line-height: 1.8em;} .btn.btn-rounded {border-radius: 50px;} /* Green Button */ .btn.btn-green {background: #008256; border-color: #008256; color: #ffffff} .btn.btn-green:hover {background: #ffffff !important; border-color: #008256; color: #008256 !important} /* White Button */ .btn.btn-white {background: transparent; border-color: #ffffff; color: #ffffff} .btn.btn-white:hover {background: #008256 !important; border-color: #008256; color: #ffffff !important} /* Background Color */ .bg-black{background-color: #202020;} .bg-white{background-color: #ffffff;} .bg-green{background-color: #008256;} /* Text Color */ .text-black{color: #202020;} .text-white{color: #ffffff;} .text-green{color: #008256;} /* Icon Text Hover */ .facebook-text-hvr:hover{color:#4267B2 !important;} .twitter-text-hvr:hover{color:#1DA1F2 !important;} .instagram-text-hvr:hover{color:#C32AA3 !important;} .linkedin-text-hvr:hover{color:#0077B5 !important;} .pinterest-text-hvr:hover{color:#BD081C !important;} .google-text-hvr:hover{color:#DB4437 !important;} /* =================================== Header ====================================== */ header a.logo img { max-width: 130px; vertical-align: sub; } .navbar-top-default{ position: absolute; top: 0; z-index: 99; overflow: hidden; height: 100px; width: 100%; -webkit-transition: none; -o-transition: none; transition: none; background: transparent; } .header-appear .navbar-top-default { height: 100px; position: fixed; z-index: 999; background: #202020; -webkit-animation-name: animationFade; animation-name: animationFade; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.35); box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.35); } .navbar-top-default #megaone{ margin-right: -30px; } /*Navbar Simple*/ .navbar-simple .navbar-nav .nav-link { font-size: 16px; color: #ffffff; text-align: center; padding: 0.4rem 1.6rem; font-weight: normal; text-transform: uppercase; font-family: 'Oswald Regular', sans-serif; } .nav-box-round .navbar-nav .nav-link{ border-radius: 20px; } .header-appear .nav-box-round .navbar-nav .nav-link.active{ background-color: #55ACEE; color: #ffffff !important; } .header-appear .nav-box-round .navbar-nav .nav-link:hover{ color: #55ACEE; } /*Nav Social*/ .nav-social .social-icons-simple{ margin-bottom: 0; margin-left: -10px; } .nav-social .social-icons-simple li{ display: inline-block; } .nav-social .social-icons-simple li a { display: block; font-size: 16px; height: 32px; line-height: 34px; border: 1px solid transparent; text-align: center; width: 32px; border-radius: 50%; position: relative; z-index: 1; overflow: hidden; -webkit-transition: background-color .5s ease; -o-transition: background-color .5s ease; transition: background-color .5s ease; } .nav-social .social-icons-simple li a:hover{ background-color:#FFFFFF; } .nav-social .social-icons-simple li.animated-wrap a:hover{ background-color: transparent; color: #ffffff; } /*Whatsapp link*/ .top-info{ font-size: 16px; color: #ffffff; font-weight: normal; } .top-info li a{ color: #ffffff; text-decoration: none; transition: .3s ease; } /*nav line*/ .nav-line .navbar-nav .nav-link.active:before { -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); visibility: visible; opacity: 1; } .nav-line .navbar-nav .nav-link:before { position: relative; content: ''; width: 100%; max-width: 100%; margin: 0 auto; display: table; height: 3px; border-radius: 2px; bottom: -32px; -webkit-transition: all 300ms linear; -o-transition: all 300ms linear; transition: all 300ms linear; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); background: #FFFFFF; visibility: hidden; opacity: 0; } /* =================================== Side Menu ====================================== */ .side-menu { width: 40%; position: fixed; right: 0; top: 0; background: #008256; z-index: 9999; height: 100%; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); -webkit-transition: -webkit-transform .5s ease; transition: -webkit-transform .5s ease; -o-transition: -o-transform .5s ease; -o-transition: transform .5s ease; transition: transform .5s ease; transition: transform .5s ease, -webkit-transform .5s ease; overflow: hidden; } .side-menu.left { left: 0; right: auto; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } .side-menu.before-side { width: 280px; } .side-menu.side-menu-active, .side-menu.before-side{ -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .pul-menu .side-menu.side-menu-active { visibility: visible; opacity: 1; } .side-menu .navbar-brand { margin: 0 0 2.5rem 0; } /*Side overlay*/ #close_side_menu { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; -webkit-transition: opacity 300ms cubic-bezier(0.895, 0.03, 0.685, 0.22); -o-transition: opacity 300ms cubic-bezier(0.895, 0.03, 0.685, 0.22); transition: opacity 300ms cubic-bezier(0.895, 0.03, 0.685, 0.22); display: none; z-index: 1031; opacity: 0.4; } /*Side Close Btn*/ .side-menu .btn-close { height: 33px; width: 33px; display: inline-block; text-align: center; position: absolute; top: 30px; right: 15px; cursor: pointer; } .side-menu.before-side .btn-close{ display: none; } .side-menu .btn-close::before, .side-menu .btn-close::after { position: absolute; left: 16px; content: ' '; height: 24px; width: 2px; background: #fff; top: 5px; } .side-menu .btn-close:before { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .side-menu .btn-close:after { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } /*side open btn*/ .sidemenu_btn { -webkit-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear; width: 36px; padding: 6px; position: relative; right: -50px; display: inline-block; } .sidemenu_btn span { height: 2px; width: 100%; display: block; margin-left: auto; background: #ffffff; transition: .5s ease; } .sidemenu_btn span:nth-child(2) { margin: 4px 0; } .sidemenu_btn:hover span:first-child, .sidemenu_btn:hover span:last-child{ width: 70%; transition: .5s ease; margin-left: auto; } .side-menu .inner-wrapper { padding: 3.5rem 5rem; height: 100%; position: relative; overflow-y: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: left; -ms-flex-wrap: wrap; flex-wrap: wrap; } .pul-menu.pushwrap .side-menu .inner-wrapper{ padding: 3.5rem 2.5rem; } .side-menu .side-nav { margin-bottom: 30px; display: block; } .side-nav .navbar-nav .nav-item{ display: block; margin: 10px 0; padding: 0 !important; opacity: 0; -webkit-transition: all 0.8s ease 500ms; -o-transition: all 0.8s ease 500ms; transition: all 0.8s ease 500ms; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); } .side-nav .navbar-nav .nav-item:first-child { -webkit-transition-delay: .1s; -o-transition-delay: .1s; transition-delay: .1s; } .side-nav .navbar-nav .nav-item:nth-child(2){ -webkit-transition-delay: .2s; -o-transition-delay: .2s; transition-delay: .2s; } .side-nav .navbar-nav .nav-item:nth-child(3) { -webkit-transition-delay: .3s; -o-transition-delay: .3s; transition-delay: .3s; } .side-nav .navbar-nav .nav-item:nth-child(4) { -webkit-transition-delay: .4s; -o-transition-delay: .4s; transition-delay: .4s; } .side-nav .navbar-nav .nav-item:nth-child(5) { -webkit-transition-delay: .5s; -o-transition-delay: .5s; transition-delay: .5s; } .side-nav .navbar-nav .nav-item:nth-child(6) { -webkit-transition-delay: .6s; -o-transition-delay: .6s; transition-delay: .6s; } .side-nav .navbar-nav .nav-item:nth-child(7) { -webkit-transition-delay: .7s; -o-transition-delay: .7s; transition-delay: .7s; } .side-nav .navbar-nav .nav-item:nth-child(8) { -webkit-transition-delay: .8s; -o-transition-delay: .8s; transition-delay: .8s; } .side-nav .navbar-nav .nav-item:nth-child(9) { -webkit-transition-delay: .9s; -o-transition-delay: .9s; transition-delay: .9s; } .side-menu.side-menu-active .side-nav .navbar-nav .nav-item { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); opacity: 1; } .side-nav .navbar-nav .nav-link { display: inline-table; color: #fff; padding: 10px 0 10px 0 !important; font-size: 1.5rem; font-weight: 300; line-height: normal; position: relative; border-radius: 0; } .side-nav .navbar-nav .nav-link::after{ content: ""; position: absolute; background: #fff; display: inline-block; width: 0; height: 3px; bottom: 0; left: 0; overflow: hidden; -webkit-transition: all 0.5s cubic-bezier(0, 0, 0.2, 1); -o-transition: all 0.5s cubic-bezier(0, 0, 0.2, 1); transition: all 0.5s cubic-bezier(0, 0, 0.2, 1); } .side-nav .navbar-nav .nav-link:hover::after, .side-nav .navbar-nav .nav-link:focus::after, .side-nav .navbar-nav .nav-link.active::after { width: 100%; } .side-nav .navbar-nav .nav-link.active { background: transparent; } .side-menu p{ font-size: 16px; margin-top: .5rem; margin-bottom: 0; } .social-icons-simple{ margin-bottom: 0; margin-left: -10px; } .social-icons-simple li{ display: inline-block; } .social-icons-simple li a { display: block; font-size: 16px; height: 36px; line-height: 38px; border: 1px solid transparent; text-align: center; width: 36px; border-radius: 50%; position: relative; z-index: 1; overflow: hidden; -webkit-transition: background-color .5s ease; -o-transition: background-color .5s ease; transition: background-color .5s ease; } .social-icons-simple li a:hover{ background-color:#FFFFFF; } .social-icons-simple li.animated-wrap a:hover{ background-color: transparent; color: #ffffff; } @-webkit-keyframes animationFade { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes animationFade { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } /* =================================== Banner ====================================== */ .banner-area{ background-image: url("../images/home-banner.jpg"); height: 80vh; background-repeat: no-repeat; background-size: cover; padding: 0; } .center-content { height: 100vh; align-items: center; } .banner-area .green-box { background: #008256; padding: 200px 0; width: 75%; margin-left: auto; position: relative; } .banner-area .float-box { background: #e07c8a; padding: 200px 0; width: 75%; margin-left: auto; position: relative; } .banner-area .box-content { top: 50%; left: 0; width: 104%; max-width: 104%; text-align: right; position: absolute; text-transform: uppercase; transform: translate(-45%,-50%); } .box-content h1 { padding: 10px; font-size: 72px; color: #ffffff; font-weight: 600; background: #202020; display: inline-block; font-family: 'Open sans',sans-serif; font-style: normal; font-weight: 600; font-size: 42px; line-height: 115%; } .banner-area .button { font-size: 18px; margin-top: 20px; position: relative; color: #ffffff; display: inline-block; text-transform: capitalize; } .banner-area .button i { font-size: 18px; padding: 5px; border-radius: 50%; border: 2px solid #ffffff; transition: .5s ease; margin-right: 8px; } .banner-area .button:hover i { background: #202020; color: #ffffff; transition: .5s ease; border-color: #202020; } /*================================= Services Section ===================================*/ .services-sec .services-boxes{ display: block; padding: 45px; } .service-card .text { font-size: 20px; color: #202020; font-weight: normal; font-family: Open sans, sans-serif; } .services-sec .image-holder { padding-bottom: 120px; } .services-sec .services-boxes .service-card{ width: 43%; float: left; margin-top: 180px; display: flex; align-items: center; cursor: pointer; } .services-sec .services-boxes .service-card:first-child{ margin-top: 0; } .services-sec .services-boxes .service-card .icon-holder{ display: inline-block; margin-right: 15px; margin-left: 15px; color: #000000; transition: .5s ease; background-size: 200% 100%; background-position: 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: -webkit-gradient(linear, left top, right top, from(#008256), color-stop(50%, #008256), color-stop(50%, #000000)); background-image: linear-gradient(to right, #008256, #008256 50%, #000000 50%); } .services-sec .services-boxes .service-card:hover .icon-holder{ background-position: 0; -webkit-transition: all 0.8s cubic-bezier(0, 0, 0.23, 1); transition: all 0.8s cubic-bezier(0, 0, 0.23, 1); } .services-sec .services-boxes .service-card.right:hover .icon-holder{ background-position: 0; -webkit-transition: all 0.8s cubic-bezier(0, 0, -0.23, 1); transition: all 0.8s cubic-bezier(0, 0, -0.23, 1); } .services-sec .services-boxes .service-card .icon-holder i{ font-size: 100px; } .services-sec .services-boxes .service-card.left.icon-right{ width: 52%; } .services-sec .services-boxes .service-card.left{ float: left; clear: left; } .services-sec .services-boxes .service-card.right{ margin-top: 40px; margin-bottom: 40px; float: right; clear: right; width: 32%; } .services-sec .services-boxes .service-card .text{ margin-bottom: 0; } .services-sec .services-boxes .service-card.right .icon-holder{ margin-bottom: 20px; } .services-sec .heading-area{ z-index: 11; position: relative; transform: translate(24%,80%); } .services-sec .heading{ display: inline-block; /*font-size: 72px;*/ color: #202020; width: 120%; font-weight: 600; text-transform: uppercase; /*font-family: 'Oswald', sans-serif;*/ font-family: 'Open sans', sans-serif; font-style: normal; font-weight: 600; font-size: 42px; line-height: 115%; } .services-sec .heading span { color: #ffffff; padding: 5px 10px; background: #e07c8a; } /* =================================== Portfolio Section ====================================== */ .portfolio{ padding: 0; } .project-sec{ position: relative; } .project-sec .row{ margin:0 !important; } .project-sec .project-area{ position: relative; } .project-sec .project-area .project-img{ height: 100vh; } .project-sec .project-area .project-img img{ height: 100%; width: 100%; } .project-sec .project-area .project-detail{ bottom: 0; left: 50%; color: #ffffff; position: absolute; } .project-sec .project-area .project-detail .project-heading{ font-size: 36px; padding: 16px 8px; color: #ffffff; width: 130%; text-align: center; font-weight: 500; background: #008256; max-width: 130%; position: relative; text-transform: uppercase; transform: translateX(-28%); font-family: 'Oswald', sans-serif; } .project-sec .project-area .project-detail .project-text{ font-family: 'Open sans', sans-serif; font-weight: normal; font-size: 20px; color: #ffffff; margin: 30px 0; } .project-sec .project-links-left{ position: absolute; top: 50%; left: 3%; z-index: 1; cursor: pointer; } .project-sec .project-links-right { position: absolute; top: 50%; right: 3%; z-index: 1111; cursor: pointer; } .project-sec .project-links-left a i{ color: #202020; font-size: 48px; transition: .5s ease; } .project-sec .project-links-right a i { color: #202020; font-size: 48px; transition: .5s ease; } .project-sec .project-links-right a:hover i, .project-sec .project-links-left a:hover i{ color: #008256; } .project-sec .owl-item.active .project-area .project-detail .animate-fade{ animation: 1.5s fadeInUp; margin: auto; } .animate-fade a { cursor: pointer; } .black-box { background: rgba(0,0,0,0.7); position: relative; padding: 75px 30px; } /* =================================== Reviews Section ====================================== */ .reviews-sec .heading-area{ z-index: 11; top: 50%; position: relative; transform: translate(0,-50%); } .reviews-sec .heading{ display: inline-block; font-size: 72px; color: #202020; font-weight: 500; text-transform: uppercase; font-family: 'Oswald', sans-serif; } .reviews-sec .heading span { padding: 5px 50px 5px 10px; color: #ffffff; background: #008256; } .reviews-sec .item { padding-top: 80px; } .client-img-holder{ height: 100px; width: 100px; z-index: 11; } .reviews-sec .reviews-carousel .item h5{ font-size: 24px; font-weight: 500; margin: 20px 0 10px 0; font-family: Open sans, sans-serif; } .reviews-sec .reviews-carousel .item p{ font-size: 24px; font-weight: normal; font-family: Open sans, sans-serif; } .reviews-sec .reviews-carousel .item .text{ font-size: 18px; color: #202020; line-height: 1.8; font-weight: normal; font-family: Open sans, sans-serif; } .reviews-sec .icon-holder{ display: block; margin-bottom: 50px; } .reviews-sec .icon-holder i{ color: #008256; font-size: 32px; font-style: italic; } /* =================================== Counters Section ====================================== */ .counters .green-box { width: 80%; background: #008256; padding: 80px 40px; position: relative; } .counters .box-content h1 { top: 50%; left: 0; margin: 20px 0; width: 180%; max-width: 180%; text-transform: uppercase; } .counters .box-content h1 { font-size: 72px; padding: 0; color: #ffffff; font-weight: 500; background: transparent; font-family: Open sans, sans-serif; } .counters .box-content h4 { font-size: 24px; color: #ffffff; margin-bottom: 0; font-weight: normal; font-family: Open sans, sans-serif; } .counters .box-content p { font-size: 18px; color: #ffffff; font-weight: normal; font-family: Open sans, sans-serif; } .counters .counter { margin: 50px 30px; text-align: center; display: inline-block; } .counters .counter h5 { color: #ffffff; padding: 5px 0; font-size: 42px; font-weight: bold; font-family: Open sans, sans-serif; } .counters .counter p { font-size: 18px; color: #ffffff; padding: 0 20px; font-weight: normal; font-family: Open sans, sans-serif; } /* =================================== Contact ====================================== */ .contact-sec .contact-form input{ color: #040608; font-size: 16px; height: 40px; padding: 25px 0; background: transparent; } .contact-sec .heading-area{ margin: 20px 0 80px 0; } .contact-sec .heading{ display: inline-block; font-size: 72px; color: #202020; font-weight: 500; text-transform: uppercase; font-family: 'Oswald', sans-serif; } .contact-sec .heading span { padding: 5px 20px; color: #ffffff; background: #008256; } .contact-sec .contact-form .form-control{ border: none; border-radius: 0; padding-left: 0; border-bottom: 1px solid rgba(000,000,000,0.2); } ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #464646!important; } :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #464646!important; } ::-ms-input-placeholder { /* Microsoft Edge */ color: #464646!important; } .contact-sec .contact-form .form-control:focus { box-shadow: none; border-bottom: 1px solid #008256; } .contact-sec .contact-form input::placeholder, .contact-sec .contact-form textarea::placeholder { color: #ffffff; font-size: 14px; } .contact-sec .contact-form textarea{ padding-top: 20px; height: 150px; color: #040608; font-size: 16px; resize: none; background: transparent; margin-bottom: 40px; } .contact-sec .contact-form .purple-btn{ margin-top: 15px; } .contact_btn { font-size: 16px; font-weight: 600; text-transform: uppercase; } .contact-form { display: flex; justify-content: center; } /*contact details*/ .contact-sec .contact-background{ position: absolute; right: 0; top: -35px; z-index: -1; } .contact-sec .contact-details ul{ display: table; margin: 0 auto; } .contact-sec .contact-details ul li{ color: #202020; list-style: none; margin-bottom: 35px; font-size: 18px; display: flex; align-items: center; font-weight: normal; font-family: 'Open sans', sans-serif; } .contact-sec .contact-details ul li span{ display: inline-block; padding-right: 30px; } .contact-sec .contact-details ul li span:last-child{ padding-right: 0; } .contact-sec .contact-details ul li i{ font-size: 34px; margin-right: 20px; margin-bottom: 8px; color: #040608; } .contact-sec .btn.btn-trans { font-size: 16px; font-weight: normal; font-family: Oswald, sans-serif; } .contact-sec .btn.btn-trans {background: #202020; border-color: #202020; color: #ffffff;} .contact-sec .btn.btn-trans:hover {background: #008256 !important; border-color: #008256; color: #ffffff !important} /* =================================== Scroll Top ====================================== */ .go-top { position: fixed; cursor: pointer; bottom: 15px; right: 15px; border-radius: 50%; color: #ffffff; background-color: #e07c8a; z-index: 4; width: 40px; text-align: center; height: 42px; line-height: 42px; opacity: 0; visibility: hidden; -webkit-transition: .9s; -o-transition: .9s; transition: .9s; -webkit-transform: translateY(150px); -ms-transform: translateY(150px); transform: translateY(150px); } .go-top.active { -webkit-animation: bounceInDown 2s; animation: bounceInDown 2s; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); opacity: 1; visibility: visible; } .go-top i { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); left: 0; right: 0; margin: 0 auto; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } .go-top i:last-child { opacity: 0; visibility: hidden; top: 60%; } .go-top::before { content: ''; position: absolute; border-radius: 50%; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background: #202020; opacity: 0; visibility: hidden; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } .go-top:hover, .go-top:focus { color: #ffffff; } .go-top:hover::before, .go-top:focus::before { opacity: 1; visibility: visible; } .go-top:hover i:first-child, .go-top:focus i:first-child { opacity: 0; top: 0; visibility: hidden; } .go-top:hover i:last-child, .go-top:focus i:last-child { opacity: 1; visibility: visible; top: 50%; } /* =================================== Loader ====================================== */ .loader { position: fixed; height: 100%; width: 100%; top: 0; right: 0; bottom: 0; left: 0; z-index: 111111; background: #ffffff; overflow: hidden !important; display: flex; justify-content: center; align-items: center; } .dot-container { width: 200px; height: 200px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: auto; filter: url('#goo'); animation: rotate-move 2s ease-in-out infinite; } .dot { width: 70px; height: 70px; border-radius: 50%; background-color: #008256; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .dot-3 { background-color: #008256; animation: dot-3-move 2s ease infinite, index 6s ease infinite; } .dot-2 { background-color: #008256; animation: dot-2-move 2s ease infinite, index 6s -4s ease infinite; } .dot-1 { background-color: #008256; animation: dot-1-move 2s ease infinite, index 6s -2s ease infinite; } @keyframes dot-3-move { 20% {transform: scale(1)} 45% {transform: translateY(-18px) scale(.45)} 60% {transform: translateY(-90px) scale(.45)} 80% {transform: translateY(-90px) scale(.45)} 100% {transform: translateY(0px) scale(1)} } @keyframes dot-2-move { 20% {transform: scale(1)} 45% {transform: translate(-16px, 12px) scale(.45)} 60% {transform: translate(-80px, 60px) scale(.45)} 80% {transform: translate(-80px, 60px) scale(.45)} 100% {transform: translateY(0px) scale(1)} } @keyframes dot-1-move { 20% {transform: scale(1)} 45% {transform: translate(16px, 12px) scale(.45)} 60% {transform: translate(80px, 60px) scale(.45)} 80% {transform: translate(80px, 60px) scale(.45)} 100% {transform: translateY(0px) scale(1)} } @keyframes rotate-move { 55% {transform: translate(-50%, -50%) rotate(0deg)} 80% {transform: translate(-50%, -50%) rotate(360deg)} 100% {transform: translate(-50%, -50%) rotate(360deg)} } @keyframes index { 0%, 100% {z-index: 3} 33.3% {z-index: 2} 66.6% {z-index: 1} } /* =================================== Start StandAlone ====================================== */ .standalone-row:not(:last-child) { margin-bottom: 3rem; } .standalone-row .stand-img-des{ padding-left: 30px; text-align: center; } .standalone-row:nth-child(2) .stand-img-des{ padding-left: 0; padding-right: 30px; } .standalone-detail .sub-heading{ margin-bottom: 10px; font-weight: normal; } .standalone-area .sub-heading{ margin-bottom: 8px; font-weight: normal; color: #202020; } .standalone-detail .heading{ margin-bottom: 20px; font-size: 60px; color: #202020; font-weight: 500; text-transform: uppercase; font-family: 'Oswald', sans-serif; } .standalone-detail .para_text{ font-family: 'Open sans' , sans-serif; color: #202020; font-weight: normal; text-align: center; font-size: 18px; margin: 0 auto; } .standalone-detail{ padding-bottom: 100px; } .standalone-area .heading-text{ font-weight: 500; margin-bottom: 12px; font-family: 'Oswald', sans-serif; text-transform: uppercase; font-size: 48px; color: #202020; } .standalone-area .stand-img-des .para_text{ font-family: 'Open sans', sans-serif; font-weight: normal; font-size: 18px; color: #202020; } .page-title{ position:relative; text-align:center; padding: 250px 0 150px 0; background:url("../images/standalone.jpg"); background-size: cover; background-position: top center; } .stand-banner .green-box { background: #008256; padding: 200px 0; width: 75%; margin-left: auto; position: relative; } .stand-banner .box-content { top: 50%; left: 0; width: 154%; max-width: 154%; text-align: right; position: absolute; text-transform: uppercase; transform: translate(-45%,-50%); } .page-title .auto-container{ position:relative; } .page-title h2{ position:relative; color:#ffffff; font-weight:600; line-height:1.2em; margin-bottom: 10px; font-size:3.5rem; text-transform:capitalize; text-transform: uppercase; font-family: Oswald, sans-serif; } .page-breadcrumb{ position:relative; } .page-breadcrumb li{ position:relative; display:inline-block; margin-right:10px; padding-right:15px; color:#ffffff; font-size:14px; font-weight:400; text-transform:capitalize; } .page-breadcrumb li:after{ position:absolute; content: "\f101"; right:-5px; top:1px; color:#ffffff; font-size:14px; font-weight:900; font-family: "Font Awesome 5 Free"; } .page-breadcrumb li:last-child::after{ display: none; } .page-breadcrumb li:last-child{ padding-right:0; margin-right:0; } .page-breadcrumb li a{ color:#fff; font-weight:400; transition:all 0.3s ease; -moz-transition:all 0.3s ease; -webkit-transition:all 0.3s ease; -ms-transition:all 0.3s ease; -o-transition:all 0.3s ease; } .page-breadcrumb li a .icon{ margin-right: 4px; color: #ffffff; } .page-breadcrumb li a:hover{ color:#ffffff; } .standalone-footer { padding: 5rem 0; } .footer-social.stand { text-align: center; margin-bottom: 15px; } .standalone-footer .social-icons-simple li a { color: #ffffff; width: 42px; height: 42px; line-height: 42px; } .standalone-footer .social-icons-simple li a:hover { background-color: #008256; } /* =================================== Media Queries ====================================== */ @media (max-width: 1200px) and (min-width: 992px) { /* Nav-Bar */ .nav-social .social-icons-simple, .c-links { display: none!important; } .sidemenu_btn { right: -30px; } .side-menu { width: 50%; } /* Banner */ .banner-area .box-content h1 { /*font-size: 60px;*/ font-family: 'Open sans', sans-serif; font-style: normal; font-weight: 600; font-size: 42px; line-height: 115%; } .head-txt{ font-family: 'Open sans', sans-serif; font-style: normal; font-weight: 600; font-size: 42px; line-height: 115%; } /* Services */ .services-sec .heading { font-size: 60px; } /* Portfolio */ .project-sec .project-area .project-img { height: auto; } .project-sec .project-area .project-detail { position: relative; transform: translateY(0%); padding-top: 50px; padding-bottom: 50px; } .project-sec .project-links-right a i, .project-sec .project-links-left a i { display: none; } .project-sec .project-area .project-detail .project-heading { padding: 16px 8px; width: 100%; max-width: 100%; transform: translateX(0); } .black-box { padding: 50px 30px; text-align: center; } .project-sec .project-area .project-detail { left: 0; } /* Counters */ .counters .box-content h1 { font-size: 60px; } .counters .box-content h4 { font-size: 22px; } /* Contact */ .contact-sec .heading { font-size: 58px; } } @media screen and (max-width: 991px) and (min-width: 768px){ body { text-align: center; } /* Nav-Bar */ .nav-social .social-icons-simple { display: none; } header a.logo img { max-width: 70px; } .sidemenu_btn { right: 0; } /* Side Menu */ .side-menu { width: 60%; } /* Banner */ .banner-area .green-box { width: 100%; } .banner-area .box-content h1 { font-size: 56px; } .banner-area .box-content { left: 50%; width: 90%; text-align: center; transform: translate(-50%,-50%); } /* Services */ .services-sec .heading { font-size: 60px; width: 100%; text-align: center; padding-bottom: 40px; } .services-sec .heading-area { transform: translate(0); } .services-sec .services-boxes { padding: 0 33px; width: 60%; margin: auto; } .services-sec .services-boxes .service-card { width: 100%; display: block; text-align: center; margin-top: 80px; } .services-sec .services-boxes .service-card.right { width: 100%; margin-top: 80px; margin-bottom: 0; } .services-sec .services-boxes .service-card.left.icon-right { width: 100%; display: grid; } .services-sec .services-boxes .service-card .icon-holder { margin-bottom: 20px; } /* Portfolio */ .project-sec .project-area .project-img { height: auto; } .project-sec .project-area .project-detail { position: relative; transform: translateY(0%); padding-top: 50px; padding-bottom: 50px; } .project-sec .project-area .project-detail .project-heading { font-size: 24px; } .project-sec .project-links-right a i, .project-sec .project-links-left a i { display: none; } .project-sec .project-area .project-detail .project-heading { font-size: 28px; padding: 16px 8px; width: 100%; max-width: 100%; transform: translateX(0); } .black-box { padding: 50px 30px; width: 80%; margin: 0 auto; } .project-sec .project-area .project-detail { left: 0; } /* Reviews */ .reviews-sec .heading { font-size: 60px; width: 100%; text-align: center; padding-bottom: 40px; } .reviews-sec .heading-area { top: 0; width: 60%; margin: 0 auto; transform: translate(0); } .client-img-holder { margin: 0 auto; } .reviews-sec .icon-holder { margin: 30px 0; } .reviews-sec .heading span { padding: 5px 10px 5px 10px; } /* Counters */ .counters .box-content h1 { font-size: 60px; width: 100%; } .counters .box-content h4 { font-size: 22px; } .counters .green-box { width: 100%; margin-bottom: 40px; padding: 60px 25px; } /* Contact */ .contact-sec .heading { font-size: 46px; padding-bottom: 40px; width: 75%; margin: 0 auto; } .contact-sec .heading span { display: inline-block!important; } .contact-sec .heading-area { margin: 0; } .contact-form { margin-top: 40px; } /* Standalone */ .standalone-detail { padding-bottom: 70px; } .standalone-area .gradient-text1{ font-size: 30px; } .standalone-area .sub-heading { margin-top: 3rem; } .standalone-row .stand-img-des { padding-left: 0; padding-right: 0; } .standalone-row:nth-child(2) .stand-img-des { padding-left: 0; padding-right: 0; } .standalone-row:nth-child(2){ margin-top: 6rem; margin-bottom: 6rem; } .para_text { font-size: 18px; } } @media screen and (max-width: 767px) { body { text-align: center; } section { padding: 5rem 0; } /* Nav-Bar */ .nav-social .social-icons-simple { display: none; } header a.logo img { max-width: 70px; } .sidemenu_btn { right: 0; } .navbar-top-default, .header-appear .navbar-top-default { height: 80px; } /* Side Menu */ .side-menu { width: 100%; } .side-menu p { font-size: 14px; } .side-menu .inner-wrapper { padding: 3.5rem 4rem; } /* Banner */ .banner-area .green-box { width: 100%; } .banner-area .box-content h1 { font-size: 36px; } .banner-area .box-content { left: 50%; width: 90%; text-align: center; transform: translate(-50%,-50%); } .banner-area .green-box { padding: 170px 0; } .banner-area .button { font-size: 16px; } .banner-area .button i { font-size: 16px; } /* Services */ .services-sec .heading { font-size: 46px; width: 100%; padding-bottom: 40px; } .services-sec .heading-area { transform: translate(0); } .services-sec .services-boxes { width: 100%; } .services-sec .services-boxes { padding: 0 30px; } .service-card .text { font-size: 16px; } .services-sec .services-boxes .service-card { width: 100%; display: block; text-align: center; margin-top: 80px; } .services-sec .services-boxes .service-card.right { width: 100%; margin-top: 80px; margin-bottom: 0; } .services-sec .services-boxes .service-card.left.icon-right { width: 100%; display: grid; } .services-sec .services-boxes .service-card .icon-holder { margin-bottom: 20px; } /* Portfolio */ .project-sec .project-area .project-detail .project-heading { font-size: 28px; } .project-sec .project-area .project-detail .project-text { font-size: 16px; color: #202020; } .project-sec .project-area .project-img { height: auto; } .project-sec .project-area .project-detail { position: relative; transform: translateY(0%); } .project-sec .project-area .project-detail .project-heading { font-size: 28px; padding: 16px 8px; width: 100%; max-width: 100%; color: #202020; background: transparent; transform: translateX(0); } .project-sec .btn.btn-white { color: #202020; border-color: #202020 } .btn.btn-medium { font-size: 14px; } .black-box { padding: 50px 30px; background: transparent; } .portfolio { padding-top: 0; } .project-sec .project-area .project-detail { left: 0; } .project-sec .project-links-right a i, .project-sec .project-links-left a i { display: none; } .project-sec .owl-item.active .project-area .project-detail .animate-fade{ animation: none; } /* Reviews */ .reviews-sec .heading { font-size: 46px; width: 100%; padding-bottom: 40px; } .reviews-sec .heading-area { top: 0; transform: translate(0); } .reviews-sec .heading span { padding: 5px 10px 5px 10px; } .client-img-holder { margin: 0 auto; } .reviews-sec .icon-holder { margin: 30px 0; } .reviews-sec .reviews-carousel .item .text { font-size: 16px; } /* Counters */ .counters .box-content h1 { font-size: 36px; width: 100%; } .counters .box-content h4 { font-size: 18px; } .counters .counter { margin: 40px 0; } .counters .green-box { width: 100%; padding: 60px 25px; } .counters .box-content p { font-size: 16px; } /* Contact */ .contact-sec .heading { font-size: 46px; width: 100%; padding-bottom: 40px; } .contact-sec .heading-area { margin: 0; } .contact-form { margin-top: 40px; } /* Standalone */ .standalone-detail { padding-bottom: 70px; } .standalone-detail .heading{ font-size: 42px; } .standalone-detail .para_text { font-size: 16px; } .standalone-area .sub-heading { margin-top: 3rem; } .standalone-row .stand-img-des { padding-left: 0; padding-right: 0; } .standalone-row:nth-child(2) .stand-img-des { padding-left: 0; padding-right: 0; } .standalone-row:nth-child(2){ margin-top: 6rem; margin-bottom: 6rem; } .page-title h2{ font-size: 2.5rem; } .standalone-area .heading-text { font-size: 30px; } .standalone-area .stand-img-des .para_text { font-size: 16px; } .stand-banner .box-content { left: 50%; width: 90%; text-align: center; transform: translate(-50%,-50%); } .stand-banner .green-box { padding: 170px 0; margin: 0 auto; } } @media screen and (max-width: 575.98px) { .box-content h1 { font-size: 32px!important; } }