@charset "utf-8";
/* CSS Document */

@media (max-width: 768px) {
	
.container {
    padding: 0rem 1.2rem 0rem;
}		
}
				/*--------------- header upper section -------------------*/ 
			
@media (max-width: 768px) {
                /*---------- upper head section ----------*/
                

.top-head .top-reach {
    padding-top: 8px;
}
.top-head .top-reach li {
    font-size: 12px;
    margin-right: 1px;
    padding: 2px 0px 4px;
}
.top-head .top-reach li:nth-child(2) {
    margin-right: 0;
}
.top-head .top-reach li:before {
    margin-right: 3px;
    font-size: 11px;
}

/*---------- quick contact section ----------*/
.qcCnt {padding: 1rem 1rem;}

.number {margin-left: 0px;}
.number ul li:before {font-size: 1.5rem;}
.number ul li {FONT-SIZE: 1.5rem;}

.email {margin-left: 0px;}
.email ul li {FONT-SIZE: 1.2rem;    
    padding: 5px 27px;}

.email ul li:before {font-size: 1.5rem;}
                
                /*---------- menu section ----------*/

.menu-area {
    top: 30px;
    margin-top: -20px;
}
.menu-wrap {
    height: 60px;
    width: 90%;
}
.menu-area .logo a img {
    max-width: 75%;
}
.menu-toggle {
    display: block;
    position: absolute;
    padding: 4px 10px;
    top: 51%;
    transform: translate(-50%, -50%);
    right: 10px;
    color: #000000;    
    font-size: 24px;
    
}
.site-nav {
    position: absolute;
    width: 100%;
    left: 0;
    top: 100%;
    height: auto;
    background: #9fc039;
    transform: scale(1,0);
    transform-origin: top;
    transition: transform 400ms ease-in-out;
}
.site-nav.active {
    transform: scale(1,1);
}
.site-nav ul {
    display: block;
    text-align: center;
}
.site-nav ul li:hover ul {
    display: none;
}
.site-nav ul li a {
    color: #fff;
}
.site-nav ul li.active ul {
    position: relative;
    display: block;
    width: 100%;
}
.site-nav .drop-menu li {
    border-bottom: none;
    background: #84a12c;
}

.site-nav .drop-menu {left: 0px;}


.site-nav ul li ul li {
    width: 100%;
}
.site-nav .brochure-btn {
    margin: 20px 20px;
}



				
				/*--------------- slider/banner section -------------------*/ 

.slider-section {
	position: relative;
}
.slider-section .carousel-indicators {
    bottom: -14%;
}
.slider-section .carousel-indicators li {
    border: 1px solid #efefef;
}
.slider-section .carousel-indicators .active {
    border: 1px solid #183d64;
	margin-top: -10px;
}

/* ------------ new slider --------------- */
#my-carousel .carousel-item .carousel-caption {position: absolute;
    width: 100%;
    top: 61%;
    left: 50%;
    transform: translate(-50%,-50%);}

#my-carousel .carousel-item .carousel-caption h1 span {font-size: 11px;}

				/*--------------- side icons section -------------------*/ 	
				
.side-section {
	position: relative;
}
.side-menu {
    position: fixed;
    top: 37%;
}
.side-menu .icon-left ul {
    transform: translate(-185px, 0);
}
.side-menu .icon-left ul li {
    width: 220px;
    padding: 5px 5px;
    font-size: 12px;
}
.side-menu .icon-left ul li:hover {
    transform: translate(85px, 0);
}
.side-menu .icon-left li i {
    width: 25px;
    height: 25px;
    line-height: 25px;
}

/*--------------- index intro section -------------------*/ 

.intro-section .opacity {padding: 12px 10px;}
				
				/*--------------- range products section -------------------*/  
				
