#wrap {
background:#000;	
}
#wrap > section{
transition:opacity .3s ease;	
}
#menuWrap{
display:block;
width:70px;
height:70px;
top:40px;
right:40px;
padding-right:0;
position:fixed;
background:#fff;
border-radius:50%;
float:right;	
z-index:600;
transition:all .3s ease;
box-shadow:-1px -1px 10px rgba(0,0,0,.1);
}
#menuWrap .lines, #menuWrap .lines:before, #menuWrap .lines:after{
background:#f17f12;
}
#menuWrap #menu{
display:block;
top:2px;
position:relative;
margin-left:5px;
width:60px;
}
#menu.close{
opacity:.5;
}
.shownav #wrap > section{
opacity:.3;
}
.shownav #menuWrap{
background:none;
box-shadow:none;
}
.shownav #menuWrap .lines:before, .shownav #menuWrap .lines:after{
background:#fff;
}
#wrap, #wrap > section{
display:block;
float:left;
width:100%;
clear:both;	
}
body{
position:relative;
right:0;
transition:all .3s ease;	
}
.shownav {
overflow:hidden;
right:310px;	
}
.showAboutMilu{
overflow:hidden;	
}
nav{
display:block;
float:left;
position:fixed;
right:0;
height:100vh;
width:310px;
background:#f07a11;
text-align:center;	
z-index:500;
right:-310px;
box-shadow:none ;
transition:all .3s ease;
}
.shownav nav{
right:0;
box-shadow:-1px -1px 10px rgba(0,0,0,.5), inset 0 0 200px rgba(255,0,0,.2) ;
}
nav .menuLogo{
padding:13vh 0 5vh 0;
}
nav ul{
margin:0;
padding:5vh 0;
font:20px 'Droid Serif', serif;	
}
nav ul li{
display:block;
margin:0;
padding:0;	
}
nav ul li a{
display:block;
margin:0;
padding:12px 0;	
color:#fff !important;
cursor:pointer;
transition:all .5s ease;
}
nav ul li a.hasSub{
padding-bottom:6px;
}
nav ul li a.sub{
font-size:16px;
padding:6px 0	;
color:#83430a !important;
}
nav ul li a.sub.last{
padding-bottom:12px;
}
nav ul li a:hover{
color:#000 !important;
text-decoration:none;	
}
#leftMain{
display:block;
float:left;
height:100vh;
width:40%;
background:url(//zacs.in/wp-content/themes/zacs/img/index-bg.jpg)	 no-repeat center center;
box-shadow:inset 0 0 300px rgba(0,0,0,.3);
background-size:cover;
text-align:center;
position:relative;
}
#rightImage{
display:block;
float:left;
width:60%;
height:100vh;
position:relative;	
}
#rightImage img{
object-fit: cover;	
width:100%;
height:100vh;	
object-position: 50% 50%;
}
#rightImage:before{
content:"";
bottom:0;
right:0;
left:0;
position:absolute;
z-index:10;
width:100%;
height:15vh; background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 6%, rgba(0,0,0,0.65) 99%, rgba(0,0,0,0.65) 100%); background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 6%,rgba(0,0,0,0.65) 99%,rgba(0,0,0,0.65) 100%); background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 6%,rgba(0,0,0,0.65) 99%,rgba(0,0,0,0.65) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); }
.sign{
display:block;
text-align:right;	
}
#logo{
display:block;	
padding:8vh 0 4vh 0;
}
#leftMain h2{
text-indent:-99999px;
font-size:0;
display:inline-block;
height:40vh;
margin:0;
padding:0;
width:100%;
background:url(//zacs.in/wp-content/themes/zacs/img/text.svg) no-repeat	center center;
background-size:auto 100%;
}
#leftMain hr{
width:200px;
border:none;
border-bottom:solid 1px #f07e12;
}
.social{
margin:  0;
padding:0;
width:100%;
position:absolute;
bottom:50px;	
}
.social li {
display:inline-block;
margin: 0 8px;	
}
.social li a{
display:inline-block;;
width:40px;
height:40px;
background:#fff;
border-radius:50%;
line-height:40px;
font-size:16px;
transition:all .5s ease;
color:#f17f12;
}
.social li a:hover{
background:#f17f12;
color:#fff;
}
.imageText{
position:absolute;
bottom:0;
width:100%;
z-index:50;
padding:50px ;
box-sizing:border-box;
transition:all .3s ease;
}
.imageText h3{
font:32px 'Droid Serif', serif;
color:#fff;
}
.imageText h4{
font:15px 'Droid Serif', serif;
color:#fff;
}
#bannerBelowText{
display:block;
background:url(//zacs.in/wp-content/themes/zacs/img/hair-bg.jpg) no-repeat center center fixed;
background-size:cover;
padding:130px 0;
}
.inner-header{
display:block;
background:url(//zacs.in/wp-content/themes/zacs/img/hair-bg.jpg) no-repeat center center fixed;
background-size:cover;
padding-bottom: 50px;
padding-top: 20px;
}
.inner-banner{
width:150px;
display:block;
width:320px;
margin:auto;
padding:0;	
text-align: center;
}
.inner-banner h3{
font:600 45px 	'Montserrat', sans-serif;
color:#fff;
margin:0;
padding:0;
margin-top: 10px;
text-transform:uppercase;
}
#itMatters{
width:150px;
display:block;
float:left;
width:290px;
margin:0;
padding:0;	
}
#mattersText{
display:block;
float:left;
width:calc(100% - 290px)	;
}
#mattersText p{
font:18px/35px 'Droid Serif', serif;
color:#fff;	
}
#itMatters h3{
font:600 45px 	'Montserrat', sans-serif;
color:#fff;
margin:0;
padding:0;
text-transform:uppercase;
}
#mattersText img{
padding:30px 0 0 0;
display:inline-block;
}
#aboutImage{
background:#3f3f3d url(//zacs.in/wp-content/themes/zacs/img/svg.svg) no-repeat center center fixed;
background-size: auto 100%;
padding:130px 0;
}
#aboutImage article{
width:50%;
float:left;
padding:0 15px;
box-sizing:border-box;
min-height:425px;
}
#aboutImage h3{
background:#f07a10;
display:inline-block;
color:#fff;
font:600 40px 'Montserrat', sans-serif;
padding:0px 10px;
margin:0;
text-transform:uppercase;
}
#aboutImage h4{
background:#222222;
display:inline-block;
color:#f07a10;
font:400 24px 'Montserrat', sans-serif;
padding:5px 10px;
clear:both;
margin:5px 0 0 0;
}
#aboutImage .content{
margin:15px 0 0 0;
color:#bfbfbf;
font:16px/30px  'Droid Serif', serif;
}
#serviceTitle{
padding:40px 0;
background:#f07a10;
text-align:center;
color:#fff;
}
#serviceTitle h2{
font:600 40px 'Montserrat', sans-serif;
text-transform:uppercase;
}
#serviceTitle p{
font: 17px 'Droid Serif', serif;
}
#individualTitle{
padding:100px 0;
background:#fff url(//zacs.in/wp-content/themes/zacs/img/svg.svg) no-repeat center center fixed;
background-size: 100% auto;
}
#individualTitle2{
padding:100px 0;
background:#faf7e8 url(//zacs.in/wp-content/themes/zacs/img/svg_light.svg) no-repeat center center fixed;
background-size: 100% auto;
}
#blog{
padding: 100px 0;
background: #faf7e8 url(//zacs.in/wp-content/themes/zacs/img/svg_light.svg) no-repeat center center fixed;
background-size: 100% auto;
}
#blog h2{
font: 600 40px 'Montserrat', sans-serif;
text-transform: uppercase;
}
#blog .card{
background-color: #fdfcf7;
padding: 10px;
border: 1px solid #faf7e8;
position:relative;
margin-bottom: 15px;
}
.solutinRight{
display:block;
float:left;
width:300px;
margin:15px 40px 0 0;
}
.solutinRightFloat{
width:300px;
position:absolute;
left:-340px;
display:block;
top:-50px;
}
.solutinRight img{
width:100%;
}
.solutinRight h3{
font:	400 31px/40px 'Montserrat', sans-serif;
color:#424244;
margin:25px 0 0 0;
text-transform:uppercase;
}
.solutinRight h3 strong{
font:	600 42px 'Montserrat', sans-serif;
color:#f07a10;
margin:5px 0 0 0;
text-transform:uppercase;
}
.solutinContent{
display:block;
float:left;
width:calc(100% - 340px)	;
}
.solutinContent h2, #blog h2, #gallery-1 h2{
text-transform:uppercase;
font:400 36px 'Montserrat', sans-serif;
position:relative;
padding:0 0 40px 0
}
.solutinContent h2 strong, #blog h2 strong, #gallery-1 h2 strong{
font:600 36px 'Montserrat', sans-serif;	
}
.solutinContent h2:after, #blog h2:after, #gallery-1 h2:after{
content:"";
display:block;
width:60px;
bottom:15px;
position:absolute;
border-bottom:solid 6px #f07a10;	
}
.solutinContent  p{
font:16px/30px  'Droid Serif', serif;
color:#000;
clear:both;
margin-bottom:20px;
}
.solutinContent  h3{
background:rgba(240,240,240, 0.8);
color:#f07a10;
display:inline-block;
font:600 21px 'Montserrat', sans-serif;
text-transform:uppercase;
padding:5px 10px;
position:relative;
}
.solutinContent  h4{
font:600 20px 'Montserrat', sans-serif;
text-transform:uppercase;
color:#000;
position:relative;
}
#corporateTitle{
padding:100px 0;
background:#fff url(//zacs.in/wp-content/themes/zacs/img/svg.svg) no-repeat center center fixed;
background-size: 100% auto;
}
#testmonials{
padding:100px 0;
background: url(//zacs.in/wp-content/themes/zacs/img/test-bg.jpg) no-repeat center center fixed;
background-size: cover;
}
#contact{
padding:100px 0;
background:#464644 url(//zacs.in/wp-content/themes/zacs/img/svg.svg) no-repeat center center fixed;
background-size: 100% auto;
}
#testmonials h2, #contact h2{
text-transform:uppercase;
font:600 36px 'Montserrat', sans-serif;
position:relative;
padding:0 0 40px 0;
color:#fff;
text-align:center;
}
#testmonials h2:after, #contact h2:after{
content:"";
display:block;
width:60px;
bottom:15px;
left:calc(50% - 30px);
position:absolute;
border-bottom:solid 6px #fff;	
}
.contactFrom{
display:block;
float:left;
width:60%;
position:relative;
left:-40%;
}
.contactFrom input, .contactFrom select{
background:none;
border:none;
border-bottom:solid 2px #7a7a7a;
box-shadow:none;
outline:none;
border-radius:0;
color:#999;
font:15px 'Droid Serif', serif;		
}
.contactFrom input.error, .contactFrom select.error{
border-bottom:solid 2px #f00;
}
.contactFrom select option{
background:#333;
}
.contactFrom input:focus, .contactFrom select:focus{
outline:none;
box-shadow:none;
color:#fff;
}
.contactFrom label{
color: #bfbfbf;
font: 16px/30px 'Droid Serif', serif;
}
#contact .container  p{
color: #bfbfbf;
font: 17px/30px 'Droid Serif', serif;
}
.contactDetails h4{
background:#333;
color:#fff;
display:block;
float:left;
font:600 21px 'Montserrat', sans-serif;
text-transform:uppercase;
padding:5px 10px;
margin:0;	
}
.contactDetails{
margin:0;
width:40%;
box-sizing:border-box;
padding-left:30px;
float:left;
position:relative;
left:60%;
}
.contactDetails a{
color: #bfbfbf;
clear:both;
display:block;
float:left;
margin:8px 0 0 0;
font: 17px/30px 'Droid Serif', serif;
}
.contactFrom button{
background:#f07a10;
color:#fff;
margin:15px 0 0 0;
border:none;
padding: 16px 30px;	
font: 17px 'Droid Serif', serif;
}
.contactFrom button:hover{
background:#000;
}
#testWrap .owl-item > div{
width:100%;
box-sizing:border-box;
padding: 0 100px;
text-align:center;
color:#fff;	
font: 16px/30px 'Droid Serif', serif;
}
#testWrap .owl-item > div strong{
display:block;
color:#924908;
padding:5px 0;
font: 13px  'Droid Serif', serif;
}
#testWrap .owl-item > div span{
display:block;
color:#f07a10;
font: 16px  'Droid Serif', serif;
}
.owl-carousel .owl-item{
display: flex;
align-items: center;
justify-content: center;
min-height: 270px;
}
#rightImage a.aboutMilu{
display:block;
background:rgba(255,255,255,.1);
color:#aaa;
font: 14px  'Droid Serif', serif;
transition:all .5s ease;
padding:8px 15px;
cursor:pointer;
float:left;
margin:5px 0 0 0;
}
#rightImage a.aboutMilu:hover{
background:#f07a10;
color:#fff;	
text-decoration:none;
}
.showAboutMilu #aboutMiluArticle{
opacity:1;
transform:translateY(0%);	
}
.showAboutMilu #menuWrap{
right:-50px;
opacity:0;
}
.imageText #menuWrap{
bottom:-80px;
opacity:00;	
}
#aboutMiluArticle{
position:absolute;
transform:translateY(-100%);
left:25px;
right:25px;
bottom:25px;
top:25px;
opacity:0;
position:absolute;
z-index:500;
transition:all .3s ease;
box-sizing:border-box;
background:rgba(50,50,50,.95);
}
#aboutMiluSection{
padding:50px;
display:block;
float:left;
width:100%;
box-sizing:border-box;
}
@media (min-width:1400px){
#aboutMiluSection{
padding:100px;
}
}
#aboutMiluSection h3{
text-transform:uppercase;
font:400 36px 'Montserrat', sans-serif;
position:relative;
color:#f1841a;
margin:0;
padding:0 0 25px 0;
}
#aboutMiluSection p{
color:#fff;
font:16px/30px  'Droid Serif', serif;	
}
.closeAbout{
width:50px;
height:50px;
line-height:50px;
font-size:18px;
text-align:center;
background:rgba(255,255,255,.1);
display:block;
color:#ccc;
cursor:pointer;
right:0;
top:0;
position:absolute;
}
.closeAbout:hover{
color:#f1841a;
}
#contact h2, .contactDetails h4{
color:#f07a10;
}
.done, .loading{
display:block;
float:left;
width:100%;
text-align:center;
padding:22vh 0;	
display:none;
color:#eee;
font: 16px  'Droid Serif', serif;
}  .modal {
display: none;
position: fixed;
z-index: 99;
padding-top: 30px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: black;
}
.p-0{
padding:0;
} .modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
width: 90%;
max-width: 1200px;
}
#gallery-1{
background: #fff url(//zacs.in/wp-content/themes/zacs/img/svg.svg) no-repeat center center fixed;
background-size: 100% auto;
padding-bottom:30px;
} .close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
z-index: 1000;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
} .mySlides {
display: none;
} .prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-user-select: none;
} .next {
right: 0;
border-radius: 3px 0 0 3px;
} .prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
} .numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
background: black;
color: white;
width: 100%;
}
.active,
.demo:hover {
opacity: 1;
}
img.hover-shadow {
transition: 0.3s;
}
.hover-shadow:hover {
cursor: pointer;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.loop .owl-item{
min-height:auto;
}
.d-flex{
display: flex;
align-items: center;
justify-content: space-between;
}
#blog h6{
color: #f07b0e;
}
.btn-primary{
background-color:#222;
border:none;
}
.btn-primary:hover{
background-color:#252525;
}
.stretched-link::after{
content:'';
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
}
.bredc{
font-size: 18px;
color: #fff;
margin-top: 20px;
}
.bredc a{
color:#f07a10;
padding-right: 10px;
}
.bredc span{
padding-left: 10px;
}
.blog p{
font: 16px/30px  'Droid Serif', serif;
}
a{
color: #050401;
text-decoration: none;
}
.well {
background-color: #ffffff;
border: 1px solid #ffffff;
}
.well ul{
padding: 0;
}
.well ul li{
padding: 10px 0;
list-style: none;
border-bottom: 1px solid #f5f5f5;
}
.sticky-side{
position: sticky;
top: 20px;
} .gallery {
display: flex;
flex-direction: column;
align-items: center;
}
.gallery .images {
gap: 15px;
columns: 3 210px;
list-style: none;
padding: 0;
}
.gallery .images .img {
display: flex;
cursor: pointer;
overflow: hidden;
position: relative;
padding-bottom: 14px;
border-radius: 4px;
}
.gallery .images img {
width: 100%;
transition: transform 0.2s ease;
}
.gallery .images .img:hover img {
transform: scale(1.1);
} .lightbox {
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 999;
position: fixed;
visibility: hidden;
background: rgba(0,0,0,0.65);
}
.lightbox.show {
visibility: visible;
}
.lightbox .wrapper {
position: fixed;
left: 50%;
top: 50%;
width: 100%;
padding: 20px;
max-width: 850px;
background: #fff;
border-radius: 6px;
opacity: 0;
pointer-events: none;
transform: translate(-50%, -50%) scale(0.9);
transition: transform 0.1s ease;
}
.lightbox.show .wrapper {
opacity: 1;
pointer-events: auto;
transform: translate(-50%, -50%) scale(1);
}
.wrapper :where(header, .details) {
display: flex;
align-items: center;
}
.wrapper header {
justify-content: space-between;
}
header .details i {
font-size: 1.7rem;
}
header .details span {
font-size: 1.2rem;
margin-left: 10px;
}
header .buttons i {
height: 40px;
width: 40px;
cursor: pointer;
display: inline-block;
color: #fff;
margin-left: 10px;
background: #6C757D;
font-size: 1.25rem;
line-height: 40px;
text-align: center;
border-radius: 4px;
transition: 0.2s ease;
}
header .buttons i:hover {
background: #5f666d;
}
.wrapper .preview-img {
display: flex;
justify-content: center;
margin-top: 25px;
}
.preview-img .img {
max-height: 65vh;
}
.preview-img img {
width: 100%;
height: 100%;
object-fit: contain;
} .blog .card-title{
font-size:18px;
}
.wp-block-search__label {
font-size: 1.5rem;
font-weight: 500;
margin-bottom: 15px;
}
.wp-block-search__button{
background-color: #f07a10;
color: #fff;
border: none;
}  @media screen and (max-width: 688px) {
.lightbox .wrapper {
padding: 12px;
max-width: calc(100% - 26px);
}
.wrapper .preview-img {
margin-top: 15px;
}
.gallery .images {
max-width: 100%;
padding: 0 13px;
margin-top: 20px;
}
}
@media (max-width:768px){
.logoo img{
width: 120px;
margin-bottom: 40px;
margin-top: 20px;
}
.gallery .images {
columns: 4 70px;
}
#leftMain{
width:100%;
clear:both;	
}
#rightImage{
width:100%;	
}
.modal-content, .close{
top:30%;
}
.prev, .next{
top:68%;
}
#aboutImage article{
width:100%;
min-height:100px;	
}
#rightImage{
min-height:100vh;
height:auto;		
}
#aboutMiluArticle{
display:block;
transform:translateY(0%)	;
position:static;
width:100%;
opacity:1;
float:left;
clear:both;
}
.imageText{
display:none;
}
.closeAbout{
display:none;
}
#itMatters{
display:block;
clear:both;
width:100%;
clear:both;	
}
#itMatters br, .solutinRight h3 br.sm{
display:none;
}
#mattersText{
width:100%;	
}
.solutinRightFloat, .solutinRight .image{
position:static;
margin:0 0 20px 0 ;
width:100%;
text-align:center;
}
.solutinRightFloat img, .solutinRight img{
max-width:300px;
width:100%;
display:inline-block;
}
#testWrap .owl-item > div{
padding:0 30px;	
}
.contactDetails{
position:static;
width:100%;	
}
.contactFrom{
width:100%;
position:static;	
}
.solutinRight, .solutinContent{
position:static;
clear:both;
width:100%;	
}
#rightImage .image{
height:75vh;
overflow:hidden;
}
#aboutMiluSection, 
#bannerBelowText,
#aboutImage,
#serviceTitle,
#individualTitle, #individualTitle2, #corporateTitle, #testmonials, #contact{
padding:50px;
}
#itMatters h3, #aboutMiluSection h3{
padding-bottom:15px;	
}
#mattersText .sign img{
width:150px;
padding:5px 0 0 0;
}
#aboutImage h3{
margin-top:15px;	
}
#itMatters h3, #serviceTitle h2, .solutinContent h2, .solutinContent h2 strong, #aboutMiluSection h3, .solutinRight h3 strong, #aboutImage h3, #gallery-1 h2, #gallery-1 h2 strong, #blog h2, #blog h2 strong {
font-size:33px;	
}
.showAboutMilu{
overflow:auto;
}
.showAboutMilu #menuWrap {
right: 40px;
opacity: 1;
}
}
@media (max-width:600px){
#aboutMiluSection, 
#bannerBelowText,
#aboutImage,
#serviceTitle,
#individualTitle, #individualTitle2, #corporateTitle, #testmonials, #contact{
padding:35px 25px;
}
}
@media (max-width:480px){
#aboutMiluSection, 
#bannerBelowText,
#aboutImage,
#serviceTitle,
#individualTitle, #individualTitle2, #corporateTitle, #testmonials, #contact, #blog, #gallery-1{
padding:30px 20px;
}
}