:root {
    --header: 'Rubik',sans-serif;
    --subheader: "Inter Tight", sans-serif, system-ui; 
    --bodytext: "Inter", sans-serif, system-ui;
    /*Colors*/
    --primary:#cd4d00;
    --highlight:#f26722;
    --dark: #3e3e3e;     
    --mute:#303e49;
    /*Utilities*/
    --sliderHeight:100vh;
}
body{color:var(--mute);}
body.subpage{margin-top: 86px;}
body::-webkit-scrollbar-track {background-color: #fff;}
body::-webkit-scrollbar { width: 7px; background-color: #fff;}
body::-webkit-scrollbar-thumb { background-color: var(--highlight);}
a{color:var(--primary);font-weight:500;}
hr {margin-top: 20px;margin-bottom: 20px;border: 0;border-top: 1px solid #dcdcdc;}

header.Header {position:fixed;z-index: 99;top: 0;background: transparent;background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 90%);
    & .logo {
        & .navIcon{ display:none;
            button{background:none; border:0;
                svg{/* fill:#FFF; */transition: all 1s ease;}
            }          
        }
        & img {max-width: 140px;padding: 5px;}
    }
    .main-navigation {
        & ul {
            & li {
                & a {color: var(--text);padding: 30px 10px;font-size: 1.1rem;
                    &:hover { background:var(--primary); color:var(--white);}
                }
                &.home a{font-size:0;text-align: center;padding: 28px 15px;margin: 0;
                    &:before{content:"\f424";font-family:bootstrap-icons!important;font-size: 18px;display: block;margin: 0 auto;}        
                }
                ul {
                    li a{ padding:10px 15px;
                        &:hover{ background:var(--white); color:var(--primary);}    
                    }                    
                }                
            }
        }
    }
    &.toFixed{background: var(--white);box-shadow: 0px 0px 1px rgb(9 9 9 / 30%);
        & .main-navigation {
            & ul {
                & li {
                    & a { color:var(--dark);
                        &:hover { background:var(--primary); color:var(--white); }    
                    }
                &:hover a{ background:var(--primary); color:var(--white); }  
                ul {
                    li a{ padding:10px 15px;
                        &:hover{ background:var(--white); color:var(--primary);}    
                    }                    
                } 
                    
                }
            }
        }
        & .navigation {
                & .iconMenu {
                    button { color:var(--white);}
                }
        }
        & .navIcon button svg{fill:var(--primary); transition: all 1s ease;}            
    }               
}
body.subpage header.Header{ background: var(--white); box-shadow: 0px 0px 1px rgb(9 9 9 / 30%);}
.slider-block {position:relative;background: var(--dark);}
.controls{position:absolute;top: 30%;z-index: 1;
    span{display: flex;width: 30px;height: 30px;background:var(--primary);margin: 1px 0;font-size: 0;align-items: center;justify-content: center;cursor: pointer;border-top-right-radius: 3px;border-bottom-right-radius: 3px;
        &:before{content:'';font-family:bootstrap-icons!important;font-size: 16px;color: var(--white);}
        &#playControl:before{content:"\f4f2";}
        &#playControl.playing:before{content:"\f4c1";}  
        &#soundControl:before{content:"\f610";}
        &#soundControl.muted:before{content:"\f60c";}         
    }    
}

.sliderSection {z-index: 1;/* background: radial-gradient(circle, rgba(0, 0, 0, 0.10) 0%, rgb(40 40 40) 100%); */position: relative;top: 0;width: 100%;left: 0;
    & .slide {
        & .caption {
            & :is(h1, h2, h3, h4){ font-family:var(--special);}
            .h1, h1 {font-size: calc(2.5rem + 1.5vw); 
                @media (min-width: 1200px) {font-size: 4rem; } 
            }
            .h2, h2 {font-size: calc(1.20rem + 0.5vw);  font-weight:600;
                @media (min-width: 1200px) {font-size: 3.5rem; } 
            }
            .h3, h3 {font-size: calc(1.0rem + 0.075vw); 
                @media (min-width: 1200px) {font-size: 3rem; } 
            }
            p, div {font-size: calc(1.0rem + 0.05vw); 
                @media (min-width: 1200px) {font-size: 1.6rem; } 
            }   
            & .line { width: 250px; height: 3px; background: var(--primary); display: inline-block;}
        }
    }
}

.breadcrumb { padding:10px 0; background:var(--offwhite); font-size:.85em;} 
.titleBlock { padding:30px 0;
    &.white{ color:var(--white);}         
    span {font-size: 1.3rem;font-weight:400;font-family:var(--bodytext);font-weight: 500;margin: 0 0 10px;position: relative;display: inline-block;color: var(--primary);}
    .title{font-size: 2.65em;font-weight:600;font-family:var(--special);line-height: 1.0;}         
}

/*Side nav*/
.sideNav ul{ margin-bottom:15px;}
.sideNav .highlight span, .sideNav .highlight a {background: var(--primary); color: var(--white); } 
#changeparameters_1{display:none;}
.taoGalleryBox .overlay {background:color-mix(in srgb,var(--mute) 85%,transparent) !important;}
.gallery_paging_links  span  a, .gallery_next_link_inactive, .gallery_prev_link_inactive {margin: 0 1px !important;}

.imageGallery { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; width: 100%; height: auto;
    .ligBox{max-width: none;}   
    @media (min-width: 0px) and (max-width: 1190px) {grid-template-columns: repeat(4, 1fr);}               
    @media (min-width: 0px) and (max-width: 778px) {grid-template-columns: repeat(3, 1fr);}
    @media (min-width: 0px) and (max-width: 479px) {grid-template-columns: repeat(2, 1fr);}               
}

.galleryEmbed a {display: flex;width: 100%;max-height: 100%;gap: 4%;flex-wrap: wrap;
    span{width: 45%;margin: 5px;}
    img{padding: 8px;border: 1px solid #ddd;height: 100%;width: 100%;max-height: 280px;object-fit: cover;}                
}

/*home page cusom styles*/
.introBlock {margin-top: -2em;z-index: 2;display: flex;align-items: center;background: #FFF;padding: 30px 15px;border: 1px solid #f5f5f5;border-radius: 5px 5px 5px 5px;box-shadow: 0px 5px 25px 1px rgb(0 0 0 / 20%);background-color: #FFFFFF;position: relative;
    &:after { content: ''; display: block; position: absolute; z-index: 0; width: 100%; height: 100%; left: 0; top: 0; background: #f5f5f5; clip-path: polygon(0 0, 25% 0, 45% 100%, 0% 100%); transition: background 0.3s ease; }
    p { position: relative; z-index: 1; 
        a { display: block; margin-bottom: 10px; color:  var(--dark); } 
    }
    .icon { position: relative; z-index: 1; 
        img {display: block;width: 180px;transition: filter 0.3s ease;box-shadow: none;} 
    }
    &:hover { border: 1px solid  var(--primary); 
        &:after { background:  var(--primary); } 
        .icon img { filter: brightness(0) invert(100%); } 
    }
    @media all and (min-width: 0px) and (max-width: 991px) {
     margin-top: 3em;   
    }
}
.aboutContent {background-repeat:no-repeat; background-size: cover; min-height: 300px;
    &.lazyloaded { background-image: url('/image/cache/about-bg21.jpg'); }
    img{border-radius: 50%;width: 100%;height: 100%;object-fit: fill;box-shadow: -7px -7px  var(--primary);}    
    .aboutText { padding: 15px;
        ul { padding: 0; margin: 0; list-style: none; 
            li { display: block; margin-bottom: 10px; display: flex; 
                &:before { content: url(/image/cache/checkmark.svg); width: 20px; height: 20px; margin-right: 5px; }
            }
        }
    }
}

.serviceBlocks {background-size: cover;
    & .serviceBlock { position: relative; border-radius: 5px; padding: 96px 40px 18px; background: var(--white); box-shadow: 0px 5px 25px 1px rgba(0, 0, 0, 0.2); height: 100%; transition: all 0.5s ease; 
        &:before { content: ''; display: block; position: absolute; z-index: 0; width: 100%; height: 100%; left: 0; top: 0; background: #f5f5f5; clip-path: polygon(0 0, 50% 0, 0% 50%, 0% 100%); transition: background 0.5s ease; }
        & .serviceContent { position: relative; z-index: 1; }
        & .icon { position: absolute; top: -140px; height: 100px; width: 100px; text-align: center; line-height: 100px; border-radius: 50%; background: var(--white)f; transition: background 0.3s ease, color 0.3s ease; 
            img { display: block; font-size: 3.5em; height: 100px; width: 100px; padding: 15px; border-radius: 50%; transition: filter 0.3s ease; } 
        }
        div { 
            a span.lead { font-size: 1.6em; display: block; margin-bottom: 10px; color:  var(--dark); } 
            >span { display: block; font-weight: 500; margin-bottom: 15px; } 
        }
        &:hover { background:  var(--primary); color: var(--white); 
            & .icon { background:  var(--primary); 
                img { filter: brightness(0) invert(1); } 
            } 
            &:before { background:  var(--dadrk); } 
            * { color: var(--white); } 
        }
    }
}

.countersBlock {background-size: cover;color: var(--white);padding: 15px;background-color: var(--dark);background-repeat: no-repeat;
    & .Counter { font-size: 4em; font-weight: bold; display: block; line-height: normal; }
}

.testimonialsBlock { background: #fbfbfd; background: var(--white); border: 1px solid #f8f7fd; position: relative;
    &:before { content: ''; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
    & .testimonial { position: relative; z-index: 1; padding: 35px; }
    & .icon { display: block; margin: 0 auto; margin-bottom: 10px; width: 90px; height: 90px; border-radius: 50%; overflow: hidden; background: transparent; transition: all .5s ease; text-align: center; }
    & .cName { display: block; text-align: center; font-weight: 500; 
        b { display: block; color:  var(--primary); }
    }
    p { text-align: center; }
    &:hover{
        & .icon { background:  var(--primary); color: var(--white); transition: all .5s ease; 
            span { color:  var(--white); transition: all .5s ease; }
        }
    }
    & .testimonialSlider {
        & .tao-dots {display:flex; justify-content:center;
            .tao-dot{ background:var(--gray); margin:15px 5px; height:5px; width:25px;
                span{ font-size:0;}
                &.active{ background:var(--primary);} 
            }
        }
        @media all and (min-width: 0px) and (max-width: 779px) {
             background:none;   
        }
    }    
}
.clientSlider.sliderSection{ height:auto;
    @media all and (min-width: 0px) and (max-width: 779px) {
         background:none;   
    }                           
} 
.clientBlock { padding: 30px;          
    img {opacity: .7;filter: gray;filter: grayscale(1);-webkit-filter: grayscale(1);transition: .3s;max-width: 200px; 
        &:hover { opacity: 1; filter: none; filter: none; -webkit-filter: none; transition: .3s; }
    }
}

footer#footer{background: var(--dark);
    .col-12.order-md-0 {border-left: 1px solid var(--primary);}
    .col-12.order-md-1 {border-left: 1px solid var(--primary);}
    iframe{ min-height:480px;filter: grayscale(1) invert(.89) brightness(1.5);}
    & .footerDetails{padding-left:45px; }
    & .address{padding-top:45px;line-height: normal;
        p{ font-size:.95em; font-weight:300; line-height:1.5;
            svg{width: 28px;height: 28px;margin-left: -32px;}
            a{ font-weight:300;} 
        }          
    }  
    .footerNav{ padding-top:45px;          
        ul{margin:0; padding:0; flex-wrap:nowrap; list-style:none;
            li{display:block;flex: 0 0 auto;width: 30%;
                a{color: var(--white);display:inline-block;font-size:1.0em;padding-bottom:8px; }
                ul { display:block;}
                ul li{padding: 1px 15px; width:auto;}
                ul li a{font-size:1em; font-weight:400; padding:5px 0;}
            }
            a:hover{color:var(--highlight);}       
        }
        @media all and (min-width: 0px) and (max-width: 779px) {
            ul{ flex-direction:column;
                li{width:100%;}                  
            }
        }               
    }
    & .copyright{background-color:color-mix(in srgb, var(--gray) 3%, transparent);color:var(--white);font-size: .8rem;margin-top:30px;padding: 10px 0;text-align:left;
        & .subfooter-nav {
            ul {margin:0;padding: 0;} 
            ul li{display:inline-block!important; vertical-align: middle;            
                a{padding: 0 10px 0 0!important;color:var(--white);
                    &:hover{background:none!important;} 
                }           
            } 
        }
        span{display:block; text-align:right;}    
        @media all and (min-width: 0px) and (max-width: 779px) {
            & .subfooter-nav {justify-content: center;}
            span{ text-align:center;}     
        }                  
    }
}
#social {background:transparent;padding: 0;}

@media all and (min-width: 0px) and (max-width: 991px) {
    footer#footer iframe{min-height: 300px;} 
} 
@media all and (min-width: 0px) and (max-width: 779px) {
    .sliderSection{position:relative;height: auto;background:  var(--dark);}
    .sliderSection {
        & .slide {/* height:auto; */}
    }    
}

@media all and (min-width: 0px) and (max-width: 779px) {
    footer#footer .col-12.order-md-0 {border:0;border-top: 2px solid var(--primary); border-bottom: 2px solid var(--primary); }
    footer#footer .col-12.order-md-1 {border:0; border-bottom: 2px solid var(--primary); }    
}

@media all and (min-width: 0px) and (max-width: 579px) {
    .sliderSection{/* margin-top: 73px; */}
}
@media all and (min-width: 0px) and (max-width: 479px) {
    .sliderSection{/* margin-top: 63px; */}
}