.range-product-section {
    padding: 50px 0px 20px;
    position: relative;
}
.range-head {
    position: relative;
}
.range-head h2 {
    font-size: 24px;
    max-width: 325px;
    letter-spacing: 1px;
}
.range-head h2:before {
    width: 25px;
    height: 2px;
}
.range-head h2:after {
    width: 25px;
    height: 2px;
}
.range-head h2 span:before {
    top: 47%;
    left: 9%;
    font-size: 5px;
}
.range-head h2 span:after {
    top: 47%;
    right: 9%;
    font-size: 5px;
}
.range-wrap {
    padding: 10px 0px 20px;
}
.range-product {
    width: 45%;
    margin: 10px 5px;
}
/* .range-product img {
} */
.range-product .range-product-info {
	height: 85px;
    border: 1px solid #f7f7f7;
}
.range-product .range-product-info .name {
    font-size: 20px;
    padding: 5px 0px 5px;
    letter-spacing: 1px;
}
.range-product .range-product-info .info {
    font-size: 12px;
    line-height: 20px;
    padding: 0px 5px 10px;
}

.prdName {padding: 5px;}

.prdName .brdHaf {
    font-size: 3rem;
    text-align: center;
}

.prdName .brdTgRt {
    font-size: 1.2rem;
    color: #333;
    text-align: center;
}

.prdName .brdPan {text-align: center;
    font-size: 3rem;}

.prdName .brdTgLft {
    text-align: center;
    font-size: 1.2rem;}

    .prdName .brdHom {
    font-size: 3rem;
    text-align: center;
}


				
				/*--------------- intro/about company section -------------------*/ 
								
.intro-section {
    padding: 20px 0px 30px;
    position: relative;
}
.intro-head {
    padding: 0px 0px 20px;
}
.intro-head h2 {
    font-size: 22px;
    padding: 0px 0px 0px;
    max-width: 200px;
    letter-spacing: 1px;
}
.intro-head h2:before {
    width: 30px;
    height: 2px;
}
.intro-head h2:after {
    width: 30px;
    height: 2px;
}
.intro-head h2 span:before {
    top: 45%;
    left: 17%;
    font-size: 5px;
}
.intro-head h2 span:after {
    top: 45%;
    right: 17%;
    font-size: 5px;
}
.intro-info {
    font-size: 15px;
    line-height: 30px;
    padding: 0px 10px 0px;
}
				
				/*--------------- company brands section -------------------*/ 

.company-brand {
	padding: 20px 0px 20px;
	position: relative;
}
.brand-head {
    padding: 0px 0px 10px;
    position: relative;
}
.brand-head h2 {
    font-size: 25px;
    padding: 0px 0px 0px;
    max-width: 215px;
    letter-spacing: 1px;
}
.brand-head h2:before {
    width: 30px;
    height: 2px;
}
.brand-head h2:after {
    width: 30px;
    height: 2px;
}
.brand-head h2 span:before {
    top: 45%;
    left: 16%;
    font-size: 5px;
}
.brand-head h2 span:after {
    top: 45%;
    right: 16%;
    font-size: 5px;
}
.logo-wrap {
    margin-top: 5px;
}
.logo-slider {
    width: 90%;
}
/* .brand-images {
} */
.logo-img {
    margin: 10px 10px;
}
.logo-img img {
    max-width: 120px;
}

.client-logo-block {    width: 31%;}

				/*--------------- company partners section -------------------*/ 

.our-partners {
	padding: 10px 0px 20px;
	position: relative;
}
.partner-head {
    padding: 0px 0px 0px;
    position: relative;
}
.partner-head h2 {
    font-size: 25px;
    padding: 0px 0px 0px;
    max-width: 220px;
    letter-spacing: 1px;
}
.partner-head h2:before {
    width: 30px;
    height: 2px;
}
.partner-head h2:after {
    width: 30px;
    height: 2px;
}
.partner-head h2 span:before {
    top: 45%;
    left: 15%;
    font-size: 5px;
}
.partner-head h2 span:after {
    top: 45%;
    right: 15%;
    font-size: 5px;
}
.partner-grid {
    padding: 0px 5px 5px;
}
.partner-logo {
    width: 25%;
    margin-top: 10px;
}
				
				/*--------------- footer section -------------------*/ 
/* .footer {
} */
.footer .opacity {
    padding: 20px 0px 20px;
}
.fb-head {
    padding: 0px 0px 20px;
    position: relative;
}
.fb-head h3 {
    font-size: 22px;
    padding: 0px 0px 0px;
    letter-spacing: 1px;
}
.fb {
    height: 150px;
    padding: 0px 0px 30px;
}

