.solution-sec {
    display: block;
    background-color: #e9eaeb;
    padding: 50px 0;
}

.solution-sec-heading h2 {
    font-size: 50px;
    text-align: center;
    font-weight: 700;
    line-height: 1.6;

}

.zoom-heading {
    font-size: 70px;
    font-weight: 700;
    text-align: center;
    opacity: 0;
    transform: scale(1.5);
    transition: all 1.5s ease;
}

.zoom-heading.active {
    opacity: 1;
    transform: scale(1);
}

.video-sec {
    background: #e9eaeb;
    background-image: url(/wp-content/themes/CertifiedEnergySolution/assets/images/background/bg1.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: flex;
    align-items: center;
    height: 100vh;
    position: relative;
}

.video-sec-heading h2 {
    position: relative;
    z-index: 2;
    font-size: 50px;
    font-weight: 700;
    line-height: 1.6;
    margin-bottom: 40px;
    color: #fff;
    text-align: center;
}

.video-section {

    position: relative;

    padding: 100px 0;

    background: url('../images/video-bg.jpg') center/cover;

}

.video-overlay {

    position: absolute;

    inset: 0;

    background: rgba(0, 0, 0, .45);

}

.video-section .container {

    position: relative;

    z-index: 2;

}

.section-title {

    color: #fff;

    text-align: center;

    font-size: 60px;

    margin-bottom: 60px;

}

.video-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 30px;

}

.video-card {

    background: #fff;

    border-radius: 20px;

    overflow: hidden;

}

.video-thumb {

    position: relative;
    padding-top: 56.25%;
    overflow: hidden;

}

.video-thumb img {

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;

}

.play-btn {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 60px;

    height: 60px;

    border-radius: 50%;

    background: rgba(255, 0, 0, 0.8);

    border: 0;

    color: #fff;

    font-size: 20px;

    cursor: pointer;

}

.video-content {

    padding: 1.5rem;
    color: #333;
    font-size: 16px;


}

/* Popup */

.video-modal {

    position: fixed;

    inset: 0;

    background: rgba(0, 0, 0, .9);

    display: none;

    justify-content: center;

    align-items: center;

    z-index: 99999;

}

.video-modal.active {

    display: flex;

}

.video-box {

    width: 80%;

    max-width: 900px;

    position: relative;

}

.video-box iframe {

    width: 100%;

    height: 500px;

}

.close-video {

    position: absolute;

    right: -20px;

    top: -40px;

    color: #fff;

    font-size: 40px;

    cursor: pointer;

}

.view-btn {

    margin-top: 50px;
    border-radius: 50px;

    text-decoration: none;
    display: inline-block;
    border: 1px solid #fff;
    padding: 10px 35px;
    line-height: 1;
    color: #fff;
    font-size: 16px;

}

.view-btn:hover {
    color: #fff;
    background: #FF5900;
    border: #FF5900;
    transition: all 0.3s ease;
}

.text-center {

    text-align: center;

}

.products-section {

    padding: 100px 0 0;
    background: #fff;

}

.products-heading h2 {
    font-size: 40px;
    font-weight: 700;
    color: #222;
    line-height: 1.1;
}

.products-heading {

    text-align: center;

    margin-bottom: 60px;

}

.product-card {

    position: relative;

    border-radius: 5px;

    overflow: hidden;
    text-align: center;
}

.product-card img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: .6s;

}

.product-card:hover img {

    transform: scale(1.08);

}

.product-overlay {

    content: '';
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(0deg, #888888d4 0%, transparent 45% 45%);

}

.product-content {

    position: absolute;

    left: 40px;

    right: 40px;

    bottom: 0px;
    padding-bottom: 15px;
    z-index: 2;

}

.product-content h3 {

    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    color: #222;
    text-shadow: 0 1px 12px rgba(255, 255, 255, 0.9), 0 0 4px rgba(255, 255, 255, 0.85);
}

.product-content a {

    display: inline-block;

    color: #fff;

    border-radius: 40px;

    text-decoration: none;
    margin-top: 0px;
    border: 1px solid #fff;
    padding: 10px 35px;
}

.product-content a:hover,
.view-more a:hover {
    transition: all 0.3s ease;
    background: #FF5900;
    color: #fff;
    border-color: #FF5900;
}

.swiper-button-next,
.swiper-button-prev {

    width: 55px;

    height: 55px;

    background: rgba(0, 0, 0, .5);

    color: #fff !important;

}


.swiper-pagination {

    margin-top: 40px;

    position: relative;

}

.product-swiper-pagination {
    bottom: 0 !important;
}

.product-swiper-pagination span {
    width: 14px;
    height: 14px;
    border: 2px solid #a52228;
    box-sizing: border-box;
    margin: 0 5px;
    background: none;
}

.product-swiper-pagination .swiper-pagination-bullet-active {
    background: #a52228;
}

.nxt-btn-prod {
    background: rgba(0, 0, 0, 0.7);
    right: 7% !important;
    line-height: 50px;
    text-align: center;
    position: absolute !important;
    width: 50px !important;
    height: 50px !important;
    cursor: pointer !important;
    top: 35% !important;
    margin-top: -25px !important;
    z-index: 33 !important;
}

.prev-btn-prod {
    background: rgba(0, 0, 0, 0.7);
    left: 7% !important;
    line-height: 50px;
    text-align: center;
    position: absolute !important;
    width: 50px !important;
    height: 50px !important;
    cursor: pointer !important;
    top: 35% !important;
    margin-top: -25px !important;
    z-index: 33 !important;
}

.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
    font-size: 14px !important;
    color: #fff !important;
    position: relative;
}

.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
    font-size: 14px !important;
    color: #fff !important;
    position: relative;
}

