/*
Theme Name: Bell Living Lab Canada and USA Region
Theme URI: https://belllivinglab.net
Description: Theme and design present by Baramulti IT team, Designer and Developer : Korniawan.p
Author: Korniawan P
Version: 1.1
 */

@font-face {
  font-family: acumin;
  src: url(font/acumin.otf);
}

@font-face {
  font-family: fragment;
  src: url(font/fragment.otf);
}

html, body {
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: fragment;
}

h1 {
  font-size: 64px;
}

h4, h5, h6 {
   font-family: acumin;
}

h2 {
  font-size: 32px;
  line-height: 42px;
}

h3 {
  font-size: 28px;
  line-height: 38px;
}

h3.title-blog {
   font-size: 18px;
  line-height: 28px;
}

h4 {
  font-family: acumin;
  font-size: 16px;
}

p {
  font-family: acumin;
  font-size: 16px;
  line-height: 26px;
  color: #5D4D4D;
}

a {
  color: #3D6F42;
  text-decoration: none;
}

a:hover {
  color: #2b4e2e;
}

a.nav-link {
  color: #fff;
}

a.nav-link:hover {
  color: #EBBF60;
}

.text-black {
  color: #3F3A38 !important;
}

.card {
  border: none !important;
}

section.regular {
  padding: 150px 0;
  background: url(images/bg.png) repeat;
}

section.kuning {
  padding: 150px 0;
  background: #EBBF60;
}

section.biru {
  background: #3B82FD;
}

section.hijau {
  background: #D8F0D0;
}

section.coklat {
  padding: 100px 0;
  background: #423B39;
}

