/* Font */
@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Whisper&display=swap');

@font-face {
    font-family: 'Adusian Signature';
    src: url('assets/font/Adusian Signature.ttf') ;
}
/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
*{
  font-family: 'Prompt', sans-serif !important;
}
body {
  font-family: 'Prompt', sans-serif !important;
  /* font-family: "Kanit", sans-serif; */
  color: #444444;
}

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

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

h1,
h2,
h3,
h4,
h5,
h6 {
  /* font-family: 'Prompt', sans-serif !important; */
  font-family: "Kanit", sans-serif;
  font-weight: 400;
}
h4 {
  font-weight: 300;
}
hr{
  background-color: #000;
  border-top: 1px solid rgb(80, 80, 80);
}
p {
  /* font-family: 'Prompt', sans-serif !important; */
  font-family: "Kanit", sans-serif;
  /* font-weight: 300 !important; */
}
.padding-contact{
  padding: 0 20%;
    margin-top: 5%;
}
.signature{
  font-family: "Whisper", cursive !important;
  font-weight: 400;
  font-style: normal;
  font-size: 81px;
  color: red !important;
}
.signature-about{
  font-family: "Whisper", cursive !important;
  font-weight: 400;
  font-style: normal;
  font-size: 216px;
}
.kanit-thin {
  font-family: "Kanit", sans-serif;
}

.mar-mor{
  margin-left: 49px;
}
.edit-pad-mor{
  margin-left: 110px;
}
.col-7th {
  width: 14.2857%; /* 100% / 7 */
}
.drop-down-product{
  max-height: 500px; /* กำหนดความสูงสูงสุด */
  overflow: hidden; /* ซ่อนข้อมูลที่เกิน */
  overflow-y: auto; /* เพิ่มแถบเลื่อนถ้ามีข้อมูลเกิน */
}

.new-pad{
  margin: 31px 0;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  overflow: hidden;
  background: #fff;
}
.head-pad{
  padding: 0 9% !important;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #f7941d ;
  border-top-color: #ffffff;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  -webkit-animation: animate-preloader 1s linear infinite;
  animation: animate-preloader 1s linear infinite;
}

@-webkit-keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 263px;
  z-index: 996;
  background: red ;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}

.back-to-top i {
  font-size: 28px;
  color: #fff;
  line-height: 0;
}

.back-to-top:hover {
  background: #f7951d4d ;
  color: #fff;
}

.back-to-top.active {
  visibility: visible;
  opacity: 1;
}

/*  */
#button {
  display: inline-block;
  background-color: #FF9800;
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 4px;
  position: fixed;
  bottom: 30px;
  right: 30px;
  transition: background-color .3s, 
    opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
}
#button::after {
  content: "\f077";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 2em;
  line-height: 50px;
  color: #fff;
}
#button:hover {
  cursor: pointer;
  background-color: #333;
}
#button:active {
  background-color: #555;
}
#button.show {
  opacity: 1;
  visibility: visible;
}

/* Styles for the content section */

.content {
  width: 100%;
  margin: 50px auto;
  font-family: 'Merriweather', serif;
  font-size: 17px;
  color: #6c767a;
  line-height: 1.9;
}
@media (min-width: 500px) {
  .content {
    /* width: 43%; */
  }
  #button {
    margin: 30px;
  }
}
.content h1 {
  margin-bottom: -10px;
  color: #03a9f4;
  line-height: 1.5;
}
.content h3 {
  font-style: italic;
  color: #96a2a7;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Top Bar
--------------------------------------------------------------*/
#topbar {
  background: #555555;
  color: #fff;
  height: 40px;
  font-size: 16px;
  font-weight: 600;
  z-index: 996;
  transition: all 0.5s;
}

#topbar.topbar-scrolled {
  top: -40px;
}

#topbar i {
  padding-right: 6px;
  line-height: 0;
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
  background: #ffffffbf;
  transition: all 0.5s;
  z-index: 997;
  padding: 20px 0;
  /* top: 40px; */

  /* box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1); */
}
#header.header-scrolled{
  background: #fff;
  color: #fff !important;
}


@media (max-width: 992px) {
  #header {
    padding: 15px 0;
    /* background-color: rgb(255, 255, 255); */
  }
}

#header.header-scrolled {
  top: 0;
  color: #000 !important;
}

#header .logo {
  font-size: 28px;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}


#header .logo a {
  color: #555555;
}

/* #header .logo img {
  max-height: 40px;
} */

/**
* Appointment Button
*/
.appointment-btn {
  margin-left: 25px;
  background: #555555;
  color: #fff;
  border-radius: 4px;
  padding: 8px 25px;
  white-space: nowrap;
  transition: 0.3s;
  font-size: 14px;
  display: inline-block;
}

.appointment-btn:hover {
  background: #65c9cd;
  color: #fff;
}

@media (max-width: 768px) {
  .appointment-btn {
    margin: 0 15px 0 0;
    padding: 6px 15px;
  }
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/**
* Desktop Navigation 
*/
.navbar {
  padding: 0;
}

.navbar ul {
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  align-items: center;
}

.navbar li {
  position: relative;
}

.navbar a,
.navbar a:focus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* padding: 10px 6px 10px 30px; */
  /* font-family: 'Prompt', sans-serif !important; */
  font-size: 19px;
  color: #FE0000 ;
  white-space: nowrap;
  transition: 0.3s;
  /* text-transform: uppercase; */
  font-weight: 600 !important;
  /* font-family: 'Cormorant Garamond', serif !important; */
  font-family: "Kanit", sans-serif;
  margin: 10px 22px 8px 5px;
}
.size-regis{
  width: 640px;
  height: 1030px;
}

.navbar a i,
.navbar a:focus i {
  font-size: 12px;
  line-height: 0;
  margin-left: 5px;
}

.navbar .active,
.navbar .active:focus,
.navbar li:hover>a {
  color: #FE0000 !important;
  /* border: 1px solid; */
  border-bottom: 3px solid;
  font-weight: 500;
}
.navbar li:hover>a {
  text-decoration: none;
  color: #FE0000 !important;
}

.navbar .dropdown ul {
  display: block;
  position: absolute;
  left: 14px;
  top: calc(100% + 30px);
  margin: 0;
  padding: 10px 0;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  background: #eeeeee;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
  transition: 0.3s;
  border-radius: 4px;
}
/* test */
.navbar .dropdown ul li:nth-child(even) {
  background: #e3e3e3;
}
.navbar .dropdown ul li {
  min-width: 200px;
}

.navbar .dropdown ul a {
  padding: 4px 20px;
  text-transform: none;
}

.navbar .dropdown ul a i {
  font-size: 12px;
}

.navbar .dropdown ul a:hover,
.navbar .dropdown ul .active:hover,
.navbar .dropdown ul li:hover>a {
  color: #d7d4d4;
}

.navbar .dropdown:hover>ul {
  opacity: 1;
  top: 100%;
  visibility: visible;
}

.navbar .dropdown .dropdown ul {
  top: 0;
  left: calc(100% - 30px);
  visibility: hidden;
}

.navbar .dropdown .dropdown:hover>ul {
  opacity: 1;
  top: 0;
  left: 100%;
  visibility: visible;
}

@media (max-width: 1366px) {
  .navbar .dropdown .dropdown ul {
    left: -90%;
  }

  .navbar .dropdown .dropdown:hover>ul {
    left: -100%;
  }
}

/**
* Mobile Navigation 
*/
.mobile-nav-toggle {
  color: #000000;
  font-size: 28px;
  cursor: pointer;
  display: none;
  line-height: 0;
  transition: 0.5s;
}
.new-but-menu{
  position: relative;
    left: 40%;
    width: 50%;
}


.mobile-nav-toggle.bi-x {
  color: #fff;
}

@media (max-width: 991px) {
  .mobile-nav-toggle {
    display: block;
  }

  .navbar ul {
    display: none;
  }
}

.navbar-mobile {
  position: fixed !important;
  overflow: hidden;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(60, 60, 60, 0.9);
  transition: 0.3s;
  z-index: 999;
}

.navbar-mobile .mobile-nav-toggle {
  position: absolute;
  top: 15px;
  right: 15px;
  /* display: none; */
}


.navbar-mobile ul {
  display: block;
  position: absolute;
  /* top: 55px; */
  top: 0;
  /* right: 15px; */
  /* bottom: 15px; */
  /* left: 15px; */
  padding: 46px 25px;
  border-radius: 8px;
  background-color: rgb(255, 255, 255);
  overflow-y: auto;
  transition: 0.8s;
  width: 100%
}

.navbar-mobile a,
.navbar-mobile a:focus {
  padding: 10px 20px;
  font-size: 15px;
  color: red !important;
}

.navbar-mobile a:hover,
.navbar-mobile .active,
.navbar-mobile li:hover>a {
  color: #fff;
}

.navbar-mobile .dropdown ul {
  position: static;
  display: none;
  margin: 10px 20px;
  padding: 10px 0;
  z-index: 99;
  opacity: 1;
  visibility: visible;
  background: #eeeeee;
  /* box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25); */
}

.navbar-mobile .dropdown ul li {
  min-width: 200px;
}

.navbar-mobile .dropdown ul a {
  padding: 10px 20px;
}

.navbar-mobile .dropdown ul a i {
  font-size: 12px;
}

.navbar-mobile .dropdown ul a:hover,
.navbar-mobile .dropdown ul .active:hover,
.navbar-mobile .dropdown ul li:hover>a {
  color: #555555;
}

.navbar-mobile .dropdown>.dropdown-active {
  display: block;
}
.navbar-mobile .cart {
  display: none;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
#hero {
  width: 100%;
  /* height:73vh; */
  height: 86vh;
  /* background-color: rgba(60, 60, 60, 0.8); */
  overflow: hidden;
  position: relative;
  /* z-index: -1; */
  /* margin-top: 97px; */
}

#hero .carousel,
#hero .carousel-inner,
#hero .carousel-item,
#hero .carousel-item::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

#hero .carousel-item {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

#hero .container {
  text-align: center;
  background: rgba(255, 255, 255, 0.9);
  padding-top: 30px;
  padding-bottom: 30px;
  margin-bottom: 50px;
  border-top: 4px solid #555555;
}

@media (max-width: 1200px) {
  #hero .container {
    margin-left: 50px;
    margin-right: 50px;
  }
}

#hero h2 {
  color: #2f2f2f;
  margin-bottom: 20px;
  font-size: 36px;
  font-weight: 700;
}

#hero p {
  margin: 0 auto 30px auto;
  color: #555555;
}

#hero .carousel-inner .carousel-item {
  transition-property: opacity;
  background-position: center top;
}

#hero .carousel-inner .carousel-item,
#hero .carousel-inner .active.carousel-item-start,
#hero .carousel-inner .active.carousel-item-end {
  opacity: 0;
}

#hero .carousel-inner .active,
#hero .carousel-inner .carousel-item-next.carousel-item-start,
#hero .carousel-inner .carousel-item-prev.carousel-item-end {
  opacity: 1;
  transition: 0.5s;
}

#hero .carousel-inner .carousel-item-next,
#hero .carousel-inner .carousel-item-prev,
#hero .carousel-inner .active.carousel-item-start,
#hero .carousel-inner .active.carousel-item-end {
  left: 0;
  transform: translate3d(0, 0, 0);
}

#hero .carousel-control-next-icon,
#hero .carousel-control-prev-icon {
  background: none;
  font-size: 30px;
  line-height: 0;
  width: auto;
  height: auto;
  background: #555555;
  border-radius: 50px;
  transition: 0.3s;
  color: rgba(255, 255, 255, 0.5);
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#hero .carousel-control-next-icon:hover,
#hero .carousel-control-prev-icon:hover {
  background: #555555;
  color: rgba(255, 255, 255, 0.8);
}

#hero .carousel-indicators li {
  cursor: pointer;
  background: #fff;
  overflow: hidden;
  border: 0;
  width: 12px;
  height: 12px;
  border-radius: 50px;
  opacity: 0.6;
  transition: 0.3s;
}

#hero .carousel-indicators li.active {
  opacity: 1;
  background: #555555;
}
.button-ar-bot{
  color: red;
  margin-top: 20px;
}

#hero .btn-get-started {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 14px 32px;
  border-radius: 4px;
  transition: 0.5s;
  line-height: 1;
  color: #fff;
  background: #555555;
}

#hero .btn-get-started:hover {
  background: #65c9cd;
}

@media (max-width: 992px) {
  #hero {
    height: 50vh;
  }

  #hero .container {
    margin-top: 100px;
  }
}

@media (max-width: 768px) {
  #hero h2 {
    font-size: 28px;
  }
  .swiper-button-next, .swiper-button-prev{
    top: 28% !important;
  }
}
@media (max-width: 820px) {
  .swiper-button-next, .swiper-button-prev{
    top: 28% !important;
  }
}

@media (max-width: 1920px) {
  .swiper-button-next, .swiper-button-prev{
    top: 36% !important;
  }
}
/* @media (max-width: 2560px) {
  .swiper-button-next, .swiper-button-prev{
    top: 40% !important;
  }
} */
@media (min-width: 1024px) {

  #hero .carousel-control-prev,
  #hero .carousel-control-next {
    width: 5%;
  }
}

@media (max-height: 500px) {
  #hero {
    height: 160vh;
  }
}
@media (max-width: 360px){
  .swiper-button-next, .swiper-button-prev {
    top: 45% !important;
}
}


/*--------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/
section {
  padding: 60px 0;
  overflow: hidden;
}

.section-bg {
  background-color: #f7fcfc;
}

.section-title {
  text-align: center;
  padding-bottom: 30px;
}

.section-title h2 {
  font-size: 32px;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
}

/* .section-title h2::after {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 3px;
  background: #555555;
  bottom: 0;
  left: calc(50% - 25px);
} */

