/*!
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 multipurpose and modern WordPress theme that blends minimal, elegant, and sophisticated aesthetics with powerful functionality, designed for businesses, agencies, industrial manufacturing units, industrial equipment providers, industrial machinery suppliers, industrial automation firms, industrial engineering companies, industrial design experts, industrial solution providers, and creative professionals, while also catering seamlessly to construction contractors, logistics companies, energy solution providers, chemical manufacturing units, metal fabrication workshops, automotive engineering firms, renewable energy plants, heavy equipment suppliers, warehouse management companies, and industrial safety consultants aiming to build a strong digital presence. Featuring a clean, retina-ready, and fully responsive layout, the theme ensures a beautiful browsing experience across all devices, supported by a mobile-friendly structure and fast-loading performance ideal for showcasing services, portfolios, and large-scale industrial projects. Developers and agencies will appreciate its optimized, secure, and clean codebase, along with smooth Bootstrap integration for reliable performance. The Industrial Revolution theme includes powerful customization options—covering banners, testimonial areas, team sections, and strategically placed CTAs—allowing users to personalize every detail effortlessly. Rich personalization settings, advanced layouts, animated elements, and convenient shortcodes make it easy to build an interactive, visually impressive website that enhances user engagement. With built-in social media integration, global translation readiness, and an intuitive user interface suitable for both beginners and seasoned developers, this theme delivers maximum flexibility for corporate sites, startup pages, industrial portfolios, and global brands. Every design element—from typography to spacing—is thoughtfully crafted to provide a luxurious, high-quality, and innovation-driven digital presence.
Version: 0.1.3
Requires at least: 5.5
Tested up to: 6.8
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;
    }
}