body {
    margin: 0px;
    box-sizing: border-box;
}


@font-face {
    font-family: 'FCMinimalBlackItalic';
    src: url('font/FC Minimal Black Italic ver 1.10.otf') format('opentype');
}

@font-face {
    font-family: 'FCMinimalBlack';
    src: url('font/FC Minimal Black ver 1.10.otf') format('opentype');
}

@font-face {
    font-family: 'FCMinimalBoldItalic';
    src: url('font/FC Minimal Bold Italic ver 1.10.otf') format('opentype');
}

@font-face {
    font-family: 'FCMinimalBold';
    src: url('font/FC Minimal Bold ver 1.10.otf') format('opentype');
}

@font-face {
    font-family: 'FCMinimalExtraBoldItalic';
    src: url('font/FC Minimal ExtraBold Italic ver 1.10.otf') format('opentype');
}

@font-face {
    font-family: 'FCMinimalExtraBold';
    src: url('font/FC Minimal ExtraBold ver 1.10.otf') format('opentype');
}

@font-face {
    font-family: 'FCMinimalExtraLightItalic';
    src: url('font/FC Minimal ExtraLight Italic ver 1.10.otf') format('opentype');
}

@font-face {
    font-family: 'FCMinimalExtraLight';
    src: url('font/FC Minimal ExtraLight ver 1.10.otf') format('opentype');
}

@font-face {
    font-family: 'FCMinimalItalic';
    src: url('font/FC Minimal Italic ver 1.10.otf') format('opentype');
}

@font-face {
    font-family: 'FCMinimalLightItalic';
    src: url('font/FC Minimal Light Italic ver 1.10.otf') format('opentype');
}

@font-face {
    font-family: 'FCMinimalLight';
    src: url('font/FC Minimal Light ver 1.10.otf') format('opentype');
}

@font-face {
    font-family: 'FCMinimalMediumItalic';
    src: url('font/FC Minimal Medium Italic ver 1.10.otf') format('opentype');
}

@font-face {
    font-family: 'FCMinimalMedium';
    src: url('font/FC Minimal Medium ver 1.10.otf') format('opentype');
}

@font-face {
    font-family: 'FCMinimalRegular';
    src: url('font/FC Minimal Regular ver 1.10.otf') format('opentype');
}

@font-face {
    font-family: 'FCMinimalSemiBoldItalic';
    src: url('font/FC Minimal SemiBold Italic ver 1.10.otf') format('opentype');
}

@font-face {
    font-family: 'FCMinimalSemiBold';
    src: url('font/FC Minimal SemiBold ver 1.10.otf') format('opentype');
}

@font-face {
    font-family: 'FCMinimalThinItalic';
    src: url('font/FC Minimal Thin Italic ver 1.10.otf') format('opentype');
}

@font-face {
    font-family: 'FCMinimalThin';
    src: url('font/FC Minimal Thin ver 1.10.otf') format('opentype');
}

*{
    font-family: 'FCMinimalRegular', sans-serif;

}

.bgtop {
   
    background-image: 
        linear-gradient(to bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 40%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.7)), 
        url('/img/boxlevelone.png'); /* ใส่ชื่อหรือที่อยู่ไฟล์ภาพ */;
    background-size: cover;
    /* ปรับภาพให้ครอบคลุมทั้งหน้า */
    background-repeat: no-repeat;
    /* ไม่ให้ภาพซ้ำ */
    background-position: center;
    /* จัดให้อยู่ตรงกลาง */
}

.bgtopdivtop {
    width: 100%;
    /* กำหนดความกว้าง */
    height: 819.9px;
    /* กำหนดความสูง */
}

.logo {

    display: flex;
    text-decoration: none;
    color: #030826;
}

.style_divlogo {

    padding-top: 34px;
    margin-left: 53px;
}

.posision {
    padding-top: 38px;
    margin-left: 26px;
}

.texttoplevelone {
    color: #ffffff;
    text-align: center;
    position: relative;
    top: 50%;
    text-shadow: 3px 1px 8px #000000;
    margin: 5px;
}

.texttoplevelone_textthia {
    text-align: center;
    color: #dfc30d;
    position: relative;
    top: 50%;
    text-shadow: 3px 1px 8px #3a3004;
}