.section-title p {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Breadcrumbs
--------------------------------------------------------------*/
.breadcrumbs {
  padding: 20px 0;
  background-color: #ecf8f9;
  min-height: 40px;
  margin-top: 120px;
}

@media (max-width: 992px) {
  .breadcrumbs {
    margin-top: 70px;
  }
}

.breadcrumbs h2 {
  font-size: 24px;
  font-weight: 300;
  margin: 0;
}

@media (max-width: 992px) {
  .breadcrumbs h2 {
    margin: 0 0 10px 0;
  }
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
}

.breadcrumbs ol li+li {
  padding-left: 10px;
}

.breadcrumbs ol li+li::before {
  display: inline-block;
  padding-right: 10px;
  color: #6c757d;
  content: "/";
}

@media (max-width: 768px) {
  .breadcrumbs .d-flex {
    display: block !important;
  }

  .breadcrumbs ol {
    display: block;
  }

  .breadcrumbs ol li {
    display: inline-block;
  }
}

/*--------------------------------------------------------------
# Featured Services
--------------------------------------------------------------*/
.featured-services .icon-box {
  padding: 30px;
  position: relative;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 29px 0 rgba(68, 88, 144, 0.12);
  transition: all 0.3s ease-in-out;
  border-radius: 8px;
  z-index: 1;
}

.featured-services .icon-box::before {
  content: "";
  position: absolute;
  background: #d9f1f2;
  right: 0;
  left: 0;
  bottom: 0;
  top: 100%;
  transition: all 0.3s;
  z-index: -1;
}

.featured-services .icon-box:hover::before {
  background: #555555;
  top: 0;
  border-radius: 0px;
}

.featured-services .icon {
  margin-bottom: 15px;
}

.featured-services .icon i {
  font-size: 48px;
  line-height: 1;
  color: #555555;
  transition: all 0.3s ease-in-out;
}

.featured-services .title {
  font-weight: 700;
  margin-bottom: 15px;
  font-size: 16px;
}

.featured-services .title a {
  color: #111;
}

.featured-services .description {
  font-size: 15px;
  line-height: 28px;
  margin-bottom: 0;
}

.featured-services .icon-box:hover .title a,
.featured-services .icon-box:hover .description {
  color: #fff;
}

.featured-services .icon-box:hover .icon i {
  color: #fff;
}

/*--------------------------------------------------------------
# Cta
--------------------------------------------------------------*/
.cta {
  background: #555555;
  color: #fff;
  background-size: cover;
  padding: 60px 0;
}

.cta h3 {
  font-size: 28px;
  font-weight: 700;
}

.cta .cta-btn {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 10px 35px;
  border-radius: 25px;
  transition: 0.5s;
  margin-top: 10px;
  border: 2px solid #fff;
  color: #fff;
}

.cta .cta-btn:hover {
  background: #fff;
  color: #555555;
}

/*--------------------------------------------------------------
# About Us
--------------------------------------------------------------*/
.about .content h3 {
  font-weight: 600;
  font-size: 26px;
}

.about .content ul {
  list-style: none;
  padding: 0;
}

.about .content ul li {
  padding-bottom: 10px;
}

.about .content ul i {
  font-size: 20px;
  padding-right: 4px;
  color: #555555;
}

.about .content p:last-child {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Counts
--------------------------------------------------------------*/
.counts {
  padding-bottom: 30px;
}

.counts .count-box {
  /* box-shadow: -10px -5px 40px 0 rgba(0, 0, 0, 0.1); */
  /* padding: 30px; */
  width: 100%;
}

.counts .count-box i {
  display: block;
  font-size: 30px;
  color: #555555;
  float: left;
}

.counts .count-box span {
  font-size: 42px;
  line-height: 24px;
  display: block;
  font-weight: 700;
  color: #555555;
  margin-left: 50px;
}

.counts .count-box p {
  padding: 30px 0 0 0;
  margin: 0;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
}

.counts .count-box a {
  /* font-weight: 600; */
  display: block;
  /* margin-top: 20px; */
  /* color: #7b7b7b; */
  /* font-size: 15px; */
  /* font-family: "Poppins", sans-serif; */
  transition: ease-in-out 0.3s;
  color: #000000 !important;
}

.counts .count-box a:hover {
  color: #000000;
}

/*--------------------------------------------------------------
# Features
--------------------------------------------------------------*/
.features .icon-box h4 {
  font-size: 20px;
  font-weight: 700;
  margin: 5px 0 10px 60px;
}

.features .icon-box i {
  font-size: 48px;
  float: left;
  color: #555555;
}

.features .icon-box p {
  font-size: 15px;
  color: #848484;
  margin-left: 60px;
}

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

/*--------------------------------------------------------------
# Services
--------------------------------------------------------------*/
.services .icon-box {
  margin-bottom: 20px;
  text-align: center;
}

.services .icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  margin-bottom: 20px;
  background: #fff;
  border-radius: 50%;
  transition: 0.5s;
  color: #555555;
  overflow: hidden;
  box-shadow: 0px 0 25px rgba(0, 0, 0, 0.15);
}

.services .icon i {
  font-size: 36px;
  line-height: 0;
}

.services .icon-box:hover .icon {
  box-shadow: 0px 0 25px rgba(63, 187, 192, 0.3);
}

.services .title {
  font-weight: 600;
  margin-bottom: 15px;
  font-size: 18px;
  position: relative;
  padding-bottom: 15px;
}

.services .title a {
  color: #444444;
  transition: 0.3s;
}

.services .title a:hover {
  color: #555555;
}

.services .title::after {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 2px;
  background: #555555;
  bottom: 0;
  left: calc(50% - 25px);
}

.services .description {
  line-height: 24px;
  font-size: 14px;
}

/*--------------------------------------------------------------
# Appointments
--------------------------------------------------------------*/
.appointment .php-email-form {
  width: 100%;
}

.appointment .php-email-form .form-group {
  padding-bottom: 8px;
}

.appointment .php-email-form .validate {
  display: none;
  color: red;
  margin: 0 0 15px 0;
  font-weight: 400;
  font-size: 13px;
}

.appointment .php-email-form .error-message {
  display: none;
  color: #fff;
  background: #ed3c0d;
  text-align: left;
  padding: 15px;
  font-weight: 600;
}

.appointment .php-email-form .error-message br+br {
  margin-top: 25px;
}

.appointment .php-email-form .sent-message {
  display: none;
  color: #fff;
  background: #18d26e;
  text-align: center;
  padding: 15px;
  font-weight: 600;
}

.appointment .php-email-form .loading {
  display: none;
  background: #fff;
  text-align: center;
  padding: 15px;
}

.appointment .php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid #18d26e;
  border-top-color: #eee;
  -webkit-animation: animate-loading 1s linear infinite;
  animation: animate-loading 1s linear infinite;
}

.appointment .php-email-form input,
.appointment .php-email-form textarea,
.appointment .php-email-form select {
  border-radius: 0;
  box-shadow: none;
  font-size: 14px;
  padding: 10px !important;
}

.appointment .php-email-form input:focus,
.appointment .php-email-form textarea:focus,
.appointment .php-email-form select:focus {
  border-color: #555555;
}

.appointment .php-email-form input,
.appointment .php-email-form select {
  height: 44px;
}

.appointment .php-email-form textarea {
  padding: 10px 12px;
}

.appointment .php-email-form button[type=submit] {
  background: #555555;
  border: 0;
  padding: 10px 35px;
  color: #fff;
  transition: 0.4s;
  border-radius: 50px;
}

.appointment .php-email-form button[type=submit]:hover {
  background: #52c2c6;
}

/*--------------------------------------------------------------
# Departments
--------------------------------------------------------------*/
.departments .nav-tabs {
  border: 0;
}

.departments .nav-link {
  border: 0;
  padding: 20px;
  color: #555555;
  border-radius: 0;
  border-left: 5px solid #fff;
  cursor: pointer;
}

.departments .nav-link h4 {
  font-size: 18px;
  font-weight: 600;
  transition: 0.3s;
}

.departments .nav-link p {
  font-size: 14px;
  margin-bottom: 0;
}

.departments .nav-link:hover h4 {
  color: #555555;
}

.departments .nav-link.active {
  background: #f7fcfc;
  border-color: #555555;
}

.departments .nav-link.active h4 {
  color: #555555;
}

.departments .tab-pane.active {
  -webkit-animation: slide-down 0.5s ease-out;
  animation: slide-down 0.5s ease-out;
}

.departments .tab-pane img {
  float: left;
  max-width: 300px;
  padding: 0 15px 15px 0;
}

@media (max-width: 768px) {
  .departments .tab-pane img {
    float: none;
    padding: 0 0 15px 0;
    max-width: 100%;
  }
}

.departments .tab-pane h3 {
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 20px;
  color: #555555;
}

.departments .tab-pane p {
  color: #777777;
}

.departments .tab-pane p:last-child {
  margin-bottom: 0;
}

@-webkit-keyframes slide-down {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes slide-down {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/*--------------------------------------------------------------
# Testimonials
--------------------------------------------------------------*/
.testimonials .testimonials-carousel,
.testimonials .testimonials-slider {
  overflow: hidden;
}

.testimonials .testimonial-item {
  box-sizing: content-box;
  min-height: 320px;
}

.testimonials .testimonial-item .testimonial-img {
  width: 90px;
  border-radius: 50%;
  margin: -40px 0 0 40px;
  position: relative;
  z-index: 2;
  /* border: 6px solid #fff; */
}

.testimonials .testimonial-item h3 {
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0 5px 45px;
  color: #111;
}

.testimonials .testimonial-item h4 {
  font-size: 14px;
  color: #999;
  margin: 0 0 0 45px;
}

.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right {
  color: #b2e4e6;
  font-size: 26px;
}

.testimonials .testimonial-item .quote-icon-left {
  display: inline-block;
  left: -5px;
  position: relative;
}

.testimonials .testimonial-item .quote-icon-right {
  display: inline-block;
  right: -5px;
  position: relative;
  top: 10px;
}

.testimonials .testimonial-item p {
  font-style: italic;
  margin: 0 15px 0 15px;
  padding: 20px 20px 60px 20px;
  /* background: #f0fafa; */
  position: relative;
  border-radius: 6px;
  position: relative;
  z-index: 1;
}

.testimonials .swiper-pagination {
  margin-top: 20px;
  /* position: relative; */
  position: absolute;
}

.testimonials .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: #fff;
  opacity: 1;
  border: 1px solid #555555;
}

.testimonials .swiper-pagination .swiper-pagination-bullet-active {
  background-color: #555555;
}

/*--------------------------------------------------------------
# Doctors
--------------------------------------------------------------*/
.doctors .member {
  margin-bottom: 20px;
  overflow: hidden;
  text-align: center;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0px 2px 15px rgba(63, 187, 192, 0.1);
}

.doctors .member .member-img {
  position: relative;
  overflow: hidden;
}

.doctors .member .social {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 40px;
  opacity: 0;
  transition: ease-in-out 0.3s;
  background: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
}

.doctors .member .social a {
  transition: color 0.3s;
  color: #555555;
  margin: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.doctors .member .social a i {
  line-height: 0;
}

.doctors .member .social a:hover {
  color: #555555;
}

.doctors .member .social i {
  font-size: 18px;
  margin: 0 2px;
}

.doctors .member .member-info {
  padding: 25px 15px;
}

.doctors .member .member-info h4 {
  font-weight: 700;
  margin-bottom: 5px;
  font-size: 18px;
  color: #555555;
}

.doctors .member .member-info span {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: #aaaaaa;
}

.doctors .member .member-info p {
  font-style: italic;
  font-size: 14px;
  line-height: 26px;
  color: #777777;
}

.doctors .member:hover .social {
  opacity: 1;
}

/*--------------------------------------------------------------
# Gallery
--------------------------------------------------------------*/
.gallery {
  overflow: hidden;
}

.gallery .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.gallery .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: #fff;
  opacity: 1;
  border: 1px solid #555555;
}

.gallery .swiper-pagination .swiper-pagination-bullet-active {
  background-color: #555555;
}

.gallery .swiper-slide-active {
  text-align: center;
}

.services .swiper-slide-active {
  text-align: center;
  transform: scale(1)
}

@media (min-width: 992px) {
  .gallery .swiper-wrapper {
    padding: 40px 0;
  }

  .gallery .swiper-slide-active {
    border: 2px solid #555555;
    padding: 4px;
    background: #fff;
    z-index: 1;
    transform: scale(1.2);
    margin-top: 10px;
  }
}

.vdo-mascos{
  width: 9%;
}
.vdo-text{
  font-size: 44px;
    font-weight: 600;
    margin-bottom: 29px;
}
.botton-to-some{
  border-radius: 46px;
    padding: 20px 52px;
    background-color: #3C9670;
    color: white;
    font-size: 23px;
    text-decoration: none;
}
.botton-to-some:hover {
  color: rgb(0, 0, 0);
  background-color: #FDCD07;
  /* border: 2px solid #FDCD07; */
  /* border-bottom: 2px solid black; */
  box-shadow: 2px 5px 5px #00000085;
}
.card-text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-shadow{
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2); /* Blurred shadow */
}
.menu-footer-small{
  font-size: 18px;
    display: flex;
    margin-bottom: 3%;
    text-decoration: none;
    color: white;
}
/*--------------------------------------------------------------
# Pricing
--------------------------------------------------------------*/
.pricing .box {
  padding: 20px;
  background: #fff;
  text-align: center;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.pricing h3 {
  font-weight: 400;
  margin: -20px -20px 20px -20px;
  padding: 20px 15px;
  font-size: 16px;
  font-weight: 600;
  color: #777777;
  background: #f8f8f8;
}

.pricing h4 {
  font-size: 36px;
  color: #555555;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
  margin-bottom: 20px;
}

.pricing h4 sup {
  font-size: 20px;
  top: -15px;
  left: -3px;
}

.pricing h4 span {
  color: #bababa;
  font-size: 16px;
  font-weight: 300;
}

.pricing ul {
  padding: 0;
  list-style: none;
  color: #444444;
  text-align: center;
  line-height: 20px;
  font-size: 14px;
}

.pricing ul li {
  padding-bottom: 16px;
}

.pricing ul i {
  color: #555555;
  font-size: 18px;
  padding-right: 4px;
}

.pricing ul .na {
  color: #ccc;
  text-decoration: line-through;
}

.pricing .btn-wrap {
  margin: 20px -20px -20px -20px;
  padding: 20px 15px;
  background: #f8f8f8;
  text-align: center;
}

.pricing .btn-buy {
  background: #555555;
  display: inline-block;
  padding: 8px 35px 10px 35px;
  border-radius: 4px;
  color: #fff;
  transition: none;
  font-size: 14px;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  transition: 0.3s;
}

.pricing .btn-buy:hover {
  background: #65c9cd;
}

.pricing .featured h3 {
  color: #fff;
  background: #555555;
}

.pricing .advanced {
  width: 200px;
  position: absolute;
  top: 18px;
  right: -68px;
  transform: rotate(45deg);
  z-index: 1;
  font-size: 14px;
  padding: 1px 0 3px 0;
  background: #555555;
  color: #fff;
}

.search-bar{
  width: 42%;
}
/*--------------------------------------------------------------
# Frequently Asked Questioins
--------------------------------------------------------------*/
.faq {
  padding: 60px 0;
}

.faq .faq-list {
  padding: 0;
  list-style: none;
}

.faq .faq-list li {
  border-bottom: 1px solid #d9f1f2;
  margin-bottom: 20px;
  padding-bottom: 20px;
}

.faq .faq-list .question {
  display: block;
  position: relative;
  font-family: #555555;
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
  padding-left: 25px;
  cursor: pointer;
  color: #32969a;
  transition: 0.3s;
}

.faq .faq-list i {
  font-size: 16px;
  position: absolute;
  left: 0;
  top: -2px;
}

.faq .faq-list p {
  margin-bottom: 0;
  padding: 10px 0 0 25px;
}

.faq .faq-list .icon-show {
  display: none;
}

.faq .faq-list .collapsed {
  color: black;
}

.faq .faq-list .collapsed:hover {
  color: #555555;
}

.faq .faq-list .collapsed .icon-show {
  display: inline-block;
  transition: 0.6s;
}

.faq .faq-list .collapsed .icon-close {
  display: none;
  transition: 0.6s;
}
.padding-aboutnew{
  padding: 46px 103px !important;
}

/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/
.contact .info-box {
  color: #444444;
  text-align: center;
  box-shadow: 0 0 20px rgba(214, 215, 216, 0.5);
  padding: 20px 0 30px 0;
}

.contact .info-box i {
  font-size: 32px;
  color: #555555;
  border-radius: 50%;
  padding: 8px;
  border: 2px dotted #c5ebec;
}

.contact .info-box h3 {
  font-size: 20px;
  color: #777777;
  font-weight: 700;
  margin: 10px 0;
}

.contact .info-box p {
  padding: 0;
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
}

.contact .php-email-form {
  box-shadow: 0 0 20px rgba(214, 215, 216, 0.5);
  padding: 30px;
}

.contact .php-email-form .error-message {
  display: none;
  color: #fff;
  background: #ed3c0d;
  text-align: left;
  padding: 15px;
  font-weight: 600;
}

.contact .php-email-form .error-message br+br {
  margin-top: 25px;
}

.contact .php-email-form .sent-message {
  display: none;
  color: #fff;
  background: #18d26e;
  text-align: center;
  padding: 15px;
  font-weight: 600;
}

.contact .php-email-form .loading {
  display: none;
  background: #fff;
  text-align: center;
  padding: 15px;
}

.contact .php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid #18d26e;
  border-top-color: #eee;
  -webkit-animation: animate-loading 1s linear infinite;
  animation: animate-loading 1s linear infinite;
}