section.rev-sec {
    background: #e9eaeb;
    background-image: url(/wp-content/themes/CertifiedEnergySolution/assets/images/background/bg2.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: flex;
    align-items: center;
    height: 100vh;
    position: relative;
}

.rev-post-card {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.blog-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    transition: transform 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
}

.blog-card:hover {
    transform: translateY(-5px);
}

.blog-content h3 {
    font-size: 1.2em;
    margin-bottom: 1rem;
    color: #333;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rev-sec-heading h2 {
    font-size: 50px;
    text-align: center;
    font-weight: 700;
    line-height: 1.6;
    margin-bottom: 20px;
    color: #fff;
}

.blog-image {
    position: relative;
    padding-top: 56.25%;
    overflow: hidden;
}

.blog-image a img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.blog-content {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.read-more {
    position: relative;
    display: inline-block;
    margin-top: 35px;
    position: relative;
    padding-right: 20px;
}

.read-more:hover {
    color: #a52228;
}

.read-more i {
    position: absolute;
    right: 0;
    top: 1px;
    font-size: 16px;
    transform: rotate(-130deg);
}

.news-section {
    background: #e9eaeb;
    background-image: url(/wp-content/themes/CertifiedEnergySolution/assets/images/background/bg3.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: flex;
    align-items: center;
    height: 100vh;
    position: relative;

}

.news-section::before {

    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);

}

.news-section .container {

    position: relative;
    z-index: 2;

}

.newssection-title {

    text-align: center;
}

.newssection-title h2 {
    font-size: 50px;
    text-align: center;
    font-weight: 700;
    line-height: 1.6;
    margin-bottom: 20px;
    color: #fff;
}

.swiper-pagination.news-swiper-pagination {
    bottom: 0 !important;
}

.news-swiper-pagination .swiper-pagination-bullet {
    width: 14px;
    height: 14px;
    border: 2px solid #fff;
    box-sizing: border-box;
    margin: 0 5px;
    background: none;
}

.news-swiper-pagination .swiper-pagination-bullet-active {
    width: 14px;
    height: 14px;
    border: 2px solid #333;
    box-sizing: border-box;
    margin: 0 5px;
    background: #fff;
}

.news-card {

    display: flex;

    background: #fff;

    border-radius: 15px;

    overflow: hidden;

}

.news-content {

    width: 45%;

    padding: 50px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}

.news-date {
    font-size: 14px;
    color: #666;
    line-height: 1;
}

.news-content h3 {

    color: #222;
    font-weight: 700;
    font-size: 21px;
    margin-top: 10px;
    height: 56px;
    line-height: 28px;
    margin: 25px 0;

}

.news-content p {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    line-height: 1.4;

}

.news-btn {
    display: inline-block;
    margin-top: 35px;
    position: relative;
    padding-right: 20px;

}

.news-image {

    width: 55%;

}

.news-image img {

    width: 100%;
    height: 100%;
    object-fit: cover;

}

.news-prev,
.news-next {

    color: #fff;
    background: none;
}

.news-prev {

    left: 0px !important;

}

.news-next {
    right: 0px !important;
}

.news-swipper-wrapper {
    margin-bottom: 50px;
}

.swiper-pagination {
    position: relative;
    margin-top: 40px;
}
.productsSwiper .swiper-wrapper {
    margin-bottom: 70px;
}
.product-sec .product-swiper-pagination {
    bottom: 0px !important;
    margin-top: 0 !important;
}

.view-more {

    text-align: center;
    position: relative;
    z-index: 3;
}

.view-more a {

    text-decoration: none;
    transition: all 0.3s ease;
    border-radius: 25px;
    margin-top: 5px;
    display: inline-block;
    border: 1px solid #fff;
    padding: 10px 35px;
    line-height: 1;
    color: #fff;
    font-size: 16px;

}

/* =====================================
   STORY SECTION
===================================== */

.story-section {
    position: relative;
}

/* Fixed Background */

.story-bg {

    position: sticky;

    top: 0;

    height: 100vh;

    background: url("https://www.sigenergy.com/uploads/en_content/1741146154426333.jpg") center center no-repeat;

    background-size: cover;

    z-index: 1;

}

/* Dark Overlay */

.story-overlay {

    position: absolute;

    inset: 0;

    top: 0;
    left: 0;

    width: 100%;
    height: 100vh;

    background: rgba(0, 0, 0, .45);

    pointer-events: none;

    z-index: 2;

}

/* Content Wrapper */

.story-wrapper {

    position: relative;

    z-index: 5;

    height: 100vh;

    overflow-y: auto;

    scroll-snap-type: y mandatory;

    scrollbar-width: none;
}

.story-wrapper::-webkit-scrollbar {

    display: none;

}

/* Each Section */

.story-item {

    min-height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;
    scroll-snap-align: start;
    padding: 80px 20px;

}

/* Content Box */

.story-content {

    max-width: 700px;

    text-align: center;

    color: #fff;

    opacity: 0;

    transform: translateY(80px);

    transition: .8;

}

/* Animation */

.story-content.show {

    opacity: 1;

    transform: translateY(0);

}

/* Heading */

.story-content h2 {
    font-size: 50px;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    color: #fff;
}

/* Paragraph */

.story-content p {
    font-size: 25px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    color: #fff;
    line-height: 1.6;

}

/* Button */

.story-content .btn {

    display: inline-block;

    padding: 16px 45px;

    border: 2px solid #fff;

    color: #fff;

    text-decoration: none;

    transition: .4s;

}


/* Mobile */


.story-section {
    position: relative;
    background: #e9eaeb;
    background-image: url(/wp-content/themes/CertifiedEnergySolution/assets/images/background/bg4.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    align-items: center;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

.support-section {
    background: #151515;
    padding: 90px 0;

}

.support-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 12px;

}

.support-card {

    position: relative;
    overflow: hidden;
    border-radius: 6px;
    cursor: pointer;
    margin-top: 20px;

}

.support-card img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: .6s;

}

.support-card:hover img {

    transform: scale(1.08);

}

.support-overlay {

    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    align-items: center;

    padding: 10px;

    background: linear-gradient(to top,
            rgba(0, 0, 0, .65) 0%,
            rgba(0, 0, 0, .15) 45%,
            rgba(0, 0, 0, 0) 100%);

}

.support-overlay h2 {

    font-size: 38px;
    font-weight: bold;
    color: #fff;
}


.res-sec {
    background: #e9eaeb;
    background-image: url(/wp-content/themes/CertifiedEnergySolution/assets/images/background/bg5.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: flex;
    align-items: center;
    height: 100vh;
    position: relative;
}

.res-sec-heading {
    width: 60%;
    margin: 0 auto;
}

.res-sec-heading p {
    color: #fff;
    text-align: center;
    font-size: 20px;
    line-height: 1.6;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.res-sec-heading h2 {
    font-size: 50px;
    margin-bottom: 1.5rem;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    color: #fff;
    text-align: center;
}

.comm-sec {
    background: #e9eaeb;
    background-image: url(/wp-content/themes/CertifiedEnergySolution/assets/images/background/bg6.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: flex;
    align-items: center;
    height: 100vh;
    position: relative;
}

.comm-sec-heading {
    width: 60%;
    margin: 0 auto;
}

.comm-sec-heading p {
    color: #fff;
    text-align: center;
    font-size: 20px;
    line-height: 1.6;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.comm-sec-heading h2 {
    font-size: 50px;
    margin-bottom: 1.5rem;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    color: #fff;
    text-align: center;
}

.video-busnes-banner {

    position: relative;

    height: 100vh;

    overflow: hidden;

}

.bg-video {

    position: absolute;

    top: 50%;

    left: 50%;

    min-width: 100%;

    min-height: 100%;

    width: 100%;

    height: auto;

    transform: translate(-50%, -50%);

    object-fit: cover;

    z-index: 1;

}

.video-busnes-overlay {

    position: absolute;

    inset: 0;


    z-index: 2;

}

.video-busnes-content {

    position: relative;

    z-index: 3;

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    color: #fff;

    margin-top: 8%;
}

.video-busnes-content h1 {

    font-size: 60px;
    line-height: 1.6;

    font-weight: 700;


}

.highlight-title {
    color: #FF5900
}

.video-busnes-content h6 {

    color: #fff;
    font-size: 36px;
    font-weight: 500;

}

.banner-btn {

    display: inline-block;

    padding: 15px 45px;

    border: 2px solid #fff;

    border-radius: 50px;

    color: #fff;

    text-decoration: none;

    transition: .4s;

}

.banner-btn:hover {

    background: #fff;

    color: #000;

}

.business-pg-sec-two-cont p {
    font-size: 18px;
    line-height: 1.8;
    margin-top: 40px;
    padding: 0 100px;
    text-align: center;
    color: #fff
}

.business-pg-sec-two-head h2 {
    font-size: 40px;
    text-align: center;
    color: #fff;
    font-family: 'Poppins-Light';
}

.business-sec-two {
    background: #151515;
    padding: 100px 0;
}

.business-pg-sec-three-right-col:before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to left, transparent 0%, transparent 60%, #fff 100%);
    pointer-events: none;
    z-index: 1;
}

.business-pg-sec-four-right-col:before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to left, transparent 0%, transparent 60%, #000 100%);
    pointer-events: none;
    z-index: 1;
}

.business-sec-three,
.business-sec-four,
.utility-sec-two {
    display: flex;
    align-items: center;
    background: #fff;
    position: relative;
    overflow: hidden;
    padding: 0;
}

.business-pg-sec-three-left-col,
.business-pg-sec-four-left-col,
.utility-pg-sec-two-left-col {
    box-sizing: border-box;
    padding-left: 25%;
    padding-right: 0%;
    z-index: 1;
    margin: auto 0;
    height: 100%;
    align-content: space-evenly;
}

.res-pg-sec-four-rgt-col {
    box-sizing: border-box;
    padding-left: 0;
    padding-right: 25%;
    z-index: 1;
    margin: auto 0;
    height: 100%;
    align-content: space-evenly;
}

.res-pg-sec-four-left-col:before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, transparent 0%, transparent 60%, #000 100%);
    pointer-events: none;
    z-index: 1;
}

.business-sec-nine1 {
    background: #000;
    padding: 100px;
    color: #fff;
}

.business-pg-sec-nine-head1 {
    text-align: center;
    width: 70%;
    margin: 0 auto;
    margin-bottom: 60px;

}

.business-pg-sec-nine-head1 h2 {
    font-size: 48px;
    line-height: 1.1;
    margin-bottom: 50px;
}

.business-pg-sec-nine-head1 p {
    font-size: 18px;
    line-height: 1.8;
}

.business-pg-sec-nine-cont1 h4 {
    color: #ff5900;
}

.business-pg-sec-three-head h2,
.business-pg-sec-four-head h2,
.utility-pg-sec-two-head h2 {
    line-height: 1.2;
    font-size: 40px;
    color: #222;
    font-family: 'Poppins-Regular';
}

.business-pg-sec-four-head h2,
.business-pg-sec-four-cont,
.business-pg-sec-four-grid {
    color: #fff !important;
}

.business-pg-sec-three-cont,
.business-pg-sec-four-cont,
.utility-pg-sec-two-cont {
    margin-top: 25px;
    color: #222;
}

.business-pg-sec-three-grid,
.business-pg-sec-four-grid,
.utility-pg-sec-two-grid {
    color: #333;
    margin-top: 90px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    justify-content: space-between;
    flex-wrap: inherit;
    gap: 30px;
}

.business-pg-sec-three-grid-col img,
.business-pg-sec-four-grid-col img {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 50px;
}

.business-pg-sec-three-grid-col,
.business-pg-sec-four-grid-col,
.utility-pg-sec-two-grid-col {
    text-align: center;
}

.business-pg-sec-three-right-col,
.business-pg-sec-four-right-col,
.utility-pg-sec-two-right-col {
    position: relative;
    text-align: center;
}

.right-video {
    max-width: 100%;
    object-fit: cover;
    min-height: 650px;
    height: 88vh;
}

.business-pg-sec-three-grid-col h4 {
    font-size: 18px;
    margin-top: 5px;
    font-family: 'Poppins-Regular';
}

.business-pg-sec-four-grid-col h4,
.utility-pg-sec-two-grid-col h4,
.res-pg-sec-four-grid-col h4 {
    font-size: 16px;
    margin-top: 5px;
    font-family: 'Poppins-Regular';
}

.business-pg-sec-four-grid-col h3,
.res-pg-sec-four-grid-col h3 {
    line-height: 40px;
    font-size: 24px;
}
.business-pg-sec-two-cont img {
    width: 40%;
}
.res-pg-sec-four-grid {
    margin-top: 50px;
}

.business-sec-five {
    background: #e9eaeb;
    background-image: url(/wp-content/themes/CertifiedEnergySolution/assets/images/background/bg7.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    align-items: center;
    height: 100vh;
    position: relative;
    color: #fff;
    align-content: space-evenly;
}

.business-sec-five-grid-cont {
    color: #333;
    margin-top: 90px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    justify-content: space-between;
    flex-wrap: inherit;
    gap: 30px;
}

.business-pg-sec-five-grid-col img,
.business-pg-sec-sev-grid-col img {
    width: auto;
    max-width: 25%;
    max-height: 25%;
}

.business-pg-sec-five-grid-col {
    text-align: center;
}

.business-cont-five-head-sec h2 {
    color: #ff5900;
    line-height: 1.2;
    font-size: 40px;
    text-align: center;
}

.business-sec-five-content p {
    margin-top: 40px;
    color: #fff;
    line-height: 1.6;
    font-size: 20px;
    text-align: center;
}

.business-pg-sec-five-grid-col h4,
.business-pg-sec-sev-grid-col h4 {
    font-size: 16px;
    margin-top: 5px;
    font-family: 'Poppins-Regular';
    color: #fff;
}

.business-sec-six {
    background: #e9eaeb;
    background-image: url(/wp-content/themes/CertifiedEnergySolution/assets/images/background/bg8.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    align-items: center;
    height: 100vh;
    position: relative;
    color: #fff;
    align-content: space-evenly;
}

.business-pg-sec-six-head h2,
.business-pg-sec-sev-head h2 {
    color: #FF5900;
    font-weight: 600;
    line-height: 1.2;
    font-size: 40px;
    text-align: center;
}

.business-pg-sec-six-cont p,
.business-pg-sec-sev-cont p,
.business-pg-sec-egt-cont p {
    margin-top: 40px;
    line-height: 1.6;
    text-align: center;
    font-size: 20px;
}

.business-pg-sec-six-head h2,
.business-pg-sec-sev-head h2,
.business-pg-sec-egt-head h2 {
    color: #ff5900;
    line-height: 1.2;
    font-size: 40px;
    text-align: center;
}

.business-pg-sec-six-grid,
.business-sec-sev-grid-cont,
.business-sec-egt-grid-cont {
    color: #333;
    margin-top: 90px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    justify-content: space-between;
    flex-wrap: inherit;
    gap: 30px;
}

.business-pg-sec-six-grid-col,
.business-pg-sec-egt-grid-col {
    text-align: center;
}

.business-pg-sec-six-grid-col h3,
.business-pg-sec-egt-grid-col h3 {
    line-height: 40px;
    color: #FF5900;
    font-weight: 700;
    font-size: 26px;
}

.business-pg-sec-six-grid-col h4,
.business-pg-sec-egt-grid-col h4 {
    line-height: 1.4;
    color: #ffffff;
    font-size: 16px;
    font-family: 'Poppins-Regular';
}

.business-sec-nine {
    background: #e9eaeb;
    background-image: url(/wp-content/themes/CertifiedEnergySolution/assets/images/background/bg9.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    align-items: center;
    height: 100vh;
    position: relative;
    color: #fff;
    align-content: space-evenly;
}

.business-pg-sec-nine-head h2 {
    font-size: 40px;
    color: #fff;
    font-family: 'Poppins-Light';
}

.business-pg-sec-nine-cont p {
    margin-top: 10px;
    line-height: 1.6;
    font-size: 20px;
}

.business-pg-sec-nine-cont1 ul {
    margin-top: 25px;
    line-height: 1.6;
    padding-left: 30px;
}

.business-pg-sec-nine-cont1 ul li {
    margin-top: 10px;
    line-height: 1.6;
    font-size: 16px;
}

/* ===================================
   Applications Section
=================================== */

.application-section {
    background: #000;
    padding: 90px 0;
    padding-bottom: 0;
    overflow: hidden;
}

.section-title {
    text-align: center;
    margin-bottom: 60px;
}

.section-title h2 {
    color: #fff;
    font-size: 56px;
    font-weight: 700;
    margin-bottom: 20px;
}

.section-title p {
    color: #cfcfcf;
    font-size: 18px;
    max-width: 900px;
    margin: auto;
    line-height: 1.8;
}

/* ==========================
      Swiper
========================== */

.applicationSwiper {
    width: 100%;
    overflow: visible;
    padding-bottom: 20px;
}

.applicationSwiper .swiper-slide {
    width: 70%;
    transition: .5s;
    transform: scale(.82);
    opacity: .45;
}

.applicationSwiper .swiper-slide-active {
    transform: scale(1);
    opacity: 1;
}

.applicationSwiper .swiper-slide-prev,
.applicationSwiper .swiper-slide-next {
    opacity: .75;
}

/* ==========================
      Card
========================== */

.application-card {

    position: relative;

    height: 620px;

    border-radius: 8px;

    overflow: hidden;

}

.application-card img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    transition: .7s;

}

.application-card:hover img {

    transform: scale(1.08);

}

/* ==========================
      Overlay
========================== */

.application-overlay {

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    padding: 45px;

    background: linear-gradient(to top,
            rgba(0, 0, 0, .75),
            rgba(0, 0, 0, .15),
            transparent);

}

.application-overlay h3 {

    color: #fff;

    font-size: 34px;

    margin-bottom: 20px;

    font-weight: 700;

}

.learn-btn {

    display: inline-block;

    padding: 12px 35px;

    border: 1px solid #fff;

    color: #fff;

    text-decoration: none;

    border-radius: 50px;

    transition: .3s;

}

.learn-btn:hover {

    background: #fff;

    color: #000;

}

.hm-review-sec {
    background: #000;
    padding: 7% 0;
}

/* ==========================
      Navigation
========================== */

.app-prev,
.app-next {

    width: 60px !important;

    height: 60px !important;

    border-radius: 50%;

    background: rgba(0, 0, 0, .45);

    color: #fff !important;

}

.app-prev::after,
.app-next::after {

    font-size: 22px !important;

    font-weight: bold;

}

.app-prev {

    left: 8% !important;

}

.app-next {

    right: 8% !important;

}

.video-cont-overlaybg h1 {
    color: #fff;
    font-size: 50px;
    line-height: 1.6;
}

.video-cont-overlaybg {
    width: 60%;
    margin: 0 auto;
    z-index: 2;
    padding: 30px 50px;
    text-align: center;
    background: rgb(0 0 0 / 40%);
}

.video-cont-overlaybg h4 {
    font-size: 26px;
    color: #fff;
    font-weight: 500;
    font-family: 'Poppins-Regular';
}

.video-cont-overlaybg p {
    line-height: 1.6;
    margin-top: 25px;
    margin-bottom: 0;
}

.utility-pg-sec-two-cont p {
    line-height: 1.6;
}

.watch-video {
    text-decoration: none;
    transition: all 0.3s ease;
    border-radius: 25px;
    margin-top: 25px;
    display: inline-block;
    border: 1px solid #fff;
    padding: 10px 35px;
    line-height: 1;
    color: #fff;
    font-size: 16px;
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: auto;
    height: auto;
    background: none;
}

.utility-pg-sec-two-right-col:before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to left, transparent 0%, transparent 60%, #000 100%);
    pointer-events: none;
    z-index: 1;
}

.tab-menu,
.tab-menu-2,
.tab-menu-3,
.tab-menu-4 {
    display: flex;
    margin-bottom: 40px;
    border-bottom: 2px solid #555;
    width: fit-content;
}

.tab-btn,
.tab-btn-2,
.tab-btn-3,
.tab-btn-4 {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    position: relative;
    color: #fff;
    font-weight: 700;
    padding: 0px 30px;
    padding-bottom: 10px;
    opacity: 0.7;
}

.tab-btn.active,
.tab-btn-2.active,
.tab-btn-3.active,
.tab-btn-4.active {
    color: #fff;
    opacity: 1;
}

.tab-btn.active::after,
.tab-btn-2.active::after,
.tab-btn-3.active::after,
.tab-btn-4.active::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 4px;
    background: #fff;
}

.tab-content,
.tab-content-2,
.tab-content-3,
.tab-content-4 {
    display: none;
    animation: fade .5s;
}

.tab-content.active,
.tab-content-2.active,
.tab-content-3.active,
.tab-content-4.active {
    display: block;
}

@keyframes fade {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.utility-sec-three {
    padding: 5%;
}

.utility-pg-sec-three-head {
    text-align: center;
}

.utility-pg-sec-three-head h3 {
    font-size: 42px;
    line-height: 1.2;
}

.utility-pg-sec-three-head h6 {
    text-align: center;
    font-size: 18px;
    line-height: 1.1;
}

.utility-pg-sec-three-right-col {
    border-left: 2px solid #ddd;
    padding: 0 10%;
}

.utility-pg-sec-three-right-col h2 {
    font-size: 42px;
    margin-bottom: 25px;
}

.stats {
    display: flex;
    justify-content: center;
    gap: 60px;
    color: #fff;
    text-align: center;
    margin-top: 5%;
}

.stats h2 {
    font-size: 26px;
    margin-bottom: 0;
}

.tab-cont p {
    text-align: center;
}

.tab-cont {
    margin-top: 25px;
}

.txt-small {
    font-size: 12px;
}

section.utility-sec-four {
    padding: 5% 0;
}

.utility-pg-sec-four-head h2 {
    text-align: center;
    font-size: 42px;
    margin-bottom: 60px;
}

.utility-pg-sec-four-left-col {
    margin-left: 20%;
}

.utility-pg-sec-four-right-col .right-video {
    object-fit: contain;
}

.utility-pg-sec-four-grid-col h4 {
    font-size: 42px;
    line-height: 1.4;
}

.utility-pg-sec-four-grid-col h6 {
    line-height: 1.4;
    font-size: 20px;
    opacity: 0.8;
}

.utility-pg-sec-four-grid-col {
    margin-bottom: 40px;
}
.video-cont-overlaybg p img {
    width: 40%;
}

.utility-sec-five {
    background: #e9eaeb;
    background-image: url(/wp-content/themes/CertifiedEnergySolution/assets/images/background/bg10.jpeg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    align-items: center;
    height: 100vh;
    position: relative;
    color: #fff;
    align-content: space-evenly;
}

.utility-lft-cont-five-head-sec h4 {
    font-size: 24px;
    cursor: pointer;
    position: relative;
    color: #fff;
    font-weight: 700;
    padding: 0px 30px 10px;
    border-bottom: 5px solid #fff;
    width: fit-content;
    margin-bottom: 40px;
}

.utility-lft-cont-five-head-sec img {
    border-radius: 20px;
}

.utility-cont-sec-five {
    width: 95%;
}

.utility-rgt-cont-five-head-sec h2 {
    font-size: 24px;
    color: #fff;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 40px;
}

.utility-pg-sec-five-grid {
    margin-top: 90px;
    display: flex;
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.utility-pg-sec-five-grid-col h4 {
    color: #FF5900;
    font-size: 26px;
    padding-right: 5px;
}

.utility-pg-sec-five-grid-col {
    width: min-content;
}

.utility-pg-sec-six-head h4 {
    margin-top: 10px;
    line-height: 1.6;
    color: #FF5900;
    font-size: 24px;
}

.utility-pg-sec-six-head h2 {
    font-size: 40px;
    line-height: 1.6;
}

.utility-pg-sec-six-col {
    width: 60%;
    margin: 0 auto;
}

.utility-pg-sec-egt {
    padding: 0 15% 0 10%;
}

.utility-pg-img-sec-egt img {
    object-fit: none;
}

.utility-pg-sec-egt-head h2 {
    font-size: 40px;
}

.utility-pg-sec-egt-cont p {
    line-height: 1.6;
    margin-top: 25px;
}

.utility-pg-sec-egt2 {
    padding: 0 10% 0 15%;
}

.tab-content-2 .tab-cont p {
    text-align: left;
    padding-left: 10%;
}

.utility-pg-sec-nine-head h2 {
    font-size: 40px;
    line-height: 1.1;
}

.utility-pg-sec-nine-head h5 {
    font-size: 20px;
    margin-top: 10px;
}

.utility-pg-sec-nine-col {
    margin-bottom: 60px;
}

.business-sec-ten {
    background: #e9eaeb;
    background-image: url(/wp-content/themes/CertifiedEnergySolution/assets/images/background/bg11.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    align-items: center;
    height: 100vh;
    position: relative;
    color: #fff;
    align-content: space-evenly;
}

.business-pg-sec-ten-head h2,
.utility-pg-sec-ten-head h2 {
    font-size: 30px;
    line-height: 1.4;
    margin-bottom: 25px;
}

.business-pg-sec-ten-cont h3,
.utility-pg-sec-ten-cont h3 {
    font-size: 34px;
    color: #FF5900;
}

.business-pg-sec-ten-cont p,
.utility-pg-sec-ten-cont p {
    font-size: 18px;
    margin-top: 30px;
    line-height: 1.5;
}

.utility-pg-sec-ten-col {
    text-align: left;
}

.utility-sec-ele {
    background: #e9eaeb;
    background-image: url(/wp-content/themes/CertifiedEnergySolution/assets/images/background/bg12.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    align-items: center;
    position: relative;
    color: #fff;
    align-content: space-evenly;
}

.tab-content-3 .tab-cont p {
    text-align: left;
}

.utility-pg-sec-ele-head h2 {
    font-size: 40px;
    line-height: 1.1;
}

.utility-pg-sec-ele-head h6 {
    font-size: 16px;
    line-height: 1.4;
    color: #FF5900;
    margin-top: 30px;
}

table.utitity-sec-table {
    width: 100%;
    margin-bottom: 30px;
}

table.utitity-sec-table td {
    padding: 3px;
    vertical-align: top;
}

.pg-bannner-sec_new {
    background-image: url(/wp-content/uploads/2026/07/another-rural-system.jpg);
    background-size: cover;
    background-repeat: no-repeat !important;
    background-position-x: center;
    height: 640px;
    position: relative;
    overflow: hidden;
}

.pg-bannner-sec {
    background-image: url(/wp-content/themes/CertifiedEnergySolution/assets/images/banner/banner6.png);
    background-size: cover;
    background-repeat: no-repeat !important;
    background-position-x: center;
    height: 640px;
    position: relative;
    overflow: hidden;
}
.pg-bannner-sec-team {
    background-image: url(/wp-content/uploads/2026/08/team-desk.png);
    background-size: cover;
    background-repeat: no-repeat !important;
    background-position-x: center;
    height: 800px;
    position: relative;
    overflow: hidden;
}

.products-section {
    padding: 80px 0;
    background: #fff;
}

.product-tabs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 60px;
}

.product-tabs button {
    border: none;
    background: #fff;
    font-size: 16px;
    transition: .3s;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .08);
    display: inline-block;
    padding: 10px 20px;
    border-radius: 20px;
    margin: 0px 10px;
    cursor: pointer;
}

.product-tabs button:hover {
    background: #ff5900;
    color: #fff;
}

.product-tabs button.active {

    background: #a52228;
    color: #fff;

}

.support-card.prod-pg-support {
    height: fit-content;
}

.prod-pg-support-grid {
    gap: 15px;
    width: 90%;
    margin: 0 auto;
}

.support-section-prod-pg {
    background: #e9eaeb;
    padding: 50px 0 70px;
}

.products-grid {

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;

}

.support-grid.product-pg-support-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.product-card {

    background: #f7f7f7;
    border-radius: 15px;
    text-align: center;
    transition: .4s;

}

.product-card img {

    width: 100%;
    max-height: 100%;
    object-fit: contain;

}

.product-card h3 {

    margin: 0 0 10px;

}

.product-card a {

    display: inline-block;
    padding: 12px 35px;
    border: 1px solid #222;
    border-radius: 30px;
    text-decoration: none;
    color: #222;

}

.hide {

    display: none;

}

.show {

    display: block;
    animation: fade .5s;

}

.product-card-cont {
    position: absolute;
    left: 40px;
    right: 40px;
    bottom: 0px;
    padding-bottom: 15px;
    z-index: 2;
}

.product-card-cont .view-more a {
    margin-top: 0;
}

.product-card-cont h3 {
    margin: 0;
    margin-bottom: 10px;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    color: #222;
}

@keyframes fade {

    from {

        opacity: 0;
        transform: translateY(30px);

    }

    to {

        opacity: 1;
        transform: translateY(0);

    }

}

.support-section {
    color: #fff;
}

.support-section h2 {
    text-align: center;
    font-size: 40px;
    line-height: 1.1;
    margin-bottom: 40px;
}

.support-overlay h2 {
    margin-bottom: 0 !important;
    font-size: 30px !important;
}

.support-pg-bannner-sec {
    background-image: url(/wp-content/uploads/2026/08/cp-desk.png);
    background-size: cover;
    background-repeat: no-repeat !important;
    background-position-x: center;
    height: 762px;
    position: relative;
    overflow: hidden;
}

.support-section {

    background: #e9eaeb;
    padding: 5%;

}

.section-title {

    text-align: center;
    font-size: 64px;
    font-weight: 700;
    margin-bottom: 50px;

}

.support-tabs {

    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 60px;

}

.support-banner-cont {
    padding: 0 5%;
    box-sizing: border-box;
    text-align: left;
    top: 50%;
    transform: translateY(-50%);
    bottom: auto;
    position: absolute;
    width: 70%;
}

.support-banner-cont h1 {
    font-family: 'Poppins-Light';
    color: #fff;
    font-size: 32px;
}

.support-tabs button {

    border: none;
    background: #fff;
    padding: 0 25px;
    border-radius: 30px;
    font-size: 16px;
    cursor: pointer;
    transition: .3s;
    margin: 0 5px;
    height: 32px;

}

.support-tabs button.active {

    background: #a52228;
    color: #fff;

}

.support-tabs button:hover {
    background: #FF5900;
    color: #fff;
}

.tab-cont-head {
    font-size: 35px !important;
    color: #333;
}

.tab-content {

    display: none;

}

.tab-content.active {

    display: block;

}

.tab-content h3 {

    font-size: 50px;
    margin-bottom: 30px;

}

.document-list {

    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    padding: 3%;

}

.document-item {

    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 10px;
    text-decoration: none;
    color: #222;
    border-bottom: 1px solid #eee;
    transition: .3s;

}

.document-item:last-child {

    border-bottom: none;

}

.document-list:hover a {
    color: #FF5900;
}

.document-item:hover {
    border-bottom: 1px solid #FF5900;
}

.document-item .left {

    display: flex;
    align-items: center;
    gap: 20px;

}

.document-item i {

    font-size: 18px;

}

.document-item span {

    font-size: 18px;

}

.document-item .right {

    font-size: 18px;
    color: #333;

}

.supprt-section-title {
    text-align: center;
    font-size: 50px;
    font-weight: 700;
    color: #222;
    line-height: 1.4;
}

.faq-section {
    color: #333;
}

.faq-item {

    background: #fff;
    border-radius: 12px;
    margin-bottom: 20px;
    overflow: hidden;
}

.faq-item.active {
    box-shadow: 0 8px 25px rgba(0, 0, 0, .05);

}

.faq-question {

    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 30px;
    cursor: pointer;

}

.faq-question h3 {

    font-size: 20px;
    margin: 0;
    font-family: 'Poppins-Light';
}

.faq-question span {

    font-size: 34px;
    transition: .3s;

}

.faq-answer {

    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease;

}

.faq-answer p {

    padding: 0 30px 30px;
    color: #666;
    line-height: 1.8;

}

.faq-item.active .faq-answer {

    max-height: 250px;

}

.faq-item.active .faq-question span {

    transform: rotate(45deg);

}

.order-pg-form-sec {
    padding: 8% 5%;
}

.order-form-section {
    position: relative;
    margin: 40px 0px;
    padding: 0 20px;
    border-left: 5px solid #FF5900;
}

.form-sec-input input {
    height: 40px;
    border: 1px solid rgba(0, 0, 0, .7);
    padding: 0px 10px;
    border-radius: 7px;
    width: calc(100% - 20px);
    box-sizing: border-box;
    font-size: 14px;
}

.form-sec-input textarea {
    height: 80px;
    border: 1px solid rgba(0, 0, 0, .7);
    padding: 0px 10px;
    border-radius: 7px;
    width: calc(100% - 20px);
    box-sizing: border-box;
    font-size: 14px;
}

.form-sec-input-btn input {
    margin-top: 10px;
    width: 180px;
    text-align: center;
    background: #a52228;
    color: #fff;
    border-color: #a52228;
    border: 1px solid;
    transition: all 0.3s ease;
    border-radius: 25px;
    padding: 10px 35px;
}

.form-sec-input-btn input:hover {
    background: #FF5900;
    border-color: #FF5900;

}

.abtvideo-busnes-banner {
    position: relative;
    height: 80vh;
    overflow: hidden;
}

.abtvideo-busnes-banner .video-busnes-content {
    justify-content: end;
}

.abt-pg-sec-two,
.abt-pg-sec-four {
    background: #e9eaeb;
    padding: 100px 0;
}

.sec-two-cont p {
    line-height: 1.8;
    font-size: 18px;
}

.sec-three-lft-sec,
.sec-three-rgt-sec {
    text-align: center;
    position: relative;
    height: 70vh;
    text-align: center;
    overflow: hidden;
    transition: all 0.3s ease;
}

.sec-three-lft-sec:before,
.sec-three-lft-sec:before {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
}

.sec-three-lft-cont,
.sec-three-rgt-cont {
    position: absolute;
    z-index: 3;
    width: 80%;
    margin: 0 10%;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.sec-three-lft-sec {
    background-image: url(/wp-content/themes/CertifiedEnergySolution/assets/images/background/bg13.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    align-items: center;
    height: 100vh;
    position: relative;
    color: #fff;
    align-content: space-evenly;
}

.sec-three-rgt-sec {
    background-image: url(/wp-content/themes/CertifiedEnergySolution/assets/images/background/bg14.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    align-items: center;
    height: 100vh;
    position: relative;
    color: #fff;
    align-content: space-evenly;
}

.sec-three-lft-cont h2,
.sec-three-rgt-sec h2 {
    font-size: 40px;
}

.sec-three-lft-cont p,
.sec-three-rgt-sec p {
    margin-top: 10px;
    font-size: 20px;
}

.sec-four-col img {
    display: inline-block;
    width: 60px;
    height: 60px;
    position: relative;
    margin: 10px;
}

.sec-four-col h4 {
    font-size: 38px;
    position: relative;
    background-image: linear-gradient(to right, #FF5900 0%, #FF5900 100%);
    -webkit-background-clip: text;
    color: transparent;
}

h2.team-mem-name {
    font-size: 24px !important;
}

.sec-four-col p {
    font-size: 20px;
}

.sec-four-col {
    text-align: center;
}

.sec-four-btm-sec {
    margin-top: 5%;
    text-align: end;
    font-size: 14px;
}
a.tm-mail {
    margin-top: 10px;
}
a.tm-mail:hover {
	color:#ff5900;
}
.abt-pg-sec-five {
    background: #e9eaeb;
    position: relative;
    padding: 100px 0;
}

.abt-pg-sec-five .application-card {
    height: auto;
}

.abt-pg-sec-five .application-overlay {
    background: #f0f0f0;
}

.abt-pg-video-cont {
    display: flex;
    width: 100%;
}

.head-lft-cont {
    width: 40%;
}

.head-rgt-cont {
    width: 60%;
}

.supp-sec-form {
    background: #ffffff;
    border-radius: 20px;
    padding: 50px;
}

.supp-pg-form-sec {
    background: #e9eaeb;
    padding: 3% 0;
}

.supp-input input {
    height: 40px;
    border: 1px solid rgba(0, 0, 0, .7);
    padding: 0px 10px;
    border-radius: 7px;
    width: calc(100% - 20px);
    box-sizing: border-box;
    font-size: 14px;
}

.input-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.supp-input textarea {
    height: 120px;
    border: 1px solid rgba(0, 0, 0, .7);
    padding: 0px 10px;
    border-radius: 7px;
    width: calc(100% - 20px);
    box-sizing: border-box;
    font-size: 14px;
}

.supp-input-btn input {
    margin-top: 10px;
    width: 180px;
    text-align: center;
    background: #a52228;
    color: #fff;
    border-color: #a52228;
    border: 1px solid;
    transition: all 0.3s ease;
    border-radius: 25px;
    padding: 10px 35px;
}

.supp-input-btn {
    text-align: center;
}

.supp-sec-form h3 {
    text-align: center;
    margin-bottom: 30px;
}

.form-sec-input select {
    height: 40px;
    border: 1px solid rgba(0, 0, 0, .7);
    padding: 0px 10px;
    border-radius: 7px;
    width: calc(100% - 20px);
    box-sizing: border-box;
    font-size: 14px;
}

.prod-pg-bannner-sec {
    background-size: cover;
    background-repeat: no-repeat !important;
    background-position-x: center;
    height: 640px;
    position: relative;
    overflow: hidden;
}

.prod-pg-sec-two {
    background: #e9eaeb;
    position: relative;
    padding: 100px 0;
}

.sec-two-lft-col h2 {
    font-size: 48px;
    font-weight: 700;
    color: #222;
    line-height: 1.1;
}

.sec-two-rgt-col p {
    line-height: 1.6;
}

.rp-sec {
    padding: 5% 0;
    text-align: center;
}

.prod-pg-sec-three {
    padding: 100px 0;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.prod-pg-sec-three-lft-col {
    margin: auto 50px auto 100px;
    background: rgb(0 0 0 / 60%);
    padding: 50px;
    color: #fff;
}

.prod-pg-sec-three-lft-col h2 {
    font-size: 48px;
    line-height: 1.1;
}

.prod-pg-sec-three-lft-col p {
    line-height: 1.6;
    margin-top: 25px;
}

.ces-pro-detail h6 {
    color: #FF5900;
}

.cse-prod-pg-details {
    padding: 100px 0 50px;
}

.ces-prod-pg-sec-five {
    background: #e9eaeb;
    position: relative;
    padding: 100px 0;
}

.ces-prod-pg-sec-five-video-col h2 {
    font-size: 48px;
    line-height: 1.1;
    margin-bottom: 20px;
}

.ces-prod-pg-sec-five-video-col {
    text-align: center;
}

.ces-prod-pg-sec-five-video-col .video-thumb {
    margin-top: 50px !important;
    width: 70%;
    margin: 0 auto;
}

.respg-bannner-sec {
    background-image: url(/wp-content/themes/CertifiedEnergySolution/assets/images/background/bg-16.jpg);
    background-size: cover;
    background-repeat: no-repeat !important;
    background-position-x: center;
    height: 95vh;
    position: relative;
    overflow: hidden;
}

.res-pg-sec-four-grid-col {
    border-left: 5px solid #ff5900;
    padding-left: 20px;
    margin-bottom: 20px;
}

.res-busnes-banner {
    background-size: cover;
    background-repeat: no-repeat !important;
    background-position-x: center;
    height: 550px;
    position: relative;
    overflow: hidden;
}

.res-sec-egt-grid-cont {
    color: #333;
    margin-top: 90px !important;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 50%;
    justify-content: space-between;
    flex-wrap: inherit;
    gap: 30px;
    margin: 0 auto;
}

.new_gallary img {
    object-fit: cover !important;
}

.support-pg-bannner-sec_new {
    background-image: url(/wp-content/uploads/2026/08/support-desk.png);
    background-size: cover;
    background-repeat: no-repeat !important;
    background-position-x: center;
    height: 800px;
    position: relative;
    overflow: hidden;
}

.res-sec {
    background-image: url(/wp-content/themes/CertifiedEnergySolution/assets/images/background/bg17.jpg);
}

.order-form-section_new {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    align-items: start;
    margin-bottom: 5%;
    margin-top: 5%;
    text-align: center;
}

.order-form-section_new .text h4 {
    color: #ff5900;
    margin-bottom: 8px;
    font-size: 20px;
    font-weight: 700;
}

.order-form-section_new .text p {
    margin: 0;
}

.order-form-section_new .text a {
    color: #000;
    text-decoration: none;
    font-size: 18px;
    word-break: break-word;
}

.order-form-section_new .text a:hover {
    color: #ff5900;
}


.businesscer-pg-sec-four-grid {
    margin-top: 90px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    justify-content: space-between;
    flex-wrap: inherit;
    gap: 30px;
}

.sec-two-cont img {
    width: 100%;
}

/* ==========================================================
   About page carousel fixes — added 7 Aug 2026
   Scope: .abt-pg-swiper / .abt-pg-video-cont  (About page only)
   Purpose: (1) stop slides expanding past their set width,
            (2) equalise card heights, (3) stop heading
                overlapping the body text.
   To revert: delete this entire block.
   ========================================================== */
.abt-pg-swiper .swiper-slide {
    min-width: 0;
    height: auto;
}

.abt-pg-swiper .video-card {
    height: 100%;
    box-sizing: border-box;
}

.abt-pg-video-cont .head-lft-cont {
    width: 44%;
    padding-right: 16px;
    box-sizing: border-box;
}

.abt-pg-video-cont .head-rgt-cont {
    width: 56%;
}

.abt-pg-video-cont h3 {
    font-size: 24px;
    line-height: 1.3;
    overflow-wrap: break-word;
}


/* ==========================================================
   TEMPORARY — About page carousel hidden at client request
   Added 7 Aug 2026. Hides the video-card carousel section
   on /about/ only (.abt-pg-sec-five exists on that page only;
   do NOT use .application-section, which also appears on
   /business/).
   The Job 3 layout fixes above are deliberately left in place,
   so restoring this section brings it back already corrected.
   TO RESTORE: delete this entire block.
   ========================================================== */
.abt-pg-sec-five {
    display: none;
}

.hero-app {
    position: relative;
    height: 100vh;
    /* min-height:850px; */
    overflow: hidden;
    /* background:#050505; */
    background-image: url(https://certifiedenergysolutions.com.au/wp-content/uploads/2026/08/mysigen-bg.webp);
    display: flex;
    justify-content: center;
    align-items: flex-end;
    isolation: isolate;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* ---------- Background ---------- */

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.hero-bg img {
    transform: none;
    object-fit: cover;
    object-position: center center;
}

/* ---------- Overlay ---------- */

.hero-overlay {

    background:
        linear-gradient(180deg,
            rgba(0, 0, 0, .45),
            rgba(0, 0, 0, .35)),

        radial-gradient(circle,
            rgba(0, 0, 0, .05),
            rgba(0, 0, 0, .55));

}

/* ---------- Phone Groups ---------- */

.hero-left,
.hero-right {
    position: absolute;
    z-index: 5;
    pointer-events: none;
}

.hero-left img,
.hero-right img {
    display: block;
    width: 100%;
    height: auto;
}

.hero-left {
    width: auto;
    max-width: 600px;
  left: 0;
	top: 0;
}

.hero-right {
    width: auto;
    max-width: 600px;
  right:0;
	bottom: 0;
}

/* ---------- Content ---------- */

.hero-content {

    position: relative;

    z-index: 10;

    text-align: center;

    color: #fff;

    padding-bottom: 60px;

    max-width: 700px;

}

.hero-content h1 {

    font-size: 42px;

    font-weight: 700;

    line-height: 1.05;

    margin-bottom: 15px;

    letter-spacing: -2px;

}

.hero-content p {

    font-size: 18px;
    font-weight: 700;
    color: #fff;

}

/* ---------- Edge Shadow ---------- */

/* .hero-app::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:3;

    box-shadow:
    inset 0 0 200px rgba(0,0,0,.55);

    pointer-events:none;

}

.hero-app::after{

content:"";

position:absolute;

inset:0;

pointer-events:none;

background:

radial-gradient(circle,

transparent 45%,

rgba(0,0,0,.35) 80%,

rgba(0,0,0,.8) 100%);

z-index:3;

} */



/*----------------------------------
  Intro Section
-----------------------------------*/

.mysigen-intro {

    position: relative;

    background: #ffffff;

    padding: 90px 20px;

}

.mysigen-intro .container {

    max-width: 1320px;

    margin: 0 auto;

}

.intro-content {

    max-width: 1180px;

    margin: 0 auto;

    text-align: center;

}

.intro-content p {

    margin: 0;

    font-size: 16px;

    line-height: 1.65;

    font-weight: 400;

    color: #222222;

    letter-spacing: -0.01em;

}

/*--------------------------
 Tablet
--------------------------*/

@media (max-width:991px) {

    .mysigen-intro {

        padding: 70px 25px;

    }

    .intro-content {

        max-width: 900px;

    }

    .intro-content p {

        font-size: 22px;

        line-height: 1.7;

    }

}

/*--------------------------
 Mobile
--------------------------*/

@media (max-width:767px) {

    .mysigen-intro {

        padding: 60px 20px;

    }

    .intro-content p {

        font-size: 18px;

        line-height: 1.8;

    }

}

.hero-section {
    background-color: #0b0c10;
    /* Dark premium background */
    color: #ffffff;
    padding: 80px 40px;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.hero-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    /* Gives more breathing room to text */
    gap: 60px;
    align-items: center;
}

/* Left Column Styling */
.hero-content-sec1 {
    display: flex;
    flex-direction: column;
}

.hero-title {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 24px;
    letter-spacing: -0.5px;
}

.hero-description {
    font-size: 1rem;
    line-height: 1.6;
    color: #fff;
    /* Soft gray for high readability */
    margin-bottom: 20px;
}

.link-secondary {
    color: #38bdf8;
    /* Accent color for links */
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    margin-bottom: 35px;
    display: inline-block;
}

.link-secondary-2 {
    color: #ffffff;
    /* Accent color for links */
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    margin-bottom: 35px;
    display: inline-block;
    text-decoration: underline;

}

.link-secondary:hover {
    text-decoration: underline;
}
.link-secondary-2: {
	color: #ffffff;
    text-decoration: underline;
}

.link-secondary-2:hover {
	color: #ff5900;
    text-decoration: underline;
}

/* Primary Button */
.cta-wrapper {
    margin-bottom: 40px;
}

.btn-primary {
    display: inline-block;
    background-color: transparent;
    color: #ffffff;
    border: 1px solid #ffffff;
    padding: 12px 32px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: #ffffff;
    color: #0b0c10;
}

.btn-primary-2 {
    display: inline-block;
    background-color: transparent;
    color: #ffffff;
    border: 1px solid #ffffff;
    padding: 12px 32px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-primary-2:hover {
    background-color: #ff5900;
    color: #ffffff;
	border-color: #ff5900;
}

/* Download badging & QR Code matrix */
.download-section {
    display: flex;
    align-items: center;
    gap: 30px;
}

.store-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.store-link img {
    height: 40px;
    /* Forces standard uniform height for app badges */
    display: block;
}

.qr-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.qr-code {
    width: 90px;
    height: 90px;
    background-color: #ffffff;
    padding: 6px;
    border-radius: 8px;
}

.qr-text {
    font-size: 0.75rem;
    color: #64748b;
}

/* Right Column Visuals */
.hero-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 550px;
}

.qr-wrapper img {
    width: 45%;
    padding: 8px;
    background: #fff;
    border-radius: 16px;
}

.mockup-img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* Responsive Breakdown for Tablets and Mobile Devices */
@media (max-width: 968px) {
    .hero-container {
        grid-template-columns: 1fr;
        /* Stacks columns vertically */
        gap: 50px;
        text-align: center;
    }

    .hero-content-sec1 {
        align-items: center;
    }

    .hero-title {
        font-size: 2.3rem;
    }

    .download-section {
        flex-direction: column;
        gap: 20px;
    }

    .store-buttons {
        flex-direction: row;
        /* Aligns badges side-by-side on mobile */
    }
}

/* Section Base Setup */
.features-section {
    background-color: #000000;
    /* Deep black background */
    color: #ffffff;
    padding: 100px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Header Content */
.features-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: -1px;
}

.section-subtitle {
    font-size: 1.1rem;
    color: #fff;
    /* Muted gray text */
    font-weight: 400;
}

/* Responsive Grid Layout */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 4 equal columns */
    gap: 24px;
    width: 100%;
    max-width: 1300px;
}

/* Feature Card Wrapper */
.feature-card {
    height: 480px;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Smooth zoom effect on hover */
.feature-card:hover {
    transform: translateY(-8px);
}

/* Bottom overlay gradient for readable text */
.card-overlay a {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    /* height: 120px; */
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px;
}

.card-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #ffffff;
}

/* Custom circular arrow indicators */
.arrow-icon {
    width: 32px;
    height: 32px;
    /* border: 2px solid rgba(255, 255, 255, 0.4); */
    /* border-radius: 50%; */
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    transition: all 0.3s ease;
}

.arrow-icon svg {
    width: 16px;
    height: 16px;
    transform: rotate(-90deg);
    /* Points the arrow to the right */
}

/* .feature-card:hover .arrow-icon {
    background-color: #ffffff;
    color: #000000;
    border-color: #ffffff;
} */

/* Responsive Media Queries */
@media (max-width: 1100px) {
    .cards-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2x2 grid on small screens/tablets */
    }

    .section-title {
        font-size: 2.8rem;
    }
}

@media (max-width: 640px) {
    .cards-grid {
        grid-template-columns: 1fr;
        /* 1 column on mobile layout */
    }

    .feature-card {
        height: 400px;
    }
}


/* Container Base Layout */
.split-video-section {
    background-color: #000000;
    color: #ffffff;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 4.5fr 5.5fr;
    /* Controls the horizontal split balance */
    overflow: hidden;
    position: relative;
    padding: 40px 0px;
}

/* Left Column Styling */
.split-text-column {
    padding: 100px 60px 100px 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 2;
    /* Keeps text layered cleanly above the video overlap */
}

.main-heading {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}

.sub-heading {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 30px;
}

.highlight-text {
    color: #FF5900;
    /* Cyan active accent brand color */
    font-style: italic;
}

.body-description {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #fff;
    margin-bottom: 50px;
    max-width: 540px;
}

/* Icons Row Styles */
.features-icon-row {
    display: flex;
    gap: 40px;
}

.icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.icon-box {
    color: #fff;
    transition: color 0.3s ease;
}

.icon-box svg {
    width: 28px;
    height: 28px;
}

.icon-item span {
    font-size: 0.8rem;
    color: #fff;
    font-weight: 500;
}

.icon-item:hover .icon-box {
    color: #00e5ff;
    /* Icons glow cyan on mouse hover */
}

/* Right Column Video Context */
.split-video-column {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The actual working video background */
.bg-video-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Recreates the seamless dark mist blend between left text and right video */
.video-fade-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #000000 0%, rgba(0, 0, 0, 0.6) 30%, transparent 100%);
    z-index: 1;
}

/* Floating interface image/render layer */
.mockups-layer {
    position: relative;
    z-index: 2;
    width: 90%;
    display: flex;
    justify-content: center;
}

.floating-ui-asset {
    max-width: 110%;
    height: auto;
    object-fit: contain;
    /* Optional: subtle breathing animation for floating impact */
    animation: floatAnimation 6s ease-in-out infinite;
}

/* Smooth slow-motion floating loop animation */
@keyframes floatAnimation {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-12px);
    }
}

/* Fluid responsive handling across viewports */
@media (max-width: 1024px) {
    .split-video-section {
        grid-template-columns: 1fr;
		min-height: auto;
        /* Changes to vertical stacked setup */
    }

    .split-text-column {
        padding: 20px;
        align-items: center;
        text-align: center;
    }

    .body-description {
        max-width: 100%;
    }

    .split-video-column {
        height: 500px;
    }

    .video-fade-overlay {
        background: linear-gradient(to bottom, #000000 0%, transparent 50%, rgba(0, 0, 0, 0.4) 100%);
    }
}

/* Base Section Setup with Flat Layout Background */
.smart-living-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background-image: url('https://certifiedenergysolutions.com.au/wp-content/uploads/2026/08/1745825574181234.jpeg');
    /* Apply your complete layout graphic here */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-start;
    /* Keeps text group aligned cleanly near top half */
    justify-content: center;
    padding: 100px 24px;
    color: #ffffff;
    overflow: hidden;
}

/* Subtle Vignette to secure contrast overlay for dark mode text */
.smart-living-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* This creates a rich, solid black tone at the very top that fades out toward the middle */
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.85) 32%,
            rgba(0, 0, 0, 0.4) 45%,
            transparent 100%);
    z-index: 1;
}

/* Typography Container Setup */
.content-overlay {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.main-title {
    font-size: 3.2rem;
    font-weight: 700;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}

.sub-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 28px;
    color: #f4f4f5;
}

.section-description {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #fff;
    /* Smooth gray for web readability */
    margin-bottom: 40px;
}

/* Interactive Pill Button Layout */
.btn-container {
    width: 100%;
    display: flex;
    justify-content: center;
}

.btn-explore {
    display: inline-block;
    color: #ffffff;
    border: 1px solid #ffffff;
    padding: 12px 40px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    background-color: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(4px);
    transition: all 0.3s ease;
}

.btn-explore:hover {
    background-color: #ffffff;
    color: #000000;
}

/* Fluid Layout Responsive Rules */
@media (max-width: 1024px) {
    .main-title {
        font-size: 2.6rem;
    }
}

@media (max-width: 640px) {
    .smart-living-section {
        padding: 60px 16px;
    }

    .main-title {
        font-size: 2.1rem;
    }

    .sub-title {
        font-size: 1.1rem;
    }
}




.mi-section {
    --mi-bg-panel: #0c1016;
    --mi-bg-panel-2: #10151d;
    --mi-line: rgba(255, 255, 255, 0.08);
    --mi-text: #f2f4f7;
    --mi-muted: #8b96a5;
    --mi-solar: #f2c94c;
    --mi-battery: #42e0c4;
    --mi-grid: #8b7bf0;
    --mi-flow: linear-gradient(90deg, var(--mi-solar), var(--mi-battery), var(--mi-grid));

    background: #05070a;
    color: var(--mi-text);
    margin: 0 auto;
    padding: clamp(48px, 8vw, 100px) clamp(16px, 4vw, 32px) clamp(60px, 10vw, 120px);
    box-sizing: border-box;
}

.mi-section * {
    box-sizing: border-box;
}

.mi-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mi-muted);
    margin-bottom: 18px;
}

.mi-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mi-flow);
}

.mi-headline {
    font-weight: 700;
    font-size: clamp(34px, 4.4vw, 56px);
    text-align: center;
    margin: 0 0 14px;
    letter-spacing: -0.02em;
}

.mi-subhead {
    text-align: center;
    color: #fff;
    font-size: 16px;
    margin: 0 0 64px !important;
}

.mi-accordion {
    display: flex;
    gap: 6px;
    height: clamp(280px, 42vw, 400px);
    position: relative;
}

.mi-card {
    position: relative;
    width: 300px;
    margin: 0px auto;
    /* flex:1; */
    min-width: 0;
    border-radius: 16px;
    overflow: hidden;
    background: var(--mi-bg-panel);
    border: 1px solid var(--mi-line);
    cursor: pointer;
    transition: flex 460ms cubic-bezier(.22, .9, .32, 1),
        opacity 320ms ease, margin 460ms cubic-bezier(.22, .9, .32, 1);
    display: flex;
}

.mi-accordion:hover .mi-card {
    flex: 0 0 0px;
    opacity: 0;
    margin: 0 -3px;
    pointer-events: none;
    border-color: transparent;
}

.mi-accordion .mi-card:hover {
    flex: 1 1 100%;
    opacity: 1;
    margin: 0;
    pointer-events: auto;
}

.mi-media {
    position: relative;
    flex: 0 0 clamp(150px, 32%, 340px);
    min-width: 300px;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .75) 100%), var(--mi-bg-panel-2);
    transition: flex-basis 460ms cubic-bezier(.22, .9, .32, 1);
}