/* Container */
.button-container {
    position: relative;
    top: 51%;
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

/* ปุ่มทั่วไป */
.button {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border-radius: 25px;
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: white;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
}

/* ปุ่มโทรศัพท์ */
.phone-button {
    background-color: #f1b44c;
    /* สีเหลือง */
}

/* ปุ่ม LINE */
.line-button {
    background-color: #1c3b8b;
    /* สีน้ำเงิน */
}

/* ไอคอน */
.button i {
    display: flex;
    justify-content: center;
    align-items: center;
    /* background-color: rgb(52, 44, 44); */
    color: inherit;
    /* ใช้สีของปุ่ม */
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 16px;
}

.bggradient {
    height: auto;
    margin: 0px;
    background: linear-gradient(to right, rgb(4 42 156), rgb(19 8 63));
}

.text_h1prsales {

    color: #ffffff;
    font-size: 57px;
}

.text_h3prsales {
    color: #ffffff;
    text-align: left;
   
}

.button-disabledlevelone {
    display: inline-block;
    padding: 10px 20px;
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
    /* สีตัวอักษร */
    background-color: #f1b44c;
    /* สีพื้นหลัง */
    border-radius: 25px;
    /* ทำให้ขอบมน */
    text-align: center;
    /* cursor: not-allowed; เปลี่ยนเมาส์เป็นรูปกากบาท */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    /* เพิ่มเงา */
    user-select: none;
    /* ป้องกันการเลือกข้อความ */

    border: none;
}

.text_tac_p_levelone {
    color: #ffffff;
    font-size: 20px;

} 

.bottomengineer {
    background-image: url('/img/bottomindex.png');
    background-size: cover; /* ทำให้ภาพเติมเต็มพื้นที่โดยรักษาอัตราส่วน */
    background-position: center; /* จัดตำแหน่งภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat; /* ป้องกันการซ้ำของภาพ */
    display: flex;
    flex-direction: column;
    align-items: center; /* จัดให้อยู่กลางในแนวนอน */
    justify-content: center; /* จัดให้อยู่กลางในแนวตั้ง */
    min-height: 60vh; /* ให้ div กินความสูง 50% ของหน้าจอ */
    text-align: center; /* จัดข้อความให้อยู่ตรงกลาง */
    background-color: #1C1D3F; /* ตัวอย่างพื้นหลัง */
    padding: 20px;
    margin-top: -7px;
}

.posisiontext {
    text-align: center;
    color: #ffffff;
}

.posisiontextbottom {
    position: relative;
    top: 15pc;
    font-size: 50px;
}

.border_boxbottom {
    display: inline-flex;
    align-items: center;
    background-color: #f1b44c;
    /* สีเหลืองคล้ายในภาพ */
    border-radius: 30px;
    /* ทำให้มุมโค้ง */
    padding: 25px 25px;
    /* ระยะห่างภายใน */
    color: white;
    /* สีข้อความ */
    font-family: Arial, sans-serif;
    /* ฟอนต์ */
    font-size: 18px;
    /* ขนาดข้อความ */
    font-weight: bold;
    /* ตัวหนา */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* เงา */
    width: 300px;
    height: 61px;
    border: none;
}

.border_boxbottomindex {
    border: none;

    width: 300px;
    height: 61px;
    display: inline-flex;
    align-items: center;
    background-color: #624cf1;
    border-radius: 30px;
    padding: 23px 40px;
    color: white;
    font-family: Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.posisionbottomindex {
    position: relative;
    left: 50pc;
    top: 17pc;
}

.videostyle {
    max-width: 100%;
    /* กำหนดความกว้างสูงสุดไม่เกิน 100% ของหน้าจอ */
    overflow: hidden;
    /* ซ่อนส่วนที่ล้นออกจาก div */
    box-sizing: border-box;
    /* รวม padding และ border เข้ากับความกว้าง */
}

.yt{
    height: 1080px;
}

@media (max-width: 767px) {
    .texttoplevelone {
        top: 10%;
    }


    .texttoplevelone_textthia {
        top: 11%;
    }


    .button-container {
        top: 11%;
    }

    .yt{
        height: 500px;
    }
}


h4{
    font-size: 17px;
}