@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;700&display=swap');

body { font-family: "Barlow", sans-serif; overflow-x: hidden; font-weight: 400; font-style: normal; }

/* color guidelines */
:root, [data-bs-theme=light] { 
  --bs-primary: #FB4D00; 
  --bs-secondary: #000000; 
  --bs-light-gray: #F5F5F5; 
  --bs-white: #ffffff; 
  --bs-gray-900:#222222; }
.btn { border-radius: 0; padding: 0.7rem 1.8rem; position: relative; background: transparent;}
.btn::before{ content: ''; width: 100%; height: 100%; background: linear-gradient(to bottom, #ff5a00, #e64a00); transform: skew(20deg); position: absolute; top:0; left:0; z-index: 0;}
.btn:hover::before{ background: linear-gradient(to bottom, #666666, #000000); transform: skew(20deg); position: absolute; top:0; left:0; z-index: 0;}
.btn.light-btn::before{ background: linear-gradient(to bottom, #ffffff, #bbbbbb); box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); transform: skew(20deg); position: absolute; top:0; left:0; z-index: 0;}
.btn.light-btn:hover{color: var(--bs-white);}
.btn.light-btn:hover::before{ background: linear-gradient(to bottom, #666666, #000000);}
.btn span{position: relative; z-index: 1;}
.site-btn {color: #fff; text-transform: uppercase; position: relative;}
.site-btn:hover {color: #fff; text-transform: uppercase; }
.text-success { color: var(--bs-secondary) !important; }
h1, h2, h3, h4, h5 { font-family: "Barlow", sans-serif; font-weight: 700;}
h2{font-size: 2.6rem; color: var(--bs-secondary); font-weight: 700;}
h2 span{ color: var(--bs-secondary);}
h3{ color: var(--bs-secondary);}
.main-banner h5{font-weight: 400; color:var(--bs-primary); text-transform:uppercase; letter-spacing:3px}
.topstrip { background:linear-gradient(to right, #ff5a00, #592813); padding: 8px 0; }
.topstrip ul { margin-bottom: 0; padding: 0; }
.topstrip ul li { display: inline-block; color: var(--bs-white);}
.topstrip ul li a { text-decoration: none; color: var(--bs-white); }
.navbar-brand { padding: 0; position: relative; padding:0.5rem 1rem; margin: 0;}
.navbar-brand::before{content: ' '; position:absolute; left:0; top:0; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); width: 100%; height: 100%; background: var(--bs-white); transform: skew(20deg); z-index:-1;}
.navbar-brand img { transition: 0.3s; width: 200px; padding-left:2rem; padding-top: 0.5rem;}
.navbar-expand-lg .navbar-nav .nav-item { margin: 0 1rem; }
.navbar-expand-lg .navbar-nav .nav-link { font-size: 1rem; }
.top-contact a::before{height: 89px; top: -35px; left:-10px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);}
.top-contact a.btn:hover::before{top: -35px; left:-10px}

.site-navigation { padding: 0 !important; }
.site-navbar { margin: auto; z-index: 99; padding-top: 0; width: 100% !important; position: relative;}
.site-navbar::before {content: ' '; position: absolute; left:0; top:40px; z-index: -2; width:100%; height: 50px; background:var(--bs-light-gray)}
.sticky-wrapper.is-sticky .site-navbar::before {top:10px;}
.sticky-wrapper { height: auto !important; }
.sticky-wrapper.is-sticky .site-navbar { background: #fff; z-index: 999 !important; width: 100% !important; padding: 0; box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); }
.sticky-wrapper.is-sticky .site-navbar .navbar { padding: 0; }
.sticky-wrapper.is-sticky .site-navbar .navbar .navbar-brand img { width: 110px; transition: 0.3s; }
.sticky-wrapper.is-sticky .top-strip { padding: 0.2rem 0; }
.sticky-wrapper.is-sticky .site-navbar .site-navigation ul li a{color: var(--bs-secondary);}
.sticky-wrapper.is-sticky .site-navbar ul li.active a, .sticky-wrapper.is-sticky .site-navbar .site-navigation ul li a:hover { color: var(--bs-white); }
.site-navbar .site-navigation .site-menu > li { position: relative; padding: 0; margin: 0 0.5rem; }
.site-navbar .site-navigation .site-menu > li:first-child::before { content: none; }
.site-navbar .site-navigation .site-menu > li:last-child { padding-right: 0; margin-right: 2.2rem; }
.site-navbar .site-navigation .site-menu > li > a { position: relative; color:var(--bs-gray-900); padding: 0.75rem 2rem; font-size: 1rem; font-weight: 500; }
.site-navbar .site-navigation .site-menu > li:hover > a {color: var(--bs-white) !important;}
.site-navbar .site-navigation .site-menu > li > a::before{content: ''; position: absolute; left: 0; top: -7px; width: 100%; height: 60px; background: linear-gradient(to bottom, #fff, #E0E0E0); transform: skew(20deg); z-index: -1;box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); transition: top 0.35s ease, height 0.35s ease;}
.site-navbar .site-navigation .site-menu .has-children:hover > .dropdown-menu, .site-navbar .site-navigation .site-menu .has-children:focus > .dropdown-menu, .site-navbar .site-navigation .site-menu .has-children:active > .dropdown-menu { display: block; }
.site-mobile-menu .site-nav-wrap li.active > a, .site-navbar .site-navigation .site-menu .has-children .dropdown-menu a.active { color: #111111; }
.site-navbar .site-navigation .site-menu li.active > a { position: relative; display: block; color: #fff; }
.site-navbar .site-navigation .site-menu li.active > a::before, .site-navbar .site-navigation .site-menu li:hover > a::before {left: -5px; top: -35px; width: 100%; height: 89px; background: linear-gradient(to bottom, #ff5a00, #e64a00); transform: skew(20deg); z-index: -1;box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4); transition: top 0.35s ease, height 0.35s ease; }
.sticky-wrapper.is-sticky .site-navigation .site-menu > li.active > a::before, .sticky-wrapper.is-sticky .site-navigation .site-menu > li:hover > a::before { content: ''; position: absolute; left: -5px; top: -35px; width: 100%; height: 88px; background: linear-gradient(to bottom, #ff5a00, #e64a00); transform: skew(20deg); z-index: -1;box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); transition: top 0.35s ease, height 0.35s ease; z-index: -1;}
.site-navbar .site-navigation .site-menu .has-children .dropdown-menu { border-radius: 0; border: 0; min-width: 14rem; }
.site-navbar .site-navigation .site-menu .has-children .dropdown-menu > li > a { border-radius: 0 !important; padding: 8px 12px; text-decoration: none; }
.site-navbar .site-navigation .site-menu .has-children .dropdown-menu a { font-size: 1rem; }
.site-navbar .site-navigation .site-menu .has-children .dropdown-menu > li > a:hover, .site-navbar .site-navigation .site-menu .has-children .dropdown-menu > li.current-menu-item > a { color: #ffffff; background: var(--bs-secondary); border: 0; }
.side-toggle { position: absolute; right: 0; top: 25px; margin: auto; color: #0d6efd; font-size: 1.25rem; }
/* @keyframes lineAnimate {
  0% { transition: top 0.35s ease, height 0.35s ease; }
  100% { height: 100%; transition: top 0.35s ease, height 0.35s ease; }
} */
.social-share { display: inline-flex; align-items: center; }

/* .main-banner { } */
.main-banner {position: relative;  background: var(--bs-light-gray); padding: 3rem 0; }
.main-banner::before{content: ''; width: 80%; height: 70%; background-image: url('../images/banner-shape.png'); background-size: 100%; background-repeat: no-repeat; position: absolute; left:-90px; bottom:0;}
.main-banner .carousel-control-next,.main-banner .carousel-control-prev{opacity: 1; width: 60px; height: 50px;}
.main-banner .carousel-control-prev{left:0rem; top: 50%;}
.main-banner .carousel-control-next{right: 0rem; top: 50%;}
.carousel-control-prev-icon, .carousel-control-next-icon{filter: invert(1); opacity: 0.4;}

.about-section{position: relative; padding:3.5rem 0}
.about-section .sub-heading{color: var(--bs-primary); letter-spacing: 4px; text-transform: uppercase;}
.about-section ul li, .inner-section ul li{position: relative; display: block; margin-bottom:5px}
.about-section ul li::before, .inner-section ul li::before{content: '\f058'; position: absolute; left:-2rem; top:1px; color: var(--bs-primary); font-family:'Font Awesome 7 Free'; font-weight: 700;}
.about-section.service1{background: var(--bs-light-gray); position:relative;}
.about-section.service1::before{content: ' '; position:absolute; left: -175px; top: 0; z-index: 0; width:350px; height:100%; background:url('../images/shape-1.png'); background-position: center; background-repeat: no-repeat;background-size: 100%;}
.about-section.service2{position: relative; overflow-x: hidden;}
.about-section.service2::before{content: ' '; position:absolute; right: -200px; top: 0; z-index: 0; width:400px; height:100%; background:url('../images/shape-2.png'); background-position: center; background-repeat: no-repeat;background-size: 100%;}

.statics-section{padding: 4rem 0; background: var(--bs-light-gray); position:relative}
.statics-section::before{content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0.1; background: url('../images/network-bg.jpg'); background-size:cover; background-repeat:no-repeat; background-position:center;}
.counter-block{display: grid; grid-template-columns:1fr 1fr 1fr;}
.counter-box{padding: 2rem 0; width: 100%; align-items: center;}
.counter-box img{margin-right: 1.5rem; width: 60px;}
.counter-box h2{font-size: 2.5rem; font-weight: 700; margin: 0; display: block;}
.counter-box p{margin: 0; text-transform: uppercase;}
.partner-section{padding: 4rem 0; text-align:center}
.swiper-wrapper{align-items: center; margin: 3rem 0;}
.swiper-slide img { max-width: 150px; width: 100%; height: auto; margin: 0 auto; }

.cta-section{background: linear-gradient(to bottom, #ff5a00, #e64a00); padding: 4rem 0; text-align: center;}
.cta-section h2{color: var(--bs-white); font-size: 2.2rem; margin-bottom: 2rem;}
footer { background: var(--bs-light-gray); padding: 2rem 0 0; position: relative;}
footer h4 { font-size: 1.35rem; margin-bottom: 1rem; color: var(--bs-secondary); font-weight: 700; }
.footer-links { padding-left: 0; }
.footer-links li { display: block; margin-bottom: 0.5rem; }
.footer-links li a { display: block; text-decoration: none; position: relative; color: var(--bs-secondary) }
/* .footer-address { padding-left: 0; } */
.footer-address li { display: block; margin-bottom: 0.7rem; position: relative; }
.footer-address li::before {content: ' '; color: var(--bs-primary); position:absolute; top: 1px; left:-2rem; font-family:'Font Awesome 7 Free'; font-weight:900;}
.footer-address li:nth-child(1)::before {content: '\f3c5'; position:absolute;}
.footer-address li:nth-child(2)::before {content: '\f095'; position:absolute;}
.footer-address li:nth-child(3)::before {content: '\f0e0'; position:absolute;}
.footer-address li a { word-wrap: break-word; display: block; text-decoration: none; color: var(--bs-secondary); position: relative; }
footer ul li a:hover, .footer-address li label { color: var(--bs-secondary); }
.copyright { background-color: var(--bs-secondary); text-align: center; font-size: 0.9rem; padding: 1rem; margin: 0; color: #fff; }
.copyright a { text-decoration: none; color: var(--bs-white); }
.inner-banner { position: relative; }
.inner-banner::before {content: ''; position: absolute; z-index: 9; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3) }
.inner-banner .inner-caption{position: absolute; top: 40%; width: 50%; left: 0; right: 0; text-align: center; margin: auto; z-index: 10;}
.inner-banner .inner-caption h1{font-size: 3.5rem; color: var(--bs-white);}
.inner-section { padding: 4rem 0; }
.inner-section h2 { font-size: 2.2rem; color: var(--bs-primary); font-weight: 700; }
.inner-section h3 { font-size: 1.5rem; color: var(--bs-secondary); font-weight: 600; margin-top: 0.5rem; }
.inner-section h4 { font-size: 1.2rem; }
.inner-section ul li a { display: block; text-decoration: none; color: #222; }
.inner-section .card{padding: 1.5rem; align-items: start; transition:0.3s; background: var(--bs-light-gray); border:0; border-radius: 1rem; margin:1rem 0;}
.inner-section .card:hover{box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2); transition:0.3s;}
.inner-section .card i{font-size: 2.5rem;}
.inner-section .card h4{margin-top: 1rem;}
.grid-card{display: grid; grid-template-columns:repeat(3, 1fr); gap:1.5rem;}
.grid-card .card{margin: 0;}
.contact-content{border:1px solid #ccc; padding:2rem; border-radius: 1rem;}
.contact-content a{text-decoration: none; color:var(--bs-secondary)}
.contact-content a:hover{color:var(--bs-primary)}
.contact-content i{color:var(--bs-primary)}
.contact-share a{margin-right: 0.7rem;}
.service-item{text-align: center; padding:1.5rem; margin-top: 1.7rem; background: var(--bs-light-gray); border-radius:1rem}
.service-item img{margin: auto; height:180px; margin-bottom:1rem}
.services-strip{background: var(--bs-secondary);}
.services-strip ul{padding: 0; display: flex; justify-content:space-between; width:500px; margin:auto;}
.services-strip ul li{display: block; text-align: center; width:100%}
.services-strip ul li a{display: block; color: var(--bs-white); text-decoration: none; padding:1rem;}
.services-strip ul li a:hover, .services-strip ul li.active a{background: var(--bs-primary);}

@media (min-width:1921px) and (max-width:7000px) {

/*   html, body, header { max-width: 1400px; margin: auto; overflow-x: hidden; } */ }
@media (max-width:1400px) {
  .about-section h4 { font-size: 1.2rem; }
  .about-section h4 img { max-width: 30px; }
  .img-comp-img img { max-width: 1076px; }
  .site-navbar .container { max-width: 90%; }
}
@media (max-width:1280px) {
  .site-navbar .container { max-width: 100%; }
  .top-strip .container { max-width: 96%; padding: 0; }
  .site-navbar .site-navigation .site-menu > li { margin: 0; padding: 0 0.6rem; }  
  nav .navbar-brand img { width: 180px; }
  .sticky-wrapper.is-sticky .site-navbar .navbar .navbar-brand img { width: 120px; }
  .site-navbar .site-navigation .site-menu > li > a::before{height: 55px;}
  .site-navbar .site-navigation .site-menu li.active > a::before, .site-navbar .site-navigation .site-menu li:hover > a::before{height: 85px;}
  footer .container { max-width: 95%; }
 
}
@media (max-width:1199px) { 
  nav .navbar-brand img { width: 150px; }
  .site-navigation{padding: 0.6rem 0 !important;}
  .topstrip ul{text-align: left;}
  .about-section.service2{overflow-x: hidden;}
}
@media (max-width:1030px) { 
  .sticky-wrapper.is-sticky .site-navbar .navbar .navbar-brand img { width: 100px; }
  .site-navbar .site-navigation .site-menu > li { padding: 0 0.7rem; }
  .site-navbar .site-navigation .site-menu > li > a { padding: 0.5rem 1rem }
  footer h4 { font-size: 1.7rem; }
}
@media (max-width:990px) {
  .connet-stript{padding: 0;}
  nav .navbar-brand{position: inherit; top:auto;}
  .site-navigation{padding: 0 !important;}
  .site-menu-toggle { padding: 0.5rem 0.7rem; background: var(--bs-secondary); color: #fff; border-radius: 50%; width: 45px; height: 45px; display: block; }
  .site-menu-toggle span { display: block; height: 1px; width: 20px; background: #fff; margin: 6px 0; }
  .call-btn { margin-right: 1rem; }
  .site-navbar .container { max-width: 96%; }
  .banner-caption { width: 400px; background-position:-20px; background-size:100px; left: 0; right: auto; top: 45%; padding: 3rem 2rem 3rem 8rem;}
  .banner-caption .painting-expert { font-size: 1.2rem; }
  .banner-caption h1 { font-size: 1.8rem; }
  .about-section.service2{overflow-x: hidden;}
}
@media (max-width:767px) {
  h2{font-size: 2.1rem;}
  .site-navbar { background-color: #fff; position: relative; top: 0 }
  .site-menu-toggle { border: 1px solid #fff; }
  .site-navbar .container { max-width: 100%; }
  nav .navbar-brand img { width: 120px; margin: auto; }
  .top-contact a::before {height: 48px; top:0; left: 0;}
  .sticky-wrapper { height: auto !important; }
  .sticky-wrapper.is-sticky .site-navbar { position: initial !important; }
  .sticky-wrapper.is-sticky .site-navbar .navbar .navbar-brand img { width: 120px; }
  .topstrip{margin-bottom: 0.7rem;}
  .main-banner::before{background-position: bottom; height: 30%; left: -35px;}
  .main-banner h5{margin-top: 2rem;}
  .about-section img{margin-bottom: 1.5rem;}
  footer h4 { font-size: 1.2rem; margin-top: 1.5rem; }
  footer {padding-bottom: 0; }
  .about-section.service1::before, .about-section.service2::before{content: none;}
  .statics-section{text-align: center;}
  .counter-box{padding-bottom: 0;}
  .inner-banner .inner-caption{width: 100%;}
  .inner-banner .inner-caption h1{font-size: 2rem;}
}
@media (max-width:500px) {
  .navbar-brand { margin-right: 0; text-align: center; display: block; }
  nav .navbar-brand img { margin: auto; }
  .counter-block { grid-template-columns: 100%; }
  .counter-box:nth-of-type(1), .counter-box:nth-of-type(3) { border-right: 0; border-bottom: 1px solid #eee; }
  .video-wrapper{height: 220px;}
   .process-grid{grid-template-columns: repeat(1,1fr);}
   .services-strip ul{display: block; width: 100%; text-align:center}
   .services-strip ul li{display: inline-block; width:auto;}
}