@charset "utf-8";
/* CSS Document */
/*	General Styling
----------------------------------------------------------------------*/
@import url("bootstrap.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');


/*html, body {height: 100%;}*/
body {font-family: 'Montserrat', sans-serif; font-style: normal; color: #000000; margin: 0;height: 100%;}
ul {list-style-type: none;}
.clear {clear: both; display: block; height: 0; overflow: hidden; visibility: hidden; width: 0;}
.extra-wrap {overflow: hidden;}
.block {display: block;}
.in-block {display: inline-block;}
.p-rel {position: relative;}
.wrapper {width: 100%; overflow: hidden;}
.super-container {margin: 0; height: 100%; padding: 0px; position: relative;}
.container {position: relative;}
img {vertical-align: middle; height: auto; max-width: 100%; border: 0;}
a {text-decoration: none; transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;}

.font11 {font-size: 11px !important;}
.font12 {font-size: 12px !important;}
.font14 {font-size: 14px !important;}
.font15 {font-size: 15px !important;}
.font18 {font-size: 18px !important;}
.fw500 {font-weight: 500;}
.fw600 {font-weight: 600;}

.txt_fff {color: #ffffff;}
.txt_fff:hover,
.txt_fff:focus {color: #ffffff;}

.txt_666 {color: #666666;}
.txt_666:hover,
.txt_666:focus {color: #666666;}

.txt_999 {color: #999999;}
.txt_999:hover,
.txt_999:focus {color: #999999;}

.txt_333 {color: #333333;}
.txt_333:hover,
.txt_333:focus {color: #333333;}

.txt_000 {color: #000000;}
.txt_000:hover,
.txt_000:focus {color: #000000;}

.lh-auto {line-height: 1.5;}
.lh-19 {line-height: 1.9;}

.mb-30 {margin-bottom: 1.875rem;}

.primary-color {
    color: #2384c6;
}
.secondary-color {
    color: #2384c6;
}



/* Header
--------------------------------------------------------------*/
#header {
    position: absolute;
    /* top: 30px; */
    left: 0;
    right: 0;
    z-index: 1;
}
#header .top-bar {
    background-color: #2384c6;
    color: #ffffff;
    padding: 11px 0;
}
#header .top-bar .social-links a {
    color: #ffffff;
}
#header .top-bar .social-links a:hover {
    color: #000000;
}
#header .navbar {
    padding-top: 15px;
    padding-bottom: 15px;
}
#header .navbar-brand img {
    width: 230px;
}
#header .navbar-nav .nav-link {
    color: #000000;
    font-weight: 500;
    padding: 0 20px;
    text-transform: uppercase;
}
#header .navbar-nav .nav-link:hover,
#header .navbar-nav .nav-link.active {
    color: #2384c6;
}
.dropdown-menu {
    width: 250px;
    border: 0;
    border-radius: 10px;
    box-shadow: 0 0 8px rgba(0,0,0,0.16);
    padding: 16px 10px;
    margin-top: 18px !important;
}
.dropdown-menu .dropdown-item {
    font-size: 14px;
    white-space: break-spaces;
    padding: 8px;
    font-weight: 500;
}
.dropdown-menu .dropdown-item.active {
    background-color: transparent;
    color: #2384c6;
}
.dropdown-menu .dropdown-item:hover {
    color: #2384c6;
    background-color: transparent;
}
#header .navbar-nav .nav-link.hightlight {
    background-color: #2384c6; 
    color: #ffffff;
    border: 1px solid #ffffff;
    padding-top: 7px;
    padding-bottom: 7px;
    border-radius: 20px;
    display: inline-block;
}
#header .navbar-nav .nav-link.hightlight:hover,
#header .navbar-nav .nav-link.hightlight:focus {
    background-color: #000000;
}
#header .navbar .navbar-toggler {
    font-size: 28px;
    color: #000000;
}
#header .navbar .navbar-toggler .navbar-toggler-toggled {
    display: none;
}
#header .navbar .navbar-toggler[aria-expanded=true] .navbar-toggler-default {
    display: none;
}
#header .navbar .navbar-toggler[aria-expanded=true] .navbar-toggler-toggled {
    display: flex;
}

/* hero img
--------------------------------------------------------------*/
.hero-img {
    margin-bottom: 30px;
    background: url("../images/hero-img.jpg") no-repeat scroll center center transparent;
    background-size: cover;
}
.hero-img .hero-content,
.hero-img .container,
.hero-img .row {
    height: 100%;
}
.hero-img .banner-content {
    text-align: left;
}
.hero-img .banner-content h4 {
    font-size: 24px;
    color: #2384c6;
}
.hero-img .banner-content h2 {
    font-size: 60px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 40px;
}


/* home-about
--------------------------------------------------------------*/
#home-about {
    margin-bottom: 65px;
}
#home-about p {
    font-size: 24px;
}



