html {
   font-family: "Inter", sans-serif !important;
}

section {
   overflow-x: hidden;
}

.custom-tooltip {
   /* --bs-tooltip-max-width: 100%; */
   /* font-size: 18px;
   --bs-tooltip-padding-y:10px;
   --bs-tooltip-padding-x:10px; */
   --bs-tooltip-bg: #6A9D34 !important;
}

.hoverCard{
   box-sizing: border-box;
   position: absolute;
   width: 100%;
   height: 0%;
   border-radius: 5px;
   background: rgb(27, 27, 27,.5);
}

.hoverCard h1{
   margin-top: 13%;
   font-size: 24px;
   font-weight: 800;
   letter-spacing: 1px;
   text-shadow: #393D43 1px 1px;
}

.hoverCard p{
   font-size: 12px;
   visibility: hidden;
   opacity: 0
}

.hoverCard a{
   color: #ffffff;
   text-decoration: underline;
}

.cardHover:hover .hoverCard{
   height: 100%;
}

.hoverCard:hover h1{
   visibility: hidden;
   opacity: 1;
}

.hoverCard:hover p{
   visibility: visible;
   opacity: 1;
   position: relative;
   top: -40%;
}

.wabutton {
   width: 75px;
   height: 75px;
   position: fixed;
   bottom: 40px;
   right: 30px;
   z-index: 100;
}

.headerImg {
   background-size: 60% !important;
   background-repeat: no-repeat;
}

.why-us {
   overflow-y: hidden;
}

.about .usImg {
   border-radius: 5px;
}

.about .content::before {
   content: " ";
   width: 100vw;
   height: 92%;
   z-index: -9999;
   background-color: #E6EFDD;
   position: absolute;
   top: 15%;
   overflow-x: none !important;
}

.about .content p {
   color: #777980;
   font-size: 14px;
   line-height: 28px;
}

.about .content h4 {
   font-weight: 700;
   font-size: 24px;
   color: #393D43;
}

.about .section-judul h5 {
   font-size: 14px;
   font-weight: 600;
   padding: 0;
   line-height: 1px;
   margin: 0 0 5px 0;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: #aaaaaa;

}

.about .section-judul .garisJudul {
   width: 80px;
   position: absolute;
   height: 3px;
   background: #936639;
   margin-top: -30px;
   margin-bottom: 200px !important;
}

.about .btn-outline-success {
   border-color: #6A9D34;
   border-radius: 4px;
   color: #6A9D34;
   margin-bottom: 50px;
}

.about .btn-outline-success:hover {
   background-color: #6A9D34;
   color: #ffffff;
}

.about .btn-success {
   background-color: #6A9D34;
   border-color: #6A9D34;
   border-radius: 4px;
   margin-left: 8px;
   margin-bottom: 50px;
}

.about .btn-success:focus {
   background-color: #6A9D34;
   border-color: #6A9D34;
}

/* end About Us */

.section-header {
   text-align: center;
   padding: 30px 0;
   position: relative;
}

.section-header h2 {
   font-size: 32px;
   font-weight: 700;
   text-transform: uppercase;
   margin-bottom: 20px;
   padding-bottom: 0;
   color: #6A9D34;
   position: relative;
   z-index: 2;
   margin-bottom: 20px;
   padding-bottom: 20px;
   position: relative;
}

.section-header h2:after {
   content: "";
   position: absolute;
   display: block;
   width: 50px;
   height: 3px;
   background: #936639;
   left: 0;
   right: 0;
   bottom: 0;
   margin: auto;
}

.section-header span {
   position: absolute;
   top: 46px;
   color: rgba(14, 29, 52, 0.06);
   left: 0;
   right: 0;
   z-index: 1;
   font-weight: 900;
   font-size: 42px;
   text-transform: uppercase;
   line-height: 0;
}

/* our Values */
.ourValues .btn-danger:hover {
   background-color: #ffffff;
   border-color: #936639;
}

.ourValues .card .card-body {
   color: #6A9D34;
   display: inline-flex;
}

.ourValues .card {
   height: 80px;
}

.ourValues .card .card-body img {
   width: 50px;
   margin-top: -10px;
}

.ourValues .card .card-body .commitment {
   width: 54px;
   margin-top: -15px;
}

.ourValues .card .card-body h5 {
   margin-left: 30px;
   font-weight: 600;
   margin-top: 3px;
}

/* end Our Values */