.contact .php-email-form input,
.contact .php-email-form textarea {
  border-radius: 4px;
  box-shadow: none;
  font-size: 14px;
}

.contact .php-email-form input:focus,
.contact .php-email-form textarea:focus {
  border-color: #555555;
}

.contact .php-email-form input {
  padding: 10px 15px;
}

.contact .php-email-form textarea {
  padding: 12px 15px;
}

.contact .php-email-form button[type=submit] {
  background: #555555;
  border: 0;
  padding: 10px 30px;
  color: #fff;
  transition: 0.4s;
  border-radius: 4px;
}

.contact .php-email-form button[type=submit]:hover {
  background: #65c9cd;
}

@-webkit-keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#footer {
  background: #282828;
  padding: 0 0 15px 0;
  color: #fff;
  font-size: 14px;
}

#footer .footer-top {
  background: #282828;
  padding: 60px 0 30px 0;
}

#footer .footer-top .footer-info {
  margin-bottom: 30px;
}

#footer .footer-top .footer-info h3 {
  font-size: 24px;
  margin: 0 0 20px 0;
  padding: 2px 0 2px 0;
  line-height: 1;
  font-weight: 700;
}

#footer .footer-top .footer-info p {
  font-size: 14px;
  line-height: 24px;
  margin-bottom: 0;
  font-family: "Roboto", sans-serif;
}

#footer .footer-top .social-links a {
  font-size: 18px;
  display: inline-block;
  background: #adb5bd;
  color: #fff;
  line-height: 1;
  padding: 8px 0;
  margin-right: 4px;
  border-radius: 4px;
  text-align: center;
  width: 36px;
  height: 36px;
  transition: 0.3s;
}

#footer .footer-top .social-links a:hover {
  background: #adb5bd;
  text-decoration: none;
}

#footer .footer-top h4 {
  font-size: 16px;
  font-weight: 600;
  position: relative;
  padding-bottom: 12px;
}

#footer .footer-top .footer-links {
  margin-bottom: 30px;
}

#footer .footer-top .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#footer .footer-top .footer-links ul i {
  padding-right: 2px;
  color: #555555;
  font-size: 18px;
  line-height: 1;
}

#footer .footer-top .footer-links ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

#footer .footer-top .footer-links ul li:first-child {
  padding-top: 0;
}

#footer .footer-top .footer-links ul a {
  color: #555555;
  transition: 0.3s;
  display: inline-block;
  line-height: 1;
}

#footer .footer-top .footer-links ul a:hover {
  color: #555555;
}

#footer .footer-top .footer-newsletter form {
  margin-top: 30px;
  background: #fff;
  padding: 6px 10px;
  position: relative;
  border: 1px solid #d5d5d5;
  border-radius: 4px;
}

#footer .footer-top .footer-newsletter form input[type=email] {
  border: 0;
  padding: 4px;
  width: calc(100% - 110px);
}

#footer .footer-top .footer-newsletter form input[type=submit] {
  position: absolute;
  top: -1px;
  right: -1px;
  bottom: -1px;
  border: 0;
  background: none;
  font-size: 16px;
  padding: 0 20px;
  background: #555555;
  color: #fff;
  transition: 0.3s;
  border-radius: 0 4px 4px 0;
}

#footer .footer-top .footer-newsletter form input[type=submit]:hover {
  background: #65c9cd;
}

#footer .copyright {
  text-align: center;
  padding-top: 11px;
}

#footer .credits {
  padding-top: 10px;
  text-align: center;
  font-size: 13px;
}


