@import url('https://fonts.googleapis.com/css2?family=Fasthand&family=Hanuman:wght@100;300;400;700;900&family=Noto+Serif+Khmer:wght@800&family=Poppins:wght@400;600;700;900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
:root {
  --grey: rgba(128, 128, 128, 0.442);
  --border-color-grey: rgba(128, 128, 128, 0.442);
  --bg-card: #d4d4d440;
  --bg-sale: #3CB043;
  --bg-hover-card: #bfc1be;
  --bg-header: #F6F9F5;
  --text-white: #ffffff;
  --overlay: rgba(0, 0, 0, 0.294);
  --navbar-tab: #FAFBFA;
}
/*  style of slider first  */
.pe-2 {
  padding-right: 20px;
}
.pe-3 {
  padding-right: 30px;
}
.pe-4 {
  padding-right: 40px;
}
.pe-5 {
  padding-right: 50px;
}
#pe-1 {
  padding-right: 10px;
}
.pe-1 {
  padding-right: 10px;
}
.ps-1 {
  padding-left: 10px;
}
.ps-4 {
  padding-left: 40px;
}
.ps-3 {
  padding-left: 30px;
}
.ps-4 {
  padding-left: 40px;
}
.ps-2 {
  padding-left: 20px;
}
.px-1 {
  padding: 0px 10px;
}
.pt-3 {
  padding-top : 30px;
}
.pt-4 {
  padding-top : 40px;
}
.pt-1 {
  padding-top: 10px;
}
.pt-2 {
  padding-top: 20px;
}
.p-1 {
  padding : 10px;
}
.p-2 {
  padding : 20px;
}
.pb-3 {
  padding-bottom: 30px;
}
.pt-3 {
  padding-top: 30px;
}
.pt-4 {
  padding-top: 40px;
}
.pt-5 {
  padding-top: 50px;
}
.pt-6{
  padding-top : 60px;
}
.mt-3 {
  margin-top: 30px;
}
.mt-4{
  margin-top : 30px;
}

.mt-2 {
  margin-top: 20px;
}
.mb-1 {
  margin-bottom: 10px;
}
.mb-3 {
  margin-bottom: 30px;
}
.mb-4 {
  margin-bottom: 40px;
}
.mb-5 {
  margin-bottom: 50px;
}
.mb-2 {
  margin-bottom: 20px;
}
.px-2 {
  padding: 0px 20px;
}
.me-1 {
  margin-right: 10px;
}
.me-2 {
  margin-right: 20px;
}
.me-3 {
  margin-right: 30px;
}