/* elevation */
.elevation {
   width: 100%;
   background-repeat: no-repeat;
   background-position: center center;
   height: 600px;
   z-index: -9999 !important;
   margin-top: 120px;
}

.elevation .purecounter {
   font-size: 28px;
   font-weight: 800;
}

.min {
   font-size: 20px;
   font-weight: 800;
}

.elevation .count {
   margin-top: 50px;
}

.allcount {
   margin-top: -50px;
}

/* end Elevation */

.whyCoffee h4 {
   font-size: 28px;
   font-weight: 700 !important;
   color: #6A9D34;
   letter-spacing: 0.3px;
}

.whyCoffee .content {
   margin-left: 10px;
}

.whyCoffee .content p {
   color: #777980;
   font-size: 14px;
   width: 90%;
   line-height: 28px;
}

.whyCoffee .content .garisJudul {
   width: 80px;
   position: absolute;
   height: 3px;
   background: #936639;
}

.whyCoffee {
   padding: 0;
   margin-top: 120px !important;
   background-color: #E6EFDD;
}

.whyCoffee .img {
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
   min-height: 400px;
}

/* end whyCoffee */

.products .card {
   height: 50%;
   border: none;
   margin: 0px !important;
   padding: 0px !important;
}

.products .card img {
   height: 100%;
   object-fit: cover;
   object-position: 0px 0px;
}

.blog {
   margin-top: -50px;
}

.blog .card,
.allBlog .card {
   border: none;
   margin: 0px auto !important;
}

.blog .card img {
   border-radius: 5px 5px 5px 5px !important;
   height: 15em;
   object-fit: cover;
}

.recentGambar {
   width: 100%;
   height: 240px;
   object-fit: cover;
}

.allBlog .card img {
   border-radius: 5px 5px 5px 5px !important;
   height: 180px;
   object-fit: cover;
}

.shareBlog img {
   width: 30px;
   margin-left: 5px;
}

.blog .card .card-title {
   font-weight: 600;
}

.blog .buttonSeeAll .btn-success,
.allBlog .buttonSeeAll .btn-success {
   background-color: #6A9D34;
   border-color: #6A9D34;
}

.fotoTeam {
   width: 100%;
   height: 30em;
   object-fit: cover;
}


.buttonSeeAll {
   text-align: center;
   padding: 30px 0;
   position: relative;
}

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

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

.fotoGaleri {
   width: 100%;
   height: 8rem !important;
   object-fit: cover;
}

.galeri .swiper-slide img {
   width: 100%;
}

.senjaniMaps {
   padding: 0;
   margin-top: 80px !important;
}

.facebook,
.instagram,
.youtube,
.whatsapp,
.linked {
   width: 30px;
   margin-top: 20px;

}

.footer h3 {
   width: 200px;
   margin: 20px auto;
}

.footer .social-links a {
   margin-left: -5px;
}

.footerLinks a {
   display: grid;
   margin-top: 10px;
   color: #73767A;
}

.footerLinks a:hover {
   color: #6A9D34;
}

.footer .logo {
   width: 180px !important;
   margin: 0px auto !important;
}

footer {
   margin-top: -6px;
   text-align: center !important;
}

.bgBlog {
   background-size: cover;
   background-position: center center;
   height: 100% !important;
}

.bgBlog h2 {
   font-size: 24px;
   color: #ffffff;
   font-weight: 600;
   padding-top: 70px;
   padding-bottom: 50px;
}

/* Inner About Us */
.innerAboutUs h2,
.ourFarmers h2,
.ourCoffee h2 {
   font-size: 32px;
   font-weight: 800;
   color: #6A9D34;
   margin-bottom: 15px;
   letter-spacing: 0.5px;
}

.innerAboutUs {
   margin-top: -40px;
}


.innerAboutUs p,
.ourFarmers p,
.ourCoffee p {
   font-weight: 400;
   font-size: 14px;
   line-height: 163%;
   color: #73767A;
}

.ourCoffee p {
   width: 91.5vw;
}

.ourCoffee img {
   border-radius: 5px;
}

.ourFarmers img {
   width: 100%;
   border-radius: 5px;
}

.ourFarmers .content::before {
   content: " ";
   width: 100%;
   height: 50pc;
   z-index: -9999;
   background-color: #E6EFDD;
   position: absolute;
   margin-top: -15vh;
   margin-left: -12px;
   overflow-x: none !important;
}