.header-page {
  width: 100%;
  height: 300px;
  background: url(images/slider.png) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.navbar-shrink {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  background-color: #3D6F42;
  transition: background-color 0.2s ease;
}

.content-wrapper {
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
  max-width: 800px;
  margin-left: auto; 
}

.content-wrapper1 {
  padding-left: calc(var(--bs-gutter-x) * .5);
  padding-right: calc(var(--bs-gutter-x) * .5);
  max-width: 800px;
  margin-right: auto; 
}

.content-side {
  background-size: 50px 100%; 
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 525px; 
}

.navbar-toggler {
  background: #D8F0D0;
  border: 1px solid #D8F0D0;
}

.header-page a {
  color: #EBBF60;
  text-decoration: none;
  font-weight: 600;
}

.header-page a:hover {
  color: #d4ac56;
}

div.wpforms-container-full button[type=submit]  {
  background: #423B39 !important;
  border: 1px solid #423B39 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  width: 100% !important;
  padding: 20px 0 35px !important;
  text-transform: uppercase;
}

a.btn-primary {
  background: #423B39;
  border: 1px solid #423B39;
  font-size: 14px;
  font-weight: 600;
}

a.btn-primary:hover {
  background: #686261;
  border: 1px solid #686261;
}

a.btn-primary1 {
  background: #EBBF60;
  border: 1px solid #EBBF60;
  font-weight: 600;
  color: #423B39;
  font-size: 14px;
}

a.btn-primary1:hover {
  background: #d4ac56;
  color: #423B39;
  border: 1px solid #d4ac56;
}

a.btn-secondary {
  background: none;
  border: none;
  font-size: 14px;
}

a.btn-secondary:hover {
  background: #a19d9c;
}

.carousel-caption {
  text-align: left;
  bottom: 20%;
  max-width: 40%;
}

ul.navbar-nav li {
  list-style: none !important;
}

ul li {
  list-style: circle;
  font-family: acumin;
  font-size: 16px;
  line-height: 26px;
  color: #5D4D4D;
}

ul.contact {
  padding-left: 0 !important;
}

ul.contact li {
  list-style: none !important;
  font-family: acumin;
  font-size: 16px;
  line-height: 26px;
  color: #5D4D4D;
}

.line {
  width: 100%;
  height: 1px;
  background: #d3d3d3;
  margin: 30px 0;
}

.wpforms-container .wpforms-field {
  padding: 10px 0 !important;
}

div.wpforms-container-full input[type=text], div.wpforms-container-full input[type=email], div.wpforms-container-full .wpforms-form textarea {
  font-size: 16px !important;
  font-family: acumin !important;
}

#portfolio .container-fluid, #portfolio .container-sm, #portfolio .container-md, #portfolio .container-lg, #portfolio .container-xl, #portfolio .container-xxl {
  max-width: 1920px;
}
#portfolio .container-fluid .portfolio-box, #portfolio .container-sm .portfolio-box, #portfolio .container-md .portfolio-box, #portfolio .container-lg .portfolio-box, #portfolio .container-xl .portfolio-box, #portfolio .container-xxl .portfolio-box {
  position: relative;
  display: block;
}
#portfolio .container-fluid .portfolio-box .portfolio-box-caption, #portfolio .container-sm .portfolio-box .portfolio-box-caption, #portfolio .container-md .portfolio-box .portfolio-box-caption, #portfolio .container-lg .portfolio-box .portfolio-box-caption, #portfolio .container-xl .portfolio-box .portfolio-box-caption, #portfolio .container-xxl .portfolio-box .portfolio-box-caption {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  text-align: center;
  opacity: 0;
  color: #fff;
  background: rgba(117, 213, 126, 0.9);
  transition: opacity 0.25s ease;
  text-align: center;
}
#portfolio .container-fluid .portfolio-box .portfolio-box-caption .project-category, #portfolio .container-sm .portfolio-box .portfolio-box-caption .project-category, #portfolio .container-md .portfolio-box .portfolio-box-caption .project-category, #portfolio .container-lg .portfolio-box .portfolio-box-caption .project-category, #portfolio .container-xl .portfolio-box .portfolio-box-caption .project-category, #portfolio .container-xxl .portfolio-box .portfolio-box-caption .project-category {
  font-family: "Merriweather Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
}
#portfolio .container-fluid .portfolio-box .portfolio-box-caption .project-name, #portfolio .container-sm .portfolio-box .portfolio-box-caption .project-name, #portfolio .container-md .portfolio-box .portfolio-box-caption .project-name, #portfolio .container-lg .portfolio-box .portfolio-box-caption .project-name, #portfolio .container-xl .portfolio-box .portfolio-box-caption .project-name, #portfolio .container-xxl .portfolio-box .portfolio-box-caption .project-name {
  font-size: 1.2rem;
}
#portfolio .container-fluid .portfolio-box:hover .portfolio-box-caption, #portfolio .container-sm .portfolio-box:hover .portfolio-box-caption, #portfolio .container-md .portfolio-box:hover .portfolio-box-caption, #portfolio .container-lg .portfolio-box:hover .portfolio-box-caption, #portfolio .container-xl .portfolio-box:hover .portfolio-box-caption, #portfolio .container-xxl .portfolio-box:hover .portfolio-box-caption {
  opacity: 1;
}

ul.menu-footer {
  padding-left: 0;
}

ul.menu-footer li {
  list-style: none;
  margin-bottom: 10px;
}

ul.menu-footer li a {
  color: #fff;
  text-decoration: none;
}

ul.menu-footer li a:hover {
  color: #d9d8d7;
}

footer {
  padding: 100px 0;
  background: #423B39;
}

.copyright {
  background: #423B39;
}

@media(max-width:1200px) {
   
}

@media(max-width:991px) {
    
}

@media(max-width:768px) {
  section.regular, section.kuning {
    padding: 100px 0;
  }

  section.biru {
    padding: 50px 0 0 0;
  }

  .navbar {
    background: #3D6F42;
  }

   .content-wrapper {
    padding-right: calc(var(--bs-gutter-x) * .3);
    padding-left: calc(var(--bs-gutter-x) * .3);
    max-width: 100%;
    margin-left: auto; 
  }

  .carousel-caption {
    text-align: left;
    bottom: 10%;
    max-width: 100%;

  }

  a.btn-secondary, a.btn-primary1, a.btn-primary {
    width: 100%;
  }

  #myCarousel .carousel-item {
      height: 90vh; 
    }

    #myCarousel .carousel-item img {
      height: 100%;
      object-fit: cover; 
      object-position: center; 
    }

  h1 {
    font-size: 40px;
  }

  .nav-item {
    border-top : 1px solid #648c68;
  }
}

@media(max-width:668px) {
   
}

@media(max-width:640px) {
   
}

@media(max-width:375px) {
   
}