.swiper {
  width: 100%;
  height: 460px;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.swiper-slide  {
  position: relative;
  width: 100%;
  height: 100%;
}
.swiper-slide  .overlay {
  width: 100%;
  height: 100%;
  background-color: #10101094;
  position: absolute;
}
.swiper-slide   .card-slider-img {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  margin: 0px auto;
}
.swiper-slide   .card-slider-img  img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.swiper-slide   .text-body {
  display: flex;
  flex-direction: column;
  gap : 30px;
  width: 70%;
  margin: 0px auto;
  position: absolute;
  bottom: 100px;
  left : 120px;
  

}
.swiper-slide   .text-body .text-title {
  font-size : 24px;
  font-weight: bold;
  color: white;
  text-align: start;
}
.swiper-slide   .text-body .text-desc {
  font-size : 16px;
  color: white;
  text-align: start;
}



.swiper-slide .text-body .group-btn {
  display: flex;
  gap : 20px;
}
.swiper-slide .text-body .group-btn .btn-slider {
  /* padding : 14px; */
  background-color: var(--bg-sale);
  color: white;
  display: block;
  height: 50px;
  width: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size : 16px;
}
.swiper-slide .text-body .group-btn  .btn-service{
  background-color: var(--bg-sale);
  color: white;
  display: block;
  height: 50px;
  width: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size : 16px;
}



/*  create style of swiper slide */

.title-section {
  font-size : 16px;
  color : var(--bg-sale);
  margin-bottom : 10px;
}

.sub-title-section {
font-size : 30px;
font-weight: bold;
}


.btn-login-account {
  display: block;
  border: 2px solid var(--bg-sale);
  color: var(--bg-sale);
  padding: 9px 14px;
  transition: 0.3s linear;
  margin-left: 10px;
  cursor: pointer;
  border-radius: 4px;
}

.btn-login-account:hover {
  background-color: var(--bg-sale);
  color: var(--text-white);
}

.row  .col-6 img {
  width: 100%;
  border-radius: 4px;
  object-fit: cover;
}

.row  .col-6 .aboutus-content {
  height: 100%;
}

.row .col-6 .aboutus-title {
  font-size: 30px;
}
.row  .col-6 .aboutus-des {
  font-size: 20px;
  padding: 10px 0;
}


.aboutus-content .group-btn .btn-overlay {
  border: 2.5px solid var(--bg-sale);
  width: 260px;
    height: 50px;
  position: absolute;
  top: 10px;
  left: 10px;
  z-index : -1;
}

.aboutus-content .group-btn .more-info {
  background-color: var(--bg-sale);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 260px;
  height: 50px;
  position: relative; /* Added to make sure .btn-overlay is positioned relative to .more-info */
}

.group-btn .more-info:hover .btn-overlay {
  top: 0px;
  left: 0px;
  transition: all 0.8s;
}


.accordion-content{
  margin: 10px 0;
  border-radius: 4px;
  border: 2px solid var(--bg-sale);
  overflow: hidden;
  }
  .accordion-content:nth-child(2){
  background-color: var(--text-white);
  border-color: #CCEEFF;
  }
  .accordion-content:nth-child(3){
  background-color: var(--text-white);
  border-color: #FFCCD6;
  }
  .accordion-content:nth-child(4){
  background-color: var(--text-white);
  border-color: #CCCCFF;
  }
  .accordion-content.open{
  padding-bottom: 10px;
  }
  .accordion-content header{
  display: flex;
  padding: 5px 15px;
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
  transition: all 0.2s linear;
  background-color: var(--text-white);
  height : 60px;
  }
  .accordion-content.open header{
  height : 30px;
  }
  .accordion-content header .title{
  font-size: 17px;
  font-weight: 500;
  color: #333;
  }
  .accordion-content header i{
  font-size: 18px;
  color: var(--color-green);
  }
  .accordion-content .description {
  height: 0;
  font-size: 15px;
  color: #333;
  font-weight: 400;
  padding: 0 15px;
  transition: all 0.2s linear;
  }


  


.title-shop{
font-size : 14px;
  color : var(--color-green);
  margin-bottom : 10px;
  text-align: start;
}
.swiper {
width: 100%;
height: 100%;
}

.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
padding-bottom : 20px;
width : 100%;
}
.swiper-slide .card {
position: relative;
}

.swiper-slide .card {
width: 100%;
display: flex;
flex-direction: column;
border: 1px solid var(--border-color-grey);
border-radius: 4px;
}

.swiper-slide .card img {
display: block;
width: 100%;
object-fit: cover;
object-position: center;
height :250px;
}
.card  .card-sale {
position: absolute;
background: var(--bg-sale);
padding: 6px 10px;
color: white;
z-index: 1100;
font-size : 14px;
}

.swiper-slide .card .card-body {
padding-top : 10px;
padding-bottom : 20px;
}
.card .card-body .card-title {
font-size : 20px;
text-decoration: none;
color : inherit
}
.swiper-slide .card .card-body .card-price {
font-size : 14px;
}
.swiper-slide .card .card-body  .card-star {
color : var(--grey);
font-weight: bold;
}

.card .card-body .card-price-unit {
font-size : 16px;
font-weight: bold;
}
.btn-all-product {
  display: flex;
  justify-content: center;
}
.btn-all-product  a{
  text-decoration: none;
}
 .btn-all-product .btn-overlay {
  border: 2.5px solid var(--bg-sale);
  width: 260px;
  height: 50px;
  position: absolute;
  top: 10px;
  left: 10px;
  z-index : -1;
}

.btn-all-product  .more-info {
  background-color: var(--bg-sale);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  text-decoration: none;
  width: 260px;
  position: relative; /* Added to make sure .btn-overlay is positioned relative to .more-info */
}

.btn-all-product  .more-info:hover .btn-overlay {
  top: 0px;
  left: 0px;
  transition: all 0.8s;
}



.swiper-pagination {
bottom : 0px !important;
}
.swiper-pagination-bullet{
background: var(--color-green) !important;
width : 40px !important;
height : 8px !important;
border-radius: 4px !important;
}