/* Inner Blog */
.innerBlog h2 {
   font-weight: 900;
   color: #6A9D34;
}

.innerBlog h4 {
   font-weight: 700;
}

.innerBlog h5 {
   font-weight: 900;
   color: #6A9D34;
}

.innerBlog .recentDua {
   margin-top: 50px !important;
}

.innerBlog p {
   color: #777980;
}

@media (min-width: 576px) {
   .about .content::before {
      margin-left: -20px;
      width: 110%;
   }

   .elevation {
      width: 100%;
      z-index: -99999 !important;
   }

   .ourFarmers .content::before {
      width: 90%;
      right: 0px;
      height: 40pc;
      margin-top: -70px;
      border-radius: 5px 0px 0px 5px;
   }

   .ourFarmers .content {
      margin-left: 80px;
   }

}

@media (min-width: 768px) {
   .about {
      overflow: hidden !important;
      height: 700px !important;
   }

   .about .imgUs {
      width: 80%;
   }

   .about .content::before {
      height: 120%;
      width: 88%;
      position: absolute;
      border-radius: 5px 5px 5px 5px;
      margin-left: -44%;
      margin-top: -110px;
   }

   .about .imgUs {
      margin-top: 20px;
   }

   .about .content p {
      font-size: 12px;
      width: 90%;
   }

   .about .content .section-judul,
   .about .content p,
   .about .content .buttonUs {
      margin-left: -60px;
   }

   .ourValues {
      margin-top: -120px;
   }

   .ourValues .card .card-body {
      display: inline-block;
   }

   .ourValues .card .card-body img {
      margin-top: -90px;
   }

   .ourValues .card h5 {
      font-size: 12px;
      margin: 0px auto !important;
   }

   .ourValues .card .commitment {
      width: 60px !important;
      margin-top: -90px !important;
   }

   .ourValues .card .card-body h5 {
      font-size: 14px;
      font-weight: 800;
      margin-top: -20px !important;
   }

   .ourValues .commitmentt::after,
   .ourValues .consistent::after,
   .ourValues .honesty::after {
      content: " ";
      width: 26px;
      height: 3px;
      display: inline-block;
      background: #936639;
      left: 100%;
      top: 50%;
      position: absolute;
   }

   .elevation {
      height: 240px;
      margin-top: 50px;
   }

   .elevation .count {
      margin-top: 0px;
   }

   .elevation .allcount .purecounter {
      font-size: 24px;
   }

   .elevation .allcount {
      margin-top: -40px;
   }

   .whyCoffee .coffeeBg {
      background-position: center center !important;
      height: 330px;
      background-repeat: no-repeat;
      object-fit: contain;
   }

   .whyCoffee h4 {
      font-size: 34px;
   }

   .products .card {
      height: 40%;
   }

   .blog {
      margin-top: -180px;
   }

   .blog .card .card-body h5,
   .allBlog .card h5 {
      font-size: 16px;
      font-weight: 700;
   }

   .blog .card img {
      height: 8em !important;
      object-fit: cover;
   }

   .blog .card .card-body a,
   .allBlog .card .card-body a {
      font-size: 12px;
   }

   .blog .card .card-body,
   .allBlog .card .card-body {
      padding: 0px;
      margin-top: 15px;
   }

   .allBlog .card img {
      height: 120px;
   }

   .blog .card p,
   .allBlog .card p {
      font-size: 12px;
   }

   .gambarBlog {
      width: 100%;
   }

   .gambarBlog {
      width: 100%;
      height: 440px;
      object-fit: cover;
   }

   .bgBlog h2 {
      padding-top: 10vh;
      padding-bottom: 10vh;
      font-size: 32px;
   }

   .ourFarmers .content::before {
      right: 0px;
      width: 90%;
   }

   .ourFarmers .content {
      margin-left: -5px;
   }

   .ourCoffee p {
      width: 45vw;
   }

   .innerBlog .recentDua {
      margin-top: 15px !important;
      margin-left: 50px;
   }

   footer {
      text-align: left !important;
   }

   .footer .logo {
      margin-left: 0px !important;
   }

   .footer h3 {
      width: 100%;
   }

   .facebook,
   .instagram,
   .youtube,
   .whatsapp,
   .linked {
      margin-top: 0px;
      margin-bottom: 20px;
      width: 25px;
   }
}