/***********************EFFECT ARTICLES PROMOTION  *******************/
.box14{position:relative}
.box15,.box17,.box18{box-shadow:0 0 50px #7e7d7d;text-align:center}
.box14:before{content:"";width:100%;height:100%;background:rgba(131, 129, 129, 0.5);position:absolute;top:0;left:0;opacity:0;transition:all .35s ease 0s}
.box14:hover:before{opacity:1}
.box14 img{width:100%;height:auto}
.box14 .box-content{width:90%;height:90%;position:absolute;top:5%;left:5%}
.box14 .box-content:after,.box14 .box-content:before{content:"";position:absolute;top:0;left:0;bottom:0;right:0;opacity:0;transition:all .7s ease 0s}
.box14 .box-content:before{border-bottom:1px solid rgba(255,255,255,.5);border-top:1px solid rgba(255,255,255,.5);transform:scale(0,1);transform-origin:0 0 0}
.box14 .box-content:after{border-left:1px solid rgba(255,255,255,.5);border-right:1px solid rgba(255,255,255,.5);transform:scale(1,0);transform-origin:100% 0 0}
.box14:hover .box-content:after,.box14:hover .box-content:before{opacity:1;transform:scale(1);transition-delay:.15s}
.box14 .title{font-size:21px;font-weight:700;color:#fff;margin:15px 0;opacity:0;transform:translate3d(0,-50px,0);transition:transform .5s ease 0s}
.box14:hover .title{opacity:1;transform:translate3d(0,0,0)}
.box14 .post{font-size:14px;color:#fff;padding:10px;background:#d79719;opacity:0;border-radius:0 19px;transform:translate3d(0,-50px,0);transition:all .7s ease 0s}
.box14 .icon,.box15 .icon{padding:0;list-style:none}
.box14:hover .post{opacity:1;transform:translate3d(0,0,0);transition-delay:.15s}
.box14 .icon{width:100%;margin:0;position:absolute;bottom:-10px;left:0;opacity:0;z-index:1;transition:all .7s ease 0s}
.box14:hover .icon{bottom:20px;opacity:1;transition-delay:.15s}
.box14 .icon li a{display:block;width:40px;height:40px;line-height:40px;border:1px solid #fff;border-radius:0 16px;font-size:14px;color:#fff;margin-right:5px;transition:all .4s ease 0s}
.box14 .icon li a:hover{background:#d79719;border-color:#d79719}
@media only screen and (max-width:990px){.box14{margin-bottom:30px}
}
/*********************** HOVER-EFFECT SERVICE CATEGORY *******************/
/*Fade Hover Effect*/
/*ZoomIn Hover Effect*/
.hover-zoomin a {
  display: block;
  position: relative;
  overflow: hidden;
}
.hover-zoomin img {
  width: 100%;
  height: auto;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.hover-zoomin:hover img {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -o-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
  
}

/*Fade Hover Effect*/
.hover-fade a {
  display: block;
  position: relative;
  overflow: hidden;
  background-color: #333;
}
.hover-fade img {
  width: 100%;
  height: auto;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.hover-fade:hover img {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -o-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0.5)";
  filter: alpha(opacity=0.5);
  opacity: 0.5;
}

/*ZoomIn Hover-Mask Effect*/
.hover-mask a {
  display: block;
  position: relative;
  overflow: hidden;
}
.hover-mask img {
  width: 100%;
  height: auto;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.hover-mask:hover img {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -o-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
}
.hover-mask a h2 {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  margin-top: 0px;
  margin-bottom: 0px;
  height: 100%;
  width: 100%;
  padding: 45% 20px;
  text-align: center;
  background-color: rgba(0,0,0,0.4);
  -webkit-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  -ms-transition: all 0.5s linear;
  transition: all 0.5s linear;
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
}
.hover-mask:hover a h2 {
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
}
.hover-mask .glyphicon {
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -o-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  color: #fff;
  -webkit-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  -ms-transition: all 0.5s linear;
  transition: all 0.5s linear;
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
}
.hover-mask:hover .glyphicon {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  -ms-transition: all 0.5s linear;
  transition: all 0.5s linear;
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=1)";
  filter: alpha(opacity=1);
  opacity: 1;
}

/* Hover Blur Effect */
.text-white {
  color: #fff;
}
.hover-blur a {
  display: block;
  position: relative;
  overflow: hidden;
}
.hover-blur img {
  width: 100%;
  height: auto;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.hover-blur:hover img {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -o-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
  -webkit-filter: grayscale(0.6) blur(1px);
  filter: grayscale(0.6) blur(1px);
}
.hover-blur a h2 {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  margin-top: 0px;
  margin-bottom: 0px;
  height: 100%;
  width: 100%;
  padding: 45% 20px;
  text-align: center;
  background-color: rgba(0,0,0,0.5);
  /*background dotted*/
  background-image: -webkit-repeating-radial-gradient(center center, rgba(0,0,0,.8), rgba(0,0,0,.8) 1px, transparent 1px, transparent 100%);
  background-image: -moz-repeating-radial-gradient(center center, rgba(0,0,0,.8), rgba(0,0,0,.8) 1px, transparent 1px, transparent 100%);
  background-image: -ms-repeating-radial-gradient(center center, rgba(0,0,0,.8), rgba(0,0,0,.8) 1px, transparent 1px, transparent 100%);
  background-image: repeating-radial-gradient(center center, rgba(0,0,0,.8), rgba(0,0,0,.8) 1px, transparent 1px, transparent 100%);
  -webkit-background-size: 3px 3px;
  -moz-background-size: 3px 3px;
  background-size: 3px 3px;
  -webkit-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  -ms-transition: all 0.5s linear;
  transition: all 0.5s linear;
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
}
.hover-blur:hover a h2 {
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
}
.hover-blur .text-white {
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -o-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  -ms-transition: all 0.5s linear;
  transition: all 0.5s linear;
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
}
.hover-blur:hover .text-white {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  -ms-transition: all 0.5s linear;
  transition: all 0.5s linear;
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=1)";
  filter: alpha(opacity=1);
  opacity: 1;
}

/* Hover Zoomout */
.hover-zoomout a {
  display: block;
  position: relative;
  overflow: hidden;
}
.hover-zoomout img {
  width: 100%;
  height: auto;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -o-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
}
.hover-zoomout:hover img {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

/*Hover Blurout Effect*/
.hover-blurout a {
  display: block;
  position: relative;
  overflow: hidden;
}
.hover-blurout img {
  width: 100%;
  height: auto;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -o-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
}
.hover-blurout:hover img {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  /*Blur Filtr*/
  -webkit-filter: grayscale(0.6) blur(1px);
  -moz-filter: grayscale(0.6) blur(1px);
  -o-filter: grayscale(0.6) blur(1px);
  -ms-filter:progid:DXImageTransform.Microsoft.Blur(pixelRadius=2);
  filter: progid:DXImageTransform.Microsoft.blur(pixelradius=2);
  filter: grayscale(0.6) blur(2px);
}
.hover-blurout a h2 {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  margin-top: 0px;
  margin-bottom: 0px;
  height: 100%;
  width: 100%;
  padding: 45% 20px;
  text-align: center;
  background-color: rgba(0,0,0,0.4);
  /*background dotted*/
  background-image: -webkit-repeating-radial-gradient(center center, rgba(0,0,0,.8), rgba(0,0,0,.8) 1px, transparent 1px, transparent 100%);
  background-image: -moz-repeating-radial-gradient(center center, rgba(0,0,0,.8), rgba(0,0,0,.8) 1px, transparent 1px, transparent 100%);
  background-image: -ms-repeating-radial-gradient(center center, rgba(0,0,0,.8), rgba(0,0,0,.8) 1px, transparent 1px, transparent 100%);
  background-image: repeating-radial-gradient(center center, rgba(0,0,0,.8), rgba(0,0,0,.8) 1px, transparent 1px, transparent 100%);
  -webkit-background-size: 3px 3px;
  -moz-background-size: 3px 3px;
  background-size: 3px 3px;

  -webkit-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  -ms-transition: all 0.5s linear;
  transition: all 0.5s linear;
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
}
.hover-blurout:hover a h2 {
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
}
.hover-blurout .glyphicon {
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -o-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  color: #fff;
  -webkit-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  -ms-transition: all 0.5s linear;
  transition: all 0.5s linear;
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
}
.hover-blurout:hover .glyphicon {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  -ms-transition: all 0.5s linear;
  transition: all 0.5s linear;
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=1)";
  filter: alpha(opacity=1);
  opacity: 1;
}
/* ---------Hover Overlay text Effect--------- */

.overlay-item {
   display: block;
   position: relative;
   overflow: hidden;
   text-align: center;

}
.overlay-item .mask {
   display: block;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
   height: 100%;
}
.overlay-item img {
   display: block;
   width: 100%;
   height: auto;
   x-margin-right: auto;
   x-margin-left: auto;
}
.overlay-item h3 {
   text-transform: uppercase;
   text-align: center;
   position: relative;
   padding: 10px;
   margin: 0px 0px 20px 0px;
   display: block;
   background-color: #333;
   color: #fff;
}
.overlay-item p {
   text-align: left;
}
.overlay-item a.btn {
  margin: 10px 0;
}

.overlay-effect img {
   -webkit-transform: scaleY(1);
   -moz-transform: scaleY(1);
   -o-transform: scaleY(1);
   -ms-transform: scaleY(1);
   transform: scaleY(1);
   -webkit-transition: all 0.7s ease-in-out;
   -moz-transition: all 0.7s ease-in-out;
   -o-transition: all 0.7s ease-in-out;
   -ms-transition: all 0.7s ease-in-out;
   transition: all 0.7s ease-in-out;
}
.overlay-effect .mask {
   background-color: rgba(255, 255, 255, 0.3);
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
}
.overlay-effect h3 {
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -o-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
}
.overlay-effect p {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -o-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
}
.overlay-effect a.btn {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -o-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
}
.overlay-effect:hover img {
   -webkit-transform: scale(10);
   -moz-transform: scale(10);
   -o-transform: scale(10);
   -ms-transform: scale(10);
   transform: scale(10);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
}
.overlay-effect:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.overlay-effect:hover h3,.overlay-effect:hover p,.overlay-effect:hover a.btn {
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -o-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
/*Hover Fall Effect*/
.fall-item {
   width: 100%;
   height: auto;
   overflow: hidden;
   position: relative;
   text-align: center;
}
.fall-item .mask,.fall-item .content {
   width: 100%;
   height: 100%;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.fall-item img {
   display: block;
   position: relative;
   width: 100%;
   height: auto;
}
.fall-item h2 {
   text-transform: uppercase;
   color: #fff;
   text-align: center;
   position: relative;
   padding: 10px;
   background: rgba(0, 0, 0, 0.8);
   margin: 0 0 0 0;
}
.fall-item p {
   font-style: italic;
   position: relative;
   color: #fff;
   padding: 10px 20px 20px;
   text-align: center;
}
.fall-effect .mask {
   background-color: rgba(255, 255, 255, 0.7);
   top: -200px;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.3s ease-out 0.5s;
   -moz-transition: all 0.3s ease-out 0.5s;
   -o-transition: all 0.3s ease-out 0.5s;
   -ms-transition: all 0.3s ease-out 0.5s;
   transition: all 0.3s ease-out 0.5s;
}
.fall-effect h2 {
   -webkit-transform: translateY(-200px);
   -moz-transform: translateY(-200px);
   -o-transform: translateY(-200px);
   -ms-transform: translateY(-200px);
   transform: translateY(-200px);
   -webkit-transition: all 0.2s ease-in-out 0.1s;
   -moz-transition: all 0.2s ease-in-out 0.1s;
   -o-transition: all 0.2s ease-in-out 0.1s;
   -ms-transition: all 0.2s ease-in-out 0.1s;
   transition: all 0.2s ease-in-out 0.1s;
}
.fall-effect p {
   color: #333;
   -webkit-transform: translateY(-200px);
   -moz-transform: translateY(-200px);
   -o-transform: translateY(-200px);
   -ms-transform: translateY(-200px);
   transform: translateY(-200px);
   -webkit-transition: all 0.2s ease-in-out 0.2s;
   -moz-transition: all 0.2s ease-in-out 0.2s;
   -o-transition: all 0.2s ease-in-out 0.2s;
   -ms-transition: all 0.2s ease-in-out 0.2s;
   transition: all 0.2s ease-in-out 0.2s;
}
.fall-effect a.btn {
   -webkit-transform: translateY(-200px);
   -moz-transform: translateY(-200px);
   -o-transform: translateY(-200px);
   -ms-transform: translateY(-200px);
   transform: translateY(-200px);
   -webkit-transition: all 0.2s ease-in-out 0.3s;
   -moz-transition: all 0.2s ease-in-out 0.3s;
   -o-transition: all 0.2s ease-in-out 0.3s;
   -ms-transition: all 0.2s ease-in-out 0.3s;
   transition: all 0.2s ease-in-out 0.3s;
}
.fall-effect:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   top: 0px;
   -webkit-transition-delay: 0s;
   -moz-transition-delay: 0s;
   -o-transition-delay: 0s;
   -ms-transition-delay: 0s;
   transition-delay: 0s;

}
.fall-effect:hover h2 {
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
   -webkit-transition-delay: 0.4s;
   -moz-transition-delay: 0.4s;
   -o-transition-delay: 0.4s;
   -ms-transition-delay: 0.4s;
   transition-delay: 0.4s;
}
.fall-effect:hover p {
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
   -webkit-transition-delay: 0.2s;
   -moz-transition-delay: 0.2s;
   -o-transition-delay: 0.2s;
   -ms-transition-delay: 0.2s;
   transition-delay: 0.2s;
}
.fall-effect:hover a.btn {
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
   -webkit-transition-delay: 0s;
   -moz-transition-delay: 0s;
   -o-transition-delay: 0s;
   -ms-transition-delay: 0s;
   transition-delay: 0s;
}

/* social links */
.social-links {
  position: relative;
  transition: 0.5s;
  float: right;
  background-color: #f1f1f1;
  padding: 10px 10px;
  opacity: 0.8;
  border-radius: 30px;

}
.social-links ul{
  margin: 0px;
  padding: 0px;
  bottom: 10px;
} 
.social-links ul li {
  text-align: center;
  /* margin: 4px 0px; */
  list-style: none;
}
.social-links ul li a .fa{
  color: #fff;
  font-size: 22px;
  display: table;
  margin: 0 auto;
  padding-top: 15px;
  width: 50px;
  height: 35px;
}
.social-links ul li a i.fa-facebook{
  color: #475993;  
}
.social-links ul li a i.fa-twitter{
  color: #55acee;
}
.social-links ul li a i.fa-google-plus{
  color: #f73533;
}
.social-links ul li a i.fa-instagram{
  color: #e43367;
}
.social-links ul li a i.fa-youtube{
  color: #ed2124;
}
.social-links ul li a .fa:hover {
  opacity: 0.8;
}
.social-links ul li a {
  display: block;
  height: 100%;
  text-decoration: none;
}
.social-share {
  position: fixed;
  /* height: 300px; */
  top: 25%;
  right: 0px;
  /* z-index: 999; */
}
.share-btn.hide-links {
  transform: rotatey(180deg);
  position: relative;
  right: -50px;
}
.share-btn.show-links {
  transform: rotatey(0deg);
}
.share-btn {
  background-color: transparent;
  border: none;
  width: 50px;
  height: 50px;
  top: 4px;
  right: 3px;
  position: relative;
  transition: 0.7s all ease-in;
  color: #2196F3;
  font-size: 25px;
}
/* end */


/* ++++++++++++++++++++++++++ new code  +++++++++++++++++++++++++++ */



.btn-seemore{
  display: inline-block;
  background: transparent;
  padding: 6px 34px 6px 34px;
  color: white;
  border: 1px solid #fff;
  display: none;
}
.btn-seemore>a:hover{
  color: #f7941d !important;
  transition: 0.4s;
}

.card-sparepart:hover  .btn-seemore{
  display: inline-block;
  
}

.border-bottom-data-detail{
  border-bottom: 1px solid #7d7d7d;
  padding-bottom: 9px;
  margin-bottom: 24px;
}

.btn-contact-line{
  border: 1px solid #000;
  padding: 8px 15px 8px 15px;
}

.btn-contact-line:hover{
opacity: 0.4;
}


.btn-clothers-more{
  display: inline-block;
  background: transparent;
  padding: 6px 48px 6px 48px;
  color: white;
  border: 1px solid #fff;
  box-shadow: 1px 1px 3px #2f2f2f;
}

.btn-clothers-more>a{
  text-shadow: 1px 0px 2px #000;
  font-size: 24px;
}

.btn-clothers-more>a:hover{
  color: #000000 !important;
  transition: 0.4s;
}

.btn-clothers-more:hover{
  background: white;
}
.bi-cart4{
  font-size:28px !important ;
}




.btn-sub-clothers-more{
  display: none;
  background: transparent;
  padding: 6px 48px 6px 48px;
  color: white;
  border: 1px solid #fff;
  box-shadow: 1px 1px 3px #2f2f2f;
}

.btn-sub-clothers-more>a{
  text-shadow: 1px 0px 2px #000;
  font-size: 24px;
}

.btn-sub-clothers-more>a:hover{
  color: #000000 !important;
  transition: 0.4s;
}

.btn-sub-clothers-more:hover{
  background: white;
}

.frametopic-col{
  position: relative;
    top: 194px;
    right: 166px;
}
.frametopic{
  padding: 41px;
    background: #ffffffb3;
}
.menu-footer{
  font-size: 20px;
}


.hover-clothers-product:hover  .btn-sub-clothers-more{
  display: inline-block;
}

.hover-clothers-product:hover  #cover-product-clothers{
  filter: brightness(0.5);
}

.but-bot:hover{
  transform: scale(1.05);
}
.but-top:hover{
  transform: scale(1.05);
}

.but-circle{
  border-radius: 20px  !important;
   
}
.but-half-right{
  border-radius: 0 20px 20px 0px!important;
  width: 232px;
}
.but-half-left{
  border-radius: 20px 0px 2px 20px!important;
  width: 232px;
}
.custom-mar-detail-product{
  margin-bottom: 25px;
  padding: 22px;
}
.custom-size-but{
  width: 299%;
    text-align: left;
    margin-left: 4%;
}
.custom-size-but-menu{
  width: 202%;
    margin-left: 6% !important;
}
.invisible-button-left{
  position: relative;
  top: -20%;
  left: -29%;
  padding: 3% 8% !important;
  background-color: transparent !important;
  color: transparent !important;
  border: transparent !important;
}
.invisible-button-right{
  position: relative;
  top: -20%;
  left: -27%;
  padding: 3% 8% !important;
  background-color: transparent !important;
  color: transparent !important;
  border: transparent !important;
}
/* responsive Desktop */



/* จอ desktop 1920 * 1080  */
@media screen and (min-width: 1920px) and (min-height: 1080px) {
  #hero{
    height: 74vh !important;
  }
}


/* Notebook ใหญ่ */
/* @media only screen and (min-width: 1400px) and (max-width: 1700px) {
  #hero{
    height: 92vh !important;
    margin-top: 80px !important;
  }
}   */


 /* laptop โน๊ตบุ๊ค  ที่ใช้อยู่เครื่องใหญ่ */
 @media screen and (min-width: 1280px) and (max-width: 1919px) {
  /* แท็ก CSS ที่คุณต้องการปรับแต่งสำหรับจอโน๊ตบุ๊ตที่ใหญ่ อยู่ในนี้ */
  /* เขียนสไตล์ CSS ที่คุณต้องการให้แสดงผลบนจอโน๊ตบุ๊ตที่ใหญ่ในนี้ */
  /* #hero{
    height: 92vh !important;
    margin-top: 80px !important;
  } */
}


 /* laptop โน๊ตบุ๊ค  ที่ใช้อยู่เครื่องใหญ่ */
 @media screen and (min-width: 1280px) and (max-width: 1919px) {
  /* แท็ก CSS ที่คุณต้องการปรับแต่งสำหรับจอโน๊ตบุ๊ตที่ใหญ่ อยู่ในนี้ */
  /* เขียนสไตล์ CSS ที่คุณต้องการให้แสดงผลบนจอโน๊ตบุ๊ตที่ใหญ่ในนี้ */
  /* #hero{
    height: 90vh !important;
  } */
  .tab-content-pad {
    padding-bottom: 332px !important;
}
  
  #tung-motor-img{
    width: 66% !important;
  }
}

 /* laptop โน๊ตบุ๊ค  เล็ก */
 @media screen and (min-width: 1280px) and (max-width: 1440px) {
  /* แท็ก CSS ที่คุณต้องการปรับแต่งสำหรับจอโน๊ตบุ๊ตที่ใหญ่ อยู่ในนี้ */
  /* เขียนสไตล์ CSS ที่คุณต้องการให้แสดงผลบนจอโน๊ตบุ๊ตที่ใหญ่ในนี้ */
  .detail-mocy-one{
    font-size: 20px !important;
  }
  .detail-mocy-two{
    font-size: 18px !important;
  }
  .magin-promotion-custom{
    margin-left: 89px !important;
  }
}


/* ipad แนวตั้ง */
@media only screen and (min-device-width: 768px) and (max-device-width: 1259px) and (orientation: portrait) {
  .signature-about {
    font-size: 118px;
}
  .frametopic-col {
  position: unset;
}
.frametopic{
  padding: 0;
}
  .change-bg {
    background-position: left !important;
    background-size: 179% 100% !important;
}
  .head-pad {
    padding: 0px 2% !important;
}
  .icon-con-size {
    width: 58% !important;
}
  .new-but-menu {
    position: relative;
    left: 80%;
    width: 20% !important;
}
  .mar-mor {
    margin-left: 45px;
}
  .tab-content-pad {
    padding-bottom: 236px !important;
}
  .head-chasis{
    width: 40%;
    margin-left: 28%;
  }
  
  .justify-head-custom{
    justify-content: space-between !important;
  }
  #hero {
    height: 29vh !important;
    
  }
  .navbar-mobile a, .navbar-mobile a:focus{
    font-size: 20px !important;
  }
  #logo-img{
    width: 6vh !important;
  }
  .edit-ban-mortor{
    height: 398px !important;
  }
  .margin-custom-line-btn{
    margin-left: 63px !important;
  }
  .btn-clo-detail{
    margin-left: 67px !important;
  }
  #title-logo-royal-aboutpage{
    width: 40% !important;
  }
  .about-detail-one-sub{
    font-size: 18px !important;
  }
  .about-detail-one-all{
    line-height: 31px !important; 
  }
  .about-detail-two{
    line-height: 32px !important;
  }

#tung-motor-img{
  width: 53% !important;
}
#tung-motor-img-on{
  width: 52% !important;
}

.data-color-mocy{
  font-size: 14px !important;
}
.tabs .tabs-nav{
  width: auto !important;
}
.edit-ban-ar{
  height: 424px !important;
}
.card-width-ar-all{
  width: 80% !important;
}
.dsc-detail-ar{
  font-size: 20px !important;
}
.edit-ban-review{
  height: 500px !important;
}
.edit-ban-promotion{
  height: 500px !important;
}
.card-position-pro{
  bottom: 16rem !important;
}
.detail-promotion-page{
  font-size: 19px !important;
}
#logo-classic-word{
  width: 8% !important;
}

.activity-name-detail{
  text-align: center !important;
  padding-top: 16px !important;
}
.activity-detail-text>br{
  display: none !important;
}

.edit-ban-activity{
  height: 500px !important;
}




}


/* ipad แนวนอน */
@media only screen and (min-device-width: 768px) and (max-device-width: 1366px) and (orientation: landscape) {
  .signature-about {
    font-size: 118px;
}
  .signature {
    font-size: 38px;
}
  #header div{
    padding: 0 !important;
  }
  .form-check-label {
    font-size: 12px !important;
}
  #hero {
    height: 56vh;
    margin-top: 76px !important;
}
  .mar-mor {
    margin-left: 24px;
}
  .tab-content-pad {
    padding-bottom: 297px !important;
}
  /* start from pooh */
.text-pro-home h4{
font-size: 16px;
}
.edit-con-home{
  padding: 0 14px !important;
}
.text-pro-home p{
font-size: 12px;
}
.pic-home-pro{
  width: 87% !important;
}
.edit-height{
  height: 700px !important;
}

/* end pooh */
  .navbar a, .navbar a:focus{
    padding: 9px 1px 6px 0px !important;
    font-size: 14px !important;
  }
  #logo-img{
    width: 7vh !important;
  }
  
  .margin-custom-line-btn{
    margin-left: 14px !important;
  }
  .btn-clo-detail{
    margin-left: 0px !important;
  }
  .padmar-detail-page{
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .padding-detail-spare-custom{
    padding-left: 0px !important;
    padding-right: 0px !important; 
  }


  .line-height-data-address{
    line-height: 24px !important;
  }
  .text-data-address-big{
    font-size: 20px !important;
  }
  .text-data-address-small{
    font-size: 16px !important;
  }
  
  #tung-motor-img-on{
    width: 56% !important;
  }
  #tung-motor-img{
    width: 56% !important;
  }
  
  .detail-mocy-one{
    font-size: 18px !important;
  }
  .card-width-ar-all{
    width: 70% !important;
  }

  .carousel-inner-activity-img{
    width: 77% !important;
  }
  .bi-caret-left-fill{
    color: black !important;
  }
  .bi-caret-right-fill{
    color: black !important;
  }
  .box-justify-activity-slide{
    display: flex !important;
    justify-content: center !important;
  }
  .box-detail-activity{
    padding-top: 24px !important;
    text-align: center !important;
  }
  .activity-detail-text{
    padding-left: 0px !important;
  }
}




