:root{--primary:#19ABB6;--dark:#00061a;--gray:#8B8D98;--gray-l:#646464;--bule-r:#D8F8FA;--bule-l:#f3fcff;--gray-r:#f6f6f6;--white:#fff;--shadow:0 4px 12px rgba(0,0,0,0.1);--transition:all 0.3s ease; --colorbj2: linear-gradient(100deg, #00B9EE 0%, #2CE250 100%); --colorbj3: linear-gradient(98deg, rgba(24, 255, 4, 1) 8.49%, rgba(0, 255, 255, 1) 89.76%); --colorbj: #19ABB6;}
*{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif}
html{}
body{line-height:1.5;color:var(--dark); font-size:16px}

input{line-height:normal;text-overflow:ellipsis}
input,textarea{-webkit-appearance:none}
button,input,select,textarea{line-height:1;margin:0;border:0;outline:0;}
input { outline: none;}


a{text-decoration:none;color:inherit}
ul,li{list-style:none}
img{max-width:100%; display:block}
h1,h2,h3,h4,h5{ font-size:1rem}
.container{width:95%;max-width:1200px;margin:0 auto;}

.pd100{ padding:100px 0}
.btn-wh{ border:1px solid #fff; border-radius:32px; display:inline-block; padding:5px 15px}


.section-title{text-align:center;position:relative;    padding-bottom: 80px;}
.section-title h3{font-size:2.5rem;color:var(--dark);margin-bottom:15px;text-transform: capitalize; line-height: 1.08;letter-spacing: -.02em;}
.section-title p{color:var(--gray-l);max-width:800px;margin:0 auto;font-size:1.5rem;}


.header { background: white; box-shadow: var(--shadow); position: fixed;width: 100%; top: 0;z-index: 1000;}
	.headertop{background:var(--primary); color:var(--white); padding:2px 0; font-size:0.9rem}
	.headertop i{ padding:0 5px;}
	.headerbs{    display: flex;   justify-content: space-between;   align-items: center;  transition: var(--transition)}
	.topem{ text-align:center}
.header-container{display:flex;justify-content:space-between;align-items:center;padding:20px 0}
.logo a{display:flex;align-items:center}
.logo h2{color:var(--dark); margin-left:10px;  font-size:1rem; text-align:center; line-height:1.2}
.logo h2 span{ background:var(--colorbj2);-webkit-background-clip: text;   -webkit-text-fill-color: transparent; font-size:1.5rem}

.logo img{ height:45px; width:auto}	
nav ul{display:flex;align-items:center}
nav ul li{position:relative;margin-left:30px}
nav ul li a{font-weight:600;padding:10px 0;transition:var(--transition)}
nav ul li a:hover{color:var(--primary)}
nav ul li ul{position:absolute;top:100%;left:0;background:#fff;min-width:200px;box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(10px);transition:var(--transition);z-index:100;flex-direction: column;}
nav ul li:hover ul{opacity:1;visibility:visible;transform:translateY(0)}
nav ul li ul li{margin:0;width:100%}
nav ul li ul li a{display:block;padding:10px ;border-bottom:1px solid var(--light-gray)}
nav ul li ul li a:hover{background:var(--light);color:var(--primary)}
.search-icon{cursor:pointer;font-size:1.2rem;margin-left:20px;transition:var(--transition)}
.search-icon:hover{color:var(--primary)}
.search-container{position:absolute;top:100%;right:0;background:#fff;padding:15px;box-shadow:var(--shadow);border-radius:4px;opacity:0;visibility:hidden;transform:translateY(10px);transition:var(--transition);z-index:100}
.search-container.active{opacity:1;visibility:visible;transform:translateY(0)}
.search-container input{padding:10px 15px;width:250px;border:1px solid var(--light-gray);border-radius:4px;font-size:1rem}
.search-container button{padding:10px 15px;background:var(--primary);color:#fff;border:none;border-radius:4px;margin-left:5px;cursor:pointer}
.mobile-toggle{display:none;font-size:1.5rem;cursor:pointer}


.pardtop{ padding-top:100px}
.section { padding:5rem 0}
.top_item{width: 100%;  max-width:900px; display: flex; flex-direction: column;justify-content: center;padding: 80px 0;    margin: 0 auto; text-align:center}
.h1_title{ font-size: 4rem;  font-weight: 500;  line-height: 1.04; text-align:center; text-transform: capitalize;}
.top_item p{font-size:1.5rem;font-weight:500;line-height:1.32;color:var(--gray-l);margin-top:24px;padding:0 32px;text-transform: capitalize;}
.thbtn{  display: flex;  justify-content: center;   gap: 12px;  margin-top: 24px;}

.item_btn{height:60px;padding:0 32px;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;width:fit-content;cursor:pointer;transition:.25s ease-in-out;text-decoration:none;color:#fff;border-radius:4px;background:var(--colorbj); font-size:1.5rem; font-weight:500}
.item_btng{ background:var(--gray-r); color:var(--dark)}


.custitem{display: flex;gap:10px; }
.cust_bok{ flex: 1; border-radius: 10px; overflow:hidden }
.cust_bok_1{font-size:1.1rem}
.cust_bok_1 dd{ padding:10px 20px}
.cust_bok_1 dt{font-size: 2rem;    font-weight: 500; padding:0 20px}
	.cust_bok_1 dd.cust_bok_img{ padding:20px 0 0 0; opacity: 100%; display: flex;  justify-content: center;  align-items: flex-end;  min-height:300px }
	.cust_bok_1 dd.cust_bok_img img{ width:100%; display:block}
.cust_bok_1  img { width:100%; height:auto;transition: var(--transition)}
.cust_bok_1 dd{opacity: 70%;}
.cust_bok_1 dd span{ border-bottom:1px solid rgb(from var(--white) r g b / .5);}
.cust_bok_1:hover img{  transform: scale(1.1);}

.cust_bok_0{ background:var(--primary); color:var(--white); }
.cust_bok_t{ background:var(--bule-l); color:var(--dark);transition: var(--transition) }
	.cust_bok_t:hover{ background:var(--bule-r)}
.cust_bok_2 {flex: 1.5;  display:grid;grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 20px; }	
	.cust_block{background-color: #f5f5f5;border-radius: 8px; overflow: hidden; transition: var(--transition); position: relative;color:var(--primary)}
	.cust_block-t{padding:1rem;position:absolute;width:100%; text-align:center;bottom:0; font-weight:500}
.cust_block img{transition: var(--transition); width:100%; height:auto}
.cust_block:hover{ background:var(--primary); color:var(--white)}
.cust_block:hover img{transform: scale(1.1);}



.products-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:30px}
.product-card{border-radius:8px;overflow:hidden;transition:var(--transition)}
.product-card:hover{transform:translateY(-5px);}
.product-img{overflow:hidden; background: #a1b6a3}
.product-img img{width:100%;height:100%;object-fit:cover;transition:var(--transition)}
.product-card:hover img{transform: scale(1.1);}
.product-info{padding:20px;background-color:var(--white); text-align:center}
.product-card h3{font-size:1.1rem;margin-bottom:15px;color:var(--dark); font-weight:500; line-height: 1.16; padding:1rem 0; -webkit-line-clamp: 2;overflow:hidden;text-overflow: ellipsis; display: -webkit-box;-webkit-box-orient: vertical;}



.pro-type{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:10px}
.pro-type a{ background:var(--gray-r); display: flex; align-items: center; padding:0.5rem 0.8rem ; border-radius:2px; font-size:1.3rem;transition:var(--transition)}
	.tyico { width:50px; height:50px; border-radius:10px;  background:var(--white);  margin-right:15px;flex-shrink: 0; overflow:hidden}
	.tyico img{ width:100%; height:auto}
	.pro-type a p{ flex: 1;    min-width: 0;}
	.pro-type a i{ flex-shrink: 0;background: linear-gradient(98deg, #0F0 8.49%, #0FF 89.76%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.pro-type a:hover{ box-shadow:var(--shadow); color:var(--primary); padding:0.5rem 1.8rem }


.adv-item {display: grid;grid-template-columns: repeat(2, 1fr);gap: 30px;}
	.adv-card{ position:relative; border-radius:10px; overflow:hidden ; height:400px}
	.adv-img{  height: 280px; position: relative;overflow: hidden;transition: height 0.5s ease;border-radius:10px;}
	.adv-img img { width: 100%; height: 100%; object-fit: cover;transition: none;}
        
	.adv-inst{ padding: 20px;transition: all 0.5s ease;    margin: 0 15px;  position: relative;background: white; z-index: 2;}
	.adv-inst h3{ font-size:1.2rem; font-weight:500}
	.adv-inst p{ color:var(--gray-l)}
	
.adv-card:hover {  transform: translateY(-5px);box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12); }
.adv-card:hover .adv-img { height: 350px; }
.adv-card:hover .adv-inst{transform: translateY(-80px);backdrop-filter: blur(8px);  z-index: 3; background: rgba(255, 255, 255, 0.6);  border-radius: 8px;  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);}

.ab-item{ display:grid; align-items:center; gap:3rem;grid-template-columns:repeat(2, minmax(0, 1fr));}
	.about-img{ position:relative;}
	.about-img img{ width:100%; border-radius:15px}
	.about-ims{position:absolute; border-radius:8px; padding:15px; bottom:-15px; right:-25px; background:var(--white); box-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); display:flex; align-items: center}
	.about-ims p { width: 45px; height:45px; border-radius:50%; background:var(--primary); color:var(--white); text-align:center; margin-right:10px; line-height:45px; font-size:1.5rem }
	.about-ims h3{ font-size:1.2rem}
 .ab-cont{}
  .ab-cont h2{ font-size:2.5rem; padding-bottom:2rem}
  .abins{font-size: 1.25rem; font-weight: 350;line-height: 1.32;letter-spacing: -.02em;color: var(--gray-l);}
   .ab-cont ul{ display:grid; align-items:center;grid-template-columns:repeat(2, minmax(0, 1fr));}
   .ab-cont ul li P{ color:var(--primary); font-size: 2.5rem;    font-weight: 800;    padding-top: 1.8rem;}
  
  
.pro-top{ padding:120px 0 30px 0; border-bottom:2px solid var(--bule-r)}
.pro-w{ width:95%; margin:0 auto}
.site{ padding:15px 0}
.site a{ color:var(--primary)}
	
	.pro-tem{ display:flex; justify-content:space-between; align-items:center}
	.pro-tc{ max-width:50%}
	.pro-tc h1{ font-size:3rem}
	.pro-tc p{ color:var(--gray)}
	.pro-timg{ }
	.pro-timg img{ max-height:300px; width:auto; display:block}
.pro-content{display: flex;  gap: 20px; padding:50px 0}
	.sidebar{width:320px;flex-shrink:0;background:#fff;padding:20px 10px;}
	.sidebar h3{ color:var(--primary); border-bottom:1px solid var(--gray); padding-bottom:8px}
	.sidebar ul { padding:20px 0} 
	.sidebar ul li{ line-height:2; padding-left:18px;}
	.sidebar ul li a{ display:block }
	.sidebar ul li:hover{ background:var(--bule-r); color:var(--primary);}
	
  .product-area { flex: 1; }
  
 .product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(296px,1fr));gap:24px 0}
 .product-grid li{border-radius: 8px; overflow: hidden; padding: 8px 8px 16px;transition:var(--transition)}
  .product-grid li h4{ font-weight:500; padding:15px 0; }
  .product-grid li p{ color:var(--gray); font-size:0.9rem;display: -webkit-box;    -webkit-box-orient: vertical; -webkit-line-clamp: 3;   overflow: hidden;}
 .pro-img{ background: #a1b6a3; border-radius:15px; overflow:hidden}
 .pro-img img{ width:100%; height:auto; transition:var(--transition)}
 .product-grid li:hover {box-shadow: 0 6px 20px #2f2f2f1a;}
 .product-grid li:hover .pro-img img{transform: scale(1.1);}
 
 
.web_turn_page{margin:30px 0;text-align:center;height:auto;clear:both;display:flex;align-items:center;justify-content:center}
.web_turn_page span{text-align:center;display:inline-block;margin:5px 5px;position:relative;transition:var(--transition)}
.web_turn_page span a{display:block;font-size:16px;padding:9px 18px;background:#f5f7f6;text-decoration:none; border-radius:5px;}
.web_turn_page span.active,.web_turn_page span:hover{  color:var(--white); }
.web_turn_page span.active a,.web_turn_page span:hover a{background:var(--primary)}


.product-detail{flex:2;min-width:500px; padding:30px 0}
.product-main{display:flex;flex-wrap:wrap;gap:30px;margin-bottom:30px}
.product-images{flex:1;min-width:500px}
.main-image{width:100%;height:500px;overflow:hidden;border-radius:8px;margin-bottom:15px;box-shadow:var(--card-shadow); background: #a1b6a3}
.main-image img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.main-image img:hover{transform:scale(1.03)}
.thumbnail-images{display:flex;gap:10px;flex-wrap:wrap}
.thumbnail{width:80px;height:80px;border-radius:5px;overflow:hidden;cursor:pointer;opacity:.7;transition:all .3s;border:2px solid transparent;background: #a1b6a3}
.thumbnail.active,.thumbnail:hover{opacity:1;border-color:var(--primary-color)}
.thumbnail img{width:100%;height:100%;object-fit:cover}
.productd-info{flex:1;min-width:300px}
.product-title{font-size:1.8rem;color:var(--dark);margin-bottom:10px}
.product-intro{color:var(--gray);margin-bottom:20px;line-height:1.2}
.pro-tag a{ padding:4px 16px; border:1px solid var(--primary); border-radius:20px; color:var(--primary); margin:0 5px; display:inline-block; font-size:0.9rem}

.pro-coms{ background:var(--bule-l);  margin:15px 0; border-radius:10px; font-size:0.9rem; display:flex; flex-direction: column;  overflow:hidden}
.pro-cotp{ display:flex; align-items:center; justify-content:space-between;padding:10px;}
	.pro-cst{ font-size:0.9rem;}
	.pro-cst h5{ font-weight:500; font-size:0.9rem;}
	.pro-cst p{ font-size:0.8rem;}

.pro-cos{ display:flex; position:relative}
.pro-cos img{ width:50px; height:50px; border:3px solid var(--white); border-radius:50%; margin-left:-20px}
.pro-cos:after{ content:""; background:#FF0000; width:10px; height:10px; border-radius:50%; right:8px; position:absolute}
.pro-clx{  align-self: flex-end; display:flex; width:100%; border-top:1px solid var(--bule-r);}
.pro-clx li{flex-grow: 1; border-right:1px solid var(--bule-r); padding:10px}
.pro-clx li:last-child{ border-right:none }
.pro-clx li i{ margin-right:10px;}

.pro-sim a{ background:var(--gray-r); display:flex; justify-content:space-between;}
	.prosit{ padding:14px; font-weight:600}
	.prosit span{ text-decoration: underline; font-weight:normal}
	.pro-simg img{ height:100px; width: auto}
	
.pro-cons{ padding:30px 0}
.product-des{}
.recommendations{}
.product-des h3,.recommendations h3{ font-size:1.3rem; color:var(--primary); border-bottom:1px solid #e7e7e7; position:relative; padding-bottom:5px;}
.product-des h3:after,.recommendations h3:after{ content:''; height:2px; background:var(--primary); position:absolute; width:200px; bottom:-1px; left:0}







footer{background:#f8f8f8;color:var(--dark);padding:60px 0 20px}
.footer-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:70px;margin-bottom:40px}
.footer-column h3{font-size:1.3rem;margin-bottom:20px;color:var(--primary-light)}

.ftct li{    margin-bottom: 15px; display: flex; align-items: flex-start; color: :;}
.ftct li  i { margin-right: 10px;color: var(--primary-light); margin-top: 5px;}
.footer-links li{margin-bottom:10px}
.footer-links a{transition:var(--transition)}
.footer-links a:hover{color:var(--primary)}
.footer-bottom{text-align:center;padding-top:20px;border-top:1px solid rgb(31 41 55)}
.footeco{ width:90%; max-width:805px; margin:15px auto;}
.footeco img{ width:100%; height:auto; display:block}


.news-container{display:grid;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));gap:35px}
.feature-news{background:#f1f5f9;border-radius:24px;overflow:hidden;border:1px solid #e0eaf2; }
.feature-news img{width:100%;max-height:350px;object-fit:cover; background:var(--primary);}
.feature-content{padding:22px}
.feature-content h3{font-size:1.5rem;font-weight:500;margin-bottom:10px}
.feature-content p{color:#33465a}
.news-list{display:flex;flex-direction:column;gap:14px}
  .news-item{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:#f9fbfd;border-radius:40px;border:1px solid #e2eaf1;transition:.1s; }
  
   .news-item  .title{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:75%}
   .news-item  .date{color:#64748b;font-size:1rem;flex-shrink:0}
   
   .news-item:hover{ color:var(--primary)}

.faq-grid{display:grid; grid-template-columns: 1fr;gap:20px}
.faq-item{background:#f9fcff;border-radius:24px;border:1px solid #e3eef9;transition:.2s;cursor:pointer;overflow:hidden}
.faq-item:hover{background:#fff;border-color:#19ABB6;box-shadow:0 8px 20px -8px rgba(0,70,120,.12)}
.faq-question{font-size:1.2rem;font-weight:600;color:#003459;display:flex;align-items:center;gap:10px;padding:22px 25px;position:relative}
.faq-question::before{content:"Q";background:var(--primary);color:#fff;width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;font-weight:600;flex-shrink:0}
.faq-question::after{content:"▼";font-size:1rem;color:#5f7d9c;margin-left:auto;transition:transform .3s ease}
.faq-item.active .faq-question::after{transform:rotate(180deg)}
.faq-answer{max-height:0;padding:0 25px 0 61px;color:#2c3e50;font-size:.98rem;line-height:1.6;overflow:hidden;transition:max-height .35s ease,padding .2s ease;background:#fff;border-top:0 solid transparent}
.faq-item.active .faq-answer{max-height:200px;padding:0 25px 22px 61px;border-top:1px solid #dee9f2}
.faq-answer p{margin-bottom:6px}


.chat-widget { position: fixed;  right: 10px;  bottom:30%;  transform: translateY(-50%); background:#fff;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);  border-radius: 8px;  overflow: hidden;  z-index: 9999;}
.chat-item { text-align:center}
.chat-item  a{ display:block; color:var(--primary-color); font-size:0.8rem; border-bottom:1px solid rgba(0,0,0,0.2);padding:15px 8px}
.chat-item  a:last-child{border-bottom:none}
.chat-item  a:hover{background-color:var(--primary-color); color:#fff}
.chat-item i{display:block; font-size:2rem}

.news-tc{ font-size:3rem;line-height: 1.04; letter-spacing: -0.06em; text-align: center; margin:30px 0;}

.news-ty{ display:flex;flex-wrap: wrap;justify-content: center; position: relative;  margin: 56px 0 0 -8px;}
	.news-ty li{ margin:10px 0 10px 0}
	.news-ty li a{ display: inline-flex;  padding: 8px 16px;  cursor: pointer;  transition:var(--transition);  text-decoration: none;   border-radius:3px;  background-color: #fff;flex-shrink: 0;  justify-content: center;  align-items: center;  border: 1px solid #e7e7e7;}
	.news-ty li a:hover{ background:var(--primary); color:var(--white); border: 1px solid var(--primary);box-shadow: 0 2px 2px 0 rgba(25,171,182,.2);}

.news-grid {display: grid;  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));  gap: 1.75rem;   margin-bottom: 3rem; padding:30px 0}
.news-card{background:#fff;border-radius:8px;overflow:hidden;box-shadow:var(--shadow);transition:var(--transition);display:flex;flex-direction:column;height:100%}
.news-card:hover{transform:translateY(-5px);}
.card-image-container{position:relative;width:100%;height:0;padding-top:56.25%;overflow:hidden}
.card-image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;transition:var(--transition);}

.card-title{padding:1rem 1.5rem; font-size:1.25rem;font-weight:600;line-height:1.4;margin-bottom:1rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

.card-footer{padding:0.5rem 1rem;border-top:1px solid rgba(0,0,0,0.09);display:flex;align-items:center}
.publish-time{font-size:.875rem;color:#adadad;display:flex;align-items:center;gap:.375rem}
.read-link{padding:.5rem 1rem;font-size:.875rem;font-weight:500; color:var(--primary); transition:var(--transition);}
.read-link i{transform: rotate(-45deg); padding-left:5px;transition:var(--transition);}
.news-card:hover .card-image{transform:scale(1.05)}
.news-card:hover .card-title{ color:var(--primary);}
.news-card:hover  i {transform: rotate(0deg);}
input:-internal-autofill-selected {
    background-color: transparent !important; 
    color: inherit !important;
}
.blog-pd{ padding:120px 0 3rem 0}
.blog-con{width: 68.5%;}
.blog-time{display:inline-block;background:linear-gradient(100deg,color(display-p3 .0729 .7124 .9117) 0,color(display-p3 .4306 .8717 .3923) 100%);background-clip:border-box;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.blog-title{font-size:3rem;line-height:1.08;font-weight:500;letter-spacing:-.05em;text-align:left; padding:5px 0 3rem}

.blog-sec{ display:flex; justify-content:space-between}
.blog-con header{}
.contents{width:100%;color:#00061a;font-size:20px;line-height:1.32;font-weight:350;letter-spacing:-.02em; padding:2rem 0; font-size:1.1rem;border-bottom: 1px solid #D8D9E2;}
.contents h2,.contents h3{ color:var(--primary); margin:2rem 0}

.blog-right { width: 31.5%;  padding-left:30px;}

.info_prev_next{ padding:2rem 0; display:flex; justify-content:space-between;}
.info_prev_next a{ display:flex; align-items:center; color:var(--gray)}
.info_prev_next a i{ color:var(--primary);  border: 1px solid var(--primary); border-radius:1rem;  width:35px; height:35px; text-align:center; line-height:35px}

	.info_prev_next a span{ display:block;color:var(--primary); }
	.info_prev_next a:hover  i{ background:var(--primary); color:var(--white)}
	.prev{ padding-right:15px;}
	.next{ padding-left:15px}
	.prev i{ margin-right:10px;}
	.next i{ margin-left:10px;}
.blog-mail{  background:var(--primary); padding:2rem 1rem; color:var(--white); border-radius:1.5rem}
	.blog-mail h5{ font-size:2rem; font-weight:500}
	.blog-mail p{ font-size:1.1rem; margin:1rem 0}
	.blog-inp{width:100%;background:#fff;border-radius:80px;margin-top:5px; margin-top:2rem}
	.blog-inp form {display: flex;  align-items: center;}
	.blog-inp form input{width:85%;height:54px;padding:0px 5px 0px 32px;color:var(--gray); font-size:1.1rem; overflow:hidden; border-radius:27px; }
	.blog-inp form button{ color:var(--white); cursor:pointer}
	.blog-inpbtn{width:44px;height:44px;display:flex; color:var(--white);align-items:center;justify-content:center;gap:16px;background:linear-gradient(100deg,color(display-p3 .0729 .7124 .9117) 0,color(display-p3 .4306 .8717 .3923) 100%);border-radius:50%}

.main-top{ padding-top:120px; }

.mtitle { font-size: 3rem; font-weight:500; line-height: 1.08;  letter-spacing: -0.06em; }
.mpins{font-size:1.5rem;font-weight:350;line-height:1.32;letter-spacing:-.02em;}
.mpsnt{font-size:1.0625rem;font-weight:500;line-height:1.16;letter-spacing:-.02em}


.custom-hd{background-color: #f8f8f8;border-bottom: 1px solid #e7e7e7;}
.custom-bg{ background: var(--primary);}

.custom-pro h3,.custom-sk h3{font-size: 40px; line-height: 1.08; letter-spacing: -.06em; font-weight:600; }

.custom-sk{ display:flex;gap: 20px; align-items: center; color:#fff}
.custom-sk h3{flex:1}
.custom-adv { padding:25px 0;flex:1}
.custom-adv ul li{ position:relative; padding-left:25px;opacity: .95;  font-weight: 350;  font-size: 20px;  line-height: 1.32;margin-bottom: 12px; }
.custom-adv ul li:after{ background:url(../images/ico-gou.png)  no-repeat; content: "";  position: absolute; left: 0; top:5px; width: 18px;  height: 18px;background-size: contain;}

.custom-ts{ text-align:center; padding:2rem 0}
.custom-ts p{opacity: .65; margin-top:1rem}
.custom-trust{grid-template-columns: repeat(6,1fr);  grid-template-areas:"card-one  card-one  card-two  card-two  card-three card-three" 
"card-four card-four card-four card-five card-five  card-five ";width: 100%;  display: grid;gap: 16px;}

.custom-trust dl{background-color: #f8f8f8; border-radius: 4px;width: 100%;  height: 100%;  position: relative;  display: flex;  flex-direction: column;  overflow: hidden; padding-top:32px;}

.custom-trust dl dt{font-size: 1.4rem; font-weight: 500;  line-height: 1.16;  letter-spacing: -.02em;text-align: center;    max-width: 416px;  margin: 0 auto;padding:0 32px}
.custom-trust dl dd p{font-size: 1.0625rem;color: #555;  font-weight: 350;  line-height: 1.32;  letter-spacing: -.02em;text-align: center;    max-width: 416px;  margin: 0 auto; padding:20px}
.custom-trust dl dd img{width: 100%;  display: flex;  align-items: center;  justify-content: center;  border-radius: 4px;  overflow: hidden;}
.custom-trust dl:nth-child(1) {grid-area: card-one;}
.custom-trust dl:nth-child(2) {grid-area: card-two ;}
.custom-trust dl:nth-child(3) {grid-area: card-three ;}
.custom-trust dl:nth-child(4) {grid-area: card-four;}
.custom-trust dl:nth-child(5) {grid-area: card-five;}

.custom-p{ padding:2rem 0}
.custom-pro{justify-content: flex-start;  align-items: flex-start;  padding-bottom: 80px;width: 100%;gap: 16px;display: flex;}
.custom-pro h3,.custom-pro p{ flex: 0 1 50%;}
.custom-pro p{opacity: .75;font-size: 1.5rem;color: #555;  font-weight: 350;  line-height: 1.32;  letter-spacing: -.02em; }


.custom-materials { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem;}
.custom-materials dl dt{font-size: 1.4rem; font-weight: 500;  line-height: 1.16;  letter-spacing: -.02em; padding:20px 0}
.custom-materials dl dd{ color: #555;}

.textce{ text-align: center}
.pdstr{ padding:30px 0}
.about-top{ display: flex;  gap: 20px; align-items:center; padding:50px 0}
.abtitle{flex: 1; text-align:center;}
.abtitle p{padding:30px 0;max-width:413px;margin:0 auto 48px}

.scbtn{border-radius:80px;background:linear-gradient(100deg,#00b9ee 0,#2ce250 100%);padding:10px 40px;cursor:pointer; color:var(--white)}

.abtimg{flex: 1;}
.abtimg img{ width:100%; height:auto} 
.abitem{ padding:80px 0}
.abinsw{ width:80%; max-width:900px; margin:0 auto }
.mycont{display:grid;align-items:center;grid-template-columns:repeat(4,minmax(0,1fr)); padding-bottom:30px}
.mycont  li P{ color:var(--primary); font-size: 2.5rem;    font-weight: 800;    padding-top: 1.8rem;}


.arop{ color: var(--primary);}

.float-element {
  animation: floatUpDown 3s ease-in-out infinite;
}

@keyframes floatUpDown {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}


.video-poster{position:relative;cursor:pointer;transition:var(--transition)}
.video-poster:hover{transform:scale(1.01)}
.video-poster img{width:100%;height:auto;display:block;transition:var(--transition)}
.video-poster:hover img{opacity:.9}
.play-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80px;height:80px;background-color:rgba(25,171,182,.85);border-radius:50%;display:flex;justify-content:center;align-items:center;color:var(--white);font-size:2.5rem;cursor:pointer;transition:var(--transition);border:none;outline:0}
.play-button:hover{background-color:var(--primary-green);transform:translate(-50%,-50%) scale(1.1);box-shadow:0 0 0 10px rgba(25,171,182,.2)}
.video-description{background-color:var(--white);padding:2rem;}
.video-description h3{font-size:1.5rem;color:var(--primary);margin-bottom:1rem}


.video-content {  width: 90%; max-width: 1000px; position: relative;}
.video-modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.75);display:flex;justify-content:center;align-items:center;z-index:2000;opacity:0;visibility:hidden;transition:var(--transition)}
.video-modal.active{opacity:1;visibility:visible}
.video-wrapper{position:relative;padding-bottom:56.25%;height:0;overflow:hidden}
.video-wrapper iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none}
.close-modal{position:absolute;top:-50px;right:0;background:0 0;border:none;color:var(--white);font-size:2rem;cursor:pointer;transition:var(--transition)}
.close-modal:hover{color:var(--light-green);transform:rotate(90deg)}



.element-com{display: flex;gap:48px;align-items: center; }
.con-atta{ display:flex; flex:1}
		.con-atta img{ border-radius:25px }

.flexdl {flex:1;}
.flexdl dl{border-bottom:1px solid rgba(0,0,0,0.2); padding-bottom:30px; margin-bottom:30px;}
.flexdl dl:last-child{ border-bottom: none; padding-bottom:none; margin-bottom:none;}

.con-bzd{ }
.con-bzd dt{line-height: 1.3em;font-size: 2.625rem;font-weight: 600; padding:25px 0;color:transparent;background: rgba(224, 225, 230, 1) -webkit-linear-gradient(left, rgba(19, 182, 232, 1) 0%, rgba(110, 222, 100, 1) 54.39%) no-repeat 0 0;background-clip:border-box;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.conbr{ color:var(--primary); font-size:1.1rem}
.conbr i{ padding-right:10px}
.elemtitle{ font-size:2rem}
.con-part{ background:var(--primary); border-radius:25px; padding:25px}
.con-part-des{ color:#fff; }
.con-part-list{border-bottom:1px solid #D7EFE233; padding-bottom:35px; margin-bottom:15px}
.con-part-des p i{ margin-right:15px}
.con-part-des h2 { margin: 12px 0}
.con-part-list h5 {font-size: 1.5rem;  line-height: 1.2em;    margin-bottom: 6px;}
.con-part-icon{ font-size:35px; margin-bottom:10px; color:#ebd35b}
.con-part-img{}
.con-part-img img{ border-radius:25px}

.con-dzc{ padding:50px 0 }
.con-dzc img{ border-radius:25px}


.founder{ background:var(--primary);padding: 50px 0}
.founderns { flex:1; color:#fff}
.founderns dt{ line-height: 1.3em; font-size: 2.625rem;  font-weight: 600;  padding: 25px 0;}

.fondts { font-size:1.5rem;}
.fondts i{ margin-right:15px}

.fondtb{font-size:1.2rem;text-align:justify}

.elempi{ font-size:2rem}
@media (max-width:992px){
	
	.custitem{ flex-direction: column;  }

}
@media (max-width:768px){
.mobile-toggle{display:block}
nav{position:fixed;top:110px;left:0;width:100%;background:#fff;box-shadow:var(--shadow);transform:translateY(-100%);opacity:0;visibility:hidden;transition:var(--transition)}
nav.active{transform:translateY(0);opacity:1;visibility:visible}
nav ul{flex-direction:column;padding:20px; align-items: flex-start}
nav ul li{margin:0;margin-bottom:15px}
nav ul li ul{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;margin-top:10px;display:none}
nav ul li.active ul{display:block}
.search-container{position:static;margin-top:15px;width:100%}
.search-container input{width:100%}
.topem{ width:98%; margin:0 auto}
.topsr{ display:none}
.cust_bok_2 {  grid-template-columns: 1fr;grid-template-rows: repeat(4, auto);}
  .cust_block {flex-direction: column;}
            
}
@media (max-width:576px){
.cust_bok_2 {grid-template-columns: 1fr;grid-template-rows: repeat(1, auto);}
.cust_block {flex-direction: column;}

}	
.contact-top{ padding-top:5rem;display:flex; align-items:center}
.contact-top p{ margin-left:10px; color:#86868b; font-weight:600}
.contact-top .pro-cos:after { background:#00a141}
.conthelp{ font-size:3rem; padding:2rem 0; font-weight:700}

.conlist{ display:flex; gap:20px;}
.con-item{ border-radius:5px; border:1px solid #e7e7e7;padding: 40px 32px; display:flex; flex-direction: column; gap: 24px; flex:1}
.con-item:hover { background:#f8f8f8}

	.con-icon{ width:35px; height:35px; text-align: center; line-height:35px; background: var(--bule-r); color:var(--primary)}
	.con-th h3{ color:#00061a; font-size:1.1rem; font-weight:600}
	.con-th p{ color:#656865}
	
.webart_feedback{ padding:20px 0}
.feedback_title{ margin:15px 0}
.feedback_title .title{ font-size: 32px;letter-spacing: -.05em;font-weight: 500;    color: var(--dark);}
.feedback_title .txt{ font-size:0.9rem; color:var(--gray)}
.input_rows input{ border:1px solid #e4e4e7; height:45px; line-height:45px; width:40%; max-width:600px; padding:3px 15px; margin:15px 0 5px 0; font-size:1rem}
.form_area {border:1px solid #e4e4e7; width:40%; max-width:600px; padding:3px 15px; margin:15px 0 5px 0; font-size:1rem; height:150px}
.input_rows input:focus{ border:2px solid  var(--dark);}

.form_area:focus{ border:2px solid  var(--dark);}

.form_button{border-radius:80px;background:linear-gradient(100deg,#00b9ee 0,#2ce250 100%);padding:8px 40px;cursor:pointer; color:#fff; font-size:1.2rem; font-weight:600}