/* home-services
--------------------------------------------------------------*/
#home-products {
    padding: 70px 0 20px;
    background: url("../images/home-our-products-bg.jpg") no-repeat scroll center center transparent;
    background-size: cover;
}
#home-products .product-box {
    text-align: center;
    position: relative;
    margin-bottom: 60px;
}
#home-products .product-box:hover img.back-img {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
}
#home-products .product-img {
    position: relative;
    min-height: 160px;
    text-align: center;
}
#home-products .product-img img {
    position: absolute;
    right: 0;
    top: 0;
    left: 0;
    margin: 0 auto;
    max-width: 100%;
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
    transition: all .3s ease-out;
}
#home-products .product-img img.back-img {
    -webkit-transform: translate(8px, 0px);
    transform: translate(8px, 0px);
}


/* section heading
--------------------------------------------------------------*/
.sec-heading {
    font-size: 36px;
    font-weight: 600;
    margin-bottom: 40px;
    position: relative;
}
.sec-heading.stroke {
    display: inline-block;
}
.sec-heading.stroke:after {
    content: "";
    position: absolute;
    left: calc(100% + 7px);
    bottom: 9px;
    height: 3px;
    width: 150px;
    background-color: #2384c6;
}

.wow:first-child {
    visibility: hidden;
}

.page-txt-24 {
    font-size: 24px;
}



/* home-services
--------------------------------------------------------------*/
#home-green-initiative {
    padding: 80px 0;
}
#home-green-initiative p {
    font-size: 24px;
}
#home-green-initiative .pattern-img {
    position: absolute;
    top: -60px;
    right: 0;
    z-index: -2;
}

/* call-to-action
--------------------------------------------------------------*/
#call-to-action {
    position: relative;
    padding: 65px 0;
    background: url("../images/call-to-action-bg.png") no-repeat scroll top center transparent;
    background-size: cover;
}
#call-to-action p {
    font-size: 24px;
    text-align: center;
    color: #ffffff;
    margin-bottom: 3rem;
}
#call-to-action .connect-opt {
    background-color: #f1f3f8;
    border-radius: 15px;
    padding: 20px 10px;
    text-align: center;
}
#call-to-action .connect-opt img {
    width: 24px;
    margin-top: -2px;
}
#call-to-action .connect-opt a {
    color: #000000;
    display: inline-block;
    margin: 2px 0;
}
#call-to-action .connect-opt a:hover,
#call-to-action .connect-opt a:focus {
    color: #2384c6;
}



/* footer
--------------------------------------------------------------*/
footer {
    background-color: #ffffff;
    padding-top: 50px;
}
footer .logo {
    margin-right: 15px;
}
footer .logo img {
    width: 90px
}
footer .nav .nav-link {
    font-size: 16px;
    color: #000000;
    padding: 6px 0;
}
footer .nav .nav-link:hover {
    color: #2384c6;
}
footer .footer-bottom {
    border-top: 1px solid #000000;
    padding: 20px 0;
    text-align: center;
    margin-top: 35px;
}

/* page-banner
--------------------------------------------------------------*/
#page-banner {
    position: relative;
    text-align: center;
    margin-bottom: 85px;
}
#page-banner .banner-inside {
    padding: 70px 0;
    color: #ffffff;
}
#page-banner h2 {
    font-size: 55px;
    color: #fff;
    font-weight: 600;
}


/* about-us
--------------------------------------------------------------*/
.about-us #page-banner .banner-inside {
    background: url("../images/about-us-banner.jpg") no-repeat scroll center 0 transparent;
    background-size: cover;
}
.about-us .about-info-sec {
    position: relative;
    margin-bottom: 80px;
}
.about-us .about-info-sec .pattern-img {
    position: absolute;
    top: 60px;
    z-index: -2;
    right: -10%;
    width: 80%;
}
.about-us .about-info-sec .pattern-img img {
    width: 100%;
}

.about-us .about-info-sec-2 {
    padding-bottom: 50px;
}
.about-us .about-info-sec-2 .pattern-img {
    position: absolute;
    top: 0;
    z-index: -2;
    left: -10%;
    width: 80%;
}
.about-us .about-info-sec-2 .pattern-img img {
    width: 100%;
}
.about-us .about-info-sec-3 {
    background-color: #f0f0f0;
    padding: 60px 0;
}
.about-us .about-info-sec-3 .card {
    background-color: #2384c6;
    padding: 10px;
    border-radius: 35px;
    color: #ffffff;
    text-align: center;
    border: 0;
}


/* products
--------------------------------------------------------------*/
.products #page-banner .banner-inside {
    background: url("./products-banner.jpg") no-repeat scroll center 0 transparent;
    background-size: cover;
}
#our-products {
    padding-bottom: 80px;
}
#our-products .product-img {
    position: relative;
    /*padding-top: 75%;*/
    text-align: center;
    margin-bottom: 35px;
}
/*#our-products .product-img img {
    position: absolute;
    right: 0;
    top: 0;
    left: 0;
    margin: 0 auto;
    max-width: 100%;
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
    transition: all .3s ease-out;
}
#our-products .product-img img.back-img {
    -webkit-transform: translate(16px, 0px);
    transform: translate(16px, 0px);
}
#our-products .product-row:hover img.back-img {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
}
#our-products .product-row {
    margin-bottom: 80px;
}*/