.mi-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .92;
}

.mi-tag {
    position: absolute;
    left: 20px;
    bottom: 20px;
    right: 56px;
    z-index: 2;
     font-weight: 600;
    font-size: 16px;
    line-height: 1.25;
    transition: opacity 300ms ease;
}

.mi-play {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 2;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .5);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .35);
    backdrop-filter: blur(2px);
}

.mi-play svg {
    width: 11px;
    height: 11px;
    fill: #fff;
    margin-left: 1px;
}

/* .mi-card:nth-child(1) .mi-accent{ background:var(--mi-solar); }
.mi-card:nth-child(2) .mi-accent{ background:var(--mi-battery); }
.mi-card:nth-child(3) .mi-accent{ background:var(--mi-grid); } */
.mi-accent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 2;
}

.mi-reveal {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px 26px;
    opacity: 0;
    transform: translateX(14px);
    transition: opacity 360ms ease 80ms, transform 420ms ease 80ms;
}

.mi-accordion .mi-card:hover .mi-reveal {
    opacity: 1;
    transform: translateX(0);
}

.mi-reveal h3 {
    font-size: 19px;
    font-weight: 600;
    margin: 0 0 14px;
}

.mi-reveal p {
    color: var(--mi-muted);
    font-size: 13.5px;
    line-height: 1.7;
    margin: 0 0 20px;
}

