:root{
    --primary: #bea668;
    --color-bg2: #eeeeee;
    --secondary: #6d6657;

    --color-bg1: #303030;
    --color-p: #404040;

}



/* SET COLOR */
h1, h2, h3, h4, h5, h6, p, span, a, div, button {
    font-family: 'Playfair Display', serif; /* แนะนำใช้ฟอนต์ที่ดูหรูหรา */
}

h1, h2, h3, h4, h5, h6 {
    color: var(--secondary);
}
p, span, a, div, button {
    color: var(--color-p);
}

.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
}
.btn-primary:hover {
    background-color: #ac955d;
    border-color: #ac955d;
}

.text-primary {
    color: var(--primary) !important;
}

.bg-primary {
    background-color: var(--secondary) !important;
}
.bg-light{
    background-color : var(--color-bg2) !important;
}
.bg-dark{
    background-color : var(--color-bg1) !important;
}

/* .btn:focus, 
.btn:active,
.btn.active {
    border-color: var(--primary) !important; 
    box-shadow: none; 
} */

/* เปลี่ยนสีขอบปุ่มเมื่อ focus (ถูกคลิกหรือเลือก) */
.btn:focus {
    border-color: var(--primary) !important; /* สีขอบใหม่ */
    box-shadow: none; /* ปิดเงา focus */
}

.btn-outline-primary{
    color: var(--primary) !important;
    border-color: var(--primary) !important;
    background-color: transparent !important;
}

.btn-outline-primary:hover{
    color: #FFFFFF !important;
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

a.h5 {
    color: var(--secondary) !important;
}

a.h5:hover {
    color: var(--primary) !important;
}

a.active {
    border-color: var(--primary) !important; /* สีขอบใหม่ */
    box-shadow: none; /* ปิดเงาที่เกิดเมื่อ active */
    outline: none; 
    border-bottom: 2px solid var(--primary);
}
button:focus {
    border-color: var(--primary) !important; /* สีขอบใหม่ */
    box-shadow: none; /* ปิดเงาที่เกิดเมื่อ active */
    outline: none; 
}
button:active {
    border-color: var(--primary) !important; /* สีขอบใหม่ */
    box-shadow: none; /* ปิดเงาที่เกิดเมื่อ active */
    outline: none; 
}
/* button.active {
    border-color: var(--primary) !important; 
    box-shadow: none; 
    outline: none; 
} */

.border-end {
    border-right: 1px dashed var(--primary) !important;
}
.border-top {
    border-top: 1px dashed var(--primary) !important;
}

.carousel-item {
    transition: none; /* ปิดการเปลี่ยนภาพแบบเลื่อน */
  }













  .social-container {
    margin-top: 50px;
	 text-align: center;
}
 .social-icons {
	 padding: 0;
	 list-style: none;
	 margin: 1em;
}
 .social-icons li {
	 display: inline-block;
	 margin: 0.15em;
	 position: relative;
	 font-size: 1.2em;
}
 .social-icons i {
	 color: #fff;
	 position: absolute;
	 top: 21px;
	 left: 21px;
	 transition: all 265ms ease-out;
}
 .social-icons a {
	 display: inline-block;
}



.social-icons a:before {
  transform: scale(1);
  -ms-transform: scale(1);
  -webkit-transform: scale(1);
  content: " ";
  width: 60px;
  height: 60px;
  border-radius: 100%;
  display: block;
  background: linear-gradient(45deg, var(--primary), var(--secondary));
  transition: all 265ms ease-out;
}

.social-icons a:hover:before {
  transform: scale(0);
  transition: all 265ms ease-in;
}

.social-icons a:hover i {
  transform: scale(2.2);
  -ms-transform: scale(2.2);
  -webkit-transform: scale(2.2);
  color: var(--primary);
  background: -webkit-linear-gradient(45deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all 265ms ease-in;
}

.social-icons a.social-square:before {
  background: linear-gradient(45deg, var(--primary), var(--secondary));
  border-radius: 10%;
}

 .social-icons a.social-square:hover:before {
	 transform: rotate(-180deg);
	 -ms-transform: rotate(-180deg);
	 -webkit-transform: scale(-180deg);
	 border-radius: 100%;
}
 .social-icons a.social-square:hover i {
	 transform: scale(1.6);
	 -ms-transform: scale(1.6);
	 -webkit-transform: scale(1.6);
	 color: #fff;
	 transform: scale(1.6);
	 -webkit-text-fill-color: #fff;
}






@media screen and (max-width: 1300px) {
    /* .logo {
        display: none;
    } */
    .logo {
        display: block;
    }
  
    a.nav-item{
        font-size: 12px !important;
    }
}


@media screen and (max-width: 1200px) {
    /* .logo {
        display: none;
    } */
    .carousel-item {
        height: 300px !important;
    }
    h1 {
        font-size: 18px !important;
    }
    a.nav-item{
        font-size: 12px !important;
    }

    div.centered-text{
        font-size: 45px !important;
    }
}



@media screen and (max-width: 425px) {
    /* .logo {
        display: block;
    } */

    h1.title{
        display: none;
    }

    .carousel-item {
        height: 300px !important;
    }
    h1 {
        font-size: 18px !important;
    }

    div.centered-text{
        font-size: 30px !important;
    }


    /* .carousel-item img {
        object-fit: cover !important;
        height: 100% !important;
        width: 100% !important;
      }
     */
}
@media screen and (max-width: 375px) {
    /* .logo {
        display: none;
    } */
    .carousel-item {
        height: 300px !important;
    }
  
}