/* mobile แนวตั้ง */
 @media only screen and (max-width: 767px) and (orientation: portrait) {
  .size-regis{
    width: 350px;
  }
  .signature-about {
    font-size: 75px;
}
  .change-bg{
    background-position: left !important;
    background-size: 183% 100% !important;
  }
  .text-fade {
    font-size: 18px !important;
}
  .text-explan-about {
    font-size: 14px;
}
  .padding-aboutnew {
    padding: 46px 10px !important;
}
  .text-ser-detail {
    font-size: 11px !important;
    margin-top: 21px;
}
.signature {
  font-size: 34px;
}
.frametopic-col {
  position: unset !important;
}
.frametopic {
  padding: 16px;
}
.text-explan-about {
  font-size: 14px !important;
}
  .edit-none-banner {
    margin-top: 53px !important;
}
  .text-head-product-sub {
    font-size: 22px !important;
}
 
  .col-7th {
    width: 100% !important;  /* 100% / 7 */
  }
  .mar-mor {
    margin-left: 0 !important;
}
.tung-motor img{
  width: 66% !important;
}
  .tab-contents{
    padding-bottom: 332px !important;
  }

  .margin-custom-line-btn{
    margin-left: 49px !important;
  }

  .justify-head-custom{
    justify-content: space-between !important;
  }

  #logo-img{
    margin-left: 27% !important;
    width: 6vh !important;
  }
  .mobile-nav-toggle{
    /* padding-left: 63px !important; */
  }
  #hero{
    margin-top: 19% !important;
  }
  .dispaly-custom-contact{
    /* display:  inline !important; */
  }
  #logo-classic-word{
    width: 10% !important;
  }
  .bi-caret-left-square{
    font-size: 25px !important;
  }
  .bi-caret-right-square{
    font-size: 25px !important;
  }
  .bi-x-lg{
    font-size: 19px !important;
  }
  #close {
    top: 24% !important;
    right: 42px !important;
  }
  .cart{
    margin-right: 24px !important;
  }
  .bi-list{
    margin-right: 20px !important;
  }
  #cartCount{
    top: 6px !important;
  }
  .box-detail-pro-recommend{
    margin-top: 20px !important;
  }
  .edit-con-home{
    padding: 0 4% !important;
  }
  .detail-pro-recommend{
    font-size: 15px !important;
  }
  #hero {
    height: 21vh !important;
    margin-top: 66px !important;
  }
  #footer .copyright{
    padding-top: 12px !important;
  }
  #footer{
    padding: 0 0 16px 0 !important;
  }
  #title-logo-royal-aboutpage{
    width: 70% !important;
  }
  .tabs .tabs-nav{
    display: inline-block !important;
  }
  #tung-motor-img-on{
    width: 39% !important;
  }
  #tung-motor-img{
    width: 39% !important;
  }
  .data-color-mocy{
    font-size: 14px !important;
  }
 
  .edit-ban-ar{
    height: 300px !important;
  }
  .card-width-ar-all{
    width: 97% !important;
  }
  .tile-ar{
    font-size: 18px !important;
  }
  .title-detail-ar{
    text-align: center !important;
    font-size: 19px !important;
  }
  .dsc-detail-ar{
    font-size: 15px !important;
  }
  .edit-ban-review{
    height: 300px !important;
  }
  .padding-review-img{
    padding-left: 13px !important;
    padding-right: 13px !important;
  }
  .edit-ban-promotion{
    height: 300px !important;
  }
  .card-position-pro{
    bottom: 16rem !important;
  }
  .detail-promotion-page>br{
    display: none;
  }
  .detail-promotion-page{
    font-size: 18px !important;
  }
  .company-title{
    font-size: 17px !important;

  }
  .address-detail-contact{
    font-size: 15px !important;
  }
  #contactpage-img{
    width: 100% !important;
  }
  .edit-ban-activity{
    height: 300px !important;
  }
  .box-detail-activity{
    text-align: center !important;
    padding-top: 13px !important;
  }
  .box-activity{
    padding: 19px !important;
  }
  .activity-detail-text{
    padding-left: 0px !important;
    font-size: 14px !important;
  }
  .activity-detail-text>br{
    display: none !important;
  }
  .text-sub>br{
    display: none !important;
  }


 }

 
/* mobile แนวตั้ง */
@media only screen and (max-width: 375px) and (orientation: portrait) {
  #hero {
    height: 23vh !important;
    margin-top: 17% !important;   
  }
  .company-title{
    font-size: 16px !important;
  }
  .address-detail-contact{
    font-size: 14px !important;
  }
}

/* mobile แนวตั้ง */
@media only screen and (max-width: 360px) and (orientation: portrait) {
  #hero {
    height: 21vh !important;
    margin-top: 27% !important;
  }
}
 

 /* mobile แนวนอน จอใหญ่ */
 @media only screen and (min-device-width: 768px) and (max-device-width: 1023px) and (orientation: landscape) {
  .tab-content-pad {
    padding-bottom: 290px !important;
}
  .box-detail-pro-recommend{
    margin-top: 20px !important;
  }
  #hero {
    height: 90vh !important;
    margin-top: 57px !important;
  }
  .justify-head-custom {
    justify-content: space-between !important;
  }
  #logo-md{
    width: 18% !important;
  }
  .about-detail-one-sub{
    font-size: 19px !important;
  }
  .tabs .tabs-nav{
    width: auto !important;
  }
  
  .card-position-pro{
    bottom: 15rem !important;
  }
  .detail-promotion-page>br{
    display: none;
  }
  .detail-promotion-page{
    font-size: 18px !important;
  }

 }


 /* mobile จอเล็ก ตั้ง*/
@media only screen and (max-width: 360px) and (orientation: portrait){

}


/* mobile จอเล็ก นอน*/
@media only screen and (max-width: 767px) and (orientation: landscape){
  #hero {
    height: 85vh !important;
    margin-top: 61px !important;
  }
  .justify-head-custom {
    justify-content: space-between !important;
  }
  .edit-ban-mortor{
    height: 353px !important;
  }
  .edit-ban-spare{
    height: 352px !important;
  }
  .edit-ban-cloth{
    height: 423px !important;
  }
  .tabs .tabs-nav{
    width: auto !important;
  }
  #tung-motor-img-on{
    width: 56% !important;
  }
  .edit-ban-ar{
    height: 393px !important;
  }
  .card-width-ar-all{
    width: 97% !important;
  }
  .edit-ban-review{
    height: 400px !important;
  }
  .edit-ban-promotion{
    height: 400px !important;
  }
  .detail-promotion-page>br{
    display: none;
  }
  .detail-promotion-page{
    font-size: 18px !important;
  }
  .edit-ban-activity{
    height: 400px !important;
  }
  .box-detail-activity{
    text-align: center !important;
    padding-top: 13px !important;
  }
  .box-activity{
    padding: 19px !important;
  }
  .activity-detail-text{
    padding-left: 0px !important;
    font-size: 18px !important;
  }
  .activity-detail-text>br{
    display: none !important;
  }

}

/* text ถังสี */
.data-color-mocy{
  text-transform: uppercase;
}

/* @media only screen and (min-device-width: 768px) and (max-device-width: 843px) and (orientation: landscape){
  .tab-content-pad {
    padding-bottom: 200px !important;
}
} */

.strikethrough {
  text-decoration: line-through;
  color: rgb(0, 0, 0); /* ปรับสีตามที่ต้องการ */
}

.text-explan{
  font-size: 37px;
    font-weight: 400;
}
.text-ser-detail{
  font-size: 28px;
  display: flex !important;
  justify-content: center;
  font-weight: 200;
}
.ser-icons{
  width: 20%;
}
.text-explan-about {
  font-size: 23px;
  font-weight: 300;
}
.button-tocon{
  background: red;
    padding: 9px 55px;
    border-radius: 50px;
    text-decoration: none;
}


.head-first{
  color: black;
    font-size: 28px;
    /* padding-bottom: 10px; */
    font-weight: 300;
}
.head-sub{
  color: red !important;
    font-size: 55px;
    /* padding-bottom: 10px; */
    font-weight: 500;
}
.text-discount{
  color: #3C9670;
}
.promotion-text{
  margin-bottom: 0px;
    font-size: 17px;
    color: gray;
}
.text-fade{
  font-size: 39px;
    font-weight: 500;
    color: gray;
}
.product-name{
  margin-bottom: 0px;
    font-size: 20px;
    font-weight: 500;
}
.price-normal{
  margin-bottom: 0px;
    color: #3C9670;
    font-weight: 700;
}
.head-product-new{
  font-size: 28px;
    margin-left: -29px;
    margin-bottom: 22px;
    color: #3C9670;
}
.col-xl-5th {
  flex: 0 0 20%;
  max-width: 20%;
}
.pic-mascos{
  width: 15%;
}
.padd-about{
  padding: 0 21%;
}
.image-link {
  display: inline-block;
  width: 215px;
    height: 71px;
  background-image: url('https://img5.pic.in.th/file/secure-sv1/Button-1394fc05299dbd24b.png');
  background-size: cover;
  text-decoration: none;
}

.image-link:hover {
  background-image: url('https://img5.pic.in.th/file/secure-sv1/icon-42.png');
}
.head-sub-sec{
  color: white ;
  margin-left: -39%;
}
.head-sub-line{
  color: #FFBE00;
  font-size: 67px;
  border-bottom: 8px solid #FFBE00;
  margin: 0px 10%;
  padding: 2% 0%;
}
.test-des-head{
  font-size: 20px;
  color: white;
  font-weight: 500;
}
.test-des-sub{
  font-size: 20px;
  color: white;
  font-weight: 200;
}
.but-top{
  position: absolute;
    margin-top: 26%;
    transition: transform .2s;
  
}
.pic-a{
  position: relative;
    left: 6%;
}
.pic-b{
z-index: 100;
}
.pic-c{
  position: relative;
  right: 7%;
}
.text-product-nu{
  font-size: 24px;
    font-weight: 300;
    color: white;
}
.text-product-un{
  font-weight: 100;
}
.text-product-em{
  font-size: 33px;
    font-weight: 500;
}
.posi-text1{
  position: absolute;
    z-index: 1000;
    left: 5%;
    margin-top: -23%;
}
.posi-text2{
  position: absolute;
    z-index: 1000;
    right: 5%;
    margin-top: 31%;
}
.text-product-nu-bot{
  font-size: 28px;
  font-weight: 500;
  color: white;
  line-height: 1;
}
.text-product-un-bot{
  font-weight: 200;
  font-size: 18px;
}
.but-bot{
  position: absolute;
  margin-top: 27%;
  z-index: 100;
  transition: transform .2s;
}
.head-bot-cer{
  font-size: 100px;
  font-weight: 500;
}
.head-sub-cer{
  font-size: 2rem;
}
.head-sub-sec-cer{
  font-size: 20px;
  font-weight: 300;
}
.head-sub-line-cer{
  font-size: 2rem;
}
.icon-size-custom{
  width: 5%;
}
.text-contact-bot{
  font-size: 30px;
    padding: 47px 0;
}
.form-custom{
  width: 640px;
  height: 924px;
}
.head-ar{
  font-size: 27px;
  font-weight: 300;
  padding-top: 26px;
}
.head-ar-sub{
  font-size: 20px;
    font-weight: 200;
    padding-bottom: 15px;
}
.button-ar{
  padding: 7px 16px;
    cursor: pointer;
    border-radius: 16px;
    text-decoration: none;
    color: black;
    
}
.head-sub-con{
  padding-top: 57px;
    font-size: 46px;
    font-weight: 400;
    line-height: 71px;
}

.button-to-checkout{
  border-radius: 50px !important;
    background-color: #3C966F !important;
    padding: 10px 24px;
}
.logo-footcon{
  width: 29vh !important;
}


