/*!
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 design that blends minimal, elegant, and sophisticated aesthetics with stunning functionality. Built for businesses, agencies, industrial manufacturing, industrial equipment, industrial machinery, industrial automation, Industry, industrial engineering, industrial design , industrial solutions and creative professionals, this theme offers a clean, retina-ready, and responsive layout that ensures a beautiful browsing experience across all devices. Its mobile-friendly structure and faster page load time make it ideal for showcasing services, portfolios, and industrial projects with ease. Developers will appreciate the optimized code, secure and clean code, and seamless integration with Bootstrap, ensuring smooth performance and reliability. The theme includes powerful customization options, allowing users to tailor every section, from the banner to the testimonial section, team area, and strategically placed Call to Action Button (CTA). With rich personalization options and convenient shortcodes, building an interactive and stunning website becomes effortless. Designed to be agency-friendly, the theme supports advanced layouts, animated sections, and visually appealing elements that enhance user engagement. It also features built-in social media integration to help businesses expand their digital presence. Whether you're building a corporate site, startup page, or industrial portfolio, this theme’s multipurpose design ensures maximum flexibility for any industry. Fully translation-ready, the Industrial Revolution works perfectly for global brands. Its user-friendly interface makes setup simple, even for beginners, while providing tools that even a seasoned developer will value. Every detail, from typography to spacing, is thoughtfully crafted to deliver a luxurious, high-quality look. Clean, interactive, and highly customizable, this theme offers everything you need to build a powerful online presence inspired by the spirit of innovation.
Version: 0.1
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;
    }
}