/******* Do not edit this file *******
Woody Code Snippets CSS and JS
Saved: May 08 2025 | 09:34:07 */
/* Google fonts */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;700&display=swap');

html,
body {
  background-color: #ffffff;
  font-family: 'Kanit', sans-serif;
}

a{
	color: #000000;
	text-decoration: none;
}

a:hover {
	color: #af0000;
}

/* Navbar */
nav {
  z-index: 3;
}

nav ul {
  list-style-type: none;
}

nav ul li > a {
  color: #000000;
  font-weight: 300;
  text-decoration: none;
  font-size: calc(3px + 0.7vw);
}

nav ul li > a.active {
  opacity: 1;
  border-bottom: 2px solid #af0000;
}

.dropdown-item:hover {
  color: #ffffff;
  opacity: 0.5;
  background-color: #af0000;
}

nav ul > a {
  color: #000000;
  background-color: #af0000;
  border-radius: 1rem;
  font-weight: 300;
  text-decoration: none;
}

.header-logo-mobile {
  display: none;
}

.toggle-header-mobile {
  display: none;
  color: #af0000;
}

.toggle-header-mobile:hover,
.toggle-header-mobile:active {
  color: #af0000 !important;
}

/* Carousel Header */
.btn-header {
  letter-spacing: 0.15rem;
  margin-top: 4rem;
  background-color: #af0000;
  color: #ffffff;
}

.btn-header:hover,
.btn-header:active {
  background-color: #7e0000 !important;
  color: #ffffff;
}

.carousel {
  height: 70vh;
  z-index: 1;
}

.carousel-item > img {
	object-fit: cover;
}
/*
#bn_formlabs > a > img {
	width: 100%;
}
*/
.Banner_Formlabs_desktop {
	display: block!important;
}

.Banner_Formlabs_mobile {
	display: none!important;
} 

.carousel-indicators .active {
  background-color: #ffffff !important;
}

.carousel-indicators > [data-bs-target] {
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background-color: #484848;
}

.carousel-header h1 {
  letter-spacing: 0.5rem;
  font-size: 4rem;
}

.carousel-header h2 {
  margin-top: 3rem;
  letter-spacing: 0.1rem;
  font-weight: 600;
  font-size: 2.5rem;
}

.carousel-header h3:nth-child(1) {
  margin-top: 6rem;
}

.carousel-header h3 {
  letter-spacing: 0.1rem;
  font-weight: 300;
}

.header-detail img {
  object-fit: contain;
}

/* About Us */
.about-us {
  background-color: #faf8f8;
}

.about-us h1 {
  position: relative;
}

.about-us h1::after {
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 120px;
  transform: translate(-50%, 0);
  content: '';
  border: 2px solid #af0000;
}

.about-us p:nth-child(2) {
  color: #af0000;
}

/* Our Customers */
.our-customers h1 {
  position: relative;
}

.our-customers h1::after {
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 120px;
  transform: translate(-50%, 0);
  content: '';
  border: 2px solid #af0000;
}

.customers {
  /* padding-top: 2.5rem;
  padding-bottom: 2.5rem; */
  padding-left: 4rem;
  padding-right: 4rem;
}

.customers img {
  object-fit: contain;
}

.our-customers .slick-prev,.our-services .slick-prev {
  width: 40px;
  height: 40px;
  left: 15px;
}

.our-customers .slick-next,.our-services .slick-next {
  width: 40px;
  height: 40px;
  right: 15px;
}

.our-customers .slick-next:before,
.our-services .slick-next:before,
.our-customers .slick-prev:before, 
.our-services .slick-prev:before 
{
  content: unset;
}

.slick-next > svg,
.slick-prev > svg {
  color: #a8a8a8;
}

.slick-slide {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}

/* Our Services */
.our-services {
  background-color: #faf8f8;
}

.our-services h1 {
  position: relative;
}

.our-services h1::after {
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 120px;
  transform: translate(-50%, 0);
  content: '';
  border: 2px solid #af0000;
}

.services {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  padding-left: 4rem;
  padding-right: 4rem;
}

.services img {
  object-fit: contain;
}

.title-services {
  position: relative;
}

.title-services::after {
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 70px;
  transform: translate(-50%, 0);
  content: '';
  border: 2px solid #af0000;
}

