@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

:root { --green-color: #3DB87B; --sidebar-green: #C8FDE3; --blue-color: #071d57; --heading-color: #222B5E; --text_color: #3D3D3D; --light_grey: #696969; --white-color: #FFFFFF; --dark_grey: #F9FAFB; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; background-color: transparent; }
::-webkit-scrollbar-track { background-color: transparent; }
::-webkit-scrollbar-thumb { background-color: #94c4ac; border-radius: 20px; }
::-webkit-scrollbar-thumb:hover { background-color: #3DB87B; }
.scroll-border-radius::-webkit-scrollbar-thumb { border-top-left-radius: 20px; border-top-right-radius: 20px; }
.no-top-border-radius::-webkit-scrollbar-thumb { border-top-left-radius: 0; border-top-right-radius: 0; }
.no-bottom-border-radius::-webkit-scrollbar-thumb { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

/* Body */ .app-default, body { background-color: var(--white-color); font-family: "Nunito", sans-serif; }
/*.custom-container { max-width: 1360px; }*/

/* Font Sizes */
h1, .fs-70 { font-size: 70px; font-weight: 500; }
h2, .fs-50 { font-size: 50px; font-weight: 500; }
h3, .fs-30 { font-size: 30px; font-weight: 500; }
h4, .fs-24 { font-size: 24px; font-weight: 400; }
h5, .fs-22 { font-size: 22px; font-weight: 400; }

.fs-20{font-size: 20px;}
h6, .fs-19 { font-size: 19px; font-weight: 400; }
.fs-18 {font-size: 18px;}
p, .fs-16 { font-size: 16px; font-weight: 400;  margin: 0 ; }

.fw-400{font-weight: 400;}
.fw-600{font-weight: 600;}
.fw-700{font-weight: 700;}


ul{ padding: 0; font-size: 16px; }
li{ list-style: none;font-size: 16px; }
span{ font-size: 16px; }
a{ color: var(--blue-color);}

/*colors*/

.white_color{ color: var(--white-color);}

.copyright{ background-color: var(--green-color);  padding-block: 12px; color: var(--white-color); }

/* buttons */
.green-btn {  color: var(--white-color); border-radius: 10px; background-color: var(--green-color); }
.blue-btn {   color: var(--white-color); border-radius: 10px; background-color: var(--blue-color); }
.white-btn {   color: var(--blue-color); border-radius: 10px; background-color: var(--white-color); border:1px solid transparent !important;}
.white-btn:hover { border: 1px solid var(--white-color) !important; color: var(--white-color) !important;}
a.btn.green-btn:hover{ color: var(--green-color); border:1px solid var(--green-color);   }
a.btn.blue-btn:hover{ color: var(--blue-color); border:1px solid var(--blue-color)  }
.btn:hover { border:1px solid var(--green-color) !important; border-color: #FFF; }
.app-navbar-item .btn:hover{border-radius: 50%}
.scrolltop { background-color: #37b780; }
.news-banner-inner a.btn:hover {border: 1px solid transparent !important;}

/* navbar */
.cust-nav a { font-size: 16px; color: var(--heading-color); }
.cust-nav .nav-btn a.green-btn { font-size: 16px; color: var(--white-color); background: var(--green-color);  border:1px solid var(--green-color) !important; }
.cust-nav .nav-btn a.green-btn:hover{ color: var(--green-color); background: transparent; border:1px solid var(--green-color);  }
.navbar-nav .nav-link.active {border-bottom: 2px solid var(--blue-color);  color: var(--blue-color);}
.nav-item.dropdown:hover .dropdown-menu {display: block;}
.cust-nav {position: fixed;left: 0;right: 0; z-index: 888;}


/* footer */
.cont li { padding-block: 8px; width: 60%;}
.cont li a i { font-size: 16px;}
.f-logo {  padding-bottom: 20px;}
.cust_footer {padding-block: 50px;border-top:1px solid var(--green-color);}
.q-link {  padding-top: 10px;}
.q-link ul li { padding-block: 7px;}
.f-newsletter { padding-top: 10px;}
.cont li a {display: flex;align-items: baseline;gap: 10px;}
.f-newsletter .news-form {  background: var(--white-color);  display: flex;  border: 1px solid var(--green-color);  border-radius: 10px;  overflow: hidden;}
.news-form input.form-control {  border: none;}
.news-form input.sub-btn {   background: var(--green-color);   color: var(--white-color);   width: auto;   padding-inline: 35px; height: 50px; border-radius: 0;}
.social-icon a i {  font-size: 20px;}
.social-icon { display: flex;align-items: center;  gap: 35px; padding-block: 20px;}

/* hero sec */
.hero-sec {  height: 100vh; max-height: 500px; display: flex; align-items: center;  background: linear-gradient(90deg, #3DB87B 40.03%, rgba(255, 255, 255, 0.00) 117.99%), url(../media/img/card-img.png) lightgray 0px -160.783px / 100% 166.713% no-repeat; color: var(--white-color);  padding-top: 60px;}
.hero-sec h1 { color: var(--white-color); }
.hero-inner { width: 100%; max-width: 782px;}

/* blog-purpose-sec */
.blog-purpose-sec { padding-block: 50px;}
.blog-purpose-inner {  height: 100%; min-height:545px; display: flex; align-items: center; gap: 30px; flex-direction: column; justify-content: center;border-radius: 40px;  background: linear-gradient(0deg, rgba(34, 43, 94, 0.79) 0%, rgba(34, 43, 94, 0.79) 100%), url(../media/img/second-img.png) lightgray 50% / cover no-repeat; padding: 100px; color: var(--white-color);}
.blog-purpose-inner h2{ color: var(--white-color); }
/* .blog-purpose-inner p {padding: 2em 12em;} */


/* multi-col-sec */
.multi-col-sec { padding: 50px; }
/* .multi-col-sec-img {   width: 664px; height: 398px;} */
.multi-col-sec-img img{ object-fit: cover; }


/* trust sec */

.trust-sec { background: var(--green-color);  padding-block: 50px;}
.trust-card-sec { padding-block: 50px;}
.trust-head h2{ color: var(--white-color);}
.trust-card.text-center { background: var(--white-color); padding: 20px;  border-radius: 20px; height:100%}
.trust-icon { padding-block: 22px; }


/* choose Product */
.pro-card { background: var(--green-color); width: 100%; height: 100%; margin: auto; padding: 30px; text-align: center; border-radius: 20px;   }
.pro-card-row { display: flex;  align-items: center; gap: 50px; width: 100%; max-width: 70%; margin: auto; }
.choose-product-sec { padding-block: 50px;}
.pro-card h3 { background: var(--white-color);  width: fit-content; padding: 10px 40px; border-radius: 12px;margin: auto;}

/* blog-card */
.blog-sec { padding-block: 50px;}
.blog-card { border-radius: 20px; background: var(--white-color); padding: 20px; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.10); }
.blog-content { padding-block: 20px; }
.blog-content a { color: var(--green-color); }
.blog-img img {   width: 100%; object-fit: cover; height: 300px; object-fit: cover; border-radius: 20px;}
.blog-content p { width: 300px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }

/* newsletter-banner */
.newsletter-banner { background: linear-gradient(90deg, #3DB87B 40.03%, rgba(255, 255, 255, 0.00) 117.99%), url(../media/img/hero.png) lightgray 0px -160.783px / 100% 166.713% no-repeat; text-align: center; padding-block: 50px; }
.news-banner-inner a.btn {  background: var(--white-color);  color: var(--green-color); font-size: 16px; border:1px solid transparent !important;}
.news-banner-inner  h2 {  color: var(--white-color);}


/* our story page */

/* banner */
.top-banner { display: flex; align-items: center; height: 100vh; max-height: 350px ; background: linear-gradient(90deg, #3DB87B 40.03%, rgba(255, 255, 255, 0.00) 117.99%), url(../media/img/hero.png) lightgray 0px -160.783px / 100% 166.713% no-repeat; padding-top: 50px;}
.banner-inner  h2 {  color: var(--white-color);}


/* faq */
.faq-tabs .nav-pills>li.active>a, .faq-tabs .nav-pills>li.active>a:focus, .faq-tabs .nav-pills>li.active>a:hover {  border-radius: 10px; background: #FFF; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.10);   padding-block: 24px;  background-color: var(--heading-color);}
.faq-tabs .nav-pills>li>a span { font-size: 18px; }
.nav-pills>li { padding-inline: 20px; }
.faq-tabs { padding-block: 50px; }
.faq-tabs .nav>li>a{padding-block: 24px; border-radius: 10px; background: var(--white-color); box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.10); }
.tab-content { border-radius: 10px;  background: var(--white-color);  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.10);}
.accordion-item h2 {margin: 0; margin-inline: 20px;}
.accordion-item{ border: 1px solid gray; border-radius: 10px; overflow: hidden;}
.accordion-item:not(:first-of-type){ border: 1px solid gray; }
.accordion-button:not(.collapsed) {background-color: transparent;color: black;border-bottom: 1px solid lightgray;}
.faq-tabs .nav-tabs a.nav-link.active, .faq-tabs .nav-tabs a.nav-link:focus { padding: 20px;  border: none;  background-color: var(--blue-color) !important; ;  color: var(--white-color) !important;}
.faq-tabs .nav-tabs a.nav-link.active:hover { color: var(--blue-color); }
.faq-tabs .nav-tabs a.nav-link {   padding: 20px;  border: none;  background-color: var(--white-color);  color: var(--blue-color);}
.nav-line-tabs { border: none;}

.faq-tabs .nav-line-tabs .nav-item .nav-link:hover:not(.disabled), .nav-line-tabs .nav-item.show .nav-link
{border-bottom: unset;}

/*product-page*/
.product-page .faqs-div { border-radius: 10px; background: var(--white-color); box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.10); padding: 40px; }
.plan-card {display: flex; flex-direction: column; justify-content: space-between;  padding: 35px;
    border: 1px solid var(--white-color); border-radius: 10px;  background: var(--white-color);  box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.10);}
.plan-card span.plan-icon i { font-size: 35px;  color: var(--white-color);  padding: 12px 12px;border-radius: 10px;  background-color: var(--green-color) ;  box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.10);}
.plan-card li span i {  background: transparent; color: var(--green-color) ;  box-shadow: none;   padding: 0 12px;   font-size: 20px;}
.plan-card a.btn.green-btn { width: 100%;}
.plan-card ul.plan-card-text { padding-block: 22px; height: 155px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;}
.plan-card ul li { padding-block: 7px;}
.plan-card:hover { background: var(--green-color); color: var(--white-color); border: 1px solid var(--white-color);}
.plan-card:hover h3 { color: var(--white-color);}
.plan-card:hover a.btn.green-btn {background-color: var(--white-color);color: var(--green-color);}
.plan-card:hover span.plan-icon i { background-color: var(--white-color); color: var(--green-color);}
.plan-card:hover li span i{ color:var(--white-color); }
.plan-card:hover .plan-icon , .plan-icon{ border: 2px solid #FFF; border-radius: 5px; }
.plan-icon img {border: 2px solid var(--white-color);}

/*residential sec*/
.residential { background: var(--green-color); }
.process-card { display: flex; flex-direction: column; gap: 20px; position: relative; }
.process-head {width: 60%;margin: auto;}
.top-rang-1:before { content: ''; background: url(../media/img/range1.png); background-repeat: no-repeat; position: absolute; width: 100%; height: 100%; max-width: 35%; max-height: 50%; left: 10px; right: 0; margin: auto; top: -12px; border: 0; }
.top-rang-2:before { content: ''; background: url(../media/img/range2.png); background-repeat: no-repeat; position: absolute; width: 100%; height: 100%; max-width: 35%; max-height: 50%; left: 10px; right: 0; margin: auto; top: -20px; border: 0; }
.top-rang-3:before { content: ''; background: url(../media/img/range3.png); background-repeat: no-repeat; position: absolute; width: 100%; height: 100%; max-width: 35%; max-height: 50%; left: 10px; right: 0; margin: auto; top: -20px; border: 0; }
.top-rang-4:before { content: ''; background: url(../media/img/range4.png); background-repeat: no-repeat; position: absolute; width: 100%; height: 100%; max-width: 35%; max-height: 50%; left: 10px; right: 0; margin: auto; top: -20px; border: 0; }
.logo-sec { border-block: 1px solid green; }
.logos { display: flex;  align-items: center; justify-content: space-between;}


/*umer css*/

/*contact-us*/
.contact_inner h3 { font-size: 50px; font-weight: 400; line-height: 1.2; }
.contact_inner h5 { font-size: 24px; font-weight: 400; line-height: 1.2; }
.main_call_us { display: flex; gap: 20px; padding-top: 20px; }
.number p { margin: 0; font-size: 22px; font-weight: 400; line-height: 1.2; }
.number p a { color: var(--white-color); text-decoration: none; }
.follow h6 { font-size: 26px; font-weight: 400; line-height: 1.2; margin: 0; }
.follow { display: flex; gap: 20px; align-items: center; padding-top: 25px; padding-inline: 10px; }
.fb_icon a { color: rgba(255, 255, 255, 1); }
.fb_icon a i:hover { color: var(--white-color); }
.fb_icon a i { color: var(--white-color); font-size: 26px; }
.fb_icon { font-size: 26px; gap: 18px; display: flex; }
.information { background: linear-gradient(0deg, rgba(61, 184, 123, 0.86) 0%, rgba(61, 184, 123, 0.86) 100%), url(../media/img/contac-img1.png) lightgray 50% / cover no-repeat; padding: 30px; border-radius: 20px; color: var(--white-color); }
.get_in_touch_form h3 { font-size: 50px; font-weight: 500; line-height: 1.2; margin: 0; }
.get_in_touch_form .form-control { padding: 15px; border: 1px solid; border-radius: 10px; }
.get_in_touch_form { padding-inline: 25px; padding-block: 40px; }
.get_in_touch_form label { padding-block: 10px; font-size: 18px; margin: 0; }
.custom_form_but a, .custom_form_but input[type="submit"] { text-decoration: none; color: var(--white-color); background: rgba(61, 184, 123, 1); padding: 12px 50px 12px 50px; border: 1px solid var(--white-color); border-radius: 10px; font-family: sans-serif; font-size: 18px; font-weight: 300; }
.custom_form_but { padding-top: 25px; }
.section_2 { padding-block: 50px; }
.contact_inner h4 { margin-bottom: 15px; }
.call_us a { text-decoration: none; }
.call_us i { width: 56px; height: 56px; background: var(--white-color); color: rgb(61 184 123); border-radius: 50px; align-items: center; display: flex; justify-content: center; font-size: 28px; }

.form-control.is-invalid, .was-validated .form-control:invalid { background-image: none !important;}

/*span#toggle-password i { transform: translateY(-2.6em); right: 4%;}*/

/*.profile-form  span#toggle-password i { position: absolute; display: flex; !* left: 0; *! right: 15px; top: 70px; bottom: 0; }*/
/*.profile-form  span#toggle-password i { top: 42px; !* display: flex; *! right: 25px; bottom: 0; left: 34em; }*/
/*.profile-form  .pas span#toggle-password-confirm { right: 1em; top: 34px; bottom: 2px; }*/



.get_in_touch_form select#subjectSelect { appearance: auto;}
/* Privacy Policy */
.privacy-inner { display: flex;  flex-direction: column;  gap: 10px;}




/* login */
.bg-body {  height: auto;  margin: auto; }
.d-none { display: none;}
.pas span { padding: 2px 6px 10px;}


.app-sidebar-menu.overflow-hidden.flex-column-fluid {
    background-color: #C8FDE3;
    color: #071d57;
}
.estimate-btn{border: 1px solid transparent !important;}
.estimate-btn:active{color: white !important; border: 1px solid white !important;}
.btn-cancel:hover{border: 1px solid transparent !important;}
.btn.action_btn:hover {border: none !important;}

span#password-error, span#email-error, span#name-error, span#confirm_password-error { color: var(--bs-text-danger); font-size: 13px; }

#mail{width: 100%;}

.privacy-inner p{font-size: 16px;}
.privacy-inner h3{font-size: 30px;}
.accordion-button{font-size: 20px;}
.accordion-body {font-size: 20px;margin-inline: 20px;}
.nav-pills>li {padding-inline: 15px;}
.prod-plan-sec p{font-size:16px;}



.navbar .nav-btn .white-btn-login{display: none;}

.our-process-bg-img.discovery-bg-img {
    right: -150px;
    top: -20px;
}


.our-process-bg-img.collection-bg-img {
    top: -24px;
    right: -106px;
}
.our-process-bg-img.analysis-bg-img {
     top: -22px;
     right: -107px;
 }
.our-process-bg-img.report-bg-img {
    top: -23px;
    right: -102px;
}