/*!
Theme Name: Industrial Revolution
Theme URI: https://www.revolutionwp.com/products/industrial-revolution/
Author: revolutionwp
Author URI: https://www.revolutionwp.com/
Description: The Industrial Revolution is a versatile and contemporary WordPress theme that artfully combines minimalistic elegance with robust functionality, making it ideal for a wide range of sectors, including factory industrial lubricant refineries, industrial manufacturing units, equipment providers, machinery suppliers, and automation firms. It also caters seamlessly to construction contractors, logistics companies, chemical manufacturing units, renewable energy plants, and industrial safety consultants, all of whom aim to establish a strong digital presence. With a clean, retina-ready, and fully responsive layout, this theme offers a beautiful browsing experience across all devices, thanks to its mobile-friendly structure and fast-loading performance, perfect for highlighting services, portfolios, and large-scale industrial projects. Developers and agencies will value its optimized, secure codebase, alongside smooth Bootstrap integration for dependable performance. The Industrial Revolution theme features powerful customization options—ranging from banners and testimonials to team sections and strategically placed CTAs—allowing users to effortlessly tailor every aspect. Rich personalization settings, advanced layouts, animated elements, and handy shortcodes make it easy to create an interactive, visually appealing website that boosts user engagement. With built-in social media integration, global translation readiness, and an intuitive user interface suitable for both beginners and experienced developers, this theme provides maximum flexibility for corporate sites, startup pages, industrial portfolios, and global brands. Every design element—from typography to spacing—has been thoughtfully crafted to deliver a luxurious, high-quality, innovation-driven digital experience.
Version: 0.1.8
Requires at least: 5.5
Tested up to: 6.9
Requires PHP: 5.6
License: GNU General Prefer License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: industrial-revolution
Template: industrial-technology
Tags: one-column, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, grid-layout, full-width-template, wide-blocks, editor-style, custom-background, custom-colors, custom-header, custom-logo, custom-menu, sticky-post, featured-images, footer-widgets, flexible-header, post-formats, theme-options, threaded-comments, translation-ready, rtl-language-support, blog, portfolio, e-commerce

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.
*/

:root {
    --primary-color: #FF5E14;
    --secondary-color: #191D20;
    padding: 0;
}
body {
    margin: 0;
    overflow-x: hidden;
    word-wrap: break-word;
    font-family: "Poppins", sans-serif;
}
a{
    text-decoration: none;
    color: var(--primary-color);
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    clear: both;
    word-wrap: break-word;
}
.main-navigation ul#primary-menu li.current-menu-item a,.main-navigation #primary-menu li.current_page_item a{
    font-weight: 700;
    color: var(--primary-color);
}
/*--------------------------------------------------------------
about CSS
--------------------------------------------------------------*/
#service{
  background-size: 100% 100%;
    background-repeat: no-repeat;
    margin: 5em 0 10em;
}
.about-block{
    width: 45%;
    position: relative;
}
.main-abt-content{
    width: 50%;
}
#service .match-heading{
    border-left: 6px solid var(--primary-color);
    padding-left: 20px;
}
#service h2 {
  font-weight: 700;
  font-size: 36px;
  padding-bottom: 0;
  padding-top: 0;
  color: #000;
  text-transform: uppercase;
  display: inline-block;
  margin: 0;
  letter-spacing: 1px;
}
#service .abt-content{
  font-size: 16px;
  color: #777;
}
#service h3 {
    margin: 0;
}
#service h3 a{
    color: var(--secondary-color);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: none;
}
#service h3 a:hover{
    color: var(--secondary-color);
}
#service h4{
    color: var(--secondary-color);
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}
.sec-bg img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}
.more-icon i{
 display: inline-block;
    text-align: center;
    background-color: var(--primary-color);
    color: #fff;
    font-size: 17px;
    text-decoration: none;
    padding: 12px 20px;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
}
#service .more-btn:hover i{
  background-color: var(--secondary-color);
}
#service .main-img {
    width: 89%;
    position: relative;
}
#service .main-img:after{
    content: "";
    position: absolute;
    border: 3px solid #000;
    left: 2em;
    top: 4em;
    width: 89%;
    height: 98%;
}
span.designer-experi {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}
.image-bg {
  background-color: #008d36;
  height: 100%;
  width: 100%;
  display: block;
  position: absolute;
  top: 9px;
  border-radius: 380px;
  left: 11px;
  z-index: 9;
}
.about-image1 img, .about-post-color {
  z-index: 999;
  position: relative;
  height: 400px;
  width: 500px;
  object-fit: cover;
}
.about-post-color{
    background-color: var(--primary-color);
}
.about-image2 img {
    z-index: 999;
    position: relative;
    height: 400px;
    width: 625px;
    object-fit: cover;
}
.image-abt{
    position: relative;
    z-index: 999;
}
.about-image1{
    display: flex;
    justify-content: end;
}
.about-image2 {
    position: absolute;
    right: 17%;
    left: 0%;
    top: 27%;
    bottom: auto;
}
.tab-details {
    margin-top: 7px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}