.swiper {
width: 100%;
height: 100%;
}

.mySwiper2 .swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
border : none;
overflow: hidden;
padding-bottom : 20px;
}


.card-category {
display: flex;
flex-direction: column;
height : 400px;
}




.swiper-slide .card-category .card-img {
/* background-color: var(--bg-card); */
/* border-radius: 4px; */
height : 300px;
overflow: hidden;
}
.swiper-slide .card-category .card-img img {
width: 100%;
height:100%;
object-fit: cover;

}
.swiper-slide .card-category .card-img:hover img {
transform: scale(120%);
transition: all 0.8s;
}


.swiper-slide .card-category .card-body {
display: flex;
justify-content: space-between;
padding-top :30px;
height : 20%;
}
.swiper-slide .card-category .card-title {
font-size : 18px;
}
.swiper-slide .card-category .card-body .card-title {
text-decoration: none;
color : black;
font-weight: bold;
}
.swiper-slide .card-category .card-body .card-qty {
color : var(--color-green);
font-weight: bold;
}




/*  style card team */
.card-team {
height : 300px;
height: 450px;
position: relative;
display: flex;
}

.card-team .card-img {
width :100%;
height : 100%;
}
.card-team .card-img  img {
width : 100%;
height : 100%;
object-fit: cover;
}
.card-team .text-body {
position: absolute;
background-color:   var(--bg-sale);
bottom : 30px;
clip-path: polygon(0% 0%, 90.1% 0%, 100% 100%, 0% 100%); 
width : 60%;
display: flex;
flex-direction: column;
justify-content: center;
padding: 5px 0;
padding-left : 30px;
}
.card-team .text-body .text-name {
font-weight: bold;
color: white;
font-size  :  20px;
}
.card-team .text-body .text-position {
font-size : 16px;
color: white;
}
.card-team .text-body:hover {
width : 70%;
transition: all 0.8s;
padding-left : 50px;
}
/* all product shop */
 .all-product-shop{
       display: flex;
       gap : 30px;
       
 }
 /*  style technic */
 .card-technical {
  display: flex;
  flex-direction: column;
  width : 100%;
  height: 440px;
 
  overflow: hidden;
}

.card-technical a {
display: block;
height:50% ;
}


.card-technical .video-card-trialer {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}


.card-technical .video-card-trialer  .video,
.thumbnail {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}

.card-technical .video-card-trialer .video {
display: none;
}

.card-technical .video-card-trialer.active {
display: block;
}

.card-technical .video-card-trialer:hover .thumbnail {
display: none;
}

.card-technical .video-card-trialer:hover .video {
display: block;
z-index: 1;
}
.card-technical .card-body-technical{
height: 50%;
display: flex;
flex-direction: column;
gap : 6px;
}
.card-technical .card-body-technical .card-date-technical {
font-size: 14px;
color: var(--color-grey);
}
.card-technical .card-body-technical .card-title-technical {
font-size : 18px;
font-weight: bold;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;

}
.card-technical .card-body-technical .card-text-technical{
font-size : 13px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}

.card-technical .card-body-technical .card-viewers {
font-size : 12px ;
}
.card-technical .card-body-technical .card-viewers .dot-middle {
margin: 0px 4px;
font-size : 20px;
}
/*  footer  */

footer {
  background: white;
  border-top: 1px solid var(--border-color-grey);
  margin-top : 60px;
}
.logo-footer {
  width : 150px;
}
.logo-footer img {
  width : 100%;
  height : 100%;
  object-fit: cover;
}
.desc-footer {
  font-size : 14px;
  color : rgb(0, 0, 0);
}

footer .title-footer {
  color : rgb(0, 0, 0);
  font-size : 16px;
  font-weight: bold;
  padding-top : 10px;
}

footer .navbar-nav {
  list-style-type: none;
  display: flex;
  flex-direction: column;
  gap : 10px;
}
footer .navbar-nav .navbar-link  {
  color : rgb(0, 0, 0);
  font-size : 14px;
  text-decoration: none;
  padding : 0px;
}
/* footer .navbar-nav .navbar-link i {
  
} */
footer .navbar-nav .navbar-item i {
  font-size : 16px;
  margin-right : 8px;
}
footer .navbar-nav .navbar-item .fa-circle{
  font-size: 8px;
}
footer .navbar-nav .navbar-item {
  position: unset;
  cursor: pointer;
}
footer .navbar-nav .navbar-item .dropdown{
  position: unset;
  list-style-type: none;
  background-color: transparent ;
  box-shadow: none;
  padding : 10px;
  padding-left : 18px;
  display: none;
}


