h1, h2, h3, h4, h5, h6{
  font-weight: 600;
  text-transform: uppercase;
}

.btn{
  text-transform: uppercase;
}
body {
    font-family: "Kanit", sans-serif;
    color: #8B8B8B !important;
     font-size: 16px !important;
  }

  .text-small,
  .text-small span {
    font-size: 16px!important;
  }

  a{
    color: #717171;
    text-decoration: none;
  }

      .bgrimm-image{
        height: 200px;
        object-fit: cover;
    }

    .bgrimmimage{
      height: 180px;
      width: 100%;
      object-fit: cover !important;
      margin-bottom: 15px !important;
    }

  .text-nowrap {
    white-space: normal !important;
    height: 40px;
}

  a:hover{
    color: #FF6825;
    text-decoration: none;
  }

  .text-darker {
    color: #717171;
  }

  .btn-outline-primary {
    border-color: #FF6825;
    color: #FF6825;
  }

  div#is9z9 {
    background: #ffffffd1 !important;
    padding: 15px;
}

.card-img-overlay {
    background-color: #00000045 !important;
}

tspan {
    font-family: kanit !important;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: var(--bs-nav-pills-link-active-color);
    background-color: #FF6825;
}

.nav-link {
   color: #FF6825;
}

section#iresfe, section#ie7etk {
    background-color: #FF6825;
}



  /* Hero Section */
  .hero {
    background: url("https://bgrimmtechnologies.com/assets/images/home-banner.png") no-repeat center center;
    background-size: cover;
    color: white;
    height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #264653;
    padding: 20px;
  }

  .hero h1 {
    font-size: 3rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    text-transform: uppercase;
  }

  .text-orange, .text-warning {
    color: #FF6825 !important;
    text-transform: uppercase;
  }

  .btn-primary {
    background-color: #FF6825;
    border: 0;
  }

  .hero .btn {
    background-color: #FF6825;
    border: none;
    padding: 10px 20px;
    transition: background-color 0.3s ease;
  }

  .hero .btn:hover {
    background-color: #FF6825;
  }

  .bg-footer {
    background: #e2e2e2;
    text-align: left;
    font-size: 0.81rem;
  }

  /* Service Section */
  .service-section {
    padding: 4rem 0;
    background-color: #f7f7f7;
  }

  .service-section h2 {
    font-weight: 600;
    text-align: center;
    font-size: 2rem;
    margin-bottom: 2rem;
    color: #264653;
    text-transform: uppercase;
  }

  .text-8 {
    color: #888;
  }

  .small, small {
    font-size: 16px;
}