.mi-reveal p strong {
    color: var(--mi-text);
    font-weight: 600;
}

.mi-stats {
	display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    gap: 10px;
}
.mi-grid-sec-left, .mi-grid-sec-right {
    text-align: center;
}
.mi-stat {
   
}

.mi-ico {
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
}

.mi-ico svg {
    width: 14px;
    height: 14px;
}

.mi-stat span {
    font-size: 16px;
    color: #fff;
    line-height: 1.3;
	font-family: 'Poppins-Bold';
}
.mi-sec-grid {
    gap: 30px;
    display: grid;
}
.mi-grid-sec-left img, .mi-grid-sec-right img  {
    width: 50%;
}
.mi-ico img {
    width: 25%;
}
.mi-accordion:hover .mi-card:not(:hover) .mi-tag {
    opacity: .55;
}

/* Only stack on genuinely small (phone) screens */
@media (max-width:480px) {
    .mi-accordion {
        flex-direction: column;
        height: auto;
    }

    .mi-card {
        flex: none !important;
        flex-direction: column;
    }

    .mi-media {
        flex: none;
        width: 100%;
        height: 180px;
        min-width: 0;
    }

    .mi-accordion .mi-card:hover {
        flex: none;
    }

    .mi-reveal {
        opacity: 1;
        transform: none;
    }
}