/* nb จอเล็ก*/
@media screen and (min-width: 1280px) and (max-width: 1365px) {


  .frametopic-col {
    top: 124px;
}
.frametopic {
  padding: 22px;
}
  .signature {
    font-size: 42px;
}
.text-explan-about {
  font-size: 12px;
}
  .file-label {
    padding: 2px 159px;
}
.button-buy-img{
  width: 67%;
}
  /* #hero {
    height: 71vh !important;
    margin-top: 126px !important;
} */
  .button-made-to-order-color {
    padding: 11px 37px !important;
}
.button-made-to-order-over {
  padding: 11px 33px !important;
}
  .amout-product {
    font-size: 24px;
}
  .form-check-label {
    font-size: 20px !important;
}
  .text-ser-detail {
    font-size: 17px;
}
.vdo-text {
  font-size: 31px;
}
.text-explan {
  font-size: 19px;
}
  .pic-edit-custom-top{
    width: 72%;
  }
  .head-first {
    font-size: 15px;
}
.head-sub {
  font-size: 40px;
}
.head-sub-line {
  font-size: 47px;
}
.product-box{
  width: 70%;
}
.but-top {
  margin-top: 44%;
  width: 26%;
}
.pic-a,.pic-b,.pic-c{
  width: 38%;
}
.but-bot {
  width: 26%;
  margin-top: 32%;
}
.coverflow {
  height: 552px;
}
.coverflow__image {
  width: 450px;
  height: 517px;
}
.head-bot-cer {
  font-size: 80px;
  font-weight: 500;
}
}
/* nb จอใหญ่*/
 @media screen and (min-width: 1440px) and (max-width: 1600px) {
  .signature {
    font-size: 35px;
}
  .text-explan-about {
    font-size: 13px;
  }
  
  .form-check-label {
    font-size: 23px !important;
}
  .text-ser-detail {
    font-size: 19px;
}
.vdo-text {
  font-size: 37px;
}
.text-explan {
  font-size: 20px;
}
  .pic-edit-custom-top{
    width: 72%;
  }
  .head-first {
    font-size: 18px;
}
.head-sub {
  font-size: 43px;
}
.head-sub-line {
  font-size: 47px;
}
.product-box{
  width: 70%;
}
.but-top {
  margin-top: 44%;
  width: 26%;
}
.pic-a,.pic-b,.pic-c{
  width: 38%;
}
.but-bot {
  width: 26%;
}
.coverflow {
  height: 552px;
}
.coverflow__image {
  width: 450px;
  height: 517px;
}
.head-bot-cer {
  font-size: 80px;
  font-weight: 500;
}
}
/*ipad ตั้ง */
@media only screen and (min-device-width: 768px) and (max-device-width: 1259px) and (orientation: portrait){
  .text-fade {
    font-size: 26px;
}
.signature {
  font-size: 33px;
}
  #hero{
    margin-top: 66px;
  }
  .text-head-product-sum {
    font-size: 28px;
}
  .modal-content {
    width: 154% !important;
    height: 40vh;
}
.modal-dialog{
  margin: 0 !important;
}
.fade{
  padding: 0 !important;
}
  .text-explan {
    font-size: 18px;
}
.text-ser-detail {
  font-size: 13px;
  margin-top: 36px;
  display: flex !important;
}
.image-link {
  width: 170px;
  height: 58px;
}
.vdo-text {
  font-size: 35px;
  font-weight: 600;
  margin-bottom: 29px;
  margin-top: 24px;
}
  .head-first {
    font-size: 27px;
}
.head-sub {
  font-size: 25px;
}
.head-sub-line {
  font-size: 32px;
  border-bottom: 5px solid #FFBE00;
}
.test-des-sub {
  font-size: 8px;
}
.test-des-head {
  font-size: 15px;
}
.but-top {
  margin-top: 12%;
  width: 38%;
  left: 60%;
}
.pic-a,.pic-b,.pic-c{
  width: 39%;
}
.text-product-nu {
  font-size: 16px;
}
.text-product-em {
  font-size: 24px;
  font-weight: 500;
}
.text-product-nu-bot {
  font-size: 16px;
}
.text-product-un-bot {
  font-weight: 200;
  font-size: 10px;
}
.but-bot {
  width: 26%;
        left: 41%;
        margin-top: 0%;
}
.coverflow__image[data-coverflow-index] {
  left: 66%;
}
.coverflow__image {
  width: 288px;
  height: 321px;
}
.coverflow {
  height: 390px;
}
.head-sub-cer {
  font-size: 1rem;
}
.head-bot-cer {
  font-size: 41px;
}
.head-sub-sec-cer {
  font-size: 20px;
}
.head-sub-line-cer{
  font-size: 20px;
}
.head-sub-sec-cer {
  font-size: 14px;
}
.icon-size-custom {
  width: 11%;
}
.logo-size-foot{
  width: 41%;
}
.menu-footer{
  font-size: 56px;
}
.menu-footer-small {
  font-size: 36px;
  display: block;
  margin-bottom: 3%;
}
.icon-foot-size {
  width: 10% !important;
}


}
/*ipad นอน*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1259px) and (orientation: landscape){
  .rate-price {
    font-size: 22px !important;
}
.button-made-to-order-color{
  padding: 10px 21px !important;
}
.button-made-to-order-over{
  padding: 10px 17px !important;
}
.size-section-made{
  width: 67vh !important;
}
  .rate-price {
    font-size: 22px;
}
.amout-product {
  font-size: 19px;
}
  .head-ser-bo{
    font-size: 17px;
  }
  .text-ser-detail {
    font-size: 14px;
}
.image-link {
  width: 170px;
  height: 58px;
}
.vdo-text {
  font-size: 24px;
}
.menu-footer-small {
  font-size: 11px;
}
.foot-poli {
  font-size: 11px;
}
.text-explan {
  font-size: 16px;
}
.text-explan-about {
  font-size: 15px;
}
  .head-ar {
    font-size: 13px;
}
  .head-first {
    font-size: 19px;
}
  .head-sub-line {
    font-size: 48px;
}
.head-sub {
  font-size: 26px;
}
.frametopic-col {
  top: 71px;
}
.head-sub-line {
  font-size: 34px;
}
.test-des-sub {
  font-size: 11px;
}
.test-des-head {
  font-size: 11px;
}
.product-box{
  width: 43%;
}
.but-top {
  margin-top: 1%;
        width: 29%;
        left: 63%;
}
.pic-a,.pic-b,.pic-c{
  width: 39%;
}
.posi-text2 {
  margin-top: 35%;
}
.but-bot {
  width: 24%;
  left: 42%;
  margin-top: 0%;
}

.coverflow__image[data-coverflow-index] {
  left: 64%;
}
.coverflow__image {
  width: 327px;
  height: 393px;
}
.coverflow {
  height: 424px;
}
.head-bot-cer {
  font-size: 57px;
}
.head-sub-cer {
  font-size: 1rem;
}
.head-sub-line-cer {
  font-size: 1rem;
}
}
/* mobile จอใหญ่ ip12 ตั้ง*/
@media only screen and (max-width: 767px) and (orientation: portrait){
  .head-pad {
    padding: 0 0% !important;
}
  .menu-con {
    font-size: 42px !important;
}
.menu-con-small {
  font-size: 16px !important;
}
.icon-con-size {
  width: 65%  !important;
}
  .navbar-mobile button{
    display: none;
  }
  .frame {
    width: 100%;
    height: 12vh !important;
    margin-top: 0px !important;
}
  .card-title{
    font-size: 13px;
  }
  .button-buy-img{
    width: 100%;
  }
  .size-section-made{
    width: 50vh !important;
  }
  .button-made-to-order-color{
    padding: 5px 14px !important;
  }
  .button-made-to-order-over{
    padding: 7px 12px !important;
        font-size: 15px !important;
  }
  .file-label {
    padding: 2px 136px;
}
.button-upload{
  align-items: center;
    display: grid;
}
.file-label {
  padding: 2px 112px !important;
  margin-bottom: 10px;
}
  .rate-price {
    font-size: 12px !important;
}
.bar-amout-product {
  font-size: 20px !important;
}
.text-head-product-sum {
  font-size: 28px !important;
}
  .head-ar {
    font-size: 15px;
}
.submenu {
  left: 62% !important;
}
.head-ar-sub {
  font-size: 10px;
}
  .form-custom {
    width: 371px;
    height: 924px;
}
  .head-first {
    font-size: 20px;
}
.head-sub {
  font-size: 20px;
}
.vdo-text {
  font-size: 18px;
}
.botton-to-some {
  padding: 9px 23px;
  font-size: 17px;
}
.vdo-text {
  font-size: 19px;
  margin-bottom: 5px;
  margin-top: 13px;
}
.menu-footer-small {
  display: block;
}
.icon-foot-size {
  width: 16% !important;
}
.logo-size-foot{
  width: 37%;
}
.foot-poli {
  font-size: 9px;
}
.head-sub-line {
  font-size: 12px;
  border-bottom: 3px solid #FFBE00;
}
.pic-a,.pic-b,.pic-c{
  width: 85%;
}
.text-product-nu {
  font-size: 7px;
}
.text-product-em {
  font-size: 13px;
}
.text-product-nu-bot {
  font-size: 7px;
}
.text-product-un-bot {
  font-size: 4px;
}
.but-bot {
  width: 43%;
  margin-top: 9%;
  left: 35%;
}
.but-top {
  width: 43%;
        margin-top: 13%;
        left: 35%;
}
.test-des-sub {
  font-size: 10px;
}
.test-des-sub {
  font-size: 10px;
}
.product-box{
  width: 55%;
}
.coverflow__image[data-coverflow-index] {
  left: 68%;
}
.coverflow__image {
  width: 290px;
  height: 410px;
}
.coverflow {
  height: 488px;
}
.head-bot-cer {
  font-size: 38px;
}
.head-sub-cer {
  font-size: 16px;
}
.head-sub-sec-cer {
  font-size: 16px;
}
.head-sub-line-cer {
  font-size: 1rem;
}
.cer-pic{
  width: 90% !important;
}
.text-contact-bot {
  font-size: 13px;
  padding: 9px 0;
}
.icon-size-custom {
  width: 12%;
}
.head-sub-con {
  padding-top: 12px;
  font-size: 21px;
  font-weight: 400;
  line-height: 50px;
}
.text-explan {
  font-size: 18px;
}
.head-ser-box{
  font-size: 17px;
}
.col-xl-5th{
  flex: 0 0 auto;
    width: 50% !important;
}
.image-link {
  width: 193px;
  height: 68px;
}
.head-product-new {
  font-size: 20px;
  margin-left: -6px;
}
.product-name {
  font-size: 12px;
}
.price-normal {
  font-size: 13px;
}
.text-discount{
  font-size: 11px;
}
}
/* mobile จอใหญ่ ip12 นอน*/
 @media only screen and (min-device-width: 768px) and (max-device-width: 1023px) and (orientation: landscape){

}
/* ip14max */
@media only screen and (min-device-width: 430px) and (max-device-width: 767px) and (orientation: portrait){
}
/* mobile จอเล็ก ตั้ง*/
@media only screen and (max-width: 360px) and (orientation: portrait){

}
/* mobile จอเล็ก นอน*/
@media only screen and (max-width: 767px) and (orientation: landscape){

} 

.icon-foot-size{
  width: 82%;
}
.mas-foot-size{
  position: relative;
    top: -18%;
    left: 61%;
    transform: rotate(-6deg);
}

/* gallerynew */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.gallerynew {
  column-count: 4;
  --webkit-column-count: 4;
  --moz-column-count: 4;
  gap: 1rem;
  padding: 4rem;
}

.image img {
  height: auto;
  width: 100%;
}
.bi-cart{
  font-size: 25px;
}
.buttoncart{
  background-color: transparent !important;
    border: none !important;
}

/* Responsive-ness for different screen-sizes */
@media screen and (max-width: 810px) {
  .gallerynew {
    column-count: 3;
    --webkit-column-count: 3;
    --moz-column-count: 3;
  }
}

@media screen and (max-width: 500px) {
  .gallerynew {
    column-count: 2;
    --webkit-column-count: 2;
    --moz-column-count: 2;
  }
}

@media screen and (max-width: 400px) {
  .gallerynew {
    column-count: 3;
    --webkit-column-count: 1;
    --moz-column-count: 1;
    padding: 10px;
  }
}


.filter-head{
  font-size: 37px;
}
.form-check-input{
  font-size: 22px;
    margin-top: 11px;
}
.form-check-label{
  font-size: 27px;
}
.filter-button{
  border: none;
    background-color: transparent;
}
.bi-funnel{
  font-size: 25px;
}
.text-head-product-detail{
  text-transform: none;
  font-weight: 500;
  margin-bottom: 29px;
}
.text-head-product-name{
  font-size: 40px;
    color: #3C9670;
    font-weight: 700;
}
.rate-price {
  list-style: none;
    text-align: end;
    font-size: 29px;
    font-weight: 300;
}
.bar-amout-product{
  width: 22vh !important;
  height: 5vh;
  font-size: 32px !important;
}
.amout-product{
  font-size: 27px;
}
.text-head-product-sub{
  font-size: 40px;
    color: black;
    font-weight: 500;
}
.text-head-product-sum{
  font-size: 40px;
    color: black;
    font-weight: 500;
    margin-bottom: 6%;
}
.box-detail-product{
  margin-top: 55px !important;
  margin-bottom: 23px !important;
}
.amount-pack,.amount-currency{
  float: right;
}
.text-head-product-sub-detail{
  font-size: 23px;
  font-weight: 300;
}
.madeto-order-right,.madeto-order-rightt{
  float: right !important;
    font-weight: 400;
}
.madeto-order-left,.madeto-order-right,.madeto-order-rightt{
  font-size: 23px;
}
.button-made-to-order-color{
  border-radius: 50px !important;
    padding: 11px 44px ;
    border: 1px solid #c2c2c2 !important;
    color: black !important;
    margin: 0 12px;
}
.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
  background-color: white !important;
  border: 3px solid #3C9670 !important;
}
.pic-print{
  width: 87px;
    height: 77px;
}
.button-made-to-order-over{
  border-radius: 50px !important;
  padding: 11px 40px ;
    border: 1px solid #c2c2c2 !important;
    color: black !important;
    margin: 0 12px;
}

/*  */
.file-input {
  display: none; /* ซ่อนปุ่ม input แบบดั้งเดิม */
}

.file-label {
  display: inline-block;
    /* width: 50px; */
    /* height: 50px; */
    border-radius: 50px;
    background-color: #ffff;
    color: #000000;
    text-align: center;
    line-height: 50px;
    font-size: 14px;
    cursor: pointer;
    padding: 2px 205px;
    border: 1px solid #c2c2c2 !important;
}

.file-label:hover {
  border: 3px solid #3C9670 !important;
}

.submit-button {
  padding: 10px 20px;
  border-radius: 25px;
  border: none;
  background-color: #3C9670;
  color: white;
  font-size: 16px;
  cursor: pointer;
}

.submit-button:hover {
  border: 3px solid #3C9670 !important;
}
/* ipad pro12.9 */
@media only screen and (min-device-width: 1366px) and (max-device-width: 1441px) and (orientation: landscape) {
  /* #hero {
      height: 45vh !important;
      margin-top: 161px ;
  } */
  #header div{
    padding: 0 !important;
  }
}
@media only screen and (min-device-width: 1023px) and (max-device-width: 1335px) and (orientation: landscape) {
  /* #hero {
      height: 45vh !important;
      margin-top: 161px ;
  } */
  #header div{
    padding: 0 !important;
  }
}
@media only screen and (min-device-width: 769px) and (max-device-width: 1025px) and (orientation:portrait ) {
  .navbar a, .navbar a:focus {
    padding: 8px 1px 5px 0px;
    font-size: 11px;
}
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1366px) and (orientation: landscape) {
  /* #hero {
      height: 55vh !important;
      margin-top: 76px !important;
  } */
  #header div{
    padding: 0 !important;
  }
}

.but-buy{
  border: none !important;
}
.btn:first-child:hover, :not(.btn-check)+.btn:hover {
  background-color: transparent;
}
.menu-con{
  font-size: 66px;
}
.menu-con-small{
  font-size: 43px;
}
.icon-con-size{
  width: 30%;
}
.card-title {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.edit-none-banner{
  margin-top: 150px;
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1259px) and (orientation: portrait) {
  #hero {
      height: 31vh !important;
  }
}

.swiper {
  width: 100%;
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.price-rate {
  border-bottom: 1px solid #dee2e6; /* เส้นแบ่งใต้แต่ละแถว */
  padding: 10px 0; /* เพิ่มช่องว่างด้านบนและล่าง */
  display: flex;
  align-items: center;
}

.price-rate .col-6 {
  border-right: 1px solid #dee2e6; /* เส้นแบ่งกลางระหว่างคอลัมน์ */
  padding-right: 10px;
}

.price-rate .col-6:last-child {
  border-right: none; /* ไม่แสดงเส้นแบ่งขวาในคอลัมน์สุดท้าย */
  padding-left: 10px;
}

.price-rate.header {
  border-bottom: 2px solid #000; /* เส้นแบ่งหนาสำหรับหัวข้อ */
  font-weight: bold;
}

.rate-price {
  margin: 0;
}

.text-end {
  text-align: right;
}
.icon-branch{
  width: 40%;
}

/*  */
.card {
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.card:hover {
  transform: scale(1.05); /* ขยายการ์ดเมื่อ hover */
}

.card-img-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.6);
  transition: opacity 0.3s ease; /* อนิเมชั่นซ้อนข้อความ */
  color: white;
  opacity: 0; /* แสดงข้อความโดยปกติ */
}

.card:hover .card-img-overlay {
  opacity: 1; /* ซ้อนข้อความเมื่อ hover */
}

.card-hover-btn {
  display: none;
  position: absolute;
  bottom: 10px;
  left: 50%;
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity 0.3s ease, bottom 0.3s ease; /* อนิเมชั่นปุ่ม */
}

.card:hover .card-hover-btn {
  display: block;
  opacity: 1;
  bottom: 20px; /* ย้ายปุ่มขึ้นเล็กน้อย */
}
.head-card-our{
  margin-top: 63px;
    font-size: 41px;
    font-weight: 700;
}
.button-tocon-card{
  background: #b3b3b3b0;
  padding: 5px 42px;
  border-radius: 50px;
  text-decoration: none;
  font-size: 17px;
  color: white;
  margin-bottom: 23px;
}

/* swiper */