span{
    font-size: 16px !important;
}
li{
    font-size: 16px;
}

  .service-section .service-card {
    text-align: center;
    margin-bottom: 2rem;
  }

  .service-section .service-card img {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 1rem;
  }

  .service-section .service-card h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: #264653;
  }

  .service-section .service-card p {
    color: #7a7a7a;
  }

  /* Product Section */
  .product-section {
    padding: 4rem 0;
    background-color: white;
  }

  .product-section h2 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 3rem;
    color: #264653;
    text-transform: uppercase;
  }

  h5{
    font-size: 18px;
  }

  .product-section .product-card img {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 1rem;
  }

  .product-section .product-card h5 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    color: #264653;
  }

  .product-section .product-card p {
    color: #7a7a7a;
  }

  .product-section .btn {
    background-color: #FF6825;
    border: none;
    padding: 10px 20px;
    transition: background-color 0.3s ease;
  }

  .product-section .btn:hover {
    background-color: #FF6825;
  }

  .btn {
    transition: background-color 0.5s;
  }

  .btn:hover {
    background-color: #7a7a7a;
    border: 0;
  }

  /* Maintenance Section */
  .maintenance-section {
    padding: 4rem 0;
    background-color: #f7f7f7;
  }

  .maintenance-section h2 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 2rem;
    color: #264653;
    text-transform: uppercase;
  }

  .maintenance-section .service-card img {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 1rem;
  }

  /* Project References Section */
  .project-section {
    padding: 4rem 0;
    background-color: white;
  }

  .project-section h2 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 2rem;
    color: #264653;
    text-transform: uppercase;
  }

  .project-section .project-card img {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 1rem;
  }

  /* Footer Section */
  footer {
    background-color: #264653;
    padding: 2rem 0;
    color: white;
    text-align: center;
  }

  footer p {
    margin-bottom: 0.5rem;
  }

  footer ul {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 1rem;
  }

  footer ul li a {
    color: white;
    font-size: 1.5rem;
    transition: color 0.3s ease;
  }

  footer ul li a:hover {
    color: #FF6825;
  }

  .efficiency-section {
    background-color: #f8f9fa;
    color: #717171;
  }

  .efficiency-section h2 {
    font-weight: 600;
    color: #FF6825;
    /* Custom orange color */
    text-transform: uppercase;
  }

  .onestop-section h2 {
    font-weight: 600;
    color: #FF6825;
    text-transform: uppercase;
  }

  .btn-cart{
    background-color: #F7F6F4;
    color: #FF6825;
  }

  label{
    font-size: .8rem;
  }
  select{
    color: #C7C7C7 !important;
    font-size: .8rem;
  }

  /* Cart Shipping */
  .shipping-option {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.shipping-option input[type="radio"] {
    display: none;
}

.form-control {
  color: #6c757d !important;
  font-weight: 400;
}
.custom-radio {
    width: 20px;
    height: 20px;
    border: 2px solid #ced4da;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    margin-right: 10px;
    cursor: pointer;
}
.shipping-option input[type="radio"]:checked + .custom-radio {
    border-color: #FF6825;
}
.shipping-option input[type="radio"]:checked + .custom-radio::after {
    content: '';
    width: 10px;
    height: 10px;
    background-color: #FF6825;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

  .btn-danger{
    background-color: #FF6825;
  }

  p .text-general {
    font-size: 1rem;
    font-weight: 300;
  }

  p{
    padding: 0;
    margin: 0;
  }

  .btn-sm{
    font-size: 12px!important;
    font-weight: 600 !important;
  }

  button.btn.btn-outline-secondary.btn-sm {
    border: 0;
}

.bg-grey{
  background-color: #F7F6F4 !important;
}

  .efficiency-section p {
    font-size: 16px;
    font-weight: 400;
    color: #6c757d;
  }

  .efficiency-section p .text-general {
    font-size: .9rem !important;
    font-weight: 300 !important;
  }

  .card {
    height: auto;
    border: 0;
    color: #717171 !important;
    /* background-color: #6c757d; */
  }

  .dropdown-menu {
    --bs-dropdown-zindex: 1000;
    --bs-dropdown-min-width: 10rem;
    --bs-dropdown-padding-x: 0;
    --bs-dropdown-padding-y: 0.5rem;
    --bs-dropdown-spacer: 0.125rem;
    --bs-dropdown-font-size: 1rem;
    --bs-dropdown-color: var(--bs-body-color);
    --bs-dropdown-bg: var(--bs-body-bg);
    --bs-dropdown-border-color: var(--bs-border-color-translucent);
    --bs-dropdown-border-radius: var(--bs-border-radius);
    --bs-dropdown-border-width: var(--bs-border-width);
    --bs-dropdown-inner-border-radius: calc(var(--bs-border-radius) - var(--bs-border-width));
    --bs-dropdown-divider-bg: var(--bs-border-color-translucent);
    --bs-dropdown-divider-margin-y: 0.5rem;
    --bs-dropdown-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --bs-dropdown-link-color: var(--bs-body-color);
    --bs-dropdown-link-hover-color: var(--bs-body-color);
    --bs-dropdown-link-hover-bg: var(--bs-tertiary-bg);
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-link-active-bg: #FF6825;
    --bs-dropdown-link-disabled-color: var(--bs-tertiary-color);
    --bs-dropdown-item-padding-x: 1rem;
    --bs-dropdown-item-padding-y: 0.25rem;
    --bs-dropdown-header-color: #6c757d;
    --bs-dropdown-header-padding-x: 1rem;
    --bs-dropdown-header-padding-y: 0.5rem;
    position: absolute;
    z-index: var(--bs-dropdown-zindex);
    display: none;
    min-width: var(--bs-dropdown-min-width);
    padding: var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x);
    margin: 0;
    font-size: var(--bs-dropdown-font-size);
    color: var(--bs-dropdown-color);
    text-align: left;
    list-style: none;
    background-color: var(--bs-dropdown-bg);
    background-clip: padding-box;
    border: var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);
    border-radius: var(--bs-dropdown-border-radius);
}

  body {
    color: #717171;
    font-weight: 300;
  }

  .btn {
    border-radius: 25px;
    text-transform: uppercase;
  }

  /* Nav */
  .topnav {
    overflow: hidden;
  }
  
  .topnav a {
    float: left;
    display: block;
    color: #717171;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: color 0.7s;
  }
  
  .topnav a:hover {
    color: white;
    color: #717171;
  }
  
  .topnav a.active {
    background-color: #FF6825;
    color: white;
  }
  
  .topnav .icon {
    display: none;
  }

  @media screen and (max-width: 600px) {
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
      float: right;
      display: block;
    }
  }
  
  @media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
  }

  /* Boot Strap Nav อาจไม่ได้ใช้ */

  .navbar-expand-lg .navbar-nav .nav-link {
    /* padding-right: 15px;
    padding-left: 15px; */
    font-weight: 400;
    color: #717171;
    font-size: 16px;
    transition: color 0.7s;
  }

  a.dropdown-item {
    font-size: 16px;
}

  .navbar-expand-lg .navbar-nav .nav-link:hover {
    color: #FF6825;
  }

  a.nav-link.active {
    color: #FF6825 !important;
  }

  .carousel-thumbnail.active {
    border: 3px solid #FF6825 !important;
  }

  button.navbar-toggler {
    margin-right: 15px;
}


  .dropdown-item{
    color: #8B8B8B;
    font-size: 0.8rem;
  }

  .dropdown {
    transition: opacity 0.7s;
  }

  .dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
    border: 0;
    border-radius: 0;
    font-size: .9rem;
    opacity: 1;
  }

  .imgsection{
    width: 75%;
  }


  #slider {
    background-image: url('../../assets/images/building.jpg');
    background-repeat: no-repeat;
    /* background-position-x: center;
    background-position-y: 200px; */
    background-position: center center;
    background-size:100%;
    /* height: 100vh; */
  }

  img {
    transition: opacity 0.3s;
  }

  img:hover {
    opacity: 1;
  }


  /* Breadcrumb */
  .breadcrumb-item a {
    color: #6c757d;
    text-decoration: none;
    font-weight: 400 !important;
  }

  li.breadcrumb-item.active {
    color: #FF6825 !important;
    font-weight: 400 !important;
  }

  .breadcrumb-item+.breadcrumb-item::before {
    float: left;
    padding-right: var(--bs-breadcrumb-item-padding-x);
    color: var(--bs-breadcrumb-divider-color);
    content: var(--bs-breadcrumb-divider, "|");
}

  .shadow-bottom {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* Adjust the values for the shadow strength */
  }

  .btn-custom1 {
    background-color: #e5e5e5;
    color: #666;
    border-radius: 50px;
    padding: 10px 30px;
    border: none;
  }

  .btn-custom2 {
    background-color: #FF6825;
    color: white;
    border-radius: 50px;
    padding: 10px 30px;
    border: none;
  }

  .btn-custom1:hover,
  .btn-custom2:hover {
    opacity: 0.8;
  }


  .card {
    border: none;
    overflow: hidden
  }

  /* Product Gallery */
  .thumbnail_images ul {
    list-style: none;
    justify-content: center;
    display: flex;
    align-items: center;
    margin-top: 10px
  }

  .thumbnail_images ul li {
    margin: 5px;
    width: 33%;
    padding: 10px;
    border: 2px solid #eee;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.5s
  }

  .thumbnail_images ul li:hover {
    border: 2px solid #FF6825;
    width: 100%;
  }

  .main_image {
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #eee;
    height: 400px;
    width: 100%;
    overflow: hidden
  }

  .heart {
    height: 29px;
    width: 29px;
    background-color: #eaeaea;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center
  }

  .content p {
    font-size: 12px
  }

  .ratings span {
    font-size: 16px;
    margin-left: 12px
  }

  .colors {
    margin-top: 5px
  }

  .colors ul {
    list-style: none;
    display: flex;
    padding-left: 0px
  }

  .colors ul li {
    height: 20px;
    width: 20px;
    display: flex;
    border-radius: 50%;
    margin-right: 10px;
    cursor: pointer
  }

  .colors ul li:nth-child(1) {
    background-color: #6c704d
  }

  .colors ul li:nth-child(2) {
    background-color: #96918b
  }

  .colors ul li:nth-child(3) {
    background-color: #68778e
  }

  .colors ul li:nth-child(4) {
    background-color: #263f55
  }

  .colors ul li:nth-child(5) {
    background-color: black
  }

  .right-side {
    position: relative
  }

  .search-option {
    position: absolute;
    background-color: #000;
    overflow: hidden;
    align-items: center;
    color: #fff;
    width: 200px;
    height: 200px;
    border-radius: 49% 51% 50% 50% / 68% 69% 31% 32%;
    left: 30%;
    bottom: -250px;
    transition: all 0.5s;
    cursor: pointer
  }

  .search-option .first-search {
    position: absolute;
    top: 20px;
    left: 90px;
    font-size: 20px;
    opacity: 1000
  }

  .search-option .inputs {
    opacity: 0;
    transition: all 0.5s ease;
    transition-delay: 0.5s;
    position: relative
  }

  .search-option .inputs input {
    position: absolute;
    top: 200px;
    left: 30px;
    padding-left: 20px;
    background-color: transparent;
    width: 300px;
    border: none;
    color: #fff;
    border-bottom: 1px solid #eee;
    transition: all 0.5s;
    z-index: 10
  }

  .modal-content{
    background: transparent;
    border: 0;
  }

  .search-option .inputs input:focus {
    box-shadow: none;
    outline: none;
    z-index: 10
  }

  .search-option:hover {
    border-radius: 0px;
    width: 100%;
    left: 0px
  }

  .form-control{
    border:#8B8B8B solid 1px;
  }


  .form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #C7C7C7;
    opacity: 1; /* Firefox */
}

  .search-option:hover .inputs {
    opacity: 1
  }

  .search-option:hover .first-search {
    left: 27px;
    top: 25px;
    font-size: 15px
  }

  .search-option:hover .inputs input {
    top: 20px
  }

  .search-option .share {
    position: absolute;
    right: 20px;
    top: 22px
  }

  .buttons .btn {
    height: 50px;
    width: 150px;
    border-radius: 0px !important
  }

  /* Search Modal */
  .search{
    position: relative;
    box-shadow: 0 0 40px rgba(51, 51, 51, .1);
      
    }


    .search input{

     height: 60px;
     text-indent: 25px;
     border: 0;
    border-radius: 200px;

    }

    svg{
      color: #FF6825;
    }


    .search input:focus{

     box-shadow: none;
     border: 2px solid #FF6825;


    }

    .search .fa-search{

     position: absolute;
     top: 20px;
     left: 16px;

    }

    .search button{

     position: absolute;
     top: 5px;
     right: 5px;
     height: 50px;
     width: 110px;
     background: #FF6825;

    }

    /* Cart Page */
    .cart-item img {
      max-width: 100px;
      height: auto;
  }

  .quantity-input {
      width: 50px;
  }

  .cart-summary {
      background-color: #f8f9fa;
      border-radius: 10px;
  }

  .w-lg-85 { width: 65%!important; }

  /* Mobile มือถือ */
  @media only screen and (max-width: 600px) {
    .hero {
      height: 540px;
    }

    .w-lg-85 { width: 100%!important; }

    .imgsection{
      width: 100%;
    }
  

    .mobile-hide {
      display: none;
    }

    h6 {
      white-space: normal;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 16px !important;
    }

    button.navbar-toggler {
      float: right;
      margin-top: 15px;
      margin-right: -15px;
      right: 0;
    }

    button.navbar-toggler {
      margin-right: 15px;
  }

  }

  /* Animate */
  @keyframes fadeInUp {
    0% {
      transform: translateY(100%);
      opacity: 0;
    }
    100% {
      transform: translateY(0%);
      opacity: 1;
    }
  }

  .fadeInUp-animation {
    opacity: 0; 
    animation: 1.5s fadeInUp forwards;
  }

  .animated {
    opacity: 1; 
  }

  .status-badge {
    padding: 2px 5px !important;
    font-size: 12px !important;
    font-weight: 500;
    border-radius: 0.25rem;
    text-transform: capitalize;
}

  .fade-out {
    opacity: 0;
    transition: opacity 0.5s ease-out;
  }

  .card-title{
    font-size: 15px;
  }

  img.product-image.w-100.img-fluid.mb-3{
    height: 180px !important;
    object-fit: contain !important;
    width: 100% !important;
    border: 0px solid #e5e5e5;
    border-radius: 16px;
    /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
  }

  .custom-border {
      border: 2px solid #ff5e00;
      border-radius: 1rem;
      padding: 2rem;
    }
    .title-orange {
      color: #ff5e00;
      font-weight: bold;
    }
    .text-thai {
      color: #666;
      font-size: 1rem;
    }

    .font-weight-light{
      font-weight: 400 !important;
    }
    .lead{
      font-size: 16px;
    }

    /* Sticky Widget */
    .contact-widget {
      position: fixed;
      top: 50%;
      right: 20px;
      transform: translateY(-50%) rotate(-90deg);
      transform-origin: right center;
      background-color: #FF6825;
      color: white;
      padding: 12px 24px;
      border-top-left-radius: 30px;
      border-top-right-radius: 30px;
      font-weight: bold;
      cursor: pointer;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
      z-index: 9999;
      transition: background-color 0.3s;
      white-space: nowrap;
      font-weight: 400;
    }
    .scrollup-widget {
      position: fixed;
      bottom: 50px;
      right: 0px;
      color: white;
      padding: 12px 24px;
      cursor: pointer;
      z-index: 9999;
    }

    img.tabimg.w-100.img-fluid.mb-3 {
    height: 250px;
    object-fit: cover;
    object-position: top;
}

