/* ==================================================== * [Master Stylesheet] Template Name : Buildwall Version : 1.0 Author : W3Engineers Ltd. Author URI : https://themeforest.net/user/w3engineers ==================================================== TOC 1. PRIMARY STYLES RESPONSIVE 2. COMMON STYLES GO TOP RESPONSIVE 3. MENU STYLING TOP MENU MENU BOTTOM LOGO MENU RIGHT AREA MAIN MENU DROPDOWN DROPDOWN MULTI LEVEL DROPDOWN HOVER EFFECT NAV ICON SEARCH AREA CART AREA RESPONSIVE 4. SLIDER STYLING RESPONSIVE 5. ABOUT US RESPONSIVE 6. COUNTER STYLING 7. MISSION SECTION 8. QUOTO STYLING RESPONSIVE 9. CLIENT SECTION STYLING RESPONSIVE 10. FOOTER SECTION STYLING CONTACT AREA MAIN FOOTER SOCIAL ICONS RESPONSIVE ==================================================== /* --------------------------------- 1. PRIMARY STYLES --------------------------------- */ /* common-css/primary.css */ /* --------------------------------- 2. COMMON STYLES --------------------------------- */ /* common-css/primary.css */ /* --------------------------------- 3. MENU STYLING --------------------------------- */ /* common-css/header.css */ /* --------------------------------- 4. SLIDER STYLING --------------------------------- */ .main-slider{ height: 350px; margin-top: 130px; position: relative; color: #fff; } .main-slider .slider-bg{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; z-index: -1; } .main-slider .slider-bg:after{ content:''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; background: rgba(0,0,0,.3); } .main-slider .blog-bg-1{ /* background-image: url(../images/slider-5-1920x600.jpg); */ } .main-slider .desc{ margin-top: 15px; } .main-slider .desc i{ margin: 0 10px; position: relative; bottom: -2px; } /* RESPONSIVE */ @media only screen and (max-width: 767px) { .main-slider{ height: 300px; margin-top: 100px; } } @media only screen and (max-width: 479px) { .main-slider{ margin-top: 120px; } } @media only screen and (max-width: 359px) { .main-slider{ margin-top: 130px; } } /* --------------------------------- 5. ABOUT US --------------------------------- */ .about-section{ padding: 100px 0; } .about-section .heading{ margin-bottom: 40px; } .about-section .about-area{ width: 50%; } .about-section .about-img-wrapper{ padding: 0 50px; } .about-section .about-img{ margin: 15px 15px; position: relative; } .about-section .about-img:after{ content:''; position: absolute; top: -15px; left: -15px; height: 100%; width: 100%; z-index: -1; border: 1px solid #ffcc00; } .about-section .about-img:before{ content:''; position: absolute; right: -15px; bottom: -15px; height: 100%; width: 100%; z-index: 1; border: 1px solid #ffcc00; } /* RESPONSIVE */ @media only screen and (max-width: 992px) { .about-section .about-img-wrapper{ display: none; } } @media only screen and (max-width: 767px) { .about-section{ padding: 50px 0; } .about-section .heading{ margin-bottom: 30px; } } @media only screen and (max-width: 479px) { .about-section p{ text-align: justify; } } /* --------------------------------- 6. COUNTER STYLING --------------------------------- */ .counter-section{ padding: 100px 0 70px; position: relative; text-align: center; z-index: 1; color: #fff; background-size: cover; background-image: url(../images/counter-bg-1920x400.jpg); } .counter-section:after{ content:''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; background: rgba(0,0,0,.6); } .counter-section .counter{ margin-bottom: 30px; } .counter-section .counter .desc{ margin-top: 5px; } @media only screen and (max-width: 767px) { .counter-section{ padding: 50px 0 20px; } } /* --------------------------------- 7. MISSION SECTION --------------------------------- */ @media only screen and (max-width: 479px) { .mission-section p{ text-align: justify; } } /* --------------------------------- 8. QUOTO STYLING --------------------------------- */ .quoto-section{ margin: 70px 0 20px; padding: 0px; } .quoto-section .quoto-wrapper{ padding: 50px 50px; padding-left: 220px; margin-left: 50px; position: relative; background: #ffcc00; } .quoto-section .quoto-wrapper .icon{ position: absolute; font-size: 4em; top: -80px; left: 0px; color: rgba(0,0,0,.1); } .quoto-section .heading{ text-align: right; margin-bottom: 10px; } .quoto-section .pre-heading{ margin-top: 5px; color: #555; } .quoto-section .quoto{ position: relative; padding-left: 0px; } .quoto-section .quoto .quoto-desc{ margin: 15px 0 30px; } .quoto-section .quoto .profile-image{ width: 250px; position: absolute; left: -280px; top: -210px; } .quoto-section .quoto .designation{ margin-top: 5px; color: #444; } .quoto-section .swiper-container{ padding: 0 10px; position: relative; overflow: visible; } .quoto-section .swpr-control{ position: absolute; right: -30px; bottom: -70px; width: 86px; height: 43px; border: 3px solid #fff; } .quoto-section .swiper-button-prev, .quoto-section .swiper-button-next{ position: absolute; top: 0; width: 40px; height: 40px; line-height: 36px; margin: 0; text-align: center; border-radius: 2px; font-size: 30px; opacity: 1; border: 1px solid #ffcc00; background: #ffcc00; color: #000; -webkit-transition: all .25s ease; transition: all .25s ease; } .quoto-section .swiper-button-prev:hover, .quoto-section .swiper-button-next:hover{ background: #fff; } .quoto-section .swiper-button-prev{ left: 0px; } .quoto-section .swiper-button-next{ right: 0px; } /* RESPONSIVE */ @media only screen and (max-width: 767px) { .quoto-section{ margin: 0px 0 20px; } .quoto-section .heading{ text-align: left; margin-bottom: 10px; } .quoto-section .quoto-wrapper{ margin-left: 0px; padding: 50px 15px; } .quoto-section .quoto-wrapper .icon{ top: -20px; left: 0px; } .quoto-section .quoto .profile-image{ max-width: 300px; width: 100%; margin-top: 15px; position: static; } .quoto-section .swpr-control{ bottom: -70px; right: 20px; } } @media only screen and (max-width: 479px) { .quoto-section .quoto-wrapper{ padding: 50px 20px; } .quoto-section .swiper-container{ padding: 0; } } /* --------------------------------- 9. CLIENT SECTION STYLING --------------------------------- */ .client-section{ padding: 30px 0 50px; text-align: center; } .client-section .swiper-slide{ opacity: .7; -webkit-filter: grayscale(1); filter: grayscale(1); -webkit-transition: all .7s ease-out; transition: all .7s ease-out; } .client-section .swiper-slide:hover, .client-section .swiper-slide-active{ opacity: 1; -webkit-filter: grayscale(0); filter: grayscale(0); } /* RESPONSIVE */ @media only screen and (max-width: 479px) { .client-section{ padding: 30px 0 30px; text-align: center; } } /* --------------------------------- 10. FOOTER SECTION STYLING --------------------------------- */ /* common-css/footer-styles.css */