/*
 Theme Name:   Design by Da | Das Awesome Co., Ltd 
 Theme URI:    https://www.das-awesome.com/
 Description:  Developed by Design by Da | Das Awesome Co., Ltd 
 Author:       Design by Da | Das Awesome Co., Ltd 
 Author URI:   https://www.das-awesome.com/
 Template:     bricks
 Version:      1.0
 Text Domain:  bricks
*/

html {
  scroll-padding-top: 10vh;
}

/* Line Break */
.desktop-br {
  display: block;
}

.mobile-br {
  display: none;
}

@media screen and (max-width: 1200px) {
  .desktop-br {
    display: block;
  }

  .mobile-br {
    display: none;
  }
}

@media screen and (max-width: 1024px) {
  .desktop-br {
    display: none;
  }

  .mobile-br {
    display: block;
  }
}

@media screen and (max-width: 767px) {
  .desktop-br {
    display: none;
  }

  .mobile-br {
    display: block;
  }
}

/* Menu */
.brxe-nav-menu .bricks-mobile-menu {
    margin-top: 50px;
}

/* Font Size */
.fs-56 {
  font-size: 3.5rem;
}

.fs-48 {
  font-size: 3rem;
}

.fs-40 {
  font-size: 2.5rem;
}

.fs-36 {
  font-size: 2.25rem;
}

.fs-32 {
  font-size: 2rem;
}

.fs-28 {
  font-size: 1.75rem;
}

.fs-26 {
  font-size: 1.625rem;
}

.fs-24 {
  font-size: 1.5rem;
}

.fs-20 {
  font-size: 1.25rem;
}

.fs-18 {
  font-size: 1.125rem;
}

.fs-16 {
  font-size: 1rem;
}

@media (max-width: 991px) {
  .fs-56 {
    font-size: 3rem;
  }

  .fs-48 {
    font-size: 2.5rem;
  }

  .fs-40 {
    font-size: 2.125rem;
  }

  .fs-36 {
    font-size: 1.875rem;
  }

  .fs-32 {
    font-size: 1.75rem;
  }

  .fs-28 {
    font-size: 1.5rem;
  }

  .fs-26 {
    font-size: 1.375rem;
  }

  .fs-24 {
    font-size: 1.25rem;
  }

  .fs-20 {
    font-size: 1.125rem;
  }

  .fs-18 {
    font-size: 1rem;
  }

  .fs-16 {
    font-size: 0.9375rem;
  }
}

@media (max-width: 767px) {
  .fs-56 {
    font-size: 2.125rem;
  }

  .fs-48 {
    font-size: 1.875rem;
  }

  .fs-40 {
    font-size: 1.625rem;
  }

  .fs-36 {
    font-size: 1.5rem;
  }

  .fs-32 {
    font-size: 1.375rem;
  }

  .fs-28 {
    font-size: 1.25rem;
  }

  .fs-26 {
    font-size: 1.125rem;
  }

  .fs-24 {
    font-size: 1.0625rem;
  }

  .fs-20 {
    font-size: 1rem;
  }

  .fs-18 {
    font-size: 0.875rem;
  }

  .fs-16 {
    font-size: 0.875rem;
  }
}

/* Quotation Form */
.ff-default .ff-el-form-control {
    font-family: "Kanit" !important;
}
.ff-btn-submit {
    background-color: #346744 !important;
    color: #ffffff;
}
/* Buttons */
.brxe-button {
    transition: all 0.3s ease;
}

.brxe-button:hover {
    background-color: var(--bricks-color-keqlgs) !important;
    border-color: var(--bricks-color-keqlgs) !important;
    color: #ffffff !important;
}

.brxe-button:hover svg,
.brxe-button:hover img,
.brxe-button:hover i {
    filter: brightness(0) invert(1) !important;
    fill: #ffffff !important;
}

/* Loops */
.loop-effects .loop-effects-img {
    overflow: hidden;
    display: block; 
}
.loop-effects img {
    transition: transform 0.5s ease;
    width: 100%;
    height: auto;
    display: block;
}
.loop-effects:hover img {
    transform: scale(1.05);
}
.loop-effects.read-more-link a {
  text-decoration: none;
  color: var(--bricks-color-keqlgs);
  display: inline;
  background-image: 
  linear-gradient(var(--bricks-color-ctxztu), var(--bricks-color-ctxztu)),     linear-gradient(var(--bricks-color-keqlgs), var(--bricks-color-keqlgs));   background-position: 0% 100%, 0% 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px, 100% 1px; 
  transition: background-size 0.3s ease, color 0.3s ease;
}

.loop-effects:hover .read-more-link a {
  color: var(--bricks-color-ctxztu);
  background-size: 100% 1px, 100% 1px;
}

/* Link */
.a-link-hover a {
  text-decoration: none;
  color: var(--bricks-color-keqlgs);
  display: inline;
  background-image: 
  linear-gradient(var(--bricks-color-ctxztu), var(--bricks-color-ctxztu)),     linear-gradient(var(--bricks-color-keqlgs), var(--bricks-color-keqlgs));   background-position: 0% 100%, 0% 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px, 100% 1px; 
  transition: background-size 0.3s ease, color 0.3s ease;
}

.a-link-hover a:hover {
  color: var(--bricks-color-ctxztu);
  background-size: 100% 1px, 100% 1px;
}

/* Chaty Form */
.chaty-form, .chaty-whatsapp-form {
    font-family: 'Kanit' !important;
}

/* Gutenberg */
/*  .wp-block-group .is-layout-flex {
    row-gap: 40px;
}  */

.wp-block-buttons .wp-block-button__link {
    width: 100%;
    display: block;
}