.main-nav nav .navbar-nav .nav-item a i {
    line-height: 0;
    position: relative;
    top: 2px;
    font-size: 10px;
    color: #444;
    padding-left: 5px;
}
.consoft_benner_img {
    background-image: url(../images/products/consoft/final/consoft_banner1.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.consoft_detail_img {
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.play-btn-area::before {
    /* background-image:url(../images/products/consoft/final/consoft_banner_image.png); */
    background-image: url(../images/products/smart_water_info/new_smart_water_banner.png);
}
.build-area::before {
    background-color: #276ab6;
}
.bollard-area::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 50%;
    background-color: #276ab6;
}
.bollard-area::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 50%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.bollard-image-area {
    position: relative;
    z-index: 1;
    height: 700px;
    text-align: center;
    margin-bottom: 30px;
}
.bollard-image-area::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-image: url(../images/products/bollard/final/bollard_original_image.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 15px;
}
.play-btn-area .build-play i {
    position: relative;
    top: 0px;
    left: 0px;
}
.smart-water-detail-img {
    background-image: url(../images/products/smart_water_info/new_smart_water_banner.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.image-container {
    width: 100%;
    max-height: 640px;
    /* max-width: 1500px;  */
    margin: 0 auto; /* center the container */
    overflow: hidden; /* hide the parts of the image that exceed the container */
}
.image-container img {
    width: 100%;
    height: 100%; /* maintain aspect ratio */
}
/* end bollar img front benner */
.top-left {
    position: absolute;
    z-index: 1;
    /* top: 40px;
    left: 20px; */
}
.bollard_detail_img {
    position: relative;
    text-align: center;
    color: white;
}
.bollard_detail_img .bollard_detail_heading {
    position: absolute;
    top: 0px;
    left: 16px;
    color: white;
}
.smart-water-detail {
    background-color: #070b3b;
}
.about-play img {
    border-radius: 0px;
}
.services-card {
    padding: 30px 20px 25px;
    /* background-color: #fff; */
    border-radius: 12px;
    position: relative;
    z-index: 1;
    margin-bottom: 30px;
    height: 252px;
    overflow-y: auto;
    cursor: pointer;
    scrollbar-width: none;
}
.services-card:hover {
    scale: 1.05;
    transition: all ease-in 0.3s;
}
.services-card:hover::before {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    opacity: 0.8;
}
.work-process-left {
    background-color: #070b3b;
    padding: 105px 40px;
    border-radius: 0px;
    margin-bottom: 25px;
    position: relative;
    z-index: 1;
}
.clients-content {
    box-shadow: 0px 5px 10px 0px;
    border-radius: 0px;
}
.slider_btn {
    width: 20px;
    height: 20px;
    border: 2px solid black;
}
.footer-bg {
    background-color: #276ab6;
}
.pt-10 {
    padding-top: 10px;
}
.pt-20 {
    padding-top: 20px;
}
.pt-30 {
    padding-top: 30px;
}
.pt-40 {
    padding-top: 40px;
}
.pt-50 {
    padding-top: 50px;
}
.pt-60 {
    padding-top: 60px;
}
.pt-70 {
    padding-top: 70px;
}
.pt-80 {
    padding-top: 80px;
}
.pt-90 {
    padding-top: 90px;
}
.pt-100 {
    padding-top: 100px;
}
.pt-120 {
    padding-top: 120px;
}
.pt-150 {
    padding-top: 150px;
}
/* padding-bottom */
.pb-10 {
    padding-bottom: 10px;
}
.pb-20 {
    padding-bottom: 20px;
}
.pb-30 {
    padding-bottom: 30px;
}
.pb-40 {
    padding-bottom: 40px;
}
.pb-50 {
    padding-bottom: 50px;
}
.pb-60 {
    padding-bottom: 60px;
}
.pb-70 {
    padding-bottom: 70px;
}
.pb-80 {
    padding-bottom: 80px;
}
.pb-90 {
    padding-bottom: 90px;
}
.pb-100 {
    padding-bottom: 100px;
}
.section-title h2 {
    font-size: 35px;
    font-weight: 600;
    margin-top: 0;
    line-height: 1.2;
    color: #252525;
    margin-bottom: 66px;
}
.pt-45 {
    padding-top: 15px;
}
.talk-area-two {
    background-image: url(../images/blur_bg_home.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    z-index: 1;
    background-color: hsla(189, 90%, 49%, 0.11);
    background-attachment: fixed;
}
.section-title h2 {
    font-size: 35px;
    font-weight: 600;
    margin-top: 0;
    line-height: 1.2;
    color: #252525;
    margin-bottom: 40px;
}
.about-content-3 .section-title h2 {
    font-size: 35px;
    font-weight: 600;
    margin-top: 0;
    line-height: 1.2;
    color: #252525;
    margin-bottom: 15px;
}
.about-content-3 .section-title p {
    margin-bottom: 30px;
}
.inner-banner .inner-title {
    padding-top: 50px;
    padding-bottom: 50px;
    position: relative;
    z-index: 1;
}
.content .sp-color2 {
    color: #ff0808;
}
.footer-widget p {
    margin-bottom: 20px;
    color: #fff;
    max-width: 500px;
    /* text-align: justify; */
}
.clients-content p {
    margin-bottom: 0;
    text-align: justify;
}
.banner-item-ptb {
    padding-top: 120px;
    padding-bottom: 180px;
}
.top-header {
    padding: 5px 0 5px;
}
.navbar {
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}
.main-nav .nav-side .nav-side-item .get-btn {
    top: 0;
}
.main-nav nav .navbar-nav .nav-item a {
    font-weight: 600;
}
.choose-img-tw {
    position: relative;
    z-index: 1;
    padding-right: 20px;
    padding-bottom: 20px;
    margin-bottom: 30px;
}
.choose-img-tw::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    width: 90%;
    height: 100%;
    background-color: #070b3b;
}
.smart_water_img {
    position: relative;
}
.solar-title-section {
    position: absolute;
    color: rgb(255, 255, 255);
    top: 200px;
    /* background-color: rgb(41, 41, 41, 0.8); */
    /* padding: 0 1rem; */
}
.consoft-title-section {
    position: absolute;
    top: 90px;
}
.frontBtn {
    position: absolute;
    /* color: rgb(255, 255, 255); */
    /* top: 100px; */
    bottom: 50px;
}
.word_wrap_address a:hover {
    color: #fff;
}
.swiper-button-next:after,
.swiper-container-rtl .swiper-button-prev:after {
    content: "next" !important;
    padding: 6px 9px !important;
    border-radius: 50% !important ;
    font-size: 10px !important;
    border: 1px solid #fff !important;
}
.swiper-button-prev:after,
.swiper-container-rtl .swiper-button-next:after {
    /* content: "next" !important; */
    padding: 6px 9px !important;
    border-radius: 50% !important ;
    font-size: 10px !important;
    border: 1px solid #fff !important;
}
/* HeroSection */
.carousel-control-iconbtn {
    border-radius: 50%;
    height: 30px;
    width: 30px;
    line-height: 30px;
    text-align: center;
    background: transparent;
    border: 1px solid #276ab6;
    color: #276ab6;
    font-size: 12px;
    transition: all 0.4s ease;
    border-radius: 50%;
}
.carousel-control-iconbtn:hover {
    background: #276ab6;
    color: #fff;
    border: 1px solid #276ab6;
}
/* ===== Scrollbar CSS ===== */
/* Firefox */
/* Chrome, Edge, and Safari */
::-webkit-scrollbar {
    width: 8px;
    height: 10px;
}
::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background: #c2c9d2;
}
/* HeroSection */
/* Product Page Css Start */
.product_cards {
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}
.product_cards:hover {
    scale: 1.02;
}
.product_cards .imgContainer {
    width: 100%;
    height: 220px;
    overflow-y: hidden;
}
/* Product Page Css End */
/* I-Manage Page Css Start */
.imanageLogo {
    width: 66px;
    border-radius: 50%;
}
.imanageHeading {
    font-family: "SegoeUI-SemiBold", Helvetica, Arial, sans-serif;
    background: linear-gradient(
        96.2deg,
        #ed6419 -3.08%,
        #9629e7 14.74%,
        #0860c7 72.12%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.downloadServiceLogo {
    width: 25%;
}
.aboutUsText {
    text-align: center;
}
/* I-Manage Page Css End */
@media only screen and (max-width: 575px) {
    .choose-area-tow {
        padding-top: 60px;
    }
    .carousel-indicators {
        display: none;
    }
    .solar-title-section {
        position: absolute;
        color: rgb(255, 255, 255);
        top: 50px;
    }
    .consoft-title-section {
        position: absolute;
        top: 30px;
    }
    .frontBtn {
        position: absolute;
        top: 70px;
    }
    .carousel-control-prev,
    .carousel-control-next {
        margin-top: 0px;
    }
    /* Product Page Css Start */
    .productPageHeading {
        font-size: 23px !important;
    }
    /* Product Page Css End */
    /* I - Manage Css Start */
    .downloadServiceLogo {
        width: 100%;
    }
    .aboutUsText {
        text-align: justify;
        padding: 0 15px;
    }
    /* I - Manage Css End */
}

/* Gallery Page Css Start */

.container.gallery-container {
    background-color: #fff;
    color: #35373a;
    min-height: 100vh;
    border-radius: 20px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.06);
}

.gallery-container h1 {
    text-align: center;
    margin-top: 70px;
    font-family: "Droid Sans", sans-serif;
    font-weight: bold;
}

.gallery-container p.page-description {
    text-align: center;
    max-width: 800px;
    margin: 25px auto;
    color: #888;
    font-size: 18px;
}

.tz-gallery {
    padding: 40px;
}

.tz-gallery .lightbox img {
    width: 100%;
    margin-bottom: 30px;
    transition: 0.2s ease-in-out;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}

.tz-gallery .lightbox img:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
}

.tz-gallery img {
    border-radius: 4px;
}

.baguetteBox-button {
    background-color: transparent !important;
}

@media (max-width: 768px) {
    body {
        padding: 0;
    }

    .container.gallery-container {
        border-radius: 0;
    }
}

/* Gallery Page Css End */