/*----------------------------*\
      Coverflow Album Slider 
\*-----------------------------*/
.coverflow {
  position: relative;
  height: 535px;
  padding: 30px;
  /* overflow: hidden; */
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

.coverflow__image {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 400px;
  height: 490px;
  border-radius: 51px;
  -webkit-transition: all 350ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 350ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

.coverflow__image[data-coverflow-index] {
  position: absolute;
  left: 50%;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

.coverflow__image[data-coverflow-index]:before {
  content: " ";
  z-index: 1;
  position: absolute;
  top: 300px;
  width: 100%;
  height: 10%;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
}

.coverflow[data-coverflow-position="1"] .coverflow__image[data-coverflow-index="1"] {
  z-index: 10;
  -webkit-transform: translateX(-200px);
  transform: translateX(-200px);
  box-shadow: 0 1px 25px 10px rgba(0, 0, 0, 0.6);
}

.coverflow[data-coverflow-position="1"] .coverflow__image[data-coverflow-index="2"] {
  z-index: 9;
  -webkit-transform: translateX(10px) scale(0.65) rotateY(-45deg);
  transform: translateX(10px) scale(0.65) rotateY(-45deg);
  opacity: 0.5;
}

.coverflow[data-coverflow-position="1"] .coverflow__image[data-coverflow-index="3"] {
  z-index: 8;
  -webkit-transform: translateX(100px) scale(0.5) rotateY(-45deg);
  transform: translateX(100px) scale(0.5) rotateY(-45deg);
  opacity: 0.33333;
}

.coverflow[data-coverflow-position="1"] .coverflow__image[data-coverflow-index="4"] {
  z-index: 7;
  -webkit-transform: translateX(190px) scale(0.35) rotateY(-45deg);
  transform: translateX(190px) scale(0.35) rotateY(-45deg);
  opacity: 0.16667;
}

.coverflow[data-coverflow-position="1"] .coverflow__image[data-coverflow-index="5"] {
  z-index: 6;
  -webkit-transform: translateX(280px) scale(0.2) rotateY(-45deg);
  transform: translateX(280px) scale(0.2) rotateY(-45deg);
  opacity: 0;
}

.coverflow[data-coverflow-position="1"] .coverflow__image[data-coverflow-index="6"] {
  z-index: 5;
  -webkit-transform: translateX(370px) scale(0.05) rotateY(-45deg);
  transform: translateX(370px) scale(0.05) rotateY(-45deg);
  opacity: -0.16667;
}

.coverflow[data-coverflow-position="1"] .coverflow__image[data-coverflow-index="7"] {
  z-index: 4;
  -webkit-transform: translateX(460px) scale(-0.1) rotateY(-45deg);
  transform: translateX(460px) scale(-0.1) rotateY(-45deg);
  opacity: -0.33333;
}

.coverflow[data-coverflow-position="1"] .coverflow__image[data-coverflow-index="8"] {
  z-index: 3;
  -webkit-transform: translateX(550px) scale(-0.25) rotateY(-45deg);
  transform: translateX(550px) scale(-0.25) rotateY(-45deg);
  opacity: -0.5;
}

.coverflow[data-coverflow-position="1"] .coverflow__image[data-coverflow-index="9"] {
  z-index: 2;
  -webkit-transform: translateX(640px) scale(-0.4) rotateY(-45deg);
  transform: translateX(640px) scale(-0.4) rotateY(-45deg);
  opacity: -0.66667;
}

.coverflow[data-coverflow-position="1"] .coverflow__image[data-coverflow-index="10"] {
  z-index: 1;
  -webkit-transform: translateX(730px) scale(-0.55) rotateY(-45deg);
  transform: translateX(730px) scale(-0.55) rotateY(-45deg);
  opacity: -0.83333;
}

.coverflow[data-coverflow-position="2"] .coverflow__image[data-coverflow-index="1"] {
  z-index: 9;
  -webkit-transform: translateX(-410px) scale(0.65) rotateY(45deg);
  transform: translateX(-410px) scale(0.65) rotateY(45deg);
  opacity: 0.5;
}

.coverflow[data-coverflow-position="2"] .coverflow__image[data-coverflow-index="2"] {
  z-index: 10;
  -webkit-transform: translateX(-200px);
  transform: translateX(-200px);
  box-shadow: 0 1px 25px 10px rgba(0, 0, 0, 0.6);
}

.coverflow[data-coverflow-position="2"] .coverflow__image[data-coverflow-index="3"] {
  z-index: 9;
  -webkit-transform: translateX(10px) scale(0.65) rotateY(-45deg);
  transform: translateX(10px) scale(0.65) rotateY(-45deg);
  opacity: 0.5;
}

.coverflow[data-coverflow-position="2"] .coverflow__image[data-coverflow-index="4"] {
  z-index: 8;
  -webkit-transform: translateX(100px) scale(0.5) rotateY(-45deg);
  transform: translateX(100px) scale(0.5) rotateY(-45deg);
  opacity: 0.33333;
}

.coverflow[data-coverflow-position="2"] .coverflow__image[data-coverflow-index="5"] {
  z-index: 7;
  -webkit-transform: translateX(190px) scale(0.35) rotateY(-45deg);
  transform: translateX(190px) scale(0.35) rotateY(-45deg);
  opacity: 0.16667;
}

.coverflow[data-coverflow-position="2"] .coverflow__image[data-coverflow-index="6"] {
  z-index: 6;
  -webkit-transform: translateX(280px) scale(0.2) rotateY(-45deg);
  transform: translateX(280px) scale(0.2) rotateY(-45deg);
  opacity: 0;
}

.coverflow[data-coverflow-position="2"] .coverflow__image[data-coverflow-index="7"] {
  z-index: 5;
  -webkit-transform: translateX(370px) scale(0.05) rotateY(-45deg);
  transform: translateX(370px) scale(0.05) rotateY(-45deg);
  opacity: -0.16667;
}

.coverflow[data-coverflow-position="2"] .coverflow__image[data-coverflow-index="8"] {
  z-index: 4;
  -webkit-transform: translateX(460px) scale(-0.1) rotateY(-45deg);
  transform: translateX(460px) scale(-0.1) rotateY(-45deg);
  opacity: -0.33333;
}

.coverflow[data-coverflow-position="2"] .coverflow__image[data-coverflow-index="9"] {
  z-index: 3;
  -webkit-transform: translateX(550px) scale(-0.25) rotateY(-45deg);
  transform: translateX(550px) scale(-0.25) rotateY(-45deg);
  opacity: -0.5;
}

.coverflow[data-coverflow-position="2"] .coverflow__image[data-coverflow-index="10"] {
  z-index: 2;
  -webkit-transform: translateX(640px) scale(-0.4) rotateY(-45deg);
  transform: translateX(640px) scale(-0.4) rotateY(-45deg);
  opacity: -0.66667;
}

.coverflow[data-coverflow-position="3"] .coverflow__image[data-coverflow-index="1"] {
  z-index: 8;
  -webkit-transform: translateX(-500px) scale(0.5) rotateY(45deg);
  transform: translateX(-500px) scale(0.5) rotateY(45deg);
  opacity: 0.33333;
}

.coverflow[data-coverflow-position="3"] .coverflow__image[data-coverflow-index="2"] {
  z-index: 9;
  -webkit-transform: translateX(-410px) scale(0.65) rotateY(45deg);
  transform: translateX(-410px) scale(0.65) rotateY(45deg);
  opacity: 0.5;
}

.coverflow[data-coverflow-position="3"] .coverflow__image[data-coverflow-index="3"] {
  z-index: 10;
  -webkit-transform: translateX(-200px);
  transform: translateX(-200px);
  box-shadow: 0 1px 25px 10px rgba(0, 0, 0, 0.6);
}

.coverflow[data-coverflow-position="3"] .coverflow__image[data-coverflow-index="4"] {
  z-index: 9;
  -webkit-transform: translateX(10px) scale(0.65) rotateY(-45deg);
  transform: translateX(10px) scale(0.65) rotateY(-45deg);
  opacity: 0.5;
}

.coverflow[data-coverflow-position="3"] .coverflow__image[data-coverflow-index="5"] {
  z-index: 8;
  -webkit-transform: translateX(100px) scale(0.5) rotateY(-45deg);
  transform: translateX(100px) scale(0.5) rotateY(-45deg);
  opacity: 0.33333;
}

.coverflow[data-coverflow-position="3"] .coverflow__image[data-coverflow-index="6"] {
  z-index: 7;
  -webkit-transform: translateX(190px) scale(0.35) rotateY(-45deg);
  transform: translateX(190px) scale(0.35) rotateY(-45deg);
  opacity: 0.16667;
}

.coverflow[data-coverflow-position="3"] .coverflow__image[data-coverflow-index="7"] {
  z-index: 6;
  -webkit-transform: translateX(280px) scale(0.2) rotateY(-45deg);
  transform: translateX(280px) scale(0.2) rotateY(-45deg);
  opacity: 0;
}

.coverflow[data-coverflow-position="3"] .coverflow__image[data-coverflow-index="8"] {
  z-index: 5;
  -webkit-transform: translateX(370px) scale(0.05) rotateY(-45deg);
  transform: translateX(370px) scale(0.05) rotateY(-45deg);
  opacity: -0.16667;
}

.coverflow[data-coverflow-position="3"] .coverflow__image[data-coverflow-index="9"] {
  z-index: 4;
  -webkit-transform: translateX(460px) scale(-0.1) rotateY(-45deg);
  transform: translateX(460px) scale(-0.1) rotateY(-45deg);
  opacity: -0.33333;
}

.coverflow[data-coverflow-position="3"] .coverflow__image[data-coverflow-index="10"] {
  z-index: 3;
  -webkit-transform: translateX(550px) scale(-0.25) rotateY(-45deg);
  transform: translateX(550px) scale(-0.25) rotateY(-45deg);
  opacity: -0.5;
}

.coverflow[data-coverflow-position="4"] .coverflow__image[data-coverflow-index="1"] {
  z-index: 7;
  -webkit-transform: translateX(-590px) scale(0.35) rotateY(45deg);
  transform: translateX(-590px) scale(0.35) rotateY(45deg);
  opacity: 0.16667;
}

.coverflow[data-coverflow-position="4"] .coverflow__image[data-coverflow-index="2"] {
  z-index: 8;
  -webkit-transform: translateX(-500px) scale(0.5) rotateY(45deg);
  transform: translateX(-500px) scale(0.5) rotateY(45deg);
  opacity: 0.33333;
}

.coverflow[data-coverflow-position="4"] .coverflow__image[data-coverflow-index="3"] {
  z-index: 9;
  -webkit-transform: translateX(-410px) scale(0.65) rotateY(45deg);
  transform: translateX(-410px) scale(0.65) rotateY(45deg);
  opacity: 0.5;
}

.coverflow[data-coverflow-position="4"] .coverflow__image[data-coverflow-index="4"] {
  z-index: 10;
  -webkit-transform: translateX(-200px);
  transform: translateX(-200px);
  box-shadow: 0 1px 27px 3px rgba(0, 0, 0, 0.6);
}

.coverflow[data-coverflow-position="4"] .coverflow__image[data-coverflow-index="5"] {
  z-index: 9;
  -webkit-transform: translateX(10px) scale(0.65) rotateY(-45deg);
  transform: translateX(10px) scale(0.65) rotateY(-45deg);
  opacity: 0.5;
}

.coverflow[data-coverflow-position="4"] .coverflow__image[data-coverflow-index="6"] {
  z-index: 8;
  -webkit-transform: translateX(100px) scale(0.5) rotateY(-45deg);
  transform: translateX(100px) scale(0.5) rotateY(-45deg);
  opacity: 0.33333;
}

.coverflow[data-coverflow-position="4"] .coverflow__image[data-coverflow-index="7"] {
  z-index: 7;
  -webkit-transform: translateX(190px) scale(0.35) rotateY(-45deg);
  transform: translateX(190px) scale(0.35) rotateY(-45deg);
  opacity: 0.16667;
}

.coverflow[data-coverflow-position="4"] .coverflow__image[data-coverflow-index="8"] {
  z-index: 6;
  -webkit-transform: translateX(280px) scale(0.2) rotateY(-45deg);
  transform: translateX(280px) scale(0.2) rotateY(-45deg);
  opacity: 0;
}

.coverflow[data-coverflow-position="4"] .coverflow__image[data-coverflow-index="9"] {
  z-index: 5;
  -webkit-transform: translateX(370px) scale(0.05) rotateY(-45deg);
  transform: translateX(370px) scale(0.05) rotateY(-45deg);
  opacity: -0.16667;
}

.coverflow[data-coverflow-position="4"] .coverflow__image[data-coverflow-index="10"] {
  z-index: 4;
  -webkit-transform: translateX(460px) scale(-0.1) rotateY(-45deg);
  transform: translateX(460px) scale(-0.1) rotateY(-45deg);
  opacity: -0.33333;
}

.coverflow[data-coverflow-position="5"] .coverflow__image[data-coverflow-index="1"] {
  z-index: 6;
  -webkit-transform: translateX(-680px) scale(0.2) rotateY(45deg);
  transform: translateX(-680px) scale(0.2) rotateY(45deg);
  opacity: 0;
}

.coverflow[data-coverflow-position="5"] .coverflow__image[data-coverflow-index="2"] {
  z-index: 7;
  -webkit-transform: translateX(-590px) scale(0.35) rotateY(45deg);
  transform: translateX(-590px) scale(0.35) rotateY(45deg);
  opacity: 0.16667;
}

.coverflow[data-coverflow-position="5"] .coverflow__image[data-coverflow-index="3"] {
  z-index: 8;
  -webkit-transform: translateX(-500px) scale(0.5) rotateY(45deg);
  transform: translateX(-500px) scale(0.5) rotateY(45deg);
  opacity: 0.33333;
}

.coverflow[data-coverflow-position="5"] .coverflow__image[data-coverflow-index="4"] {
  z-index: 9;
  -webkit-transform: translateX(-410px) scale(0.65) rotateY(45deg);
  transform: translateX(-410px) scale(0.65) rotateY(45deg);
  opacity: 0.5;
}

.coverflow[data-coverflow-position="5"] .coverflow__image[data-coverflow-index="5"] {
  z-index: 10;
  -webkit-transform: translateX(-200px);
  transform: translateX(-200px);
  box-shadow: 0 1px 25px 10px rgba(0, 0, 0, 0.6);
}

.coverflow[data-coverflow-position="5"] .coverflow__image[data-coverflow-index="6"] {
  z-index: 9;
  -webkit-transform: translateX(10px) scale(0.65) rotateY(-45deg);
  transform: translateX(10px) scale(0.65) rotateY(-45deg);
  opacity: 0.5;
}

.coverflow[data-coverflow-position="5"] .coverflow__image[data-coverflow-index="7"] {
  z-index: 8;
  -webkit-transform: translateX(100px) scale(0.5) rotateY(-45deg);
  transform: translateX(100px) scale(0.5) rotateY(-45deg);
  opacity: 0.33333;
}

.coverflow[data-coverflow-position="5"] .coverflow__image[data-coverflow-index="8"] {
  z-index: 7;
  -webkit-transform: translateX(190px) scale(0.35) rotateY(-45deg);
  transform: translateX(190px) scale(0.35) rotateY(-45deg);
  opacity: 0.16667;
}

.coverflow[data-coverflow-position="5"] .coverflow__image[data-coverflow-index="9"] {
  z-index: 6;
  -webkit-transform: translateX(280px) scale(0.2) rotateY(-45deg);
  transform: translateX(280px) scale(0.2) rotateY(-45deg);
  opacity: 0;
}

.coverflow[data-coverflow-position="5"] .coverflow__image[data-coverflow-index="10"] {
  z-index: 5;
  -webkit-transform: translateX(370px) scale(0.05) rotateY(-45deg);
  transform: translateX(370px) scale(0.05) rotateY(-45deg);
  opacity: -0.16667;
}

.coverflow[data-coverflow-position="6"] .coverflow__image[data-coverflow-index="1"] {
  z-index: 5;
  -webkit-transform: translateX(-770px) scale(0.05) rotateY(45deg);
  transform: translateX(-770px) scale(0.05) rotateY(45deg);
  opacity: -0.16667;
}

.coverflow[data-coverflow-position="6"] .coverflow__image[data-coverflow-index="2"] {
  z-index: 6;
  -webkit-transform: translateX(-680px) scale(0.2) rotateY(45deg);
  transform: translateX(-680px) scale(0.2) rotateY(45deg);
  opacity: 0;
}

.coverflow[data-coverflow-position="6"] .coverflow__image[data-coverflow-index="3"] {
  z-index: 7;
  -webkit-transform: translateX(-590px) scale(0.35) rotateY(45deg);
  transform: translateX(-590px) scale(0.35) rotateY(45deg);
  opacity: 0.16667;
}

.coverflow[data-coverflow-position="6"] .coverflow__image[data-coverflow-index="4"] {
  z-index: 8;
  -webkit-transform: translateX(-500px) scale(0.5) rotateY(45deg);
  transform: translateX(-500px) scale(0.5) rotateY(45deg);
  opacity: 0.33333;
}

.coverflow[data-coverflow-position="6"] .coverflow__image[data-coverflow-index="5"] {
  z-index: 9;
  -webkit-transform: translateX(-410px) scale(0.65) rotateY(45deg);
  transform: translateX(-410px) scale(0.65) rotateY(45deg);
  opacity: 0.5;
}

.coverflow[data-coverflow-position="6"] .coverflow__image[data-coverflow-index="6"] {
  z-index: 10;
  -webkit-transform: translateX(-200px);
  transform: translateX(-200px);
  box-shadow: 0 1px 25px 10px rgba(0, 0, 0, 0.6);
}

.coverflow[data-coverflow-position="6"] .coverflow__image[data-coverflow-index="7"] {
  z-index: 9;
  -webkit-transform: translateX(10px) scale(0.65) rotateY(-45deg);
  transform: translateX(10px) scale(0.65) rotateY(-45deg);
  opacity: 0.5;
}

.coverflow[data-coverflow-position="6"] .coverflow__image[data-coverflow-index="8"] {
  z-index: 8;
  -webkit-transform: translateX(100px) scale(0.5) rotateY(-45deg);
  transform: translateX(100px) scale(0.5) rotateY(-45deg);
  opacity: 0.33333;
}

.coverflow[data-coverflow-position="6"] .coverflow__image[data-coverflow-index="9"] {
  z-index: 7;
  -webkit-transform: translateX(190px) scale(0.35) rotateY(-45deg);
  transform: translateX(190px) scale(0.35) rotateY(-45deg);
  opacity: 0.16667;
}

.coverflow[data-coverflow-position="6"] .coverflow__image[data-coverflow-index="10"] {
  z-index: 6;
  -webkit-transform: translateX(280px) scale(0.2) rotateY(-45deg);
  transform: translateX(280px) scale(0.2) rotateY(-45deg);
  opacity: 0;
}

.coverflow[data-coverflow-position="7"] .coverflow__image[data-coverflow-index="1"] {
  z-index: 4;
  -webkit-transform: translateX(-860px) scale(-0.1) rotateY(45deg);
  transform: translateX(-860px) scale(-0.1) rotateY(45deg);
  opacity: -0.33333;
}

.coverflow[data-coverflow-position="7"] .coverflow__image[data-coverflow-index="2"] {
  z-index: 5;
  -webkit-transform: translateX(-770px) scale(0.05) rotateY(45deg);
  transform: translateX(-770px) scale(0.05) rotateY(45deg);
  opacity: -0.16667;
}

.coverflow[data-coverflow-position="7"] .coverflow__image[data-coverflow-index="3"] {
  z-index: 6;
  -webkit-transform: translateX(-680px) scale(0.2) rotateY(45deg);
  transform: translateX(-680px) scale(0.2) rotateY(45deg);
  opacity: 0;
}

.coverflow[data-coverflow-position="7"] .coverflow__image[data-coverflow-index="4"] {
  z-index: 7;
  -webkit-transform: translateX(-590px) scale(0.35) rotateY(45deg);
  transform: translateX(-590px) scale(0.35) rotateY(45deg);
  opacity: 0.16667;
}

.coverflow[data-coverflow-position="7"] .coverflow__image[data-coverflow-index="5"] {
  z-index: 8;
  -webkit-transform: translateX(-500px) scale(0.5) rotateY(45deg);
  transform: translateX(-500px) scale(0.5) rotateY(45deg);
  opacity: 0.33333;
}

.coverflow[data-coverflow-position="7"] .coverflow__image[data-coverflow-index="6"] {
  z-index: 9;
  -webkit-transform: translateX(-410px) scale(0.65) rotateY(45deg);
  transform: translateX(-410px) scale(0.65) rotateY(45deg);
  opacity: 0.5;
}

.coverflow[data-coverflow-position="7"] .coverflow__image[data-coverflow-index="7"] {
  z-index: 10;
  -webkit-transform: translateX(-200px);
  transform: translateX(-200px);
  box-shadow: 0 1px 25px 10px rgba(0, 0, 0, 0.6);
}

.coverflow[data-coverflow-position="7"] .coverflow__image[data-coverflow-index="8"] {
  z-index: 9;
  -webkit-transform: translateX(10px) scale(0.65) rotateY(-45deg);
  transform: translateX(10px) scale(0.65) rotateY(-45deg);
  opacity: 0.5;
}

.coverflow[data-coverflow-position="7"] .coverflow__image[data-coverflow-index="9"] {
  z-index: 8;
  -webkit-transform: translateX(100px) scale(0.5) rotateY(-45deg);
  transform: translateX(100px) scale(0.5) rotateY(-45deg);
  opacity: 0.33333;
}

.coverflow[data-coverflow-position="7"] .coverflow__image[data-coverflow-index="10"] {
  z-index: 7;
  -webkit-transform: translateX(190px) scale(0.35) rotateY(-45deg);
  transform: translateX(190px) scale(0.35) rotateY(-45deg);
  opacity: 0.16667;
}

.coverflow[data-coverflow-position="8"] .coverflow__image[data-coverflow-index="1"] {
  z-index: 3;
  -webkit-transform: translateX(-950px) scale(-0.25) rotateY(45deg);
  transform: translateX(-950px) scale(-0.25) rotateY(45deg);
  opacity: -0.5;
}

.coverflow[data-coverflow-position="8"] .coverflow__image[data-coverflow-index="2"] {
  z-index: 4;
  -webkit-transform: translateX(-860px) scale(-0.1) rotateY(45deg);
  transform: translateX(-860px) scale(-0.1) rotateY(45deg);
  opacity: -0.33333;
}

.coverflow[data-coverflow-position="8"] .coverflow__image[data-coverflow-index="3"] {
  z-index: 5;
  -webkit-transform: translateX(-770px) scale(0.05) rotateY(45deg);
  transform: translateX(-770px) scale(0.05) rotateY(45deg);
  opacity: -0.16667;
}

.coverflow[data-coverflow-position="8"] .coverflow__image[data-coverflow-index="4"] {
  z-index: 6;
  -webkit-transform: translateX(-680px) scale(0.2) rotateY(45deg);
  transform: translateX(-680px) scale(0.2) rotateY(45deg);
  opacity: 0;
}

.coverflow[data-coverflow-position="8"] .coverflow__image[data-coverflow-index="5"] {
  z-index: 7;
  -webkit-transform: translateX(-590px) scale(0.35) rotateY(45deg);
  transform: translateX(-590px) scale(0.35) rotateY(45deg);
  opacity: 0.16667;
}

.coverflow[data-coverflow-position="8"] .coverflow__image[data-coverflow-index="6"] {
  z-index: 8;
  -webkit-transform: translateX(-500px) scale(0.5) rotateY(45deg);
  transform: translateX(-500px) scale(0.5) rotateY(45deg);
  opacity: 0.33333;
}

.coverflow[data-coverflow-position="8"] .coverflow__image[data-coverflow-index="7"] {
  z-index: 9;
  -webkit-transform: translateX(-410px) scale(0.65) rotateY(45deg);
  transform: translateX(-410px) scale(0.65) rotateY(45deg);
  opacity: 0.5;
}

.coverflow[data-coverflow-position="8"] .coverflow__image[data-coverflow-index="8"] {
  z-index: 10;
  -webkit-transform: translateX(-200px);
  transform: translateX(-200px);
  box-shadow: 0 1px 25px 10px rgba(0, 0, 0, 0.6);
}

.coverflow[data-coverflow-position="8"] .coverflow__image[data-coverflow-index="9"] {
  z-index: 9;
  -webkit-transform: translateX(10px) scale(0.65) rotateY(-45deg);
  transform: translateX(10px) scale(0.65) rotateY(-45deg);
  opacity: 0.5;
}

.coverflow[data-coverflow-position="8"] .coverflow__image[data-coverflow-index="10"] {
  z-index: 8;
  -webkit-transform: translateX(100px) scale(0.5) rotateY(-45deg);
  transform: translateX(100px) scale(0.5) rotateY(-45deg);
  opacity: 0.33333;
}

.coverflow[data-coverflow-position="9"] .coverflow__image[data-coverflow-index="1"] {
  z-index: 2;
  -webkit-transform: translateX(-1040px) scale(-0.4) rotateY(45deg);
  transform: translateX(-1040px) scale(-0.4) rotateY(45deg);
  opacity: -0.66667;
}

.coverflow[data-coverflow-position="9"] .coverflow__image[data-coverflow-index="2"] {
  z-index: 3;
  -webkit-transform: translateX(-950px) scale(-0.25) rotateY(45deg);
  transform: translateX(-950px) scale(-0.25) rotateY(45deg);
  opacity: -0.5;
}

.coverflow[data-coverflow-position="9"] .coverflow__image[data-coverflow-index="3"] {
  z-index: 4;
  -webkit-transform: translateX(-860px) scale(-0.1) rotateY(45deg);
  transform: translateX(-860px) scale(-0.1) rotateY(45deg);
  opacity: -0.33333;
}

.coverflow[data-coverflow-position="9"] .coverflow__image[data-coverflow-index="4"] {
  z-index: 5;
  -webkit-transform: translateX(-770px) scale(0.05) rotateY(45deg);
  transform: translateX(-770px) scale(0.05) rotateY(45deg);
  opacity: -0.16667;
}

.coverflow[data-coverflow-position="9"] .coverflow__image[data-coverflow-index="5"] {
  z-index: 6;
  -webkit-transform: translateX(-680px) scale(0.2) rotateY(45deg);
  transform: translateX(-680px) scale(0.2) rotateY(45deg);
  opacity: 0;
}

.coverflow[data-coverflow-position="9"] .coverflow__image[data-coverflow-index="6"] {
  z-index: 7;
  -webkit-transform: translateX(-590px) scale(0.35) rotateY(45deg);
  transform: translateX(-590px) scale(0.35) rotateY(45deg);
  opacity: 0.16667;
}

.coverflow[data-coverflow-position="9"] .coverflow__image[data-coverflow-index="7"] {
  z-index: 8;
  -webkit-transform: translateX(-500px) scale(0.5) rotateY(45deg);
  transform: translateX(-500px) scale(0.5) rotateY(45deg);
  opacity: 0.33333;
}

.coverflow[data-coverflow-position="9"] .coverflow__image[data-coverflow-index="8"] {
  z-index: 9;
  -webkit-transform: translateX(-410px) scale(0.65) rotateY(45deg);
  transform: translateX(-410px) scale(0.65) rotateY(45deg);
  opacity: 0.5;
}

.coverflow[data-coverflow-position="9"] .coverflow__image[data-coverflow-index="9"] {
  z-index: 10;
  -webkit-transform: translateX(-200px);
  transform: translateX(-200px);
  box-shadow: 0 1px 25px 10px rgba(0, 0, 0, 0.6);
}

.coverflow[data-coverflow-position="9"] .coverflow__image[data-coverflow-index="10"] {
  z-index: 9;
  -webkit-transform: translateX(10px) scale(0.65) rotateY(-45deg);
  transform: translateX(10px) scale(0.65) rotateY(-45deg);
  opacity: 0.5;
}

.coverflow[data-coverflow-position="10"] .coverflow__image[data-coverflow-index="1"] {
  z-index: 1;
  -webkit-transform: translateX(-1130px) scale(-0.55) rotateY(45deg);
  transform: translateX(-1130px) scale(-0.55) rotateY(45deg);
  opacity: -0.83333;
}

.coverflow[data-coverflow-position="10"] .coverflow__image[data-coverflow-index="2"] {
  z-index: 2;
  -webkit-transform: translateX(-1040px) scale(-0.4) rotateY(45deg);
  transform: translateX(-1040px) scale(-0.4) rotateY(45deg);
  opacity: -0.66667;
}

.coverflow[data-coverflow-position="10"] .coverflow__image[data-coverflow-index="3"] {
  z-index: 3;
  -webkit-transform: translateX(-950px) scale(-0.25) rotateY(45deg);
  transform: translateX(-950px) scale(-0.25) rotateY(45deg);
  opacity: -0.5;
}

.coverflow[data-coverflow-position="10"] .coverflow__image[data-coverflow-index="4"] {
  z-index: 4;
  -webkit-transform: translateX(-860px) scale(-0.1) rotateY(45deg);
  transform: translateX(-860px) scale(-0.1) rotateY(45deg);
  opacity: -0.33333;
}

.coverflow[data-coverflow-position="10"] .coverflow__image[data-coverflow-index="5"] {
  z-index: 5;
  -webkit-transform: translateX(-770px) scale(0.05) rotateY(45deg);
  transform: translateX(-770px) scale(0.05) rotateY(45deg);
  opacity: -0.16667;
}

.coverflow[data-coverflow-position="10"] .coverflow__image[data-coverflow-index="6"] {
  z-index: 6;
  -webkit-transform: translateX(-680px) scale(0.2) rotateY(45deg);
  transform: translateX(-680px) scale(0.2) rotateY(45deg);
  opacity: 0;
}

.coverflow[data-coverflow-position="10"] .coverflow__image[data-coverflow-index="7"] {
  z-index: 7;
  -webkit-transform: translateX(-590px) scale(0.35) rotateY(45deg);
  transform: translateX(-590px) scale(0.35) rotateY(45deg);
  opacity: 0.16667;
}

.coverflow[data-coverflow-position="10"] .coverflow__image[data-coverflow-index="8"] {
  z-index: 8;
  -webkit-transform: translateX(-500px) scale(0.5) rotateY(45deg);
  transform: translateX(-500px) scale(0.5) rotateY(45deg);
  opacity: 0.33333;
}

.coverflow[data-coverflow-position="10"] .coverflow__image[data-coverflow-index="9"] {
  z-index: 9;
  -webkit-transform: translateX(-410px) scale(0.65) rotateY(45deg);
  transform: translateX(-410px) scale(0.65) rotateY(45deg);
  opacity: 0.5;
}

.coverflow[data-coverflow-position="10"] .coverflow__image[data-coverflow-index="10"] {
  z-index: 10;
  -webkit-transform: translateX(-200px);
  transform: translateX(-200px);
  box-shadow: 0 1px 25px 10px rgba(0, 0, 0, 0.6);
}

.prev-arrow,
.next-arrow {
  cursor: pointer;
  z-index: 10;
  position: absolute;
  top: 50%;
  padding: 1.5rem 2rem;
  color: #a1a1a142 !important;
  font-size: 3rem;
  line-height: 3rem;
  background: #a1a1a142 !important;
  border-radius: 1rem;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: color 200ms, background 200ms;
  transition: color 200ms, background 200ms;
}

.prev-arrow:hover,
.next-arrow:hover,
.prev-arrow:focus,
.next-arrow:focus {
  color: #a1a1a142;
  background: #a1a1a142;
}

.prev-arrow {
  left: 0%;
}

.prev-arrow:before {
  content: "❮";
}

.next-arrow {
  right: 0%;
}

.next-arrow:after {
  content: "❯";
}