footer .navbar-nav .navbar-item .dropdown .dropdown-item .dropdown-link {
        padding : none;
        font-size : 16px;
        padding : 0px;
        background-color: transparent;
        text-decoration: none;
        display: block;
        padding : 10px 0px;
        color : black;
}
footer .navbar-nav .navbar-item:hover .navbar-link{
    color : var(--bg-sale);
}
footer .navbar-nav .navbar-item:hover{
  color : var(--bg-sale);
}
.rotate {
  transform: rotate(90deg);
}

footer .footer-contact {
  display: flex;
  flex-direction: column;
  gap : 20px;
}
footer .footer-contact .contact {
  display: flex;
  color : rgb(0, 0, 0);
  gap : 10px;
}


footer .footer-contact .contact i {
  color : var(--bg-sale);
  font-size : 16px;

}


footer .footer-contact .contact p a {
  text-decoration: none;
  color : rgb(0, 0, 0);
  width: 100%;
  font-size : 14px;
}
footer .footer-contact .contact p:hover a {
  color : var(--bg-sale);
}
.social-group-footer {
  color : rgb(0, 0, 0);
  display: flex;
  gap :20px;
}
.social-group-footer  i {
 font-size : 20px;
  color : var(--bg-sale);
}
.social-group-footer  i:hover {
 transform: scale(120%);
 transition: all 0.8s;
 cursor: pointer;
}



.group-footer .form-inline {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.group-footer .form-inline .comment-message {
  width: 100%;
  resize: none;
  width: 100%;
  outline: none;
  /* border: 1px solid var(--bg-sale); */
  /* border-radius: 2px; */
  padding: 10px;
  font-family: var(--font-hanuman);
  color: var(--bg-sale);
  border: 1.5px solid var(--bg-sale);
}

 .comment-message::placeholder {
  /* color: var(--bg-sale); */
  font-size: 14px;
}

 .group-btn .btn-send {
  background-color: var(--bg-sale);
  width: 120px;
  height: 40px;
  border-radius: none;
  position: relative;
  border: none;
  color: white;
}
 .group-btn .btn-overlay {
  position: absolute;
  top : 6px;
  left : 6px;
  border: 2.5px solid var(--bg-sale);
  width: 120px;
  height: 40px;
}
 .group-btn .btn-send:hover .btn-overlay {
  top : 0px;
  left : 0px;
  transition: all 0.8s;
} 
.group-footer .form-inline  .group-btn .btn-send {
  border:1.5px solid var(--bg-sale);
  width: 120px;
  height: 40px;
  border-radius: 2px;
  background-color: transparent;
  color: white;
  color: black;
  font-size : 16px;
}
.group-footer .form-inline  .group-btn .btn-send:hover {
  background-color: var(--bg-sale);
  border: none;
  color  : white;
}

footer .footer-copyright {
  width : 100%;
  height: 80px;
  border-top : 1px solid var(--border-color-grey);
  display: flex;
  align-items: center;
}

footer .footer-copyright .container .row {
  display: flex;
  align-items: center;
} 

footer .footer-copyright  .text-copyright {
       font-size : 16px;
       display: flex;
       justify-content: start;
       align-items: center;
}
footer .footer-copyright .company-payment {
  display: flex;
  justify-content: end;
  align-items: center;
  padding-top : 10px;
  flex-wrap: wrap;
}
footer .footer-copyright .company-payment img {
  width : 60px;
  height :40px;
}

.section-planting {
  padding: 15px 0;
}


.section-planting .row .col-4 {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.col-8 .row .col-4 .text-title {
  text-align: center;
  font-size: 30px;
}

.col-8 .row .col-4 .card {
  padding: 10px;
  border: none;
  width: 100%;
}

.col-8 .row .col-4 .card-title {
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  padding: 10px;
}

.col-8 .row .col-4 .img {
  width: 100%;
  height: 400px;
  border-radius: 12% 3%;
  overflow: hidden;
}

.col-8 .row .col-4 .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}