@charset "utf-8";
/* CSS Document */

/* 🔹 Global Styles & Layouts */
/*
   - จัดการรูปแบบหลักของหน้าเว็บ
   - สีพื้นหลัง, ฟอนต์, ระยะห่าง
*/

html, body {
	 background: #000000;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}
.myButton {

	box-shadow: 1px 7px 24px -7px #B30B0B;

	background:linear-gradient(to bottom, #D12626 5%, #B30B0B 100%);

	background-color:transparent;

	border-radius:21px;

	display:inline-block;

	cursor:pointer;

	color:#ffffff;

	font-family:Arial;

	font-size:23px;

	font-weight:bold;

	padding:19px 43px;

	text-decoration:none;

	text-shadow:0px 0px 0px #b19a3e;

}

.myButton:hover {

	background:linear-gradient(to bottom,  #B81A1A 5%, #7A0707 100%);

	background-color:#B30B0B;

}

.myButton:active {

	position:relative;

	top:1px;

}
.navbar {
    display: flex; /* ใช้ Flexbox จัดเรียงองค์ประกอบใน Navbar */
    justify-content: space-between; /* จัด Brand Title ซ้าย, เมนูขวา */
    align-items: center; /* จัดให้องค์ประกอบอยู่กึ่งกลางแนวตั้ง */
    background-image:url("img/beebet789/bg.webp");
	background-size: cover;
    color: white;
    padding: 10px 20px;
	position: relative; 
}

.brand-title {
    font-size: 1.5rem;
    font-weight: bold;
}

.navbar-links ul {
    margin: 0;
    padding: 0;
    display: flex; /* จัดเรียงเมนูลิสต์ในแนวนอน */
    list-style: none; /* ลบจุดนำหน้าลิสต์ */
}

.navbar-links li a {
    display: block; /* ทำให้ลิงก์เติมเต็มพื้นที่ li */
    text-decoration: none;
    color: white;
    padding: 1rem;
}

.navbar-links li:hover {
    background-color: #555;
}

/* --- Hamburger Button (Hidden by default on large screens) --- */
.toggle-button {
    position: absolute; /* ลอยอยู่บนเมนูบาร์ */
    top: 15px; /* จัดตำแหน่ง */
    right: 20px; /* จัดตำแหน่ง */
    display: none; /* ซ่อนปุ่มนี้บนหน้าจอใหญ่ */
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
}

.toggle-button .bar {
    height: 3px;
    width: 100%;
    background-color: white;
    border-radius: 10px;
}


/* --- Media Query for Mobile --- */
@media (max-width: 768px) {
    .navbar {
        flex-direction: column; /* บนมือถือให้เรียงองค์ประกอบใน Navbar เป็นแนวตั้ง */
        align-items: flex-start; /* จัดชิดซ้าย */
    }
	.brand-title {
        /* บนมือถือ: จัดโลโก้ให้อยู่ตรงกลางของ Navbar */
        /* เนื่องจาก parent (.navbar) ได้ถูกตั้งค่า align-items: center; แล้ว 
           และการเป็น flex-direction: column; ทำให้มันอยู่ตรงกลางแนวนอนโดยอัตโนมัติ */
		align-items: center; 
        margin-bottom: 0px; /* เพิ่มระยะห่างด้านล่างเล็กน้อยหากจำเป็น */
    }
	.brand-title img {
        /* บนมือถือ: จัดโลโก้ให้อยู่ตรงกลางของ Navbar */
        /* เนื่องจาก parent (.navbar) ได้ถูกตั้งค่า align-items: center; แล้ว 
           และการเป็น flex-direction: column; ทำให้มันอยู่ตรงกลางแนวนอนโดยอัตโนมัติ */
		align-items: center; 
        margin-left: 20%; /* เพิ่มระยะห่างด้านล่างเล็กน้อยหากจำเป็น */
    }

     .toggle-button {
        position: absolute; /* ยังคงลอยอยู่ */
        top: 15px;
        right: 20px;
        display: flex; /* แสดงปุ่ม Hamburger */
    }

    .navbar-links {
        width: 100%; /* ทำให้รายการเมนูเต็มความกว้าง */
        display: none; /* ซ่อนรายการเมนูโดยค่าเริ่มต้น (จะแสดงเมื่อคลิกปุ่ม) */
    }

    .navbar-links ul {
        width: 100%;
        flex-direction: column; /* บนมือถือให้รายการเมนูเรียงเป็นแนวตั้ง */
    }

    .navbar-links ul li {
        text-align: center; /* จัดข้อความกึ่งกลาง */
    }

    .navbar-links ul li a {
        padding: 0.8rem 1rem;
    }

    /* เมื่อ navbar-links มีคลาส active ให้แสดงเมนู */
    .navbar-links.active {
        display: flex; /* แสดงเมนูเมื่อคลาส active ถูกเพิ่มเข้ามา */
    }
}
/*.topnav {
    display: flex;
    justify-content: space-between; 
    align-items: center;
    background-color:transparent;
    color: white;
    padding: 0px 0px;
    position: relative; 
}
.brand-title {
    font-size: 1.5rem;
    font-weight: bold;
    /* บน Desktop: อาจจะไม่มีการจัดกลางพิเศษ เพราะอยู่ซ้ายสุด 
}
.topnav {
  overflow: hidden;
  background: transparent ;
	
}

.topnav a {
  float: left;
  display: block;
  color:#DF9E24;
  text-align: center;
  padding: 0 0;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #04AA6D;
  color: white;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 768px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
	.brand-title {
  align-content: center;
    /* บน Desktop: อาจจะไม่มีการจัดกลางพิเศษ เพราะอยู่ซ้ายสุด 
}

  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
*/
.hero {

  background: #000000;
  color: yellow;
  text-align: center;
  padding: 2rem 0rem;

}


.imgif {
  display: flex; /* ทำให้ container เป็น Flexbox */
  justify-content: center; /* จัดเนื้อหาให้อยู่แนวนอนตรงกลาง */
  align-items: center; /* จัดเนื้อหาให้อยู่แนวตั้งตรงกลาง */
  width: 100%;
  height: 100%;
  border-bottom: 2px solid #FFFF00; /* สร้างเส้นคั่นด้านบนหนา 2 พิกเซล สีดำ */

	
 }

.imgif img {
	align-content: center;
	width:100% ;
	max-width: 600px;
	
	
}

.row-flex {
    display: flex; /* ทำให้ container เป็น Flexbox */
    flex-wrap: wrap; /* ถ้าขนาดไม่พอจะขึ้นบรรทัดใหม่ */
    justify-content: space-between; /* จัดช่องว่างระหว่างคอลัมน์ */
    padding: 10px;
}

.column-flex {
    flex: 1 1 23%; /* Flex-grow, Flex-shrink, Flex-basis */
    /* หรือใช้ flex: 1; เพื่อให้ทุกคอลัมน์มีขนาดเท่ากัน */
    background-color: #0000000;
    padding: 20px;
    margin: 5px;
    box-sizing: border-box; /* ทำให้ padding และ border ไม่นับรวมในความกว้าง */
}

/* responsive */
@media screen and (max-width: 600px) {
    .column-flex {
        flex: 1 1 100%; /* ในจอเล็กให้แต่ละคอลัมน์เต็มหน้าจอ */
    }
}
.column-flex2 {
    flex: 1 1 48%; /* Flex-grow, Flex-shrink, Flex-basis */
    /* หรือใช้ flex: 1; เพื่อให้ทุกคอลัมน์มีขนาดเท่ากัน */
    background-color: #0000000;
    padding: 20px;
    margin: 5px;
    box-sizing: border-box; /* ทำให้ padding และ border ไม่นับรวมในความกว้าง */
}

/* responsive */
@media screen and (max-width: 600px) {
    .column-flex2 {
        flex: 1 1 100%; /* ในจอเล็กให้แต่ละคอลัมน์เต็มหน้าจอ */
    }
}

.section-container {
  height: 100vh; /* ทำให้แต่ละส่วนเต็มหน้าจอ */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0px;
}

.section2 {

  position: relative;
  animation: mymove 5s ;
}

@keyframes mymove {
  from {top: 0px;}
  to {top: 200px;}
}








    .section {
      display: flex;
      align-items: center;
      justify-content: center;
		gap: 30px;
     

    }
    .section img {
      width: 100%;
      max-width: 500px;
		
      
    }
    .text-box { max-width: 100%; }
    .text-box h2 { color: #222; margin-bottom: 15px; }
    .text-box p { color: #444; font-size: 16px; }





.btn {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.8rem 1.5rem;
  background: #e63946;
  color: white;
  text-decoration: none;
  border-radius: 5px;
}

.btn:hover {
  background: #c62828;
}

/* 🔹 Header & Navigation */
/*
   - จัดการส่วนหัวของหน้าเว็บ
   - แถบเมนูนำทาง
*/
header {
  background: #111;
  color: #fff;
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav a {
  color: #fff;
  margin: 0 1rem;
  text-decoration: none;
}

nav a:hover {
  text-decoration: underline;
}


#about, #dealer, #contact {
  background: #fff;
  margin-top: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  padding: 2rem;
  color: black; /* เพิ่มเพื่อให้ข้อความอ่านง่ายบนพื้นหลังสีขาว */
}

/* 🔹 Section 2 - Image with Text */
/*
   - รูปแบบสำหรับส่วนที่มีรูปภาพและกล่องข้อความ
*/
.section2 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 10%;
  gap: 30px;
 height: 100vh;
  
 

    text-align: center;
 
}

.section2 img {
  width: 1000%;
  max-width: 450px;
  border-radius: 8px;
}

.text-box {
  max-width: 500px;
}

.text-box h2 {
  color: #FFAE00;
  margin-bottom: 15px;
}

.text-box p {
  color: #fff;
  font-size: 16px;
}

/* 🔹 Dealer List */
.dealer-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.dealer {
  background: hsla(48,100%,50%,0.70);
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* 🔹 Contact Form */
.contact-form {
  max-width: 600px;
  margin: 2rem auto;
  display: flex;
  flex-direction: column;
}

.contact-form label {
  margin: 0.5rem 0 0.2rem;
}

.contact-form input,
.contact-form textarea {
  padding: 0.7rem;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.contact-form button {
  margin-top: 1rem;
  align-self: flex-start;
}
 .slider {
      position: relative;
      max-width: 100%;
      height: 400px;
      overflow: hidden;
    }
    .slides {
      display: flex;
      transition: transform 0.6s ease-in-out;
    }
    .slide {
      position: relative;
      min-width: 100%;
      height: 400px;
    }
    .slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    /* 🔹 ป้ายข้อความบนรูป */
    .caption {
      position: absolute;
      bottom:70%;
      left: 70%;
      transform: translateX(-50%);
      background: rgba(0,0,0,0.5);
      color:#DDA500;
      padding: 10px 20px;
      border-radius: 5px;
      font-size: 20px;
      text-align: center;
      max-width: 100%;
    }

    /* ปุ่มเลื่อน */
    .btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(0,0,0,0.5);
      color: white;
      border: none;
      padding: 10px;
      cursor: pointer;
      font-size: 18px;
      z-index: 10;
    }
    .prev { left: 10px; }
    .next { right: 10px; }

    /* จุด indicator */
    .dots {
      position: absolute;
      bottom: 15px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 8px;
      z-index: 10;
    }
    .dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: rgba(255,255,255,0.6);
      cursor: pointer;
      transition: background 0.3s;
    }
    .dot.active {
      background: white;
    }

    /* 🔹 Responsive */
    @media (max-width: 768px) {
      .slider { height: 250px; }
      .slide { height: 250px; }
      .caption { font-size: 16px; padding: 8px 16px; }
    }
    @media (max-width: 480px) {
      .slider { height: 200px; }
      .slide { height: 200px; }
      .caption { font-size: 12px; padding:  0px 0px 0px; }
      .btn { font-size: 12px; padding: 6px; }
      .dot { width: 8px; height: 8px; }
    }

/* 🔹 Footer */
footer {
  background: #111;
  color: white;
  text-align: center;
  padding: 0rem;
  margin-top: 0rem;
}

 .map-container {
            width: 100%;
            max-width: 800px; /* กำหนดความกว้างสูงสุด */
            margin: 20px auto; /* จัดกึ่งกลาง */
            border: 1px solid #ccc;
        }
        .map-container iframe {
            width: 100%; /* ทำให้ iframe เต็มความกว้างของ container */
            height: 450px; /* กำหนดความสูงของแผนที่ */
            border: 0; /* ลบ border เริ่มต้นของ iframe */
        }

@media (max-width: 768px) {
  .section {
    flex-direction: column; /* เปลี่ยนเป็นแนวตั้งสำหรับหน้าจอมือถือ */
    padding: 20px;
    text-align: center;
  }
  
  .section img {
    max-width: 100%;
  }

  .text-box {
    max-width: 100%;
  }
	.img-big{
	width: 100%;
}

	
}