/*!
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 lubricant refineries, manufacturing units, equipment providers, machinery suppliers, and automation firms. It also caters seamlessly to construction contractors, logistics companies, chemical manufacturers, renewable energy plants, and industrial safety consultants, all of whom aim to establish a strong digital presence in the modern business landscape. With a clean, retina-ready, and fully responsive layout, this theme provides a beautiful browsing experience across all devices, thanks to its mobile-friendly structure and fast-loading performance, perfect for showcasing services, portfolios, and large-scale projects in the industrial sector, such as steel and oil facilities. Developers and agencies will appreciate its optimized, secure codebase, along with smooth Bootstrap integration for dependable performance. Featuring powerful customization options—ranging from banners and testimonials to team sections and strategically placed CTAs—users can tailor every aspect with ease. Rich personalization settings, advanced layouts, animated elements, and handy shortcodes facilitate the creation of an interactive, visually appealing website that enhances user engagement. With built-in social media integration, global translation readiness, and an intuitive user interface suited for both beginners and experienced developers, this theme offers maximum flexibility for corporate sites, startup pages, and global brands. Every design element—from typography to spacing—has been thoughtfully crafted to deliver a luxurious, high-quality, innovation-driven digital experience for technology companies and other industries alike.
Version: 0.2.2
Requires at least: 5.5
Tested up to: 7.0
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;
}
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: 1025px) and (max-width: 1510px) {
    .main-slider-inner-box h1 {
      font-size: 34px;
    }
}
@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;
    }
}
@media screen and (min-width: 701px) and (max-width: 763px) {
    .main-slider-inner-box h1 {
      font-size: 24px;
    }
}