@charset "utf-8";
/* CSS Document */

/* CSS Document © 2026 Envinto */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

::-moz-selection{ background:#7b7d7f; color:var(--primary); text-shadow:none;}
::selection { background:#7b7d7f; color:var(--primary); text-shadow:none;}
*,
*:before, *:after{-webkit-box-sizing:  border-box;-moz-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video, textarea, input { margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline; outline:none; font-family:"Inter", sans-serif;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body {color:#555555; background: #ffffff; -webkit-text-size-adjust: none; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow:hidden; }
:root {overflow: hidden; overflow-y: scroll; --primary: #ffffff; --secondary:#000000; --global: #DBA765; }
a { text-decoration:none; transition:all 0.25s ease-out 0s; outline: none; box-shadow: none;}
a:hover{text-decoration: none;}
h1, h2, h3 , h4, h5, h6, h1 span, h2 span, h3 span, h4 span, h5 span, h6 span{font-family: "DM Sans", sans-serif;}
p, p span { font-family:"Inter", sans-serif;}
img { border:0px;}
ol, ul, li{ list-style: none;}
blockquote, q { quotes: none;}
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}
* {-webkit-appearance: none;}
::-webkit-input-placeholder {
  color:var(--primary-color);
}
::-moz-placeholder { 
  color:var(--primary-color);
}
:-ms-input-placeholder {
  color:var(--primary-color);
}
:-moz-placeholder {
  color:var(--primary-color);
}

section, header, footer {width: 100%; float: left;}

img{max-width: 100%; display: block;}

strong{font-weight: bold;}

.container{width: 94%; max-width: 1320px; margin: 0 auto;}


/* ---------header-wrapp------------ */
.header-wrapp {position: absolute; padding: 15px 0; z-index: 9;}
.header-wrapp .header-row { width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;}
.header-wrapp  .logo { width: 166px;}
.header-wrapp .logo img { width: 100%;}
.header-wrapp .header-menu { width: auto;}
.header-wrapp .header-menu ul { width: 100%; display: flex; flex-wrap: wrap;}
.header-wrapp .header-menu ul li { font-size: 14px; margin: 0 15px;}
.header-wrapp .header-menu ul li a { color: var(--primary);}
.header-wrapp .header-menu ul li a:hover { color: var(--global);}
.header-wrapp  .header-btn { background: var(--global); padding: 16px 25px; color: #013527; font-size: 15px; text-transform: uppercase; font-weight: 600; border: 1px solid var(--global); border-radius: 10px;}
.header-wrapp .header-btn:hover { border-color: #013527; background: var(--primary);}


/* ---------banner-wrapp------------  */
.banner-wrapp { position: relative; height: 110vh;}
.banner-wrapp .bg-img {  width: 100%; height: 100%; position: relative;}
.banner-wrapp .bg-img img { width: 100%; height: 100%; object-fit: cover;}
.banner-wrapp .banner-content { position: absolute; width: 100%;  top: 50%; transform: translateY(-50%);}
.banner-wrapp .banner-content .content-slider { width: 56%;}
.banner-wrapp h1 {font-size: 70px; color: var(--primary); font-weight: 600; margin: 0 0 20px;}
.banner-wrapp p { font-size: 18px; color: var(--primary); font-weight: 300; line-height: 1.56; margin: 0 0 36px; max-width: 615px;}
.banner-wrapp span {display: block;}
.banner-wrapp .banner-btn1 { display: inline-block; background: var(--global); padding: 16px 25px; color: #013527; font-size: 15px; text-transform: uppercase;  font-weight: 600; border: 1px solid var(--global); border-radius: 6px; margin: 0 10px 0 0;}
.banner-wrapp .banner-btn2 { display: inline-block; background: none; padding: 16px 25px; color: var(--primary); font-size: 15px; text-transform: uppercase; font-weight: 600; border: 1px solid var(--primary); border-radius: 6px; margin: 0 10px 0 0;}
.banner-wrapp .banner-btn1:hover { border-color: #013527; background: var(--primary);}
.banner-wrapp .banner-btn2:hover { background: var(--primary); color: #013527;}
.banner-wrapp .banner-content .content-slider .slick-dots { text-align: left;bottom: -85px;}
.banner-wrapp .banner-content .content-slider .slick-dots li button {transition: all .25s ease-in-out;}
.banner-wrapp .banner-content .content-slider .slick-dots li button:before { background: none; border: 1px solid var(--primary); opacity: 1; transition: all .25s ease-in-out;}
.banner-wrapp .banner-content .content-slider .slick-dots li { transition: all .25s ease-in-out;}
.banner-wrapp .banner-content .content-slider .slick-dots li.slick-active { width: 24px;}
.banner-wrapp .banner-content .content-slider .slick-dots li.slick-active button { width: 24px;}
.banner-wrapp .banner-content .content-slider .slick-dots li.slick-active button:before { background: var(--global); border-color: var(--global); width: 24px; border-radius: 10px;}
.banner-wrapp .banner-btns { margin: 40px 0 0;}


/* ---------abouts-wrapp------------  */
.abouts-wrapp { padding: 100px 0; background: var(--primary); margin: -60px 0 0; border-radius: 60px 60px 0 0; position: relative;}
.abouts-wrapp .abouts-head { width: 100%; display: flex; flex-wrap: wrap;justify-content: space-between; align-items: center; margin: 0 0 60px;}
.abouts-wrapp h2 {font-size: 54px; color: var(--secondary); font-weight: 600;}
.abouts-wrapp h2 span {display: block;}
.abouts-wrapp .abouts-head p {width: 48%;font-size: 16px; line-height: 1.56; color: var(--secondary);}
.abouts-wrapp .abouts-row {width: 100%; display: flex; flex-wrap: wrap;}
.abouts-wrapp .abouts-col1 { width: 24%; margin: 0 1.33% 0 0; border-bottom: 4px solid #E8E8E8; padding: 0 0 30px;}
.abouts-wrapp .abouts-col1:nth-child(4n) {margin-right: 0;}
.abouts-wrapp .abouts-col1 .icon {width: 35px; height: 35px; margin: 0 0 20px;}
.abouts-wrapp .abouts-col1 .icon img { width: 100%; height: 100%; object-fit: contain;}
.abouts-wrapp h3 { font-size: 24px; color: var(--secondary); font-weight: 500;}


/* ---------product-wrapp------------  */
.product-wrapp {background: #F8F8F7; padding: 100px 0;text-align: center;}
.product-wrapp h2 {font-size: 54px; color: var(--secondary); font-weight: 600; margin: 0 0 55px;}
.product-wrapp h2 span { display: block;}
.product-wrapp  .product-row { width: 100%; display: flex; flex-wrap: wrap;}
.product-wrapp  .product-col1 {width: 32%; margin: 0 2% 0 0; background: var(--primary); border-radius: 12px; overflow: hidden; position: relative;}
.product-wrapp .product-col1:nth-child(3n) { margin-right: 0;}
.product-wrapp .product-col1 .product-img { width: 100%;}
.product-wrapp .product-col1 .product-img img { width: 100%; height: 261px;}
.product-wrapp .product-col1 .product-content { width: 100%; padding: 30px; text-align: left;}
.product-wrapp h3 { font-size: 24px; font-weight: 500; margin: 0 0 16px; color: var(--secondary);}
.product-wrapp p { font-size: 13px; line-height: 1.56; color: var(--secondary); margin: 0 0 20px;}
.product-wrapp .product-col1 .product-btn { font-size: 14px; color: var(--global); display: inline-block; padding: 0 0 10px;  position: relative; font-weight: 600;}
.product-wrapp .product-col1 .product-btn:after { content: ""; position: absolute; width: 50%; height: 2px; background: var(--global); left: 50%; transform: translateX(-50%); bottom: 0; transition: all .25s ease-in-out; opacity: 0;}
.product-wrapp .product-col1 .product-btn:hover:after { opacity: 1; width: 100%;}
.product-wrapp .explore-btn { display: inline-block;background: none; padding: 16px 25px; color: #013527;font-size: 15px;text-transform: uppercase; font-weight: 600; border: 1px solid #013527; border-radius: 6px; margin: 60px 0 0;}
.product-wrapp .explore-btn:hover { background: #013527; color: var(--primary);}



/* ---------solution-wrapp------------  */
.solution-wrapp { padding: 100px 0 70px; background: #013527;}
.solution-wrapp .solution-head { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin: 0 0 60px;}
.solution-wrapp h2 { font-size: 54px; color: var(--primary); font-weight: 600;}
.solution-wrapp h2 span { display: block;}
.solution-wrapp .explore-btn { display: inline-block; background: none; padding: 16px 25px; color: var(--primary); font-size: 15px; text-transform: uppercase; font-weight: 600; border: 1px solid var(--primary); border-radius: 6px;}
.solution-wrapp .solution-row { width: 100%; display: flex; flex-wrap: wrap;}
.solution-wrapp .solution-col1 { width: 32%; margin: 0 2% 30px 0; border-radius: 12px; overflow: hidden; position: relative;}
.solution-wrapp .solution-col1:nth-child(3n) { margin-right: 0;}
.solution-wrapp .solution-col1 .solution-img { width: 100%; position: relative;}
.solution-wrapp .solution-col1 .solution-img img { width: 100%; height: 520px; object-fit: cover;}
.solution-wrapp .solution-col1 .solution-count { transition: all 0.4s ease-in-out; position: absolute; font-size: 48px; color: var(--primary); font-weight: 600; top: 40px; left: 40px; z-index: 1;}
.solution-wrapp .solution-col1 .solution-element { position: absolute; top: 0; left: 0; width: 80%; opacity: .2; transition: all 0.4s ease-in-out;}
.solution-wrapp .solution-col1 .solution-element img { width: 100%; height: inherit;}
.solution-wrapp .solution-col1 .solution-detail { position: absolute; bottom: 0; width: 100%; left: 0; transform: translateY(95px); text-align: center; padding: 30px 50px; transition: all 0.4s ease-in-out;}
.solution-wrapp h3 { font-size: 24px; color: var(--primary); font-weight: 500; margin: 0 0 16px;}
.solution-wrapp p { font-size: 14px; line-height: 1.56; color: var(--primary); margin: 0 0 20px;}
.solution-wrapp .solution-btn { font-size: 14px; color: var(--global); display: inline-block; padding: 0 0 10px; position: relative; font-weight: 600; opacity: 0;}
.solution-wrapp .solution-col1 .solution-img:after {  content: ""; position: absolute;  width: 100%; height: 100%; background: linear-gradient(0deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)),linear-gradient(180deg, rgba(0, 0, 0, 0) 51.27%, rgba(0, 0, 0, 0.9) 85.25%); top: 0; left: 0; transition: all 0.4s ease-in-out;}
.solution-wrapp .solution-col1 .solution-detail p { opacity: 0; transition: all 0.4s ease-in-out; display: -webkit-box; -webkit-line-clamp: 3;  -webkit-box-orient: vertical; overflow: hidden;}
.solution-wrapp .solution-col1:hover .solution-detail { transform: translateY(0);}
.solution-wrapp .solution-col1:hover .solution-detail p { opacity: 1;}
.solution-wrapp .solution-col1:hover .solution-btn { opacity: 1;}
.solution-wrapp .solution-col1:hover .solution-count { left: -100%;}
.solution-wrapp .solution-col1:hover .solution-element { left: -100%;}
.solution-wrapp .solution-btn:after { content: ""; position: absolute; width: 50%; height: 2px; background: var(--global); left: 50%; transform: translateX(-50%); bottom: 0; transition: all .25s ease-in-out; opacity: 0;}
.solution-wrapp .solution-btn:hover:after { width: 100%; opacity: 1;}



/* ---------products-wrapp------------  */
.products-wrapp {padding: 100px 0;}
.products-wrapp .products-head { width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; margin: 0 0 55px;}
.products-wrapp  h2 { font-size: 54px; color: var(--secondary); font-weight: 600;}
.products-wrapp h2 span { display: block;}
.products-wrapp .products-head p { width: 42%; font-size: 16px; line-height: 1.56; color: var(--secondary);}
.products-wrapp .products-row { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between;}
.products-wrapp .products-col1 { width: 48%;}
.products-wrapp .products-col1 img { width: 100%;}
.products-wrapp .products-col2 { width: 48%;}
.products-wrapp .accordion { width: 100%;}
.products-wrapp .accordion .accordion-item { width: 100%; border-bottom: 4px solid #E8E8E8; padding: 0 0 20px; margin: 0 0 35px; position: relative;}
.products-wrapp .accordion .accordion-item .accordion-header { width: 100%;}
.products-wrapp .accordion .accordion-item .accordion-header h3 { font-size: 24px; font-weight: 500; margin: 0 0 16px; color: var(--secondary); cursor: pointer; position: relative; padding-right: 35px;}
.products-wrapp .accordion p { font-size: 14px; line-height: 1.56;color: var(--secondary);}
.products-wrapp .accordion .accordion-item .accordion-content { display: none; width: 100%;}
.products-wrapp .accordion .accordion-item.active .accordion-content { display: block;}
.products-wrapp .accordion .accordion-item .accordion-header h3:after {content: ""; width: 20px; height: 20px; background: url(../images/chevron-down-solid-full.svg) no-repeat center / 100%; position: absolute;right: 0;  top: 50%; transform: translateY(-50%); transition: all .25s ease-in-out;}
.products-wrapp .accordion .accordion-item.active .accordion-header h3:after { transform: translateY(-50%) rotate(-180deg);}
.products-wrapp .accordion .accordion-item:after {content: ""; position: absolute; width: 0; height: 4px; background: var(--secondary); left: 0; bottom: -4px; transition: all .25s ease-in-out;}
.products-wrapp .accordion .accordion-item.active:after { width: 40%;}



/* ----------partner-wrapp------------ */
.partner-wrapp { padding: 100px 0;  position: relative; min-height: 520px; display: flex; flex-wrap: wrap; align-items: center;}
.partner-wrapp .partner-bg { position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
.partner-wrapp .partner-bg img { width: 100%; height: 100%; object-fit: cover; object-position: left;}
.partner-wrapp  .partner-row { width: 100%; position: relative;}
.partner-wrapp  .partner-col1 { width: 40%;}
.partner-wrapp  h2 { font-size: 54px; color: #013527; font-weight: 600; margin: 0 0 20px;}
.partner-wrapp p { font-size: 16px; line-height: 1.56; color: var(--secondary); margin: 0 0 30px;}
.partner-wrapp .partner-btn { display: inline-block; background: var(--global); padding: 16px 25px; color: #013527; font-size: 15px; text-transform: uppercase; font-weight: 600; border: 1px solid var(--global); border-radius: 6px;}
.partner-wrapp .partner-btn:hover {background: var(--primary); border-color: #013527;}


.footer-wrapp {
    background: #013527;
    padding: 70px 0 10px;
}

.footer-wrapp .footer-head {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 30px;
    border-bottom: 1px solid rgb(255 255 255 / 10%);
}

.footer-wrapp .footer-head .footer-head-col1 {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    max-width: 465px;
}

.footer-wrapp .logo {
    width: 144px;
    margin: 0 22px 0 0;
}

.footer-wrapp .footer-head p {
    font-size: 13px;
    color: var(--primary);
    flex: 1;
    padding: 0 0 0 20px;
    border-left: 1px solid rgb(255 255 255 / 20%);
}

.footer-wrapp .logo img {
    width: 100%;
}

.footer-wrapp .footer-head .cta-btn {
    display: inline-block;
    background: var(--global);
    padding: 16px 25px;
    color: #013527;
    font-size: 15px;
    text-transform: uppercase;
    font-weight: 600;
    border: 1px solid var(--global);
    border-radius: 6px;
}

.footer-wrapp .footer-head .cta-btn:hover {
    background: var(--primary);
    border-color: #013527;
}

.footer-wrapp .footer-row {
    width: 100%;
    padding: 30px 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.footer-wrapp h3 {
    font-size: 24px;
    color: var(--primary);
    font-weight: 500;
    margin: 0 0 16px;
}

.footer-wrapp  ul {
    width: 100%;
}

.footer-wrapp ul li {
    font-size: 12px;
    color: var(--primary);
    margin: 0 0 18px;
}

.footer-wrapp ul li a {
    color: var(--primary);
}

.footer-wrapp .social {width: auto;}

.footer-wrapp .social ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.footer-wrapp .social ul li {
    width: 40px;
    height: 40px;
    margin: 0 10px 0 0;
}
.footer-wrapp .social ul li .icon {
    width: 100%;
    height: 100%;
    display: flex;
    padding: 12px;
    border: 1px solid #FFFFFF1A;
    border-radius: 50%;
    position: relative;
    transition: all .25s ease-in-out;
}

.footer-wrapp .social ul li .icon img {
    width: 100%;
    height: 100%;
    transition: all .25s ease-in-out;
}

.footer-wrapp .social ul li .icon .hover-icon {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    padding: 12px;
    transition: all .25s ease-in-out;
    opacity: 0;
}

.footer-wrapp .social ul li .icon:hover {
    background: var(--primary);
}

.footer-wrapp .social ul li .icon:hover > img {
    opacity: 0;
}

.footer-wrapp .social ul li .icon:hover .hover-icon {
    opacity: 1;
}

.footer-wrapp .footer-row1 {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgb(255 255 255 / 10%);
    padding: 30px 0 20px;
    margin: 20px 0 0;
}

.footer-wrapp .footer-row1 p {
    font-size: 12px;
    color: var(--primary);
}

.footer-wrapp .footer-row1 ul {
    width: auto;
    display: flex;
    flex-wrap: wrap;
}

.footer-wrapp .footer-row1 ul li {
    margin: 0 0 0 0;
}

.footer-wrapp .footer-row1 ul li:first-child {
    margin: 0 12px 0 0;
    padding: 0 14px 0 0;
    border-right: 1px solid rgb(255 255 255 / 20%);
}