.btn-services {
  background-color: #af0000;
  color: #ffffff;
}

.btn-services:hover {
  background-color: #af0000;
  color: #ffffff;
}

/* Estimate */
.estimate {
  background-image: url("https://rabbit-service.com/assets-custom/image/bg-free-estimate.png");
}

.estimate div h1{
  color: #AF0000;
}

/* Testimonials */
.testimonials {
  /*background-color: #faf8f8;*/
}

.testimonials h1 {
  position: relative;
}

.testimonials h1::after {
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 120px;
  transform: translate(-50%, 0);
  content: '';
  border: 2px solid #af0000;
}

/* Blogs */
.blogs h1 {
  position: relative;
}

.blogs h1::after {
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 120px;
  transform: translate(-50%, 0);
  content: '';
  border: 2px solid #af0000;
}

/* Contact */
.contact {
  background-color: #faf8f8;
}

footer {
  background-color: #000000;
}

.font-footer{
	font-size: 14px;
}

.w-70{
	width: 70%!important;
}

/* Backdrop */
.backdrop {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.7);
}

#top-bar.bg-black {
    background-color: #4d4d4d!important;
    color: #fff!important;
    height: 40px!important;
}

#top-bar {
    position: relative;
    border-bottom: 1px solid #eee;
    height: 35px;
    line-height: 34px;
    font-size: 13px;
}

.hidden-mobile-md {
    display: block!important;
}

#top-bar .col_half {
    width: auto;
}

.col_five_sixth, .col_four_fifth, .col_full, .col_half, .col_one_fifth, .col_one_fourth, .col_one_sixth, .col_one_third, .col_three_fifth, .col_three_fourth, .col_two_fifth, .col_two_third, .postcontent, .sidebar {
    display: block;
    position: relative;
    margin-right: 4%;
    margin-bottom: 50px;
    float: left;
}

.col_half {
    width: 48%;
}

.nobottommargin {
    margin-bottom: 0!important;
}

#top-bar.bg-black a {
	font-size: calc(0.5rem + 0.5vw);
    text-decoration: none!important;
    color: #fff;
}

.col_last {
    margin-right: 0!important;
    clear: right;
}

.fright {
    float: right!important;
}

.banner-section{
	height: 100%!important;
}

@media screen and (max-width: 1400px) {
  #blog-title {
    height: 230px !important;
  }
  
	.banner-section{
		max-height: 500px;
	}
	
	.carousel {
		height: 500px;
	}
}

/* Media */
@media screen and (max-width: 992px) {
  /* Navbar */
  nav {
    background-color: #ffffff;
  }

  nav ul {
    display: flex;
    max-width: 50% !important;
    z-index: 3;
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    flex-direction: column;
    background-color: #ffffff;
  }

  nav ul li > a {
    color: #000000;
    font-size: unset;
  }
/*
  nav ul li > a.active {
    font-weight: 700;
    border-bottom: unset;
  }
*/
  .toggle-header-mobile {
    z-index: 4;
  }

  .header-logo-desktop {
    display: none;
  }

  .header-logo-mobile,
  .toggle-header-mobile {
    display: block;
  }

  /* Carousel Header */
  
  .carousel-header h1 {
    letter-spacing: 0.2rem;
    font-size: calc(1.375rem + 1.5vw);
  }
  
  .carousel-header h2 {
    letter-spacing: 0.1rem;
    font-size: calc(1.1rem + 0.5vw);
  }
  
  .carousel-header h3 {
    letter-spacing: 0.1rem;
    font-size: calc(0.8rem + 0.5vw);
  }
  
  /* Our Customers */
  .ratio > img {
    width: 100% !important;
  }

  /* Our Services */
  .card {
    width: 100% !important;
  }

  .card-body {
    height: 100% !important;
  }
  
	.Banner_Formlabs_desktop {
		display: none!important;
	}

	.Banner_Formlabs_mobile {
		display: block!important;
	}
	
	
	#top-bar.bg-black a{
		font-size: calc(0.5rem + 0.5vw);
	}
	
	#contact_T{
		display: none;
	}
	
	.banner-section{
		max-height: 400px;
	}
	
	.carousel {
		height: 400px;
	}
}
