@media only screen and (max-width: 375px) {
    .main-header h1 {
        font-size: 24px;
        text-align: center;
    }

    .carousel-inner img {
        width: 100%;
        height: auto;
    }

    .promotionsuper h1 {
        font-size: 20px;
        padding: 0 10px;
    }

    .promotion2 {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .promotion2 img {
        width: 100%;
        height: auto;
        border-radius: 20px !important;
    }

    .protex2 {
        padding: 10px;
    }

    .price2 .price1 p {
        font-size: 18px;
    }

    .price2 .price1 button {
        width: 100%;
        margin-top: 10px;
        margin-bottom: 20px;
    }
}
@media screen and (max-width: 414px) { 
    .h {
           text-align: center; /* จัดข้อความตรงกลางในแนวนอน */
           margin-bottom: 30px; /* กำหนดระยะห่างด้านล่างของ .h */
       }
       .slides {
           text-align: center;
           width:100%; /* จัดภาพตรงกลางในแนวนอน */
       }
       .text-jukkul {
           text-align: center; /* จัดข้อความตรงกลางในแนวนอน */
           margin-bottom: 30px;
           display: flex;
           justify-content: center; /* จัดตำแหน่งข้อความให้ตรงกลางทั้งซ้ายและขวา */
           margin: 10px;
           padding: 10px;
       }
       .head1 {
           text-align: center; /* จัดข้อความตรงกลางในแนวนอน */
           margin-bottom: 30px; /* กำหนดระยะห่างด้านล่างของ .head1 */
       }
       .mail {
           text-align: center; /* จัดข้อความตรงกลางในแนวนอน */
       }
       .maill-text {
           padding: 40px;
       }
       .hh2 {
           margin-top: 20px;
       }
       .mail-form {
           width: 100%;
           flex-direction: column;
           margin: 0;
           align-items: center;
           justify-content: center;
           background-attachment: fixed;
           background-position: center;
           position: relative;
           background-size: auto 100% ;
       }
       .left-side {
           transform: scale(0.8);
           text-align: left;
           font-size: 10px;
           margin-bottom: 1rem;
       }
       .left-side h1{
           font-size: 40px !important;
           width: 100%;
       }
       .right-side {
           margin-top: -4rem;
           text-align: center;
           width: 100%;
           flex-direction: column;
           text-align:start;
       }
       .map, .map1  {
           width: 100%;
       }
       .map1 iframe{
           width: 100%;
           height: 15rem;
           box-shadow: 5px 10px;
       }
       .form-group {
           margin-bottom: 20px;
       }
       .left-group, .right-group {
           display: flex;
           flex-direction: column;
       }
       .form-control {
           width: 100%;
       }
       .submit-button {
           width: 100%;
       }
   }
   
@media only screen and (max-width: 480px) {
    .main-header h1 {
        font-size: 24px;
        text-align: center;
    }
    .carousel-inner img {
        width: 100%;
        height: auto;
    }

    .promotionsuper h1 {
        font-size: 20px;
        padding: 0 10px;
    }

    .promotion2 {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .promotion2 img {
        width: 100%;
        height: auto;
        border-radius: 20px !important;

    }

    .protex2 {
        padding: 10px;
    }

    .price2 .price1 p {
        font-size: 18px;
    }

    .price2 .price1 button {
        width: 100%;
        margin-top: 10px;
        margin-bottom: 20px;
    }
}