/* Core Section Layout Config */
.flexible-section {
    background-color: #000000;
    color: #ffffff;
    padding: 100px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.flexible-header {
    text-align: center;
    margin-bottom: 60px;
}

.main-heading {
    font-size: 3.4rem;
    font-weight: 700;
    margin-bottom: 16px;
    letter-spacing: -1px;
}

.sub-heading {
    font-size: 1.05rem;
    font-weight: 500;
    color: #fff;
    letter-spacing: 0.5px;
}

/* Flex Expanding Gallery Container Track */
.flexible-gallery {
    display: flex;
    gap: 24px;
    width: 100%;
    max-width: 1300px;
    height: 520px;
    /* Essential fixed height window to let inner images slide out */
}

/* Flexible Component Card Base Track */
.gallery-card {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    flex: 1;
    /* Standard initial widths are shared equally */
    min-width: 250px;
    transition: flex 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* FIXED: Replaces JS with clean pure CSS Hover width allocation */
.flexible-gallery:hover .gallery-card {
    flex: 0.8;
    /* Shrinks the un-hovered card down slightly to give room */
}

.flexible-gallery .gallery-card:hover {
    flex: 2.5;
    /* Expands the hovered card wider to match layout specifications */
}

/* Card Visual Window Frame */
.card-media-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
    background-color: #0d0d11;
}

/* Multi-layered Graphic Elements Stack Track */
.reveal-layer,
.sliding-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.reveal-layer {
    z-index: 1;
}

.sliding-layer {
    z-index: 2;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* FIXED: Triggers slide transformation instantly when hovering the specific item card */
.gallery-card:hover .sliding-layer {
    transform: translateY(-100%);
    /* Rolls image completely up out of frame window */
}

/* Absolute Text Positioning Layer Over the Image */
.card-image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
    z-index: 3;
    /* Locks down text above images and behind video layers */
    pointer-events: none;
    /* Prevents text elements from blocking slide mouse interactions */
}

.card-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Round Play Toggles Buttons indicators */
.play-toggle-btn {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(4px);
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.gallery-card:hover .play-toggle-btn {
    background-color: #ffffff;
    color: #000000;
    border-color: #ffffff;
    transform: scale(1.05);
}

/* Responsive Adaptive Track rules for tablets and small phone frames */
@media (max-width: 820px) {
    .flexible-gallery {
        flex-direction: column;
        height: auto;
    }

    .flexible-gallery:hover .gallery-card,
    .flexible-gallery .gallery-card:hover {
        flex: none !important;
        /* Disables flex width adjustments entirely for mobile viewports */
    }

    .gallery-card {
        height: 380px;
    }

    .gallery-card .sliding-layer {
        transform: translateY(-100%);
        /* Leaves background panels permanently revealed for easy scrolling reading */
    }

    .main-heading {
        font-size: 2.6rem;
    }
}






/* Core Section Configuration */
.forum-section {
    background-color: #000000;
    /* Matching deep black layout */
    color: #ffffff;
    padding: 100px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}

/* Typography Headings Layout */
.forum-header {
    text-align: center;
    margin-bottom: 40px;
}
.mockups-grid .mockup-column {
    padding-top: 15%;
}
.mockups-grid .mockup-column.center-highlight
{
    padding-top: 0;
}

.main-heading {
    font-size: 3.4rem;
    font-weight: 700;
    margin-bottom: 16px;
    letter-spacing: -1px;
}

.sub-heading {
    font-size: 1.05rem;
    font-weight: 500;
    color: #fff;
    /* Light gray subtitle text */
    letter-spacing: 0.5px;
}

/* 3-Column Grid Frame */
.mockups-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 equal flexible tracks */
    gap: 40px;
    
}

/* Individual Content Column Blocks */
.mockup-column {
    align-items: center;
    text-align: center;
}

/* Image bounding wrapper layer */
.phone-wrapper {
    width: 100%;
    max-width: 320px;
    /* Limits phone width for correct aspect ratio scaling */
    margin-bottom: 30px;
    overflow: visible;
    /* Permits safe layout transformation styling */
}

/* Base phone image element behavior layout rules */
.phone-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    /* Eases spacing transition smoothly */
}