#tab1-tab, #tab2-tab, #tab3-tab{
  text-align: left;
  font-weight: 600;
}

    .contact-widget:hover {
      background-color: #e55a1a;
    }

    .text-grey{
      color:#8B8B8B !important;
    }

    .text-danger{
      color: #FF6825 !important;
    }

    .fw-bold{
      font-weight: 600 !important;
    }

    .bg-orange{
      background-color: #FF6825;
    }

    .font-12{
      font-size: 16px!important;
    }

    li.font-12{
      font-size: 16px!important;
    }

    .btn-outline-warning{
      border-color: #FF6825 !important;
    }

    .container{
      max-width: 960px;
    }


     .step-container {
    display: flex;
    justify-content: space-between;
    text-align: center;
    margin: 60px auto;
    max-width: 960px;
    gap: 20px;
  }

    .step-circle {
    border: 3px solid #FF6825;
    border-radius: 50%;
    width: 200px;
    height: 200px;
    margin: 0 auto 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
  }

  .step-circle::after {
  content: "";
  position: absolute;
  top: 100px; /* ปรับตามขนาดวงกลม */
  right: -130px;
    width: 130px;
  height: 2px;
  background-color: #f26522; /* สีส้ม */
}

.step-circle.last::after {
  content: "";
  display: none;
}

      .consult-box {   
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 2px solid #FF6825;
    border-radius: 30px;
    padding: 20px 30px;
   max-width: 750px;
    margin: 50px auto;
    gap: 20px;
    flex-wrap: wrap;
  }

  img.w-100.img-fluid.mb-3 {
    /* height: 40% !important;
    object-fit: cover !important; */
}

   h6 {
      white-space: normal;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 16px !important;
    }

    span.position-absolute.top-0.start-100.translate-middle.badge.rounded-pill.bg-orange {
    font-size: 10px !important;
    font-weight: 500;
    margin-top: 5px;
}