@media (min-width: 992px) {
   .about .content::before {
      width: 80vmax;
      height: 125% !important;
      margin-left: -43%;
   }

   .about .imgUs {
      width: 80%;
      margin-top: 30px;
   }

   .about .content .section-judul,
   .about .content p,
   .about .content .buttonUs {
      margin-left: -60px;
   }

   .ourValues .card {
      width: 90%;
   }

   .ourValues .commitmentt::after,
   .ourValues .consistent::after,
   .ourValues .honesty::after {
      width: 24.7%;
   }

   .elevation {
      margin-top: 100px;
   }

   .whyCoffee {
      height: 50% !important;
   }

   .whyCoffee .coffeeBg {
      height: 150vh;
   }

   .whyCoffee .content {
      margin-left: 40px;
   }

   .whyCoffee .content p {
      width: 100%;
   }

   .products {
      margin-top: 50px;
   }

   .products .card h5 {
      font-size: 34px;
   }

   .ourFarmers .content::before {
      width: 70%;
      height: 70vmax;
   }

   .allFarmers {
      margin-top: 60px;
      margin-left: 40px;
   }

   .hoverCard:hover p{
      top: -25%;
      font-size: 15px;
   }

}

@media (min-width: 1025px) {
   .about .content::before {
      width: 80%;
   }

   .about .content p {
      width: 35vw;
   }

   .about .content .section-judul,
   .about .content p,
   .about .content .buttonUs {
      margin-left: -140px;
   }

   .ourFarmers .content::before {
      height: 45pc;
   }

}

@media (min-width: 1200px) {


   .carousel-container h2 {
      width: 13em !important;
      font-size: 58px !important;
   }

   .why-us {
      margin-top: 120px !important;
   }

   .about .content p {
      font-size: 14px;
      width: 32vw;
   }

   .about .content::before {
      width: 80%;
   }

   .headerImg {
      width: 50%;
      margin: 0px auto;
   }

   .about .imgUs {
      margin-left: 10%;
      margin-top: 40px;
      width: 90%;
      object-fit: scale-down;
   }

   .about .content .section-judul,
   .about .content p,
   .about .content .buttonUs {
      margin-left: -50px;
   }

   .ourValues .commitmentt::after,
   .ourValues .consistent::after,
   .ourValues .honesty::after {
      width: 20.7%;
   }

   .ourValues {
      margin-top: -80px !important;
   }

   .ourValues .card .card-body h5 {
      font-size: 20px;
   }

   .elevation {
      height: 400px;
   }

   .elevation .allcount {
      margin: 20px auto;
   }

   .elevation .allcount .purecounter {
      font-size: 38px;
   }

   .whyCoffee .content {
      margin-left: 70px;
   }

   .section-header span {
      font-size: 54px;
   }

   .blog .card h5,
   .allBlog .card h5 {
      font-size: 18px !important;
   }

   .blog .card .card-body a,
   .allBlog .card .card-body a {
      font-size: 16px;
   }

   .blog .card img {
      height: 13em !important;
   }

   .blog .card p,
   .allBlog .card p {
      font-size: 16px;
   }

   .allBlog .card img {
      height: 180px;
   }

   .allBlog .card {
      width: 260px !important;
   }

   .bgBlog h2 {
      padding-top: 20vh;
      padding-bottom: 20vh;
   }

   .fotoGaleri {
      height: 13em !important;
   }

   .fotoTeam {
      height: 25em;
      object-fit: cover;
   }

   .ourFarmers h2,
   .innerAboutUs h2,
   .ourCoffee h2 {
      font-size: 48px;
   }

   .ourFarmers {
      margin-top: 100px;
   }

   .ourFarmers .allFarmers {
      margin-left: 50px;
   }

   .ourFarmers .content::before {
      height: 40pc;
   }

   .ourCoffee .coffeeOur {
      margin-left: 40px;
   }

   .ourCoffee {
      margin-top: 80px;
      margin-bottom: 80px;
   }

   .coffeeOur h2 {
      margin-top: 60px;
   }

   .pembungkusImgUs {
      width: 90% !important;
      height: 450px !important;
   }

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

   .hoverCard h1{
      font-size: 38px;
      margin-top: 11%;
   }

   .hoverCard:hover p{
      font-size: 18px;
   }

}

@media (min-width: 1681px) {
   .about .content::before {
      width: 90%;
   }

   .about .content p {
      width: 25vw;
   }
}