/* ==========================================================================
   FIX: STAGGERED POSITION HIERARCHY (APPLIED DIRECTLY TO THE IMAGES)
   ========================================================================== */

/* Pushes image 1 (Left Phone) and image 3 (Right Phone) down slightly */
.mockups-grid .mockup-column:nth-child(1) .phone-img,
.mockups-grid .mockup-column:nth-child(3) .phone-img {
    transform: translateY(40px);
}

/* Center Phone (Image 2) remains unshifted as the main hero anchor */
.mockups-grid .mockup-column.center-highlight .phone-img {
    transform: translateY(0);
}


/* ==========================================================================
   HOVER ACTIONS (BALANCES TRANSFORMS WITHOUT JUMPING)
   ========================================================================== */

/* Smoothly lifts image 1 and 3 slightly when hovering over their columns */
.mockups-grid .mockup-column:nth-child(1):hover .phone-img,
.mockups-grid .mockup-column:nth-child(3):hover .phone-img {
    transform: translateY(20px);
    /* Lifts up 20px from its lowered position */
}

/* Smoothly lifts the center hero image when hovered */
.mockups-grid .mockup-column.center-highlight:hover .phone-img {
    transform: translateY(-20px);
}


/* Bottom Text Labels Layout Rules */
.column-caption {
    font-size: 1.1rem;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: -0.2px;
    margin-top: auto;
    /* Ensures labels snap down flush on the exact same row layout line */
}

