/* mobile devicce (iphone 14 pro max or samsung s20 Ultra) */
@media (min-width: 350px) and (max-width: 390px){
    .section-banner{
        width: auto;
        height: auto;
    }
    .banner{
        height: auto;
    }
    .logo{
        width: 250px;
        display: flex;
        align-items: center;
        margin-left: 55px;
    }
    .p1{
        display: none;
    }
    .content{
        width: 350px;
        margin-left: 10px;
    }
    .h1-1{
        font-size: 20px;
        margin-left: 10px;
    }
    .p2{
        font-size: 16px;
        margin-left: 10px;
    }
    .scroll-box {
        width: 380px;
        height: 202.67px;
        margin-top: 20px;
        margin-right: -10px;
        margin-bottom: 15px;
    }
    .btm{
        margin-bottom: 20px;
    }
    .btn{
        margin: 5px 0;
        width: 260px;
    }
    .btn::before{
        position: relative;
    }
    section .box{
        width: 100%;
    }
    section .content1{
        width: 100%;
        margin: 0;
        margin-top: 10px;
        padding: 10px 0; 
    }
    .content1 h3{
        font-size: 16px;
    }
    .combobox{
        display: grid;
        align-items: center;
        justify-content: center;
    }
    .box-content{
        width: 350px;
        height: 481.25px;
        margin: 20px 0;
    }
    .img-box{
        width: 300px;
        height: 304.63px;
    }
    .box1{
        width: 350px;
        height: 288.75px;
    }
    .box1 img{
        width: 350px;
        height: 288.75px;
    }
    .box2{
        width: 350px;
    }
    .box3{
        width: 350px;
    }
    .intro{
        display: grid;
        align-items: center;
        justify-content: center;
    }
    .logos2{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .logo2{
        width: 230px;
    }
    .intro-box{
        width: 300px;
        margin-bottom: 20px;
    }
    .intro-box p {
        margin-left: 10px;
        font-size: 20px;
      }
}
@media (min-width: 390px) and (max-width: 1000px){
    .section-banner{
        width: auto;
        height: auto;
    }
    .banner{
        height: auto;
    }
    .logo{
        width: 250px;
        display: flex;
        align-items: center;
        margin-left: 55px;
    }
    .p1{
        display: none;
    }
    .content{
        width: 350px;
        margin-left: 10px;
    }
    .h1-1{
        font-size: 25px;
        margin-left: 10px;
    }
    .p2{
        font-size: 20px;
        margin-left: 10px;
    }
    .scroll-box {
        width: 380px;
        height: 202.67px;
        margin-top: 20px;
        margin-right: 20px;
        margin-bottom: 15px;
    }
    .btm{
        margin-bottom: 20px;
    }
    .btn{
        margin: 5px 0;
        width: 260px;
    }
    .btn::before{
        position: relative;
    }
    section .box{
        width: 100%;
    }
    section .content1{
        width: 100%;
        margin: 0;
        margin-top: 10px;
        padding: 10px 0; 
    }
    .content1 h3{
        font-size: 20px;
    }
    .combobox{
        display: grid;
        align-items: center;
        justify-content: center;
    }
    .box-content{
        width: 350px;
        height: 481.25px;
        margin: 20px 0;
    }
    .img-box{
        width: 300px;
        height: 304.63px;
    }
    .box1{
        width: 350px;
        height: 288.75px;
    }
    .box1 img{
        width: 350px;
        height: 288.75px;
    }
    .box2{
        width: 350px;
    }
    .box3{
        width: 350px;
    }
    .intro{
        display: grid;
        align-items: center;
        justify-content: center;
    }
    .logos2{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .logo2{
        width: 230px;
    }
    .intro-box{
        width: 300px;
        margin-bottom: 20px;
    }
    .intro-box p {
        margin-left: 10px;
        font-size: 23px;
      }
}
/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1730px) {
    .title-box3 p{
        font-size: 22px;
    }
    .content{
        width: 750px;
    }
    .h1-1 {
        font-size: 60px;
      }
    .p2{
        font-size: 30px;
    }
    .scroll-box{
        width: 950px;
        height: 600px;
    }
    .btn{
        font-size: 22px;
        width: 280px;
    }
    .active.btn {
        width: 330px;  
      }
    
}