nav.navbar.navbar-expand-lg.navbar-light {
    height: 130px;
}

h5.font-weight-bold{
  font-weight: 400 !important;
}

.text-limit-3-lines {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  max-height: 4.2em; /* 3 lines * 1.4 line-height */
}

    .step {
        flex: 1;
        padding: 10px;
    }

    .step-circle img {
        width: 100px;
        margin-bottom: 10px;
    }

    .step-title {
        color: #FF6825;
        font-weight: 500;
        line-height: 1.2rem;
        font-size: 18px;
    }

    .step-desc {
        max-width: 320px;
        margin: 0 auto;
        color: #FF6825;
        font-size: 16px;
        line-height: 1.7;
    }


    .consult-left {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .consult-icon {
        background-color: #FF6825;
        border-radius: 20px;
        width: 70px;
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .consult-icon img {
        width: 30px;
    }

    .consult-text {
        color: #FF6825;
    }

    .consult-text h4 {
        margin: 0;
        font-size: 18px;
        font-weight: bold;
        color: #FF6825;
    }

    .consult-text p {
        margin: 5px 0 0;
        color: #666;
        font-size: 15px;
        line-height: 1.5;
    }

    .consult-btn {
        background-color: #FF6825;
        color: white;
        border: none;
        padding: 10px 25px;
        border-radius: 30px;
        font-size: 16px;
        display: flex;
        align-items: center;
        gap: 8px;
        white-space: nowrap;
        cursor: pointer;
    }

    .consult-btn i {
        font-size: 16px;
    }