/* Fluid Responsive Breakpoints for Tablet & Mobile Layouts */
@media (max-width: 968px) {
    .mockups-grid {
        gap: 24px;
    }

    .main-heading {
        font-size: 2.6rem;
    }

    .column-caption {
        font-size: 0.95rem;
		
    }
}

@media (max-width: 768px) {
    .forum-section {
        padding: 20px;
    }

    .forum-header {
        margin-bottom: 10px;
    }

    .mockups-grid {
        grid-template-columns: 1fr;
        /* Stacks the 3 phones vertically on phone devices */
        gap: 50px;
    }

    /* RECOVERY: Clears staggered offset rules on mobile views so stacked elements flow correctly */
    .mockups-grid .mockup-column:nth-child(1) .phone-img,
    .mockups-grid .mockup-column:nth-child(3) .phone-img,
    .mockups-grid .mockup-column:nth-child(1):hover .phone-img,
    .mockups-grid .mockup-column:nth-child(3):hover .phone-img,
    .mockups-grid .mockup-column.center-highlight:hover .phone-img {
        transform: none !important;
    }

    .phone-wrapper {
        max-width: 280px;
        margin-bottom: 12px;
    }
}



/* Core Section Layout Config */
.related-products-section {
    background-color: #0d0d0d;
    /* Premium deep dark background */
    color: #ffffff;
    padding: 100px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;

}

.products-header {
    text-align: center;
    margin-bottom: 50px;
}

.main-heading {
    font-size: 3rem;
    font-weight: 700;
    letter-spacing: -0.5px;
}



/* Right Column Split Stacking Manager */
.right-stack-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Core Product Card Architecture */
.product-card1 {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    /* Crucial: Clips zooming graphic within the rounded borders */
    cursor: pointer;
    background-color: #1a1a1a;
}

