@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600&display=swap');
html {scroll-behavior: smooth;}
body {background-color: #ffffff; font-family: 'Oswald', sans-serif; line-height: 1.6; transition: ease-in-out all 0.2s;}
P {color: #606060; margin: 0 0 10px 0; font-size: 16px; }
a { text-decoration: none; outline: none; color: #606060; transition: ease-in-out all 0.2s;}
a:hover { color: #606060;}
h1, h2, h3, h4, h5, h6 {margin: 0; font-weight: 600; }
ul { display: block; margin: 0;}
li { list-style: none;}

.btn-custom { background-color: #75b531; padding: 10px 30px; color: #ffffff; font-size: 18px; display: inline-block; margin: 0 0 30px 0; transition: all 0.2s ease-in-out;}
.btn-custom:hover { color: #ffffff; box-shadow: inset 150px 0 0 0 #000000; }

.download-btn {background-color: #14337A; padding: 2.5px 10px; color: #ffffff; font-size: 14px; border-radius: 2px; display: inline-block;}

.heading-title h1 {font-size: 36px; font-weight: 700; margin: 0 0 30px 0; color: #333333;}
.heading-title h2 {font-size: 30px; font-weight: 700; margin: 0 0 30px 0; color: #333333;}
.heading-title h3 {font-size: 30px; font-weight: 700; margin: 0 0 30px 0; color: #333333;}
.heading-title h4 { font-size: 21px; font-weight: 700; margin: 0 0 30px 0; color: #333333;}

.inner-banner { background: linear-gradient(40deg, rgba(20,51,122,1) 20%, rgba(0,107,203,1) 100%);} 
.copyf {
    text-align: right;
}
/*=============Top header css Start============*/
.main-header {background: #006BCB;}
.top-header {background-color: transparent; padding: 3.5px 0;}
.top-header p { color: #f5f5f5; font-weight: 600; margin: 0;}
.top-header p a { color: #f5f5f5; transition: ease-in-out all 0.2s; margin-right: 30px;}
.top-header p a i { color: #fff;}
.top-header .social-media { display: block; margin: 0; padding: 0;}
.top-header .social-media li { display: inline; list-style: none;}
.top-header .social-media li a { font-size: 15px; color: #ffffff; margin-left: 15px; transition: ease-in-out all 0.2s;}

/*===================Navigation Menu (Dropdown css Start)================*/
.navbar { padding: 0; position: relative; z-index: 999999;}
.navbar-light .navbar-nav .nav-link { color: #282a43; padding: 0 20px;}
.bg-white { background-color: rgb(251, 249, 254) !important}
.navbar-expand-lg .navbar-nav .nav-link { padding-right: 0; padding-left: 0; margin: 0 20px;}
.navbar-light .navbar-nav .nav-link.active { color: #75b531;}
.navbar-light .navbar-nav .nav-link:hover { color: #75b531;}
.navbar-light .navbar-brand { margin: 0 15px; padding: 0;}
.navbar-light .navbar-brand img { width: auto; height: 70px; padding:0;}
.sticky { position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 999999; background-color: #ffffff !important; transition: ease-in-out all 0.2s; box-shadow: 0 0.3rem 0.4rem rgba(0,0,0,.15) !important;}
.btn-outline-success { color: #fff; background-color: #75b531; border-color: #75b531; padding: 30px; border-radius: 0; width: 100%; display: block;}
.btn-outline-success:hover { color: #ffffff; background-color: #000000;}
.navi-menu { width: 100%; background-color: transparent; position: relative; z-index: 9;}

/*======================== Navigation Menu (Animated X) ====================*/
.navbar-toggler.x { border: none; padding-right: 10px;}
.navbar-toggler.x:focus { outline: none !important; box-shadow: none !important;}
.navbar-toggler.x[aria-expanded=true] .icon-bar:nth-of-type(1) { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 10% 10%; -ms-transform-origin: 10% 10%; transform-origin: 10% 10%;}
.navbar-toggler.x[aria-expanded=true] .icon-bar:nth-of-type(2) { opacity: 0;}
.navbar-toggler.x[aria-expanded=true] .icon-bar:nth-of-type(3) { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 10% 90%; -ms-transform-origin: 10% 90%; transform-origin: 10% 90%;}
.navbar-toggler.x .icon-bar { width: 22px; display: block; height: 2px; background-color: #151515; -webkit-transition: all 0.2s; transition: all 0.2s;}
.navbar-toggler.x .icon-bar + .icon-bar {margin-top: 4px;}
.navbar-toggler.x .icon-bar:nth-of-type(1) {-webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0);}
.navbar-toggler.x .icon-bar:nth-of-type(2) { opacity: 1; filter: alpha(opacity=100);}
.navbar-toggler.x .icon-bar:nth-of-type(3) { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0);}
.navbar-toggler { padding: 0;}

/*=============Carasoul Section css Start============*/
.main-slider-home { position: relative; margin-top: -90px;}
.main-slider-home .carousel .carousel-inner .carousel-item img { height: 700px; object-fit: cover; object-position: center;}
.carousel-caption { top: 35%; text-align: center; left: 10%; right: 10%; width: 80%;}
.carousel-caption .heading-title h1 {font-size: 36px; font-weight: 700; margin: 0px 0 5px 0; color: #ffffff; text-shadow: 0 0 3px #000000, 0 0 5px #000000;}
.carousel-caption .heading-title h2 { font-size: 42px; font-weight: 600; color: #ffffff; margin: 0 0 15px 0; text-shadow: 0 0 3px #000000, 0 0 5px #000000}
.carousel-caption .heading-title h2 span { color: #ffffff;}
.carousel-caption p{ color: #ffffff; font-size: 18px; font-weight: 500; text-shadow: 0 0 3px #000000, 0 0 5px #000000}
.carousel-caption .btn-custom { margin: 30px 0 0 0; padding: 12px 35px}

/*================== About Amber Heights Section css Start ====================*/
.about-section { padding: 6% 0 0 0; background-color: transparent; background-image: linear-gradient(90deg, #eeeeee 38%, #FFFFFF 38%);} 
.about-section .heading-title .lead { font-size: 18px; font-weight: 600; color: #303030; margin: 0 0 20px 0;}
.about-section .heading-title h2 { font-size: 21px; margin: 0 0 10px 0; color: #75b531; font-weight: 500; font-family: 'Dosis', sans-serif;}
.about-section .heading-title h3 { font-size: 30px; margin: 0 0 30px 0; font-weight: 700;}
.about-section .about-section-content { background: linear-gradient(40deg, rgba(20,51,122,1) 20%, rgba(0,107,203,1) 100%); margin: 10px 0; border-radius: 5px; transition: all 0.5s ease-in-out; padding: 30px 15px;}
.about-section .about-section-content i { color: #fff; font-size: 35px; padding: 30px 0 15px;}
.about-section .about-section-content h5 { font-size: 18px; letter-spacing: 1px; color: #fff;}
.about-section .about-section-content img { width:65px;padding: 0 0 20px 0;}
.about-section .about-section-content p { padding: 0; font-size: 18px; color: #f1faee; margin: 0 0 10px 0; font-weight: 600;}
.about-section .about-icon-section { margin:5% 0 0 0;}
.about-section img { height: 550px; object-fit: cover; object-position: center; width: 100%;}
.about-section .btn-custom { margin: 30px 0 0 0; padding: 12px 30px;}

.about-section .carousel-inner .carousel-item img { height: 450px; object-fit: cover; object-position: center; width: 100%;}

.our-product { padding: 6% 0 0 0; background-color: transparent; background-image: linear-gradient(90deg, #fff 72%, #eee 38%);}
.our-product img { height: 460px; object-fit: cover; object-position: center; width: 100%;}
.our-product .btn-custom { margin: 30px 0 0 0; padding: 12px 30px;}
.our-product .heading-title h6 { font-size: 21px; margin: 0 0 10px 0; color: #75b531; font-weight: 450; font-family: 'Dosis', sans-serif;}
.our-product .heading-title h3 { font-size: 30px; margin: 0 0 30px 0; font-weight: 700;}

.fact-section { padding: 6% 0 0 0; background-color: #000000; margin: 6% 0 0 0;}
.fact-section .heading-title h2 { color: #ffffff; font-size: 30px; margin: 0 0 30px 0;}
.fact-section .heading-title h6 { color: #75b531; font-size: 21px; font-weight: 450; font-family: 'Dosis', sans-serif;}
.fact-section p { color: #ffffff;}
.fact-section-detail { width: 100%; padding: 30px; margin: 5% 0 0 -40%; display: inline-block; background-color: #75b531;}
.fact-section img { height: 500px; object-fit: cover; object-position: top; width: 100%;}
.fact-one { display: block; width: 100%; padding: 30px; border-top: 2px solid #75b531; border-bottom: 2px solid #75b531; text-align: center; background-color: #111111;} 
.fact-one .heading-title h3 span { font-size: 48px; color: #75b531; margin: 0 0 15px 0; display: inline-block; width: 100%;}
.fact-one .heading-title h3 { color: #75b531; font-size: 30px; margin: 0; font-weight: 600;}
.fact-one .heading-title h4 { color: #ffffff; font-size: 30px; margin: 0; font-weight: 600;}
.fact-one p { color: #ffffff; margin: 15px 0 0 0;}

.protect-section { padding: 6% 0 0 0;}
.protect-section .heading-title h2 { font-size: 30px; margin: 0 0 15px 0; }
.protect-section .heading-title h6 { font-size: 21px; margin: 0 0 10px 0; color: #75b531; font-weight: 450; font-family: 'Dosis', sans-serif;}
.protect-section .heading-title p { font-size: 18px; margin: 0 0 30px 0;}
.protect-section .box{ background: linear-gradient( 110.3deg, rgb(117, 181, 49) 4.3%, rgb(117, 181, 49) 50.0% ); text-align: center; border: 2px solid #75b531; overflow: hidden; position: relative; transition: all 0.3s ease 0s; margin: 12px 0;}
.protect-section .box:hover { box-shadow: 0 0 5px rgba(0,0,0,0.8); }
.protect-section .box::before { content: ""; width: 100%; height: 100%; border: 3px solid rgba(0, 0, 0, 0.8); box-shadow: 0 0 0 30px #000; opacity: 0; transform: translateX(-50%) translateY(-50%) scale(0.9); position: absolute; top: 50%; left: 50%; transition: all 0.35s; }
.protect-section .box:hover:before{ opacity: 1; }
.protect-section .box img { width: 100%; opacity: 1.0; transition: .3s linear; height: 150px; object-fit: cover; object-position: center;}
.protect-section .box:hover img{ opacity: 0.3; transform: scale(0.9); }
.protect-section .box .box-content{ color: #fff; width: 100%; transform: translateY(-30%); position: absolute; top: 50%; left: 0; z-index: 2; transition: all .5s ease; }   
.protect-section .box:hover .box-content{ transform: translateY(-50%); }
.protect-section .box h3 { font-size: 21px; font-weight: 600; margin: 0 0 3px 0; opacity: 0; transition: all 0.5s ease 0s; } 
.protect-section .box:hover h3 { opacity: 1; transition-delay: 0.2s; } 

/*================== Mission Vision Section css Start ====================*/
.mission-vision { background-image: url("../image/home/mission-bg.png") ; background-size: cover; background-attachment: fixed; padding: 10% 0; margin: 6% 0 0 0; position: relative;}
.mission-vision .heading-title h2 { color: #ffffff; font-size: 30px; margin: 0 0 30px 0; position: relative; z-index: 1;}
.mission-vision .lead { color: #a5f94d; font-weight: 600; margin: 10px 0 0 0; position: relative; z-index: 1; font-size: 21px;}
.mission-vision p { color: #f4f4f4; position: relative; z-index: 1;}
.mission-vision-overlay { position: absolute; background-color: rgba(0,0,0,0.5); top: 0; bottom: 0; left: 0; right: 0; }

/*================== Testimonial Section css Start ====================*/
.testimonials-wrape { padding: 6% 0; background-color: #f8f8f8; margin: 6% 0 0 0;}
.testimonials-wrape .heading-title h2 { font-size: 30px; margin: 0 0 30px 0;}
.testimonials-wrape .heading-title h6 { font-size: 21px; margin: 0 0 10px 0; color: #75b531; font-weight: 450; font-family: 'Dosis', sans-serif; text-aling: center}
.testimonials-wrape .testimonial { text-align: center; background-color: transparent; margin: 7.5px;  padding: 15px 30px; border-radius: 5px;}
.testimonials-wrape .testimonial p { color:#6e6e6e; font-size: 15px; margin: 30px 0 0 0; position:  relative;}
.testimonials-wrape .testimonial .pic { }
.testimonials-wrape .testimonial .pic img { border-radius: 50%; width: 80px; height: 80px;}
.testimonial p:before, .testimonial p:after{ font-family: "Font Awesome 5 Free"; font-weight: 900; position: relative; color: #75b531;}
.testimonial p:before { content: "\f10d"; margin-right: 5px; top: 0; left: 0; }
.testimonial p:after { content: "\f10e"; margin-left: 5px; position: relative; bottom: 0; right: 0; }
.testimonials-wrape .testimonial .testimonial-review h4{ font-size: 21px; color:#3a3a3a; margin:  15px 0 0 0;}
.testimonials-wrape .owl-theme .owl-controls .owl-pagination{ margin: 0 auto 15px auto; text-align: center;}
.testimonials-wrape .owl-theme .owl-controls .owl-page { width: 10px; height: 10px; background: #75b531; border: 2px solid transparent; opacity: 1; border-radius: 50%; transition: ease-in-out all 0.2s; display: inline-block; margin: 0 5px;}
.testimonials-wrape .owl-theme .owl-controls .owl-page.active, .testimonials-wrape .owl-theme .owl-controls .owl-page:hover { background: #000000; border-color: 2px solid #000000;}

/*===================== Footer css Start ================*/
footer { background-color: #000000; padding: 3% 0 1% 0;}
footer .logo img { background-color: #fff; display: inline-block; padding: 20px 15px; width: 130px; margin: -100px 0 30px 0; box-shadow: 0 20px 40px 8px rgba(0,0,0,.25);}
footer .footer-detail .quick-links { padding: 0; margin: 0;}
footer .footer-detail .quick-links li { list-style: none; margin-bottom: 10px;}
footer .footer-detail .quick-links li a { color: #dfdfdf; transition: ease-in-out all 0.2s; }
footer .footer-detail .quick-links li a:hover { color: #75b531;}
footer .footer-detail .quick-links li a i { color: #75b531;}
.footer-detail h5 { color: #75b531; font-size: 21px; font-weight: 600; margin: 0 0 20px 0;}
.footer-detail .heading-title span { margin: 0 auto 30px auto;}
.footer-detail p { color: #dfdfdf; margin-bottom:  10px;}
.footer-detail p i { color: #75b531;}
footer p a { color: #dfdfdf;}
footer p a:hover { color: #75b531;}
.footerSocialMedia { display: inline-block; padding: 0; margin: 15px 0 0 0;}
.footerSocialMedia li { list-style: none; float: left;}
.footerSocialMedia li a { color: #75b531; padding: 0; text-align: center; display: block; margin: 0 15px 0 0px; transition: ease-in-out all 0.2s; background-color: #000000; height: 35px; width: 35px; line-height: 32px; border: 1px solid #75b531; font-size: 15px;}
.footerSocialMedia li a:hover { background-color: #75b531; color: #ffffff; border-color: #75b531;}
.middleFooter { background-color: #151515; display: block; margin: 0; padding: 15px 0;}
.middleFooter p b { color: #828282; font-weight: 450;}
.middleFooter p a { color: #828282; transition: ease-in-out all 0.2s;}
.middleFooter p a:hover { color: #606060}
.copyright { display: block; width: 100%; }
.copyright p { margin: 0;}


/*================== Our Service Section css Start ====================*/
.our-services { background-color: #f4f4f9; padding: 5% 0; margin: 4% 0 0 0;}
.our-services .heading-title span { margin: 0 auto 15px auto; }
.our-services .heading-title h3 { margin: 0 0 15px 0; font-size: 30px; color: #151515;}
.our-services .heading-title .lead { font-size: 16px; font-weight: 400; margin: 0 0 20px 0;}
.our-services .service-detail { background-color: #ffffff; border: 1px solid #cccccc; padding: 30px 15px; border-radius: 5px; margin: 12px 0;}
.our-services .service-detail img { margin: 0 auto; width: 65px; margin: 0 0 20px 0;}
.our-services .service-detail p { font-size: 18px; color: #303030; font-weight: 600; margin: 0;}

/*=================== Team Section css Start ====================*/
.our-team .pic { padding: 30px 0 10px; margin: 0 auto; width: 150px;}
.our-team .pic img{ border-radius: 100%; border: 4px solid #f1f2f6; transition: all 0.5s ease-in-out;}
.our-team .team-detail { padding: 15px 0 0 0; text-align: center;}
.our-team .team-detail h4 { color: #151515; font-size: 21px; font-weight: 600;}
.our-team p {display: block; margin: 5px 0 0 0; font-weight: 600;}
.our-teams {padding: 6% 0 0 0;}
.our-teams .heading-title span { margin: 0 auto 30px auto; }
.our-teams .heading-title h3 { font-size: 30px; margin: 0 0 15px 0;;}
.our-team { background: #f4f4f9; width: 100%; min-height: 330px; margin: 15px 0; border-radius: 5px;}
.our-team .curve {background: linear-gradient(40deg, rgba(20,51,122,1) 20%, rgba(0,107,203,1) 100%); height: 120px; border-bottom-left-radius: 100%; border-bottom-right-radius: 100%; }
.our-team:hover .pic img { transform: scale(1.1);}

/*===================== Amber Family css Start ===================*/
.photos-section {padding: 6% 0 0 0; background-color: #ffffff}
.photos-section .heading-title h3 { margin: 0 0 15px 0;}
.photos-section .heading-title span { margin: 0 auto 30px auto;}
.photos-section-detail { margin: 15px 0; border-radius: 0; overflow: hidden; position: relative;}
.photos-section-detail .photos-section-detail-img { transition: 0.4s ease-in-out; position: relative; text-align: center;}
.photos-section-detail .photos-section-detail-img .overlay { position: absolute; overflow: hidden; top: 0; left: 0; opacity: 0; background: rgba(0, 107, 203, 0.5); width: 100%; height: 100%; cursor: pointer; transition: all .4s ease-in-out;}
.photos-section-detail .photos-section-detail-img img { display: block; position: relative; transition: all .4s ease-in-out; border-radius: 5px;}
.photos-section-detail .photos-section-detail-img p{ display: inline-block; color: #fff; border: 1px solid #fff; background-color: transparent; opacity: 0; transition: all .2s ease-in-out; margin-top: 35%; padding: 7px 14px; box-shadow: 0 0 5px #fff;}
.photos-section-detail-img:hover img{ transform: scale(1.1);}
.photos-section-detail-img:hover .overlay{ opacity: 1;}
.photos-section-detail-img:hover h2, .photos-section-detail-img:hover p {opacity: 1; transform: translateY(0);}

/*===================== Contact form Section css Start ================*/
.inner-banner{ background-image: url("../image/contact/contact-banner.jpeg"); background-size: cover; background-position: center top; padding: 10% 0 10% 0; margin-top: -90px;}
.about-us-banner { background-image: url("../image/about/about-us-banner.jpeg"); background-size: cover; background-position: center top; padding: 10% 0 5% 0;}
.about-banner { background-image: url("../image/about/about-us-banner.jpeg"); background-size: cover; background-position: center top; padding: 10% 0 5% 0;}
.inner-banner h2{ font-weight: 700; font-size: 30px; color: #fff;}
.inner-banner ul{ display: flex; list-style: none; padding: 0; margin: 0; color: #fff;}
.inner-banner ul a{ color: #fff;}
.inner-banner ul li{ padding-right: 10px;}
.inner-banner ul li:nth-child(2):before { content: "/"; padding-right: 10px; color: #fff;}

.contact-form-btn { background-color: #006BCB; padding: 10px 30px; color: #ffffff; font-size: 16px; border-radius: 3px; display: inline-block; margin: 20px 0 0 0; transition: all 0.5s ease-in-out;}
.contact-form-btn:hover { color: #ffffff; box-shadow: inset 300px 0 0 0 #14337A;}

.contact-section { padding: 0;   margin-top: -50px; margin-bottom: 7%; background-color: #fff; box-shadow: 2px 0px 19px -2px rgba(148,148,148,0.2);}
.product-form { margin: 5% 0; box-shadow: none;}
.product-form .contact-form { box-shadow: 2px 0px 19px -2px rgba(148,148,148,0.2); padding: 30px !important;}
.contact-section .contact-form {background-color: #ffffff; padding: 60px 45px 60px 0;}
.contact-section .heading-title h4 { color: #151515; font-size: 24px; margin: 0 0 30px 0;}
.bg-green { background-color: #75b531; padding: 45px 30px; display: inline-block; width: 100%; min-height: 100%;}
.contact-section .contact-form .heading-title h4 { color: #151515; font-size: 24px; margin: 0 0 30px 0;}
.contact-section .contact-form .form-control { background-color: transparent; border: 1px solid #60606087; border-radius: 0; color: #151515; padding: 10px 15px}
.form-select { background-color: transparent; border: 1px solid #60606087; border-radius: 0; color: #151515; padding: 10px 15px;}
.contact-section .contact-form .form-floating > label { color: #606060; padding: 15px 5px; }
.contact-section .contact-form .form-control:focus { background-color: transparent; border: 1px solid #75B531; box-shadow: none; outline: none;  color: #151515;}
.contact-section .contact-form .form-floating > .form-control:not(:placeholder-shown) ~ label { color: #006BCB;}
.contact-section .contact-form .btn-primary { background-color: #151515; border:none; padding: 12px 35px; margin-top: 15px;transition: ease-in-out all 0.2s; border-radius: 0;}
.contact-section .contact-form .btn-primary:hover { background-color: #75b531;}
.contact-section .contact-form .sub { background-color: #004b36;color: #ffffff;}
.form-group { margin: 15px 0;}
.modal-contact-form { box-shadow: none !important; padding: 30px 30px 30px 15px !important;}
.modal-contact-form .heading-title h4 { font-size: 24px !important;}
.btn-close { background: #006bcb url("../image/icons/close.png") center/1em auto no-repeat; position: absolute; right: -30px; top: -30px; border-radius: 50%; opacity: 1; height: 30px; width: 30px; transition: ease-in-out all 0.2s; box-shadow: 0px 2px 9px -1px rgba(120,120,120,0.65); -webkit-box-shadow: 0px 2px 9px -1px rgba(120,120,120,0.65); -moz-box-shadow: 0px 2px 9px -1px rgba(120,120,120,0.65);}
.btn-close:hover { background-color: #14337A; opacity: 1;}
.modal-body img { border-radius: 3px 0px 0px 3px;}
.modal-body { padding: 0;}

.get-a-quote { background: #000 url(../image/home/contact-bg.jpg);  background-attachment: fixed; background-size: cover; color: #fff; padding: 6% 0; margin: 0; transition: ease-in-out all 0.2s; margin: 5% 0 0 0;}
.get-a-quote h4 { color: #ffffff; font-size: 33px; font-weight: 800; margin: 0; text-align: center;}
.get-a-quote .geta-quote-btn { background-color: #ffffff; padding: 10px 30px; color: #14337A; font-size: 18px; font-weight: 600; border-radius: 3px; display: inline-block; transition: all 0.5s ease-in-out;}
.geta-quote-btn:hover { color: #ffffff; box-shadow: inset 300px 0 0 0 #151515;}

.contact-detail { background-color: transparent; margin: 0 0 30px 0;}
.contact-detail p { font-size: 16px; font-weight: normal; color: #ffffff;} 
.contact-detail p a { color: #ffffff;}
.contact-detail i { color: #ffffff; text-align: center; border-radius: 3px; font-size: 18px; padding: 0;}
.contact-detail h4 {font-size: 18px; margin: 0 0 8px 0;}
.contact-detail p a:hover { color: #606060; transition: ease-in-out all 0.2s; color: #000000;}

.map { margin-bottom: -8px;}
/*.navbar-collapse { position: absolute; right: 0; top: 55px; background-color: #FBF9FE; left: 0; padding: 0 15px; z-index: 999; border-top: 1px solid #cccccc;}*/

.whatsapp-icon { position: fixed; left: 95%; bottom: 85px; z-index: 2;}
.call-icon { position: fixed; left: 95%; bottom: 30px; z-index: 2;}
.whatsapp-icon a { display: inline-block; width: 47px; height: 47px; border-radius: 50%; text-align: center; color: #fff; background: #0BC242; left: 0; right: 0; margin: 0 auto; font-size: 24px; line-height: 1.8;box-shadow: rgba(255, 255, 255, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;}
.call-icon a {display: inline-block; width: 45px; height: 45px; border-radius: 50%; text-align: center; color: #fff; background: #000000; left: 0; right: 0; margin: 0 auto; font-size: 16px; line-height: 2.6;box-shadow: rgba(255, 255, 255, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;}

/*================ @media screen css Start ===================*/
@media (min-width: 320px) and (max-width: 767.98px) {
    p { font-size: 15px;}
    .heading-title h3 { font-size: 21px; margin: 0 0 15px 0; }
    .contact-detail p { font-size: 16px; font-weight: 500; margin-bottom: 10px;}
    .contact-detail { margin: 0 0 15px 0;}
    .navi-menu {background-color: #fbf9fe; padding: 5px 0;}
    .top-header .social-media li a { font-size: 15px; margin-left: 5px; }
    .top-header p a { margin-right: 10px; font-size: 16px;}
    .download-btn { background-color: transparent; padding: 0;}
    .download-btn:hover { color: #14337A; background-color: transparent;}
    .top-header p a i { color: #ffffff;}
    .active{ border-bottom:none; color:#76B631 !important;}
    .btn-custom { padding: 7.5px 15px; font-size: 15px; margin: 0 0 15px 0;}
    .sticky { padding: 8px 15px;}
    .btn-outline-success { padding: 6px 15px; width: auto; display: inline-block;}
    
    .navi-menu { background-color: #f8f9fa;}

    .navbar-light .navbar-brand { padding:0; margin: 0;}
    .navbar-light .navbar-brand img { height: 50px;}
    .navbar-toggler.x { padding: 0 0 0 15px;}
    .navbar-light .navbar-nav .nav-link { padding: 0 0 10px 0;}
    .navbar-expand-lg .navbar-nav .nav-link { padding-right: 0; padding-left: 0; padding-top: 2px; padding-bottom: 2px; font-size: 15px; margin-left: 0;}
    .navbar-collapse { position: absolute; right: 0; top: 55px; background-color: #FBF9FE; left: 0; padding: 0 15px; z-index: 999; border-top: 1px solid #cccccc;}

    .main-slider-home { margin-top: 0;}
    .carousel-caption { top: 10%; right: 8%; left: 6%}
    .carousel-control-next, .carousel-control-prev { width: 6%;}
    .carousel-caption .heading-title h1 {font-size: 16px; font-weight: 800; margin: 0px 0 5px 0; }
    .carousel-caption .heading-title h2 { font-size: 18px; margin: 0 0 5px 0;}
    .carousel-caption p { font-size: 15px; font-weight: 450;} 
    .main-slider-home .carousel .carousel-inner .carousel-item img { height: 200px;}

    .about-section .heading-title h3 { font-size: 21px; font-weight: 600; margin: 5px 0 15px 0;}
    .about-section .heading-title h4 { margin: 15px 0 10px 0; font-size: 21px;}
    .about-section .heading-title .lead { font-size: 15px;}
    .about-section-content { padding-left: 0;}
    .about-section .heading-title h6 span { padding: 7px 10px; border-radius: 3px; margin: 10px 0; font-size: 13px;}
    .about-section .about-section-content { padding: 15px; min-height: 140px;}
    .about-section .about-section-content img { width: 50px; padding: 0 0 10px 0}
    .about-section .about-section-content p { font-size: 15px;}
    .about-section img { height: 300px;}
    .about-section .carousel-inner .carousel-item img { height: 250px;}
    .about-section { padding: 10% 0; background-image: linear-gradient(90deg, #eee 0%, #FFF 0%);}
    .about-section .heading-title h2 { font-size: 18px; margin: 0;}
    .about-section .btn-custom { margin: 20px 0; padding: 10px 25px; }
    
    .mission-vision { margin: 0; padding: 12% 0;}
    .mission-vision .heading-title h2 { font-size: 24px; margin: 0 0 15px 0;}
    .mission-vision .lead { font-size: 16px;}
    
    .our-product { padding: 10% 0; background-color: transparent; background-image: linear-gradient(90deg, #fff 0%, #eee 0%);}
    .our-product .heading-title h6 { font-size: 18px; margin: 0;}
    .our-product .heading-title h3 { font-size: 21px; margin: 5px 0 15px 0; }
    .our-product .btn-custom { margin: 20px 0; padding: 10px 25px;}
    .our-product img { height: 300px; object-position: center; width: 100%; }
    
    .fact-section { padding: 10% 0; margin: 0; }
    .fact-section img { height: 250px;}
    .fact-section .heading-title h6 { font-size: 18px;}
    .fact-section .heading-title h2 { font-size: 21px; margin: 5px 0 15px 0; }
    .fact-section-detail { padding: 15px; margin: 0; background-color: #75b531; }
    
    .protect-section { padding: 10% 0; }
    .protect-section .heading-title h6 { font-size: 18px; margin: 0;}
    .protect-section .heading-title h2 { font-size: 21px; margin: 5px 0 15px 0; }
    .protect-section .heading-title p { font-size: 15px; margin: 0 0 20px 0; }
    
    .testimonials-wrape { padding: 10% 0; margin: 0; }
    .testimonials-wrape .heading-title h6 { font-size: 18px; margin: 0 0 5px 0;}
    .testimonials-wrape .heading-title h2 { font-size: 21px; margin: 0 0 15px 0; }
    .testimonials-wrape .testimonial .pic img { width: 60px; height: 60px; }
    .testimonials-wrape .testimonial { padding: 0;} 
    
    .inner-banner { margin-top: 0;}
    .about-us-banner { padding: 10% 0;}
    .inner-banner h2 { font-size: 21px; margin: 0; font-weight: 500; text-shadow: 0 0 3px #000000, 0 0 5px #000000;}
    .product-form .contact-form { padding: 30px 15px;}
    .form-group { margin: 10px 0; }
    
    .contact-section { padding: 0; margin-top: 30px; margin-bottom: 0;}
    .contact-section .contact-form .btn-primary { padding: 10px 30px; margin: 0;}
    .bg-green { padding: 30px 15px;}
    .contact-section .heading-title h4 { font-size: 21px; margin: 0 0 15px 0; }
    .contact-detail h4 { font-size: 16px; font-weight: 450;}
    .contact-detail p { font-size: 14px; font-weight: 450; margin-bottom: 10px; }

    footer { padding: 8% 0 3% 0; }
    footer .contact-form { padding: 15px;}
    footer .logo img { display: none;}
    footer .contact-form .heading-title h4 { font-size: 21px; margin: 0 0 10px 0; font-weight: 600;}
    footer .contact-form .btn-primary { padding: 7px 25px; margin-top: 5px;}
    footer .footer-detail h5 { font-size: 18px; font-weight: 600; margin: 10px 0 15px 0; }
    footer .footer-detail .quick-links li a { font-size: 14px;}
    footer .footer-detail .quick-links li { margin: 0 0 5px 0;}
    footer .footer-detail h6 { font-size: 18px; margin: 15px 0;}
    footer .footerContentDetail p { font-size: 14px;}
    footer .footerContentli li a { font-size: 14px;}
    .middleFooter p a { font-size: 14px;}
    .middleFooter { padding: 15px 0;}
    .copyright { margin-top: 0;}
    .footerSocialMedia li a { margin: 0 15px 0 0; height: 30px; width: 30px; line-height: 26px; font-size: 13px; }
    .copyright p { font-size: 14px;}

    .whatsapp-icon { left: 88%; bottom: 60px;}
    .whatsapp-icon a { width: 36px; height: 36px; font-size: 18px;}
    .call-icon { left: 88%; bottom: 15px;}
    .call-icon a { width: 36px; height: 36px; font-size: 15px;}
}

@media (min-width: 768px) and (max-width: 991.8px) {
    p { font-size: 15px;}
    .heading-title h3 { font-size: 24px; margin: 0 0 15px 0; }
    .contact-detail p { font-size: 16px; font-weight: 500; margin-bottom: 10px;}
    .contact-detail { margin: 0 0 15px 0;}
    .top-header .social-media li a { font-size: 16px; margin-left: 10px; }
    .top-header p a { margin-right: 10px; font-size: 16px;}
    .top-header p a i { color: #ffffff;}
    .active{ border-bottom:none; color:#14337A !important;}
    .btn-custom { padding: 7.5px 15px; font-size: 15px; margin: 0 0 15px 0;}
    
    .navi-menu { background-color: #f8f9fa;}
    .inner-banner { margin-top: 0;}
    .about-us-banner { padding: 8% 0;}
    .product-form { margin: 0;}
    
    .navbar-collapse { position: absolute; right: 0; background-color: #FBF9FE; left: 0; padding: 0 15px; z-index: 999; border-top: 1px solid #cccccc; top: 70px;}
    .navbar-light .navbar-brand img { height: 60px;}
    .navbar-light .navbar-brand { margin: 0; padding: 5px 0; }
    .navbar-toggler.x { padding-right: 0;}
    .navbar-expand-lg .navbar-nav .nav-link { padding-right: 0; padding-left: 0; margin-left: 0; margin-bottom: 5px; }
    
    .main-header { position: absolute; top: 0; z-index: 999; width: 100%; background: #006BCB;}

    .main-slider-home { margin-top: 0;}
    .carousel-caption { top: 20%;}
    .main-slider-home .carousel .carousel-inner .carousel-item img { height: 350px;}
    .carousel-caption .heading-title h1 {font-size: 21px; font-weight: 800; margin: 0px 0 5px 0; }
    .carousel-caption .heading-title h2 { font-size: 30px; margin: 0 0 10px 0;}

    .about-section .heading-title h3 { font-size: 24px; font-weight: 600; margin: 15px 0;}
    .about-section .about-section-content { padding: 15px;}
    .about-section .heading-title h6 span { padding: 7px 10px; border-radius: 3px; margin: 10px 0; font-size: 13px; display: none;}
    .about-section .about-section-content img { width: 55px; margin: 0 0 15px 0;}
    .about-section .about-section-content p { font-size: 16px;}
    .about-section .heading-title h4 { font-size: 24px;}
    .about-section .heading-title .lead { font-size: 16px;}
    .about-section img { height: 400px;}
    .about-section { padding: 8% 0; background-color: transparent; background-image: linear-gradient(90deg, #eee 0%, #FFF 0%); }
    .about-section .heading-title h2 { font-size: 18px; margin: 0; font-weight: 450; }
    .about-section .btn-custom { margin: 20px 0; padding: 10px 25px; }
    
    .mission-vision { margin: 0;}
    .mission-vision .heading-title h2 { color: #ffffff; font-size: 24px; margin: 0 0 20px 0;}
    .mission-vision .lead { font-weight: 450; margin: 10px 0 0 0; font-size: 18px; }
    
    .our-product { padding: 8% 0; background-color: transparent; background-image: linear-gradient(90deg, #fff 100%, #eee 100%); }
    .our-product .heading-title h6 { font-size: 18px; margin: 0 0 5px 0; }
    .our-product .heading-title h3 { font-size: 24px; margin: 0 0 20px 0;} 
    .our-product .btn-custom { margin: 30px 0; padding: 10px 25px; }
    .our-product img { height: 400px; object-fit: cover; object-position: center; width: 100%; }
    
    .fact-section { padding: 8% 0; background-color: #000000; margin: 0; }
    .fact-section .heading-title h6 { font-size: 18px;}
    .fact-section .heading-title h2 { font-size: 24px; margin: 5px 0 20px 0; }
    .fact-section-detail { width: 100%; padding: 15px; margin: 0; background-color: #75b531; }
    .fact-section img { height: 400px}
    
    .protect-section .heading-title h6 { font-size: 18px; margin: 0 0 5px 0;}
    .protect-section .heading-title h2 { font-size: 24px; margin: 0 0 20px 0; }
    .protect-section .heading-title p { font-size: 16px; margin: 0 0 15px 0;}
    
    .testimonials-wrape .heading-title h2 { font-size: 24px; margin: 0 0 15px 0; }
    .testimonials-wrape .heading-title h6 { font-size: 18px; margin: 0 0 5px 0;}

    .contact-section .contact-form { padding: 15px;}
    .contact-section .contact-form .heading-title h4 { margin: 0 0 15px 0; font-size: 24px;}
    .modal-contact-form { padding: 15px !important;}
    .form-floating .form-contro { height: calc(2.5rem + 2px); }
    .modal-contact-form .heading-title h4 {font-size: 21px !important;}
    .modal-fullscreen h6 { font-size: 16px;}
    .modal-fullscreen .heading-title h4 {font-size: 16px;}

    footer .contact-form { padding: 15px;}
    footer .logo img { display: none;}
    footer .contact-form .heading-title h4 { font-size: 18px; margin: 0 0 10px 0; font-weight: 600;}
    footer .footer-detail .quick-links li a { font-size: 15px;}
    footer .contact-form .btn-primary { padding: 7px 25px; margin-top: 5px;}
    footer .footer-detail h5 { font-size: 21px; font-weight: 600; margin: 15px 0; }
    footer .footer-detail h6 { font-size: 18px; margin: 15px 0;}
    footer .footerContentDetail p { font-size: 14px; }
    footer .footerSocialMedia li a { font-size: 13px; height: 30px; width: 30px; line-height: 27px; }
    footer .footerContentli li a { font-size: 14px;}
    .middleFooter p a { font-size: 14px;}
    .middleFooter { padding: 10px 0 10px 0;}
    .copyright { margin-top: 0;}
}
@media (min-width: 992px) and (max-width: 1199px) {
    p { font-size: 15px;}
    .heading-title h3 { font-size: 27px; margin: 0 0 20px 0; }
    .contact-detail p { font-size: 16px; font-weight: 500; margin-bottom: 10px;}
    .contact-detail { margin: 0 0 15px 0;}
    .top-header .social-media li a { font-size: 16px; margin-left: 10px; }
    .top-header p a { margin-right: 10px; font-size: 15px;}
    .top-header p a i { color: #ffffff;}
    .active{ border-bottom:none; }
    .btn-custom { padding: 7.5px 15px; font-size: 15px; margin: 0 0 15px 0;}
    
    .inner-banner { margin: 0;}
    .about-us-banner { padding: 8% 0;}

    .navbar-light .navbar-brand img { height: 60px;}
    .navbar-toggler.x { padding-right: 0;}

    .main-slider-home .carousel .carousel-inner .carousel-item img { height: 520px; object-fit: cover; object-position: center; }
    .carousel-caption { top: 35%;}
    .carousel-caption .heading-title h1 { font-size: 27px;}
    .carousel-caption .heading-title h2 { font-size: 36px;}

    .about-section .heading-title h3 { font-size: 27px; font-weight: 600; margin: 0 0 15px 0;}
    .about-section-content { padding-left: 0;}
    .about-section .heading-title span { margin: 0 0 15px 0;}
    .about-icon-section .heading-title span { margin: 0 auto 15px auto;}
    .about-section .heading-title h6 span { padding: 7px 10px; border-radius: 3px; margin: 10px 0; font-size: 13px; display: none;}
    .about-section .heading-title h4 { font-size: 27px;}
    .about-section .about-section-content img { width: 60px; padding: 0 0 15px 0;}
    .about-section .about-section-content p { font-size: 16px;} 
    .about-section img { height: 450px;}
    
    .mission-vision .heading-title h2 { font-size: 27px; margin: 0 0 20px 0;}
    .mission-vision .lead { font-weight: 450; margin: 10px 0 0 0; font-size: 18px; }
    .our-product img { height: 400px;}
    .our-product .heading-title h3 { font-size: 27px; margin: 0 0 20px 0;}
    .our-product .heading-title h6 { font-size: 18px; margin: 0 0 5px 0;}
    
    .fact-section .heading-title h2 { font-size: 27px; margin: 0 0 20px 0; }
    .fact-section-detail { padding: 20px; margin: 5% 0 0 -25%;}
    
    .protect-section .heading-title h6 { font-size: 18px; margin: 0 0 5px 0;}
    .protect-section .heading-title h2 { font-size: 27px;}
    .protect-section .heading-title p { font-size: 16px; margin: 0 0 15px 0;}
    .protect-section .box img { height: 120px;}
    
    .testimonials-wrape .heading-title h6 { font-size: 18px; margin: 0 0 5px 0;}
    .testimonials-wrape .heading-title h2 { font-size: 27px; margin: 0 0 20px 0; }

    .contact-section .contact-form { padding: 15px;}
    .contact-section .contact-form .heading-title h4 { margin: 0 0 15px 0; font-size: 27px;}
    .modal-contact-form { padding: 15px !important;}
    .form-floating .form-contro { height: calc(2.5rem + 2px); }
    .modal-contact-form .heading-title h4 {font-size: 18px !important;}
    .modal-fullscreen h6 { font-size: 16px;}
    .modal-fullscreen .heading-title h4 {font-size: 14px; width: 30px; height: 30px; line-height: 26px;}

    footer .contact-form { padding: 15px;}
    footer .contact-form .heading-title h4 { font-size: 21px; margin: 0 0 10px 0; font-weight: 600;}
    footer .contact-form .btn-primary { padding: 7px 25px; margin-top: 5px;}
    footer .footer-detail h5 { font-size: 21px; font-weight: 600; margin: 15px 0; }
    footer .footer-detail h6 { font-size: 18px; margin: 15px 0;}
    footer .footerContentDetail p { font-size: 14px; }
    footer .footerSocialMedia li a { font-size: 16px;}
    footer .footerContentli li a { font-size: 14px;}
    .middleFooter p a { font-size: 14px;}
    .middleFooter { padding: 15px 0 15px 0;}
    .copyright { margin-top: 0;}
	.copyf {
    text-align: center;
}
}