body { font-family: Inter; }
a { text-decoration: none; color: #000; }
a:hover { color: #00644D; }
ul { list-style-type: none; padding: 0; }
.white { color: #fff; }
.black { color: #000; }
.green { color: #00644e; }
.header { width: 100%; z-index: 99; padding: 10px; top: 0; left: 0; height: 75px; display: flex; align-items: center; }
.menu { display: flex; align-items: center; justify-content: center; margin: 0; }
.menu a { margin: 0 30px; font-size: 1rem; }
.sidebar-menu { width: 45px; height: 45px; background: #000; line-height: 45px; color: #fff; font-size: 1.5rem; text-align: center; cursor: pointer; }
.search { color: #000; font-size: 1.5rem; cursor: pointer; }
.grid-container { display: block; position: fixed; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; margin: 0 auto; right: 0; bottom: 0; }
.grid-bg { height: 100%; }
.grid-bg > div:first-child { border-left: 0; }
.grid-bg > div { border-left: 1px solid #d9d9d9; height: 100%; width: 16.666667%; border-color: #e5e5e5; float: left; }
.newsletter { display: flex; align-items: center; width: 100%; height: 80px; padding: 100px 0; background: #00644e; }
.section-title { color: #00644e; font-size: 1.5rem; padding-left: 20px; position: relative; }
.section-title:before { content: ''; width: 4px; background: #00644e; height: 25px; position: absolute; left: 0; top: 0; }
.section-title2 { color: #fff; font-size: 1.5rem; padding-left: 20px; position: relative; }
.section-title2:before { content: ''; width: 4px; background: #fff; height: 25px; position: absolute; left: 0; top: 0; }
.footer-menu { }
.footer-menu li { display: inline-block; width: 30%; }
.footer-menu a { display: block; margin: 0 0 15px 0; font-size: 1rem; }
.slider-content { padding: 100px; }
.btn2 { display: inline-flex; height: 55px; line-height: 55px; padding: 0 50px; font-size: 1rem; outline: none; }
.btn-white { background: #fff; border: 1px solid #000; color: #000; transition: all 0.3s ease; }
.btn-white:hover { background: #00644e; color: #fff; }
.text-s1 { font-size: 5rem; }
.text-s2 { font-size: 2rem; }
.text-s3 { font-size: 1rem; }
.text-s4 { font-size: 1.2rem; }
.text-s5 { font-size: 1.5rem; }
.text-s6 { font-size: 0.8rem; }
.prodcat-slider-item { display: block; height: 440px; }
.prodcat-slider-item img { height: 440px; object-fit: cover; object-position: center; }
.slider-caption { position: absolute; width: 100%; height: 200px; left: 0; bottom: -100px; color: #fff; padding: 30px; background: transparent; transition: all .5s; }
.prodcat-slider-item:hover .slider-caption { bottom: 0; background-image: linear-gradient(transparent, #00644e); }
.prodcat-slider .owl-nav { position: absolute; top: -70px; right: 0; }
.prodcat-slider .owl-nav button.owl-next, .prodcat-slider .owl-nav button.owl-prev { border: 1px solid #000; border-radius: 0; display: inline-flex; height: 40px; align-items: center; width: 40px; justify-content: center; font-size: 1.6rem; margin: 0 0 0 5px; }
.prodcat-slider .owl-nav button.owl-next:hover, .prodcat-slider .owl-nav button.owl-prev:hover { background: #fff; color: #00644e; }
.blog-image { width: 100%; height: 200px; object-fit: cover; object-position: center; }
.cover-area { background-repeat: no-repeat !important; background-size: cover !important; background-position: bottom !important; width: 100%; height: 360px; }
.form-control { border-radius: 0; }
.form-control:focus { box-shadow: none; outline: none; border-color: #00644e; }
.form-container { padding: 30px; background: #f5f5f5; }
.prodlist-image { height: 450px; object-fit: cover; object-position: center; }
.search-container { display: none; position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0, 100, 78, 0.9); z-index: 999; }
.search-container.active { display: block; }
.search-box { width: 100%; height: 75px; position: absolute; top: 0; left: 0; background: #fff; z-index: 2; padding: 10px; }
.search-close { cursor: pointer; position: absolute; z-index: 3; right: 20px; top: 20px; color: #000; font-size: 2rem;  }
.search-input { width: 100%; height: 55px; font-size: 2.2rem; border: none; outline: none; }
.call { display: none; }
.whatsapp { display: flex; align-items: center; justify-content: center; position: fixed; width: 70px; height: 70px; bottom: 250px; right: 0; background: #25D366; color: #fff;  font-size: 2.5rem; z-index: 999; border-radius: 8px 0 0 8px; }
.call { display: flex; align-items: center; justify-content: center; position: fixed; width: 70px; height: 70px; bottom: 150px; right: 0; background: #2665d5; color: #fff; font-size: 2.5rem; z-index: 999; border-radius: 8px 0 0 8px; }
.prod-detail-photo { width: 49%; height: 400px; object-fit: cover; }

@media screen and (max-width: 900px) {
    .header { height: auto; }
    .menu { justify-content: start; flex-wrap: wrap; }
    .menu li { width: 49%; text-align: center; margin-bottom: 10px; }
    .menu a { margin: 0 10px; }
    .cover-area { height: 150px; }
    .prodlist-image { height: 280px; }
    .text-s1 { font-size: 1.8rem; }
    .text-s2 { font-size: 1rem; }
    .text-s3 { font-size: 1rem; }
    .text-s4 { font-size: 1.1rem; }
    .text-s5 { font-size: 1.2rem; }
    .text-s6 { font-size: 0.8rem; }
    .slider-content { padding: 15px 15px 15px 15px; }
    .slider-caption { bottom: 0; }
    .section-title { padding-left: 7px; font-size: 1.3rem; }
    .whatsapp { bottom: 25%; }
    .call { bottom: 10%; }
    .call:hover, .call:focus { color: #fff; }
    .prod-detail-photo { width: 100%; height: 300px; }
    .footer-menu li { width: 100%; }
}