@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;

}

้h1{
    font-family: Minimal;
}

body {
    margin: 0px;
}

.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/bgtop.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;
}

.style_textcourse {
    color: #ffff;
    font-size: 66px;
    margin-top: 17pc;
    padding-left: 11pc;
}

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

.size_gradient {
    width: 20pc;
    height: 50pc;
}

.gradient_box {
    margin: 0px;
    border: 0px;
    width: 2%;
}

.border_box {
    max-width: 82pc;
    height: max-content;
    background-color: rgb(29 64 168);
    border-radius: 39px;
    padding: 20px;
    text-align: center;
    color: white;
}


/* .style_texth1 {
    font-size: 321%;
}

.style_texth3 {
    position: relative;
    top: 67px;
    left: -100px;
}
 */

.img_ardi {
    margin-right: 27px;
    margin-top: 30px;
    margin-left: 22px;
}

.boxlevelone {
    width: 68%;
    margin-top: 3%;
    margin-left: 24%;
    margin-bottom: 20px;
}

.imgleverone {
    margin-bottom: 45px;
    margin-left: 4%;
    object-fit: contain;
}

.presales {
    color: #d8a929;
    font-size: 49px;
}

.div_textlexelone {
    color: aliceblue;
    font-size: 18px;
    font-family: FCMinimalLight;

    
}

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

.icon {
    background-color: #ffffff;
    /* สีพื้นหลังเดียวกับปุ่ม */
    color: #f1b44c;
    /* สีของไอคอน */
    border-radius: 100%;
    /* ทำให้เป็นวงกลม */
    padding: 5px;
    /* ระยะห่างภายใน */
    margin-right: 10px;
    /* ระยะห่างระหว่างไอคอนกับข้อความ */
}

.border_boxx {
    position: relative;
    top: 74px;
    right: 227px;
    display: inline-flex;
    align-items: center;
    background-color: #624cf1;
    /* สีเหลืองคล้ายในภาพ */
    border-radius: 30px;
    /* ทำให้มุมโค้ง */
    padding: 20px 60px;
    /* ระยะห่างภายใน */
    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);
    /* เงา */
}

.buttonmoredetail {
    background-color: transparent;
    text-decoration: none;
    color: #ffffff;
}


/* ตำหน่องรูปเลเวล2 */

.boxleveltwo {
    margin-top: 6%;
    margin-left: 51%;
}


/* ดีฟข้อความเลเวล2 */

.div_textlexeltwo {
    color: #030826;
    height: 10pc;
    margin-top: -42pc;
    margin-left: 250px;
    font-size: 21px;
}


/* กล่องข้อความข้อรูป */

.presalestwo {
    /* position: relative;
    top: -690px;
    left: 20%; */
    color: #d8a929;
    font-size: 49px;
}


/* กราเดียนเลเวล3 */

.divleveltree {
    margin-top: 25pc;
}


/* รูปในช่องกราเดียนเลเวล3 */

.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;
}

.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: 249px;
    height: 61px;
    border: none;
}

.border_boxbottomindex {
    border: none;
    width: 246px;
    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;
}

.style_imgtwo {
    width: 68%;
    padding-top: 3%;
}


/* รูปข้างๆข้อความ */

.imglevertwo {
    object-fit: contain;
    margin-bottom: 45px;
    margin-left: 4%;
    filter: brightness(0) saturate(100%) invert(31%) sepia(84%) saturate(748%) hue-rotate(204deg) brightness(100%) contrast(102%);
}

.paddingstyle {
    padding: 7pc;
}

@media screen and (max-width: 320px) {
    .bgtop {
        width: 100%;
    }
    .logo {
        display: flex;
        text-decoration: none;
        color: #030826;
        margin-left: -2pc;
    }
    .style_divlogo {
        padding-top: 34px;
        margin-left: 53px;
    }
    .posision {
        padding-top: 49px;
        margin-left: 9px;
    }
}

@media (max-width: 767px) {
    .boxlevelone {
        width: 100%;
        margin-top: 26px;
        margin-left: -1px;
    }
    .imglevertwo {
        margin-left: auto;
        margin-right: auto;
        margin-top: 20px;
        width: 40%;
    }
    .style_imgtwo {
        margin: 20px auto 20px 20px;
        width: 90%;
    }

    .style_textcourse {
        color: #ffff;
        font-size: 66px;
        margin-top: 10pc;
        padding-left: 47px;
    }
}

h4{
    font-size: 17px;
}