/* contact page
--------------------------------------------------------------*/
.contact-us #page-banner .banner-inside {
    background: url("../images/contact-us-banner.png") no-repeat scroll center top transparent;
}
#contact-sec #contact-form .form-body {
    background-color: #f0f0f0;
    padding: 50px 25px 60px 25px;
    border-radius: 25px;
    margin-bottom: 30px;
}
#contact-sec .office-address {
    border: 1px solid #999999;
    padding: 15px 20px 15px 20px;
    border-radius: 25px;
    margin-bottom: 12px;
}
#contact-sec .office-address .col-heading {
    margin-bottom: 15px;
    font-weight: 600;
}
#contact-sec .office-address .col-heading img {
    width: 28px;
    height: 29px;
    margin-top: -5px;
    margin-right: 15px;
}
#contact-sec .office-address .contact-icon {
    width: 18px;
}







@media screen and (min-width: 768px) { }

/* below 1024 screens */
@media (max-width: 992px) {


    #header .navbar-nav .nav-link {padding: 0.5rem 0;}
    #header .navbar-nav .nav-link.hightlight {padding-left: 20px; padding-right: 20px;}
    #header .navbar-nav {padding: 1rem 0.5rem; background-color: #F7F8F9;}
    .navbar-toggler, .navbar-toggler:focus {border-color: transparent; background-color: transparent; outline: 0; box-shadow: none;}
    .dropdown-menu {width: auto; border-radius: inherit; box-shadow: inherit; margin-top: inherit !important;}

    footer .logo img {width: 75px;}


    .dropdown:hover .dropdown-menu {
        display: block;
    }

}


@media (max-width: 768px) {


}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {

    #header .top-bar .top-line {font-size: 12px;}
    #header .navbar-brand img {width: 195px;}

    .hero-img .banner-content h4 {font-size: 22px;}
    .hero-img .banner-content h2 {font-size: 32px; margin-bottom: 20px;}
    .hero-img .hero-content img {width: 300px;}

    #home-about p {font-size: 20px;}

    .sec-heading.stroke:after {width: 35px;}

    #home-green-initiative p {font-size: 20px;}

    #page-banner {margin-bottom: 45px;}
    #page-banner .banner-inside {padding: 25px 0;}
    #page-banner .banner-inside h2 {font-size: 32px;}

    .page-txt-24 {font-size: 20px;}

    .about-us .about-info-sec .pattern-img {right: 0;}
    .about-us .about-info-sec-2 .pattern-img {width: 90%; top: 25%; left: 0;}

    /*#our-products .product-row {margin-bottom: 50px;}
    #our-products .product-img {padding-top: 108%;}*/
    
    #our-products .product-img {margin-bottom: 18px;}
    #our-products .display-7 {font-size: 22px;}

    #contact-sec .lead {font-size: 16px;}


}


/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {

    #header .top-bar .top-line {font-size: 12px;}
    #header .navbar-brand img {width: 175px;}
    #header .navbar {padding-top: 10px; padding-bottom: 10px;}

    .hero-img .banner-content h4 {font-size: 16px;}
    .hero-img .banner-content h2 {font-size: 24px; margin-bottom: 20px;}
    .hero-img .hero-content img {width: 190px;}

    #home-about p {font-size: 20px;}

    #page-banner {margin-bottom: 45px;}
    #page-banner .banner-inside {padding: 25px 0;}
    #page-banner .banner-inside h2 {font-size: 40px;}

    .page-txt-24 {font-size: 20px;}

    #our-products .product-img {margin-bottom: 18px;}
    #our-products .display-7 {font-size: 24px;}

    #contact-sec .lead {font-size: 16px;}

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {

    .hero-img .banner-content h4 {font-size: 22px;}
    .hero-img .banner-content h2 {font-size: 32px;}
    
    #home-about p {font-size: 20px;}


}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {

    .hero-img .banner-content h2 {font-size: 45px;}
    .hero-img .hero-content img {width: 400px;}

    #home-about p {font-size: 20px;}



}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {}

/* 15" Notebook (1366x768) */
@media (min-width: 1280px) and (max-width: 1365.98px) {}

/* 19" Desktop (1400x900) */
@media (min-width: 1366px) and (max-width: 1440px) {}

/* 22" Desktop (1680x1050) / 20" Desktop (1600x900) */
@media (min-width: 1441px) and (max-width: 1680px) {}

/* 24" Desktop (1920x1200) / 23" Desktop (1920x1080) */
@media (min-width: 1681px) and (max-width: 1920px) {}


/* phone landscape view  */
@media (min-width: 480px) and (max-width: 767px) {}

/* phone portrait view  */
@media (max-width: 479px) {}


.list-style-circle{
    list-style-type: circle !important; 
}