/* General CSS */
 @import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@200;300;400;500;600;700;800;900&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');

 *,
 *::before,
 *::after {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
     margin: 0;
     padding: 0;
     text-decoration: none;
     outline: none;
 }

 :root {

     /* Background Color */
     --bg-white: #fff;
     --bg-dark-color: #03262c;

     /* Text Colors */
     --primary-text: #061738;
     --secondary-color: #60cd12;
     --light-color: #e2f6de;
     --dark-color: #03262c;
     --text-white: #fff;
     --text-gray: #dee2e6;
     --anchor-color: #007aff;
     /* Font Family */
     --primary-font: 'Barlow Condensed', sans-serif;
     --secondary-font: 'Roboto', sans-serif;
 }

 body,
 html {
     color: var(--primary-text);
     font-size: 10px;
     font-weight: 400;
     font-family: var(--primary-font);
     scroll-behavior: smooth;
     line-height: 1.5;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 p {
     margin: 0;
 }

 h1 {
     font-size: 9rem;
     line-height: 1.4;
     font-weight: 600;
     color: var(--primary-text);
 }

 h2 {
     color: var(--primary-text);
     font-size: 4.7rem;
     font-weight: 600;
     display: block;
     text-transform: capitalize;
     line-height: 1.2;
     margin-bottom: 2rem;
 }

 h3 {
     color: var(--text-white);
     font-size: 3.1rem;
     line-height: 1.2;
     font-weight: 700;
 }

 h4 {
     font-size: 2.5rem;
     font-weight: 700;
     line-height: 1;
     color: var(--primary-text);
 }

 h5 {
     font-size: 1.8rem;
     font-weight: 600;
     line-height: 1;
     color: var(--primary-text);
 }

 p {
     font-size: 1.6rem;
     line-height: 1.6;
     margin-top: 1rem;
     color: var(--primary-text);
     font-family: var(--secondary-font);
 }

 embed,
 iframe,
 img,
 object {
     max-width: 100%;
 }

 ul {
     margin: 0;
     padding: 0;
     list-style: none;
 }

 a,
 a:active,
 a:focus,
 a:hover,
 button {
     text-decoration: none;
     outline: 0;
 }

 li a {
     color: var(--text-white);
 }

 a:hover,
 button:hover {
     -webkit-transition: all 0.3s ease-in;
     -o-transition: all 0.3s ease-in;
     -moz-transition: all 0.3s ease-in;
     transition: all 0.3s ease-in;
 }

 ::-webkit-scrollbar {
     width: 10px;
 }

 ::-webkit-scrollbar-track {
     background: var(--white);
 }

 ::-webkit-scrollbar-thumb {
     background: var(--secondary-color);
 }

 .main-btn {
     position: relative;
     color: var(--bg-white);
     background: linear-gradient(to right, #0f7404, #5cb917);
     z-index: 1;
     overflow: hidden;
     border: 0.2rem solid var(--bg-white);
     border-radius: 3.5rem;
     text-transform: uppercase;
     padding: 1rem 3.5rem;
     font-weight: 600;
     font-size: 1.8rem;
     margin-top: 1.5rem;
     letter-spacing: 0.2rem;
 }

 .main-btn:hover {
     background: var(--bg-white);
     color: var(--secondary-color);
     border: 0.2rem solid var(--secondary-color);
 }

 section {
     padding: 5rem 0;
 }

 .section-title {
     font-size: 4rem;
     font-weight: 600;
     color: var(--primary-text);
     text-transform: capitalize;
     margin-bottom: 2rem;
 }

 .section-subtitle {
     font-size: 1.6rem;
     font-weight: 400;
     color: var(--primary-text);
     font-family: var(--secondary-font);
     max-width: 40%;
     margin: auto;
     margin-bottom: 1.5rem;

 }

 .about .banner_section,
 .product .banner_section,
 .application .banner_section,
 .tr .banner_section,
 .gallery .banner_section,
 .faqs .banner_section,
 .contact .banner_section,
 .distributors .banner_section {
     background: url('../images/banner-slide/top-banner.jpg');
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
     padding-top: 17rem;
     padding-bottom: 10rem;
     min-height: auto;
 }

 .contact .contact-form,
 .distributors .contact-form {
     background-color: var(--light-color);
     padding: 5rem;
     box-shadow: 0 0.2rem 1.5rem rgb(0 0 0 / 4%);
 }

 .contact .contact-form .form-control:focus,
 .distributors .contact-form .form-control:focus {
     outline: none;
     box-shadow: none;
 }

 .contact .contact-form .form-control::placeholder,
 .distributors .contact-form .form-control::placeholder {
     color: var(--primary-text);
 }

 .contact .contact-form .form-control,
 .distributors .contact-form .form-control {
     padding: 1rem 1.5rem;
     border-radius: 0.rem;
     border: 0.1rem solid var(--secondary-color);
     color: var(--primary-text);
     font-size: 1.5rem;
     font-weight: 400;
     font-family: var(--secondary-font);
 }

 /* 01 navbar css */

 .header {
     position: absolute;
     width: 100%;
     top: 2rem;
     left: 0;
     z-index: 2;
 }

 .header .navbar {
     background: url('../images/header-bg.png');
     background-repeat: no-repeat;
     background-position: center;
     background-size: contain;
     padding: 2rem 5rem;
 }

 .navbar-brand {
     width: 6.5rem;
     margin-top: -0.1rem;
 }

 .header .navbar-nav .nav-link {
     color: var(--text-white);
     text-transform: uppercase;
     font-size: 1.6rem;
     font-weight: 600;
     padding: 0.5rem 1.3rem;
     margin: 0 0.2rem;
     font-family: var(--primary-font);
 }

 .header .navbar-nav .nav-link:hover,
 .header .navbar-nav .nav-link.active {
     color: var(--secondary-color);
 }

 .header .navbar-toggler {
     color: var(--text-white);
     font-size: 2rem;
     height: 2.7rem;
     padding: 0;
 }

 .header .navbar-toggler:focus {
     outline: none;
     box-shadow: none;
 }

 .header .header-right ul img {
     width: 2rem;
 }

 .header .header_right span {
     color: var(--secondary-color);
     display: block;
     font-weight: 700;
     font-size: 1.4rem;
     margin-right: 1rem;
 }

 .header .header_right .phone_no {
     color: var(--text-white);
     font-size: 1.6rem;
 }

 .navbar-nav .nav-item a {
     font-size: 30rem;
 }

 .header-scrolled {
     position: fixed;
     top: -0.4rem;
     left: 0;
     right: 0;
     width: 100%;
     max-width: 1320px;
     margin: auto;
     z-index: 999;
     transition: 0.3s all ease-in-out;
 }

 /* 02 BANNER SECTION */

 .banner_section .slide {
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
     min-height: 90vh;
     padding-top: 2rem;
     border-radius: 50px;
     margin-bottom: -8rem;
 }

 .banner_section .slide .img-shades {
     border-radius: 5rem;
     box-shadow: .5rem .5rem .5rem .5rem grey;
 }

 .banner_section .carousel-indicators {
     bottom: -1.5rem;
 }

 .carousel-control-prev,
 .carousel-control-next {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
 }

 .carousel-control-prev {
     left: 20px;
 }

 .carousel-control-next {
     right: 20px;
 }

 .banner_section .carousel-item {
     padding-top: 3rem;
     padding-left: 0rem;
     padding-right: 0rem;
     padding-bottom: 0rem;
     height: 90vh;
 }

 .banner_section .carousel-caption {
     top: 7%;
     bottom: 0%;
     left: 40%;
     right: 10%;
 }

 .banner_section .carousel-caption h1 {
     color: var(--primary-text);
     top: 0%;
     left: 3%;
     bottom: 0%;
     text-align: center;
     margin-right: .5rem;
     font-size: 5rem !important;
     font-weight: 700;
     text-transform: uppercase;

 }

 .banner_section .carousel-caption h3 {
     padding: 0.5rem;
     color: var(--primary-text);
     text-transform: uppercase;
     display: inline;
     font-size: 2.5rem;
     text-align: center;
 }

 .banner_section .carousel-caption p {
     left: 0%;
     padding-top: 0rem;
     text-align: justify;
     margin-top: 1.5rem;
     font-size: 1.75rem;
     margin-bottom: 5px;
 }

 /* OUR COMPAINES */

 .section-companies {
     text-align: center;
     margin-top:3rem;
 }

 .section-companies img{
     margin-bottom: 3rem;
 }

 .section-companies h2.section-head {
     text-align: center;
     color: #000;
     margin-top: 3rem;
     margin-bottom: 10px;
     font-size: 3rem;
 }

 .section-companies h2.section-head:after {
     background-color: green;
     content: "";
     display: block;
     width: 100px;
     height: 3px;
     margin: 20px auto;
 }

 /* OUR COMPANIES  CSS*/

 /* 03 MISSION CSS */

 .mission h4 {
     padding-top: 1rem;
     padding-bottom: .5rem;
 }

 .rem {
     padding-bottom: .5rem;
 }

 /* 05 PRODUCTS SECTION */

 .landing_product_section .product-card {
     position: relative;
     overflow: hidden;
     cursor: pointer;
     border: 0.2rem solid var(--light-color);
     padding: 2rem 1rem;
     transition: all 0.3s;
 }

 .landing_product_section .product-card .product-img {
     margin-bottom: 7rem;
     text-align: center;
 }

 .landing_product_section .product-card h3 {
     color: var(--primary-text);
     text-align: center;
 }

 .landing_product_section .product-card span {
     font-size: 1.8rem;
     font-weight: 600;
     text-transform: uppercase;
     color: var(--secondary-color);
     margin-right: 0.5rem;
     text-decoration: line-through;
     transition: all 0.3s;
 }

 .landing_product_section .product-card .product-detail {
     position: absolute;
     bottom: -22rem;
     right: 0;
     left: 0;
     text-align: center;
     padding: 5rem 1rem;
     background-color: var(--dark-color);
     transition: all 1s ease;
 }

 .landing_product_section .product-card:hover .product-detail {
     bottom: 0;
 }

 /* APPLICATION SECTION CSS */
 .subsection p {
     padding-top: 0rem;
     font-size: 2.5rem;
     font-weight: 500;
 }

 .heading th,
 .heading td {
     border: 2px solid black;
     padding: 1rem;
 }

 .heading {
     font-size: 2rem;
     font-weight: 400;
     text-align: center;
     width: 100%;
 }

 table,
 th,
 td {
     height: 3rem;

 }

 /* TRIALS AND REPORT CSS */
 .trial h2 {
     color: var(--primary-text);
     font-weight: bolder;
     margin-top: 1rem;
     margin-bottom: 0rem;
     text-transform: uppercase;
 }

 .trial h3 {
     text-align: center;
     color: var(--dark-color);
     padding-top: 2.5rem;
 }


 .trial img {
     border-radius: 2rem;
     margin-top: 2rem;
     float: left;
     height: 420px;
     margin-right: 3rem;
 }

 .trial .ppjtable th,
 .trial .ppjtable td {
     border: 2px solid black;
     padding-right: 1rem;
     padding-left: 1rem;
     padding-top: .5rem;
     padding-bottom: .5rem;
     font-size: 2rem;
     border-collapse: collapse;
 }

 .trial .appli {
     text-align: center;
     width: 100%;
 }


 .trial .plant {
     font-size: 2rem;
 }

 .trial .summary h4 {
     padding: 2rem;
     font-size: 4rem;
 }

 .trial .summary p {
     font-size: 2rem;
     padding-top: 0;
     padding-bottom: 0;
     color: var(--primary-text);
 }

 /* TESTIMONIAL CSS */

 .test {
     text-align: left;
 }

 h2.section-head {
     text-align: center;
     color: #000;
     margin-top: 10px;
     margin-bottom: 10px;
     padding-bottom: 1rem;
     font-size: 4rem;
 }

 .section-testimonial h2.section-head:after {
     background-color: green;
     content: "";
     display: block;
     width: 100px;
     height: 3px;
     margin: 20px auto;
 }

 .testimonials {
     border-radius: 5px;
     float: left;
     margin-right: 1rem;
 }

 /* GALLERY CSS */

 .gallery_section img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 /* FOOTER CSS */

 .footer_wrapper {
     background: url('../images/footer-bg/footer_bg.png');
     background-repeat: no-repeat;
     background-size: cover;
     background-position: top center;
     padding-top: 10rem;
     padding-bottom: 0rem;
 }

 .footer_wrapper h5 {
     color: var(--text-white);
     font-size: 2.5rem;
     margin-bottom: 1.25rem;
 }

 .footer_wrapper ul li {
     margin-bottom: .5rem;
     list-style: none;
 }

 .footer_wrapper ul li:hover {
     margin-bottom: .5rem;
     list-style: none;
     color: var(--text-white);
 }

 .footer_wrapper .company_details {
     font-size: 1.4rem;
 }

 .footer_wrapper .contact-info li a {
     color: var(--text-gray);
     font-size: 1.6rem;
 }

 .footer_wrapper .link-widget li a,
 .footer_wrapper p {
     color: var(--text-gray);
     font-size: 1.6rem;
     padding-left: 1.5rem;
     position: relative;
     -webkit-transition: all 0.3s ease-out 0s;
     transition: all 0.3s ease-out 0s;
 }

 .footer_wrapper .link-widget li a::before {
     content: '\f105';
     font-family: "Font Awesome 5 Free";
     font-weight: 900;
     position: absolute;
     left: 0.3rem;
     top: 50%;
     -webkit-transform: translateY(-50%);
     transform: translateY(-50%);
 }

 .footer_wrapper .link-widget li a:hover {
     margin-left: .625rem;
     color: var(--secondary-color);
 }

 .footer_wrapper .social-network a {
     width: 3.5rem;
     height: 3.5rem;
     margin: .5rem;
     padding-left: 1.25rem;
     line-height: 3.2rem;
     font-size: 1.5rem;
     display: inline-block;
     border: .125rem solid var(--text-gray);
     color: var(--text-gray);
     text-align: center;
     border-radius: 100%;
     -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
     transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
 }

 .footer_wrapper .social-network a span {
     padding-left: 3rem;
     text-align: center;
 }

 .footer_wrapper .social-network a:hover {
     background-color: var(--secondary-color);
     border-color: var(--secondary-color);
     color: var(--text-white);
     box-shadow: 0 .625rem .9375rem 0 rgb(0 0 0 / 10%);
     transform: translateY(-0.1875rem);
 }

 .footer_wrapper .icons .fab {
     font-size: 2rem;
 }

 .footer_wrapper .icons span {
     margin-left: 2rem;
     text-align: right;
 }

 .footer_wrapper .form-control {
     font-size: 2rem;
     color: white;
 }

 .footer_wrapper .form-control:focus {
     outline: none;
     box-shadow: none;
     border-color: var(--secondary-color);
 }

 .footer_wrapper .copyright-section {
     background-color: var(--secondary-color);
     text-align: center;
     margin-top: 5rem;
 }

 .footer_wrapper .copyright-section p {
     margin-top: 0;
     padding: 3rem 0;
     line-height: 0;
 }

 .footer_wrapper .copyright-section a {
     color: var(--primary-text);
     font-weight: 600;
 }

 .footer_wrapper .copyright-section a:hover {
     color: var(--primary-text);
     font-weight: 600;
 }

 /* ABOUT PAGE CSS */

 .about img.turab {
     padding-top: 6rem;
 }

 .about img.ghadeer {
     padding-top: 2rem;
     padding-right: 2rem;
     float: left;
 }

 .about img.turabinc {
     width: 590px;
     padding-top: 2rem;
     padding-right: 2rem;
     float: left;
 }

 .about .about-details h2 {
     color: #000;
     text-align: center;
 }

 .about .about-details p {
     color: var(--primary-text);
     padding-top: 0rem;
 }

 /* PRODUCT PAGE CSS */

 .product img.haryaliproduct {
     border-radius: 2rem;
     float: left;
     width: 400px;
     height: 400px;
     margin-right: 1.5rem;
 }

 .product img.barakaproduct {
     border-radius: 2rem;
     float: right;
     width: 400px;
     height: 400px;
     margin-left: 1.5rem;
 }

 .product .product-content h2 {
     margin: 1rem;
 }

 .product .product-details p {
     margin: 1rem;
 }

 .product_details h5 {
     margin-left: 4 rem;
 }

 /* FAQS CSS*/
 .faq-container {
     max-width: 100%;
     margin: 0 auto;
     padding: 10px;
 }

 .faq {
     margin-bottom: 10px;
 }

 .question {
     cursor: pointer;
     font-weight: bold;
     background-color: #f0f0f0;
     padding: 10px;
 }

 .answer {
     display: none;
     padding: 10px;
     background-color: #ffffff;
 }

 .answer.show {
     display: block;
 }

 /* CONTACT PAGE CSS */
 .contact .contact-form {
     background-color: var(--light-color);
     padding: 5rem;
     box-shadow: 0 0.2rem 1.5rem rgb(0 0 0/4%);
 }

 .contact .contact-form .form-control::placeholder {
     color: var(--primary-text);
 }

 .contact .contact-form .form-control {
     padding: 1rem 1.5rem;
     border-radius: 0rem;
     border: 0.1rem solid var(--secondary-color);
     color: var(--primary-text);
     font-size: 1.5rem;
     font-weight: 400;
     font-family: var(--secondary-font);
 }

 .contact .contact-form .form-control textarea {
     min-height: 30rem;
 }

 .contact .contact-form .info-box li {
     position: relative;
     padding-left: 7rem;
     padding-bottom: 3.5rem;
     margin-bottom: 2.9rem;
 }

 .contact .contact-form .info-box li i {
     position: absolute;
     left: 0;
     top: 1.5rem;
     font-size: 4.5rem;
     line-height: 4.5rem;
     color: var(--primary-text);
 }

 .contact .contact-form .info-box li p {
     color: var(--primary-text);
 }

 .contact .contact-form .info-box li a {
     color: var(--dark-color);
     font-size: 2.5rem;
     font-weight: 400;
     margin-bottom: 0;
     font-family: var(--secondary-font);
 }