.social-link {
    padding: 5px 0px 5px;
    text-align: center;
    width: 100%;
}
.foot-contact-head {
    padding: 0px 0px 20px;
    position: relative;
}
.foot-contact-head h3 {
    font-size: 22px;
    padding: 0px 0px 0px;
    letter-spacing: 1px;
	text-align: center;
}
.footer-contact {
    font-size: 14px;
    padding: 35px;
    line-height: 25px;
	text-align: center;
}
.footer-contact h4 {
    font-size: 18px;
    padding: 0px 0px 10px;
	text-align: center;
}

.foot-lower {
    padding: 10px 0px 10px;
    position: relative;
}
.design a {
    font-size: 15px;
    padding: 0px 0px 0px;
    text-align: center;
}
    
.ftr-head {text-align: center; padding: 0px 0px 3px;}

.qcLinks {text-align: center;}

.prdList {text-align: center;}
				
				/*--------------- about us page -------------------*/
				
.about-section {
    padding: 30px 0px 30px;
    position: relative;
}
.abt-company {
    padding: 0px 0px 0px;
    position: relative;
}
.director {
    margin: 0px 20px 10px 0px;
    float: left;
    width: 40%;
}
.director .director-name {
    padding: 5px 0px 0px;
}
.director .director-name h4 {
    font-size: 13px;
    padding: 0px 0px 0px;
    text-align: left;
}
.company {
    padding: 0px 0px 20px 0px;
}
.company .company-head {
    padding: 0px 0px 10px;
}
.company .company-head h3 {
    font-size: 25px;
    letter-spacing: 1px;
}
.company .company-info {
    font-size: 14px;
    line-height: 25px;
}
.company .social {
    padding: 10px 0px 0px;
}
.company .social h3 {
    font-size: 25px;
    padding: 0px 0px 10px;
    letter-spacing: 1px;
}
/* .company .social ul {
} */
.company .social ul li {
    padding-right: 10px;
}
.company .social ul li a {
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
}
.vision-mission {
    padding: 10px 0px 0px;
    position: relative;
}
.vision {
    padding: 0px 0px 20px;
    border: 3px solid;
	border-image-source: linear-gradient(45deg, #dee2e6, #e9ecef);
    border-image-slice: 1;
}
.vision .vision-icon {
    text-align: center;
}
.vision .vision-head {
    padding: 10px 0px 10px;
}
.vision .vision-head h3 {
    font-size: 25px;
    letter-spacing: 1px;
}
.vision .vision-info {
    font-size: 14px;
    padding: 0px 20px 0px;
    line-height: 25px;
}
.mission {
    padding: 0px 0px 20px;
    border: 3px solid;
	border-image-source: linear-gradient(45deg, #dee2e6, #e9ecef);
    border-image-slice: 1;
}
.mission .mission-icon {
    text-align: center;
}
.mission .mission-head {
    padding: 10px 0px 10px;
}
.mission .mission-head h3 {
    font-size: 25px;
    letter-spacing: 1px;
}
.mission .mission-info {
    font-size: 14px;
    padding: 0px 20px 0px;
    line-height: 25px;
}
.values-section {
    padding: 20px 0px 30px;
}
.values-head {
    padding: 0px 0px 10px;
}
.values-head h3 {
    font-size: 25px;
    letter-spacing: 1px;
}
.core-values {
    padding: 0px 0px 0px;
    /*overflow: hidden;*/
}
/* .core-values ul {
}
.core-values ul li {
} */
.core-values ul li .value-info {
    font-size: 12px;
    padding: 0px 0px 0px;
    line-height: 20px;
}
.core-values ul li:nth-child(1) img {
    margin: -10px 5px -20px -10px;
}
.core-values ul li:nth-child(1) .value-info {
    padding: 0px 0px 10px;
}
.core-values ul li:nth-child(2) img {
    margin: 0px 5px 0px 45px;
}
.core-values ul li:nth-child(2) .value-info {
    padding: 0px 0px 0px;
}
.core-values ul li:nth-child(3) img {
    margin: 20px 5px 0px 45px;
}
.core-values ul li:nth-child(3) .value-info {
    padding: 15px 0px 0px;
}
.core-values ul li:nth-child(4) img {
    margin: -20px 5px 0px -10px;
}
.core-values ul li:nth-child(4) .value-info {
    padding: 10px 0px 0px;
}
				
				/*--------------- contact us page -------------------*/
				
.contact-section {
    padding: 70px 0px 20px;
    position: relative;
}	
.contact-line-info {
    position: relative;
    top: 0%;
    left: 0%;
    transform: translate(0%, 0%);
}
.contact-line-info h3 {
    font-size: 22px;
    line-height: 30px;
    letter-spacing: 1px;
}
.grid-data {
    padding: 10px 0px 10px;
}
.grid-data h4 {
    font-size: 22px;
    padding: 10px 20px 10px;
    text-align: left;
    letter-spacing: 1px;
}
.grid-data .address-1 {
    font-size: 14px;
    padding: 0px 20px 10px;
    text-align: left;
    letter-spacing: 0px;
}
.grid-data .contact-icon {
	width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 18px;
}
.grid-data .contact {
    font-size: 14px;
    line-height: 35px;
}
.grid-data .mail-icon {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 18px;
}
.grid-data .mail {
    font-size: 14px;
    line-height: 22px;
}
.form-section {
    padding: 20px 0px 20px;
    position: relative;
}
.form-info {
    position: relative;
    top: 0%;
    left: 0%;
    transform: translate(0%, 0%);
}
.form-info h3 {
    font-size: 22px;
    line-height: 30px;
	padding: 0px 0px 5px;
}
.contact-form {
    padding: 20px 5px 20px;
}
.form-group {
    margin-bottom: 0.2rem;
}
.contact-form input, .contact-form textarea {
    width: 100%;
    height: 30px;
    padding: 2px 5px;
	font-size: 14px;
}
.contact-form .form-btn {
    font-size: 16px;
    padding: 5px 10px 5px;
}
				
				/*--------------- Hafele page -------------------*/

                /* .caption {} */

                .hafele-section .tab-pane .hafele-box {
                    width: 99%;
                }
				
				/*--------------- Panasonic page -------------------*/ 
				
.panasonic-banner {
    padding: 10px 0px 10px;
}
.banner-head h2 {
    font-size: 35px;
    padding: 0px 0px 0px;
    letter-spacing: 2px;
}
.product-filter {
    padding: 2rem 0rem 1rem;
}
.product-list {
    padding: 0.5rem 0rem 0.5rem;
    position: relative;
}
/* .product-list ul {
} */
.product-list ul li {
    padding: 5px 15px 5px;
    line-height: 25px;
    margin-right: 0.2rem;
    font-size: 0.8rem;
}

.product-wrap {
    padding: 10px 0px 10px;
}
.product-block {
    width: 45%;
    height: auto;
    text-align: center;
    box-sizing: border-box;
    margin: 10px 8px;
}

/* .product-block .img-arrow {
} */
.product-block .img-arrow:before {
    top: 1px;
    font-size: 9px;
}
.product-block img {
    position: relative;
    height: auto;
}
.product-block .product-info {
    padding: 0px 0px 0px;
    height: 60px;
}
.product-block .product-info .name {
    font-size: 14px;
    padding: 7px 0px 5px;
    letter-spacing: 1px;
}
.product-block .product-info .info {
    font-size: 9px;
    line-height: 12px;
    padding: 0px 2px 5px;
}
.product-block .hovr {
    padding: 10px 0px 10px;
}
/* .panasonic-feature {
} */
.panasonic-feature li {
    padding: 3px 5px;
    font-size: 5.5px;
}
.panasonic-feature li:before {
    font-size: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
}
.product-block .hovr a {
    font-size: 0.5rem;
    padding: 2px 6px;
    margin-top: 5px;
}
				
				/*--------------- Tata Swach page -------------------*/
				
				/*--------------- Spotzero page -------------------*/

.spotzero-head-banner {
    padding: 10px 0px 10px;
}
.banner-head h2 {
    font-size: 35px;
    padding: 0px 0px 0px;
    letter-spacing: 2px;
}
.spotzero-feature {
    min-height: 325px;
}
.spotzero-feature .opacity {
    padding: 20px 0px 20px;
}
.spotzero-feature-head {
    padding: 0px 0px 10px;
}
.spotzero-feature-head h2 {
    font-size: 25px;
    letter-spacing: 1px;
}
.feature {
    padding: 0px 0px 0px;
}
/* .feature ul {
} */
.feature ul li {
    font-size: 12px;
    line-height: 20px;
    padding: 5px 2px 5px;
}
.feature ul li:before {
    font-size: 8px;
    margin-right: 10px;
    margin-bottom: 10px;
}
.feature ul li:nth-child(1):before {
    margin-bottom: 30px;
}

.spotzero-menu {
    padding: 15px 0px 15px;
    position: relative;
}
.spotzero-menu .container {
    padding: 0rem 0.8rem 0rem;
}
.spotzero-menu-grid {
    padding: 5px 2px 5px;
}
.spot-menu-box {
    width: 19%;
    margin: 5px 1px;
    border-radius: 4px;
}
/* .spot-menu-box .img {
} */
.spot-menu-box .img img {
    border-radius: 4px 4px 0px 0px;
}
.spot-menu-box .info {
    height: 30px;
}
.spot-menu-box .info h4 {
    font-size: 9px;
    padding: 5px 5px 5px;
    letter-spacing: 0px;
}
.spot-menu-box .info h4 span {
    font-size: 7px;
}

.spotzero-accessories {
    padding: 20px 0px 20px;
}
.accessories-head {
    padding: 0px 0px 10px;
}
.accessories-head h2 {
    font-size: 25px;
    letter-spacing: 1px;
}
.spot-grid {
    padding: 0px 0px 10px;
}
.grid-block {
    width: 44%;
    margin: 10px 8px;
    border-radius: 8px;
}
.grid-block .spot-info {
    padding: 0px 0px 0px;
}
.grid-block .spot-info h4 {
    font-size: 16px;
    padding: 10px 5px 10px;
    letter-spacing: 1px;
}

				/*--------------- Homelife page -------------------*/
				
.homelife-banner {
    padding: 10px 0px 10px;
}
.banner-head h2 {
    font-size: 35px;
    padding: 0px 0px 0px;
    letter-spacing: 2px;
}

.homelife-product-filter {
    padding: 1rem 0rem 1rem;
}
.homelife-product-filter .product-list {
    padding: 0.5rem 0rem 0.5rem;
    position: relative;
}
/* .homelife-product-filter .product-list ul {
} */
.homelife-product-filter .product-list ul li {
    padding: 5px 10px 5px;
    line-height: 20px;
    margin-right: 0.1rem;
    font-size: 0.7rem;
}
.product-wrap-box {
    padding: 5px 0px 10px;
}
.product-wrap-box .box {
    width: 45%;
    margin: 10px 7px;
}
.product-wrap-box {
    padding: 5px 0px 10px;
}
.product-wrap-box .box {
    width: 45%;
    margin: 10px 7px;
}
.product-wrap-box .box img {
	height: auto;
}
.product-wrap-box .box .home-info {
    padding: 0px 0px 0px;
	height: 50px;
}
.product-wrap-box .box .home-info h4 {
    font-size: 16px;
    padding: 8px 0px 8px;
    letter-spacing: 0px;
}
/* .product-wrap-box .box .overlay {
} */
.product-wrap-box .box .overlay .overlay-info {
    padding: 0px 10px 10px;
    top: 15%;
}
.product-wrap-box .box .overlay .overlay-info h4 {
    font-size: 15px;
    padding: 0px 0px 5px;
    letter-spacing: 0px;
}
/* .product-wrap-box .box .overlay .overlay-info ul {
} */
.product-wrap-box .box .overlay .overlay-info ul li {
    padding: 2px 0px;
    font-size: 8px;
	letter-spacing: 0px;
}
.product-wrap-box .box .overlay .overlay-info ul li:before {
    font-size: 8px;
    margin-right: 8px;
    margin-bottom: 4px;
}


				
}