/* Height constraints matching layout properties */
.tall-card {
    height: 600px;
}

.small-card {
    height: 288px;
    /* Balanced sizing considering spacing gutters */
}

/* Image Wrapper System Window */
.card-image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Clean image setup supporting smooth transition easing */
.zoom-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    /* Hyper-smooth animation curves */
}

/* ACTION: Zoom effect triggered directly when hovering over the card frame */
.product-card1:hover .zoom-image {
    transform: scale(1.06);
    /* Clean subtle enlargement factor */
}

/* Text and Button Graphic Overlays Layer */
.card-content-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 35px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* Soft dark linear shading to guarantee text contrast against light details */
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    z-index: 2;
}

.product-title {
    font-size: 1.35rem;
    font-weight: 600;
    margin-bottom: 16px;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* Custom Interactive Transparent Pill Buttons Layout */
.btn-cta {
    display: inline-block;
    color: #ffffff;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    border: 1.5px solid #ffffff;
    padding: 10px 36px;
    border-radius: 25px;
    background-color: transparent;
    /* Default transparent state matching layout rules */
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* ACTION: Button transformation to solid cyan background on hover */
.btn-cta:hover {
    background-color: #00e5ff;
    /* Vibrant active sky-blue cyan accent tone */
    border-color: #00e5ff;
    color: #000000;
    /* Switches text color to dark for clean readability */
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.4);
    /* Subtle ambient cyan glow signature effect */
}

/* Fluid Responsive Breakpoints for Tablet & Phone Layouts */
@media (max-width: 968px) {
    .main-heading {
        font-size: 2.4rem;
    }
}

@media (max-width: 768px) {
    .products-grid {
        grid-template-columns: 1fr;
        /* Stacks all layouts into vertical line rails on small screens */
        gap: 20px;
    }

    .right-stack-container {
        gap: 20px;
    }

     .main-heading {
            font-size: 1.8rem;
            text-align: left;
    }

    .body-description{
        text-align: left;
		margin-bottom:0px !important;
    }

    .sub-heading{
        text-align: left;
        font-size: 1.2rem;
		margin-bottom: 0px;
    }

    .tall-card,
    .small-card {
        height: 360px;
        /* Locks matching standard grid square blocks on small mobile platforms */
    }
}

.icon-box img {
    width: 35px;
    height: 35px;
}
.mi-grid-sec-cont
 {
   display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin: 0 auto;
    width: 80%;
}
.disp-mobile {
    display: none;
}
.disp-desk {
    display: block;
}
/* ========================================
   BLOG PAGE
======================================== */

.blog-page {
    background: #e9eaeb;
    padding: 150px 0 120px;
}

.blog-info-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
	margin-bottom: 20px;
}
.blog-category-name {
    text-align: end;
}
.blog-category-name a {
    color: #000;
    border: 1px solid #000;
    margin-top: 0;
	font-size: 14px;
}
/* ========================================
   HEADER
======================================== */

.blog-header {
    text-align: center;
    margin-bottom: 100px;
}

.blog-header h1 {
    margin: 0 0 45px;
    font-size: 62px;
    line-height: 1.1;
    font-weight: 700;
    color: #202020;
}


/* ========================================
   TOP TABS
======================================== */

.blog-tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.blog-tabs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 115px;
    height: 42px;

    padding: 0 28px;

    border-radius: 30px;

    background: #ffffff;

    color: #222;
    text-decoration: none;

    font-size: 18px;
    font-weight: 400;

    transition: all 0.3s ease;
}

.blog-tabs a:hover {
    background: #08b7b4;
    color: #fff;
}

.blog-tabs a.active {
    background: #08b7b4;
    color: #fff;
}


/* ========================================
   BLOG CONTAINER
======================================== */

.blog-container {
    margin: 0 auto;
}


/* ========================================
   TOP AREA
======================================== */

.blog-top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 65px;
}

.blog-top h2 {
    margin: 0;

    font-size: 42px;
    line-height: 1.2;

    font-weight: 700;

    color: #202020;
}


/* ========================================
   CATEGORY
======================================== */

.blog-category select {
    appearance: none;
    -webkit-appearance: none;

    width: 225px;
    height: 50px;

    padding: 0 45px 0 25px;

    border: 1px solid #333;
    border-radius: 30px;

    background-color: transparent;

    background-image:
        linear-gradient(45deg, transparent 50%, #222 50%),
        linear-gradient(135deg, #222 50%, transparent 50%);

    background-position:
        calc(100% - 24px) 21px,
        calc(100% - 18px) 21px;

    background-size:
        7px 7px,
        7px 7px;

    background-repeat: no-repeat;

    font-size: 18px;
    color: #333;

    cursor: pointer;
}


/* ========================================
   BLOG GRID
======================================== */

.blog-card{
    display: grid;

    grid-template-columns: repeat(2, 1fr);
margin-bottom: 50px;
    gap: 30px;
}


/* ========================================
   BLOG CARD
======================================== */

.blog-card {
    position: relative;

    overflow: hidden;

    border-radius: 8px;

    background: #fff;
}


/* ========================================
   IMAGE
======================================== */

.blog-images {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.blog-images img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    transition: transform 0.6s ease;
}


/* ========================================
   NO IMAGE
======================================== */

.no-image {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #d5d5d5;

    color: #555;
}


/* ========================================
   CONTENT
======================================== */

.blog-content {
    padding: 30px;
}

.blog-date {
    font-size: 14px;

    color: #777;
}

.blog-content h3 {
    margin: 0 0 15px;

    font-size: 24px;
    line-height: 1.25;

    font-weight: 700;
}

.blog-content h3 a {
    color: #222;
    text-decoration: none;
}

.blog-excerpt {
    margin-bottom: 25px;

    font-size: 17px;
    line-height: 1.6;

    color: #555;
}

.blog-read-more {
    color: #222;

    font-size: 16px;

    text-decoration: none;

    transition: 0.3s;
}

.blog-read-more:hover {
    color: #ff5900;
}


/* ========================================
   PAGINATION
======================================== */

.blog-pagination {
    display: flex;

    justify-content: center;

    margin-top: 70px;
}

.blog-pagination .page-numbers {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 42px;
    height: 42px;

    margin: 0 5px;

    border-radius: 50%;

    background: #fff;

    color: #222;

    text-decoration: none;
}

.blog-pagination .page-numbers.current {
    background: #08b7b4;
    color: #fff;
}

/* =================================
   BLOG DETAIL
================================= */

.blog-detail {
    padding: 150px 0 50px;
    background: #e9eaeb;
}


/* Container */



/* Featured Image */

.single-post-image {
    width: 70%;
	margin:0 auto;
    border-radius: 15px;
    overflow: hidden;
}

.single-post-image img {
    display: block;
    width: 100%;
    height: auto;
}


/* Header */

.single-post-header {
    margin: 0 auto 50px;
}


/* Category */

.single-post-category {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.single-post-category a {
    display: inline-block;

    padding: 8px 20px;

    border-radius: 30px;

    background: #a52228;

    color: #fff;

    font-size: 15px;

    text-decoration: none;

    transition: 0.3s;
}

.single-post-category a:hover {
    background: #ff5900;
}


/* Title */

.single-post-title {
    margin: 25px 0 25px;

    font-size: 50px;
text-align: center;
    line-height: 1.15;

    font-weight: 700;

    color: #222;
}
.post-meta-details {
    display: flex;
    gap: 60px;
}

/* Meta */

.single-post-meta {
    display: flex;

    align-items: center;

    gap: 30px;

    color: #777;

    font-size: 16px;
}

.post-author a {
    color: #222;

    text-decoration: none;

    font-weight: 600;
}

.post-author a:hover {
    color: #ff5900;
}


/* Content */

.single-post-content {
    margin: 0 auto;

    font-size: 18px;

    line-height: 1.8;

    color: #000;
}
.single-post-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-family: inherit;
    font-size: 16px;
    background: #fff;
}

.single-post-content table th,
.single-post-content table td {
    padding: 15px 18px;
    text-align: left;
    border: 1px solid #ddd;
}

.single-post-content table tr:first-child td {
    background: #f5f5f5;
    font-weight: 600;
    color: #222;
}

.single-post-content table tr:nth-child(even) td {
    background: #fafafa;
}

.single-post-content table tr:hover td {
    background: #f2f7fa;
}


.single-post-content p {
    margin-bottom: 25px;
}

.single-post-content img {
    max-width: 100%;

    height: auto;

    display: block;

    margin: 30px auto;
}

.single-post-content h2 {
    font-size: 38px;

    margin: 45px 0 20px;
}

.single-post-content h3 {
    font-size: 30px;

    margin: 35px 0 15px;
}
/* =================================
   RECENT BLOGS
================================= */

.recent-blogs {

    padding: 50px 0;

    background: #f5f5f5;

}


/* Header */

.recent-blogs-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 45px;

}

.recent-blogs-header h2 {

    margin: 0;

    font-size: 48px;

    font-weight: 700;

}

.recent-blogs-header > a {

    color: #222;

    text-decoration: none;

    font-size: 17px;

}


/* Grid */

.recent-blogs-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 30px;

}


/* Card */

.recent-blog-card {

    background: #fff;

    border-radius: 12px;

    overflow: hidden;

}


/* Image */

.recent-blog-image {

    display: block;

    width: 100%;

}

.recent-blog-image img {

    display: block;

    width: 100%;

    height: auto;

}


/* Content */

.recent-blog-content {

    padding: 25px;

}


/* Category */

.recent-blog-category {

    display: inline-block;

    margin-bottom: 10px;

    color: #08b7b4;

    font-size: 15px;

    text-decoration: none;

}


/* Date */

.recent-blog-date {

    margin-bottom: 12px;

    color: #777;

    font-size: 14px;

}


/* Title */

.recent-blog-content h3 {

    margin: 0 0 15px;

    font-size: 25px;

    line-height: 1.3;

}

.recent-blog-content h3 a {

    color: #222;

    text-decoration: none;

}


/* Excerpt */

.recent-blog-content p {

    margin: 0 0 20px;

    color: #666;

    line-height: 1.6;

}


/* Link */

.recent-blog-link {

    color: #222;

    text-decoration: none;

    font-weight: 600;

}

.recent-blog-link:hover {

    color: #ff5900;

}
.single-post-content a {
    color: #ff5900;
}
article.single-post strong {
    font-weight: 600;
}