@import url(effect.css);

/* Fonts */
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700,800');


/* Fonts */

html { margin: 0; padding:0; overflow-x:hidden;}
body{
font-family: 'Roboto', sans-serif; font-weight:normal; padding:0; color:#444; font-weight:400; padding-right:0!important; overflow-x:hidden; max-width:100%;
font-size:15px;
line-height:1.4;
}

/*	--------------------------------------------------
Global Reset & Standards
-------------------------------------------------- */

:root{--red:#cf242a; --dark-red:#7a1416; --orange:#f26522; --blue:#063143; --gray:#8a8c8e;}

img{border:0;}

*{ box-sizing:border-box;
}
*:hover{
}

a{color:var(--red); text-decoration:none;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-ms-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
}
a:hover{text-decoration:none; color:#1f1917;}

h1, h2, h3, h4, h5{margin:0 0 15px; padding:0; font-weight:normal;}

h2{font-size:32px; text-align:center; line-height:1.4; text-align:center; color:#222; margin-bottom:15px;}
h2 > span{display:block; overflow:hidden; clear:both; color:#a98538; font-size:38px;}

/* Header */

.headerTop{ display:block; overflow:hidden; clear:both; padding:5px 0; background:var(--gray); font-size:14px; color:#222; text-align:right; font-weight:400;}
.headerTop ul{ margin:0; padding:0; list-style-type:none;}
.headerTop ul li{ display:inline-block; margin:0 4px;}
.headerTop ul li a{ color:#fff;}
.headerTop ul li a i{font-size:17px;}
.headerTop ul li a:hover{ color:var(--blue);}

#myHeader{display:block; padding:15px 0;}
.nav-area{}
.nav-area [class^="col-"] > a > img{ height:40px;transition:all .5s ease; display: block;} 

.enquiryBtn a{ display:block; overflow:hidden; padding:12px 15px; background:var(--red); color:#fff; font-weight:700; border-radius:5px; text-transform:uppercase; line-height:1;}
.enquiryBtn a i{ margin-left:2px;}
.enquiryBtn a:hover{ background:var(--orange);}

.sticky {
position: fixed!important; padding:10px 0 20px!important;
top: 0!Important; bottom:auto!important;
width: 100%; z-index:9999; background:rgba(255,2555,255,1);
-webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.2);
box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.2);
}
.sticky .nav-area [class^="col-"] > a > img{ height:32px;}

.scroll-downs {
  position: absolute;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width :323px;
  height: 54px; background:url(../images/banner-top.png) no-repeat center bottom;
}

.mousey {
  box-sizing: content-box; margin:0 auto;
  width:25px; font-size:28px; color:#a98538;
}
.scroller {
  animation-name: scroll;
  animation-duration: 2.2s;
  animation-timing-function: cubic-bezier(.15,.41,.69,.94);
  animation-iteration-count: infinite;
}
@keyframes scroll {
  0% { opacity: 0; }
  10% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(15px); opacity: 0;}
}

.project-slider{ display:block; background: #111; position: relative;}
.project-slider .carousel-item img{ width:100%; opacity:0.7;}
.project-slider > img{position:absolute; right:0; top:-45px; z-index:5;}


.heroText{position: absolute; left: 50%; top: 50%; transform:translate(-50%,-50%); font-weight: 800; color: var(--red); width: 400px; max-width: 90%;}
.heroText h2{font-weight: 700; color: var(--red); font-size: 40px; line-height: 1; text-shadow: 1px 1px 1px #000;}
.heroText h2 span{color: var(--orange); font-size: 40px;}





/* -- Tab Area -- */
.tab-contentOuter{ background:url(../images/productbg.png) no-repeat center bottom; background-size:100% auto; background-color:var(--red); padding-bottom:50px;}
.tab-content > .in.active{opacity:1;}
.tabFormArea{ display:block; position:relative; z-index:2;}
.tabFormArea .nav {text-align:center; position:relative;align-items: center; justify-content: center;}
.tabFormArea .nav:before{ position:absolute; left:-100%; right:-100%; bottom:0; top:0; background:#fff; border-bottom:3px var(--dark-red) solid; content:''; display:block; z-index:-1;}
.tabFormArea .nav li{ width:25%;}
.tabFormArea .nav li a{text-transform:uppercase; font-size:18px; font-weight:700; color:var(--red); display:block; overflow:hidden; padding:15px 0;}
.tabFormArea .nav li a span{ margin:0 auto 15px; background:transparent url(../images/tabIcon1a.png) no-repeat center center; height:56px; width:64px; display:block;}
.tabFormArea .nav li a.active span{ background-image:url(../images/tabIcon1b.png);}
.tabFormArea .nav li:nth-child(2) a span{background-image:url(../images/tabIcon2a.png);}
.tabFormArea .nav li:nth-child(2) a.active span{ background-image:url(../images/tabIcon2b.png);}
.tabFormArea .nav li:first-child a{border:none;}
.tabFormArea .nav li a.active{ background:var(--red); color:#fff;}
.tabFormArea .tab-content{padding:60px 25px; display:block; overflow:hidden;}

.tab-pane{ text-align:center; color:#fff!important;}
.tab-pane h2{ margin-bottom:15px!important;}
.tab-pane p{ margin-bottom:35px; font-size:18px;}
.tab-pane > a{ display: inline-block; margin: 0 auto; clear: both;  padding: 10px 20px; font-size: 17px; line-height:1.6; background: var(--orange);  color: #fff;  border-radius: 40px;  text-transform: uppercase;  font-weight: 600; border: 2px #fff solid;}
.tab-pane > a i{ margin-left:50px;}
.tab-pane > a:hover{ background:var(--red);}
.tab-pane .row{ margin-bottom:40px;}
.tab-pane [class^="col-"], .productListing [class^="col-"]{ margin-bottom:30px;}
.tab-pane [class^="col-"] a, .productListing [class^="col-"] a{ position:relative; display:block; overflow:hidden;}
.tab-pane [class^="col-"] a:before, .productListing [class^="col-"] a:before{ position:absolute; left:0; right:0; bottom:0; height:40%; content:''; display:block; z-index:1;
background: rgb(0,0,0);
background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
}
.tab-pane [class^="col-"] a img, .productListing [class^="col-"] a img{transition: transform .5s ease;}
.tab-pane [class^="col-"] a:hover img, .productListing [class^="col-"] a:hover img{transform: scale(1.5);}
.tab-pane [class^="col-"] a span, .productListing [class^="col-"] a span{ position:absolute; left:15px; bottom:15px; z-index:2; font-weight:700; font-size:17px; color:#fff; padding-bottom:5px; border-bottom:2px var(--orange) solid;}



.aboutArea{padding:0; position:relative; font-size:17px; line-height:1.6;}
.aboutArea > div{position:absolute; top:40%; left:50%; transform:translate(-30%,-50%);}
.aboutArea h1{ font-size:30px; font-weight:600; margin-bottom:20px; color:var(--red);}
.aboutArea a{ display:inline-block; margin:10px 0 0; clear:both; padding:10px 20px; background:var(--orange); color:#fff; border-radius:40px; text-transform:uppercase; font-weight:600;}
.aboutArea a i{ margin-left:50px;}
.aboutArea a:hover{ background:var(--red);}
.aboutArea > img{width:35%;}

.innerAbout{display: flex; margin-bottom: 60px; /* This prevents equal height */}
.innerAbout div img{width: 100%; margin-bottom: 25px; display: block;}
.innerAbout h2, .innerArea h4{text-align: left; font-size: 22px; border-left: 4px var(--orange) solid; margin-top: 10px; padding-left: 15px; line-height: 1;}
.innerAbout h2 strong{color: var(--orange);}
.innerAbout > div{position:static; transform:translate(0%,0%); width: 60%; padding: 0 8% 0 2%;}
.innerAbout > img{width:25%; height: auto!important; align-self: flex-end;}
.innerAbout h4{font-size: 18px;color: var(--orange); font-weight: 600; margin-bottom: 10px;}
.innerAbout h4 + p{font-size: 13px;}

.logoScrollArea{ display:block; clear:both; position:relative; top:-60px; margin-bottom:-60px;}
.logoScrollArea h2{ text-align:right; font-size:26px; margin-bottom:10px;}
.logoScrollArea p{width:450px; max-width:100%;  float:right; text-align:right; margin-bottom:30px;}


.logoScrollWrapper {
  width: 100%;
  overflow: hidden;
  position: relative;
	margin-bottom: 40px;
}

.scroll-container {
  display: flex;
  width: max-content;
  animation: scroll-left 40s linear infinite;
  list-style: none;
  margin: 0;
  padding: 0;
}

.scroll-container li {
  flex: 0 0 auto;
  margin: 0 10px;
  
}

.scroll-container li img {
  width: 160px;
  height: auto;
  border: 1px solid #ccc;
	margin-bottom: 0;
}

@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}


.threeBoxArea{padding:80px 0 200px; background:var(--blue); color:#fff; position:relative; font-size: 17px;}
.threeBoxArea:before{ position:absolute; left:0; right:0; bottom:-7px; height:8px; content:''; background:transparent url(../images/waveBg.png) repeat-x; display:block;}
.threeBoxArea h2, .enquiry-area h2, .tab-pane h2{ text-transform:uppercase; color:#fff; font-size:18px; line-height:1.5; margin-bottom:25px;}
.threeBoxArea h2 strong, .enquiry-area h2 strong, .tab-pane h2 strong{ display:block; overflow:hidden; clear:both; font-size:42px; font-weight:500; text-transform:none;}
.threeBoxArea > div > p{ font-size:16px; margin-bottom:40px;}
.threeBoxArea [class^="col-"] img{width:50%;box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;}
.threeBoxArea [class^="col-"] img:nth-child(2){ position: absolute; left: 30%; top: 10%;}
.threeBoxArea [class^="col-"] img:nth-child(3){ position: absolute; left: 20%; top: 30%;}
.threeBoxArea h3{text-align: left; color: #fff; font-size: 36px;}




.enquiry-area{background:url(../images/spiceParallaxBg.jpg) no-repeat center center fixed; background-color:rgba(0,0,0,0.5); background-size:cover; background-blend-mode:soft-light; color:#fff;padding:80px 5%;}
.enquiry-area > div{}
.enquiry-area img{max-width: 100%; margin-bottom: 50px;}
.enquiry-area [class^="col-"]{border-left: 2px var(--orange) solid; color: #fff; text-align: left;}
.enquiry-area [class^="col-"] p{margin-bottom: 0;}
.enquiry-area [class^="col-"] h4{font-size: 18px; font-weight: 700;}


.footerRedBand{ background:var(--orange); font-size:15px; padding:30px 0; color:#fff;}
.footerRedBand h4{ margin-bottom:10px; font-size:18px; font-weight:600; text-transform:uppercase;}
.footerRedBand p{ margin-bottom:0; line-height:1.5; padding-left:12px; border-left:2px #fff dotted; margin-left:8px;}
.footerRedBand [class^="col-"] > a{background:var(--blue); padding:15px 20px; border-radius:5px; text-transform:uppercase; font-weight:600; cursor:pointer; color:#fff;}
.footerRedBand [class^="col-"] > a:hover{background: #fff; color: var(--blue);}
.footerRedBand [class^="col-"] > a i{margin-left: 10px;}
.footerRedBand [class^="col-"]:last-child{ text-align:right;}
.footerRedBand ul{ margin:0; padding:0; list-style-type:none;}
.footerRedBand ul li{ display:inline-block; margin:0 4px;}
.footerRedBand ul li i{ font-size:30px;}
.footerRedBand ul li a{ color:#fff;}
.footerRedBand ul li a{ color:var(--blue);}


.footer{display:block; padding:40px 0 0; color:#222; overflow:hidden; font-size:14px; background:var(--gray);}
.footer img{height:40px; margin-bottom:30px;}
.footer small{ display:inline-block; overflow:hidden; clear:both; padding:10px 75px; text-align:center; background:var(--blue); color:#fff; border-radius:30px;}
.footer p{line-height:1.3; margin-bottom:10px; position:relative; padding-left:25px;}
.footer p i{ position:absolute; left:0; top:2px;}
.footer p strong{ display:block; overflow:hidden;}
.footer a{margin-bottom:7px; color:#222;}
.footer h4{margin-bottom:15px; display:block; overflow:hidden; font-size:16px; text-transform:uppercase; font-weight:600;}
.footer > div > div{padding-bottom:20px;}
.services-listing ul{list-style-type:none; margin:0; padding:0;}
.services-listing ul li{margin-bottom:8px;}
.footer a:hover{ color:var(--blue);}


#scroll-icon {
    position:fixed;
    right:10px;
    bottom:10px;
    cursor:pointer;
    width:30px;
    height:30px;
    background-color:var(--orange);
    text-indent:-9999px;
    display:none;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    z-index:99999;
}
#scroll-icon span {
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-8px;
    margin-top:-12px;
    height:0;
    width:0;
    border:7px solid transparent;
    border-bottom-color:#ffffff
}
#scroll-icon:hover {
    background-color:var(--red);
    opacity:1;
    filter:"alpha(opacity=100)";
    -ms-filter:"alpha(opacity=100)";
}


.innerBanner{background:url(../images/bg.jpg) no-repeat center top fixed; background-color:rgba(0,0,0,0.5); background-size:cover; background-blend-mode:soft-light; display: block; padding: 100px 0; color: #fff; margin-bottom: 40px; position: relative; text-align: center;}
.innerBanner > img{position:absolute; right:0; top:-45px; z-index:5; height: 500px;}
.innerBanner ul{margin: 0; padding: 0; list-style-type: none;}
.innerBanner ul li{ display: inline-block; margin-right: 15px; padding-right: 15px; text-transform: uppercase; letter-spacing: 2px; font-size: 12px; position: relative;}
.innerBanner ul li:after{content:'\f101'; font-family: 'Font Awesome 6 Free'; font-weight: 600; display:block; position:absolute; right:-10px; top:0;color:var(--light)!important;}
.innerBanner ul li:last-child{margin-right: 0;padding-right: 0;}
.innerBanner ul li:last-child:after{display: none;}
.innerBanner ul li a{color: #fff;}
.innerBanner ul li a:hover{color:var(--orange);}

.innerArea{display: block; overflow: hidden; margin-bottom: 40px;}
.innerArea [class^="col-"] > img{margin-bottom: 30px; display: block; max-width: 100%;}
.productDetails img, iframe{border: 8px #fff solid!important; box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;}

.productsTable{width: 100%;}
.productsTable tbody tr{background: #f4dace;}
.productsTable tbody tr:nth-child(even){background: #cdcdce;}
.productsTable thead th{background:var(--orange)!important; color: #fff!important;}
.productsTable .table-bordered td, .productsTable .table-bordered th{border-color: #fff!important;}
.table td, .table th {
  padding: .5rem 1rem;
}


.leftMenu{ border-right: 2px #ddd dotted;}
.leftMenu h4{background: var(--orange); font-weight: 700; margin-bottom: 10px; color: #fff; display: block; padding: 8px 15px; font-size: 16px; border-top-right-radius:30px;}
.leftMenu ul{margin: 0; padding: 0; list-style-type: none;}
.leftMenu ul li{border-bottom: 1px #ddd solid;}
.leftMenu ul li a{display:block; overflow: hidden; padding: 7px 0 7px 35px; color: var(--blue); position: relative;}
.leftMenu ul li.active a{background: #f4dace;}
.leftMenu ul li a:before{content:'\f101'; font-family: 'Font Awesome 6 Free'; font-weight: 600; font-size: 10px; display:block; position:absolute; left:15px; top:10px;color:var(--orange)!important;}
.leftMenu ul li a:hover{color:var(--orange);}


.logoGallery.wp-block-gallery.columns-4 {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem; /* optional, for spacing */
	margin-top: 30px!important;
}

.logoGallery.wp-block-gallery.columns-4 figure {
  width: 23% !important;
  flex: 0 0 23% !important;
	padding: 15px;
  margin: 0;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 15px;
}
.logoGallery.wp-block-gallery.columns-4 figure img{margin: 0!important;}


.contactDetals{background:#eee; padding: 20px 20px 10px; font-size: 17px;}
.contactDetals a{font-weight: 700;}
.contactDetals p{margin-bottom: 10px;}

.wpforms-submit{width: 100%!important; border: none!important; background: var(--orange)!important; color: #fff!important; text-transform: uppercase!important; font-weight: 700;}
.wpforms-submit:hover{background: var(--blue)!important;}

/*------------------------------------*\
    Media Queries
\*------------------------------------*/

@media (max-width: 1024px){
}

@media (max-width: 991px){

	.stellarnav.mobile.light li a{width: 100%;}
	button.dropdown-arrow{display: none!important;}
	.dd-toggle{width: 15%!important;}

h2{font-size:28px;}
h2 > span{font-size:36px;}

}

@media (max-width: 767px){
.headerTop{ text-align:center; font-size:12px;}
.headerTop ul li:last-child{ display:none;}

.nav-area [class^="col-"] > a > img{ height:35px;}
.enquiryBtn{ display:none;}
	
	
.project-slider > img, .innerBanner > img{top:20px; width: 28%; right:0;}
.project-slider .carousel-item img{ height: 200px; object-fit: cover;}
.heroText h2{font-size: 20px;}
.heroText h2 span{font-size: 20px;}


.innerBanner{text-align: left; padding: 30px 0 30px 15px;}
.innerBanner h1{font-size: 22px;}
.innerBanner ul li{letter-spacing: 0;}
.innerBanner > img{height: auto; width: 20%;}

.aboutArea h1{ font-size:30px;}
.aboutArea{padding: 100px 0;text-align:center!important;}
.aboutArea div{position:static; transform:translate(0%,0%); max-width: 90%; margin: 0 auto;}
.aboutArea img{ position: absolute; left: 0; top: -65px; width: 30%;}
	
	.innerAbout img{display: none;}
	.innerAbout > div{width: 100%; padding: 0 15px;}

.logoScrollArea h2, .logoScrollArea p{width: 100%; text-align: center;}


.threeBoxArea{text-align: center; font-size: 15px; padding-bottom: 100px;}
.threeBoxArea h3{text-align: center;}
.threeBoxArea [class^="col-"] img{float: left; margin-left: 15%; width: 40%;}
	


.footer{text-align:center;}
.footer [class^="col-"]{margin-bottom:15px;}
.footer .social-icons ul{ float:none;}

.contact-icons [class^="col-"]{ padding-top:30px;}

[class^="col-"]{margin-bottom:20px;}
.nav-area [class^="col-"]{margin:0;}
	
	
	.footerRedBand [class^="col-"]{margin-bottom: 0;}
	
	
.footer small{ display:block; padding:15px; margin-bottom:20px;}
.footer p{padding-left:0;}
.footer p i{ display:none;}

.row{max-width:auto; width: auto!important;}

.logoGallery.wp-block-gallery.columns-4 figure {width: 46% !important;flex: 0 0 46% !important;}


}

@media (max-width: 500px){
.tabFormArea .nav li a{ font-size:12px;}
.tabFormArea .nav li{ width:45%;}
}

@media (max-width: 360px){
}


@media screen and (max-width: 1920px) and (min-width: 1240px){
}