.tab-details i {
    color: var(--primary-color);
    text-align: left;
    font-size: 53px;
}
.tab-details p {
    font-size: 15px;
    color: #717171;
    line-height: 1.8;
    margin: 0;
}
#service .abt-content {
    padding-left: 10px;
    width: 80%;
}
.main-abt-para{
    font-size: 15px;
    color: #717171;
    line-height: 2;
    margin: 15px 0 15px;
    font-weight: 400;
}
#service .flex-row {
    display: flex;
    flex-wrap: wrap; 
    justify-content: space-between;
}
#service .flex-row.content-main{
    padding: 0;
}
.abt-sentences {
    width: 100%; 
    margin: 30px 0; 
}
.title-part{
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 10px;
}
.title-part i{
    font-size: 60px;
    color: var(--primary-color);
}
#service .title-part .small-title{
    font-size: 15px;
    font-weight: 600;
    color: #000;
    margin: 0;
}
@media screen and (max-width: 1000px){
  
}
@media screen and (max-width: 767px){
    .tab-details i{
        width: auto;
        font-size: 35px;
    }
    #service h4{
        font-size: 15px;
    }
    .main-abt-para{
        font-size: 12px;
        margin: 8px 0 12px;
        line-height: 1.8;
    }
    #service .title-part .small-title, .tab-details p{
        font-size: 12px;
    }
    #service h3 a{
        font-size: 24px;
    }
    .title-part i{
        font-size: 40px;
    }
    .about-block{
        width: 100%;
    }
    .main-abt-content{
        width: 100%;
    }
    #service .main-img{
        width: 100%;
    }
    .about-image1 img, .about-image2 img{
        width: 100%;
        margin-bottom: 20px;
        height: 300px;
        object-fit: cover;
    }
    .about-image2{
        position: static;
    }
    #service .main-img:after{
        content: none;
    }
}
@media screen and (min-width: 767px) and (max-width: 999px){
    #service{
        margin: 5em 0;
    }
    .abt-sentences{
        margin: 20px 0;
    }
    .about-image2{
        right: 15%;
        left: 0;
        top: 21%;
    }
    #service .main-img:after{
        left: 1em;
        top: 2em;
        width: 87%;
    }
    .about-image1 img, .about-post-color{
        width: 250px;
        height: 250px;
    }
    .about-image2 img{
        width: 250px;
        height: 250px;
    }
    .tab-details i{
        width: auto;
        font-size: 35px;
    }
    #service h4{
        font-size: 15px;
    }
    .main-abt-para{
        font-size: 11px;
        margin: 8px 0 12px;
        line-height: 1.8;
    }
    #service .title-part .small-title{
        font-size: 12px;
    }
    .tab-details p{
        font-size: 11px;
    }
    #service h3 a{
        font-size: 24px;
    }
    .title-part i{
        font-size: 40px;
    }
}
@media screen and (min-width: 999px) and (max-width: 1024px){
    #service{
        margin: 5em 0;
    }
    .abt-sentences{
        margin: 20px 0;
    }
    .about-image2{
        right: 15%;
        left: 0;
        top: 21%;
    }
    #service .main-img:after{
        left: 4em;
        top: 2em;
        width: 68%;
        height: 98%;
    }
    .about-image1 img, .about-post-color{
        width: 250px;
        height: 250px;
    }
    .about-image2 img{
        width: 250px;
        height: 250px;
    }
    .tab-details i{
        width: auto;
        font-size: 35px;
    }
    #service h4{
        font-size: 15px;
    }
    .main-abt-para{
        font-size: 11px;
        margin: 8px 0 12px;
        line-height: 1.8;
    }
    #service .title-part .small-title{
        font-size: 12px;
    }
    .tab-details p{
        font-size: 11px;
    }
    #service h3 a{
        font-size: 24px;
    }
    .title-part i{
        font-size: 40px;
    }
    
}
@media screen and (min-width: 1366px) and (max-width: 1400px){
    .about-image2{
        right: 15%;
        left: 0;
        top: 21%;
    }
    #service .main-img:after{
        left: 5em;
        top: 2em;
        width: 69%;
        height: 100%;
    }
    .about-image1 img, .about-post-color{
        width: 400px;
        height: 300px;
    }
    .about-image2 img{
        width: 400px;
        height: 300px;
    }
}