/*============================== Desktop ==============================*/
@media screen and (max-width:1441px) { 
    /*============================= Banner ============================*/
    .page-banner{
        height: 444px !important;
        padding-bottom: 35px !important;
    }
    /*=========================== Banner END ==========================*/

    /*========================== Banner title =========================*/
    /* #intro-1-sn{
        height: 316px !important;
    } */

    #intro-1-sn .container .title .title-f36{
        font-size: 30px !important;
    }
    
    #intro-1-sn .container .sub-title{
        height: 70px !important;
    }

    #intro-1-sn .container .sub-title div{
        height: 70px !important;
    }
    /*======================== Banner title END =======================*/

    /*============================ Reasons ============================*/
    #intro-2-sn .container .bottom .content .right .box #sn-i2-uh1{
        width: 85% !important;
    }
    /*========================== Reasons END ==========================*/
 
    /*======================== Other locations ========================*/
    #intro-4-sn::before{
        height: 495px !important;
    }
    
    #intro-4-sn .container{
        padding-top: 97px !important;
    }

    #intro-4-sn .container #list {
        row-gap: 40px !important;
        margin-top: 79px !important;
        margin-bottom: 75px !important;
        padding-top: 0px !important;
    }
    
    #intro-4-sn .container #list .title{
        height: 66px !important;
        margin-bottom: 19px !important;
    }
    
    #intro-4-sn .container #list .title div h4{
        font-size: 24px !important;
    }
    
    #intro-4-sn .container .footer-intro-4-sn .left div p{
        font-size: 14px !important;
    }
    
    #intro-4-sn .container .footer-intro-4-sn .right .page-number .number a{
        font-size: 14px !important;
    }

    .contact-title {
        font-size: 28px !important;  
    } 

    #cu-banner {
        height: 648px !important;
    }

    #cu-banner .cu-introText {
        padding-top: 120px !important;
    }

    #cu-intro .container form {
        column-gap: 85px !important;
    }

    /*====================== Other locations END ======================*/

    #content-annual-2 .quote4 img {
        width: 166px !important;
    }
}





@media screen and (max-width:1366px) { 
    /*============================= Banner ============================*/
    .page-banner{
        height: 421px !important;
        padding-bottom: 30px !important;
    }
    
    .page-banner .container .title-f48{
        font-size: 42px !important;
    }
    /*=========================== Banner END ==========================*/
 
    /*========================== Banner title =========================*/
    /* #intro-1-sn{
        height: 300px !important;
    } */

    #intro-1-sn .container .title .title-f36{
        font-size: 28px !important;
    }

    #intro-1-sn .container .sub-title .description-fsize-m{
        font-size: 20px !important;
        line-height: 28px !important;
    }
    
    #intro-1-sn .container .sub-title{
        height: 64px !important;
    }

    #intro-1-sn .container .sub-title div{
        height: 64px !important;
    }
    /*======================== Banner title END =======================*/
    
    /*============================ Reasons ============================*/
    #intro-2-sn .container .bottom .content .right .box #sn-i2-uh1{
        width: 79% !important;
    }
    /*========================== Reasons END ==========================*/

    /*======================== Other locations ========================*/
    #intro-4-sn::before{
        height: 470px !important;
    }

    #intro-4-sn .container{
        padding-top: 91px !important;
    }

    #intro-4-sn .container #list {
        row-gap: 40px !important;
        margin-top: 75px !important;
        margin-bottom: 71px !important;
        padding-top: 0px !important;
    }
          
    #intro-4-sn .container #list .title{
        height: 61px !important;
        margin-bottom: 15px !important;
    }

    #intro-4-sn .container #list .title div h4{
        font-size: 22px !important;
    }

    #cu-intro {
        margin-top: 97px !important;
    }

    
    /*====================== Other locations END ======================*/
}





@media screen and (max-width:1200px) { 
    /*============================= Banner ============================*/
    .page-banner{
        height: 370px !important;
    }
    /*=========================== Banner END ==========================*/
    
    /*========================== Banner title =========================*/
    /* #intro-1-sn{
        height: 263px !important;
    } */

    #intro-1-sn .container .title .title-f36{
        font-size: 25px !important;
    }
    
    #intro-1-sn .container .sub-title{
        height: 60px !important;
    }

    #intro-1-sn .container .sub-title div{
        height: 60px !important;
    }
    /*======================== Banner title END =======================*/
    
    /*============================ Reasons ============================*/
    #intro-2-sn .container .bottom .content .right .box #sn-i2-uh1{
        width: 91% !important;
    }
    /*========================== Reasons END ==========================*/

    /*======================== Other locations ========================*/
    #intro-4-sn::before{
        height: 413px !important;
    }

    #intro-4-sn .container{
        padding-top: 80px !important;
    }

    #intro-4-sn .container #list {
        row-gap: 40px !important;
        margin-top: 65px !important;
        margin-bottom: 65px !important;
        padding-top: 0px !important;
    }
          
    #intro-4-sn .container #list .title{
        height: 51px !important;
        margin-bottom: 9px !important;
    }

    #intro-4-sn .container #list .title div h4{
        font-size: 19px !important;
    }

    #intro-4-sn .container .footer-intro-4-sn .left div p{
        font-size: 12px !important;
    }
    
    #intro-4-sn .container .footer-intro-4-sn .right .page-number .number a{
        font-size: 12px !important;
    }

    #cu-banner {
        height: 548px !important;
    }
    /*====================== Other locations END ======================*/
    #content-annual-2 #intro-2 .section-content {
        flex-wrap: wrap !important;
        text-align: center !important;
    }

    #content-annual-2 #intro-2 .left,
    #content-annual-2 #intro-2 .right {
        width: 100% !important;
    }

    #content-annual-2 #intro-2 .right {
        margin-top: 40px;
    }

    #content-annual-2 #intro-1 .title-h1 {
        font-size: 38px !important;
        line-height: 48px !important;
    }
}
/*============================ Desktop END ============================*/





@media screen and (max-width:1100px) {
    #content-annual-2 #intro-1 .title-h1 {
        font-size: 28px !important;
        line-height: 38px !important;
    }

    #content-annual-2 #intro-1 .title-h4 {
        font-size: 16px !important;
        line-height: 24px;
    }

    #content-annual-2 .quote4 .text { 
        margin-bottom: 40px;
    }
} 





/*=============================== Tablet ==============================*/
@media screen and (max-width:1024px) { 
    /*============================= Banner ============================*/
    .page-banner{
        height: 316px !important;
        padding-bottom: 20px !important;
    }
    
    .page-banner .container .title-f48{
        font-size: 36px !important;
    }
    /*=========================== Banner END ==========================*/
    
    /*========================== Banner title =========================*/
    /* #intro-1-sn{
        height: 225px !important;
    } */

    #intro-1-sn .container .title .title-f36{
        font-size: 21px !important;
    }

    #intro-1-sn .container .sub-title .description-fsize-m{
        font-size: 20px !important;
        line-height: 24px !important;
    }
    
    #intro-1-sn .container .sub-title{
        height: 45px !important;
    }

    #intro-1-sn .container .sub-title div{
        height: 45px !important;
    }
    /*======================== Banner title END =======================*/
    
    /*============================ Reasons ============================*/
    #intro-2-sn .container .bottom .content .right .box #sn-i2-uh1{
        width: 100% !important;
        height: 58px     !important;
    }
   
    #intro-2-sn .container .bottom .content .right .box .up-half {
        height: 79px !important;
    }
    /*========================== Reasons END ==========================*/

    /*======================== Other locations ========================*/
    #intro-4-sn::before{
        height: 352px !important;
    }

    #intro-4-sn .container{
        padding-top: 67px !important;
    }

    #intro-4-sn .container #list {
        row-gap: 30px !important;
        margin-top: 54px !important;
        margin-bottom: 54px !important;
        padding-top: 0px !important;
    }
          
    #intro-4-sn .container #list .title{
        height: 51px !important;
        margin-bottom: 9px !important;
    }

    #intro-4-sn .container #list .title div h4{
        font-size: 19px !important;
    }

    #intro-4-sn .container .footer-intro-4-sn .left div p{
        font-size: 12px !important;
    }
    
    #intro-4-sn .container .footer-intro-4-sn .right .page-number .number a{
        font-size: 12px !important;
    }
    /*====================== Other locations END ======================*/

    /*=========================== Title ===============================*/
    #cu-intro::before{
        height: 461px !important;
    }
            
    #cu-intro .container .opening-text{
        height: 324px !important;
    }

    #cu-intro .container .opening-text .title div{
        width: 100% !important;
    }

    #cu-intro .container .opening-text .title .title-h1{
        font-size: 26px !important;
    }

    #cu-intro .container .opening-text .subtitle div{
        width: 33% !important;
        height: 71px !important;
    }

    #cu-intro .container .opening-text .subtitle .desc-f22{
        font-size: 12px !important;
        line-height: 20px !important;
    }
    /*========================= Title END =============================*/
    
    /*============================ Form ===============================*/ 
    #cu-intro .container form {
        flex-direction: column-reverse;
        column-gap: 50px !important;
        row-gap: 50px;
    }

    #cu-intro .container form .formInput{
        width: 100% !important;
        order: 2;
    }

    /* #cu-intro .container form .info .infoData .info-le{
        justify-content: center;
        display: flex;
        flex-direction: row;
        gap: 50px !important;
    } */

    #cu-intro .container form .info .infoData #sub--title{
        text-align: center;
    }

    #cu-intro .container form .formInput #title, #cu-intro .container form .info #title{
        text-align: center;
    }

    #cu-intro .container form .info .infoData .info-le .lokasi p, #cu-intro .container form .info .infoData .info-le .email p{
        font-size: 14px !important;
    }

    #cu-intro .container form .info {
        order: 1;
        /* flex-direction: unset !important; */
        flex-wrap: wrap !important;
    }

    #cu-intro .container form .info .contact-title {
        width: 100% !important;
    }

    #cu-intro .container form {
        flex-wrap: wrap;
        flex-direction: unset !important;
    }

    #cu-intro .container form {
        height: auto !important;
    }
    /*========================== Form END =============================*/
}


@media screen and (max-width:991px) { 
    #cu-banner {
        height: 450px !important;
    }

    #cu-banner .cu-introText {
        padding-top: 100px !important;
    }

    #content-annual-2 #intro-3 .bottom {  
        flex-wrap: wrap !important;
    }

    #content-annual-2 #intro-2 {
        margin-top: 40px !important;
    } 

    #content-annual-2 #intro-3 .bottom {  
        flex-wrap: wrap !important;
        margin-top: 40px !important;
    }

    #content-annual-2 #intro-3 .bottom .left,  
    #content-annual-2 #intro-3 .bottom .right { 
        width: 100% !important;
        text-align: center !important;
    }  

    #content-annual-2 #intro-3 .bottom .right {
        margin-top: 40px !important;
    }  
}



@media screen and (max-width:800px) { 
    .page-banner{
        margin-top: 66px !important;
    }

    /*=========================== Title ===============================*/
     #cu-intro{
        margin-top: 80px !important;
    }
    /*========================= Title END =============================*/
}






@media screen and (max-width:768px) { 
    /* .title-h4{
        font-size: 24px !important;
    } */
    /*============================= Banner ============================*/
    .page-banner{
        height: 237px !important;
        padding-bottom: 20px !important;
    }
    
    .page-banner .container .title-f48{
        font-size: 26px !important;
    }
    /*=========================== Banner END ==========================*/
    
    /*========================== Banner title =========================*/
    /* #intro-1-sn{
        height: 168px !important;
    } */
    
    #intro-1-sn .container .title .title-f36{
        font-size: 16px !important;
    }

    #intro-1-sn .container .sub-title .description-fsize-m{
        font-size: 16px !important;
        line-height: 18px !important;
    }
    
    #intro-1-sn .container .sub-title{
        height: 40px !important;
    }

    #intro-1-sn .container .sub-title div{
        height: 40px !important;
    }
    /*======================== Banner title END =======================*/

    /*============================ Reasons ============================*/
    #intro-2-sn .container .top{
        flex-direction: column !important;
    }

    #intro-2-sn .container .top .left, #intro-2-sn .container .top .right{
        width: 100% !important;
    }

    #intro-2-sn .container .top .left{
        height: 57px;
    }

    #intro-2-sn .container .top .left div{
        display: flex;
        justify-content: center;
    }

    #intro-2-sn .container .bottom{
        gap: 60px !important;
    }

    #intro-2-sn .container .bottom .content{
        flex-direction: column !important;
        align-items: center;
        gap: 30px;
        margin-top: 50px;
    }

    #intro-2-sn .container .bottom .content .left{
        width: 100% !important;
    }

    #intro-2-sn .container .bottom .content .right{
        width: 100% !important;
    }

    #intro-2-sn .container .bottom .content .left div{
        width: 75% !important;
    }

    #intro-2-sn .container .bottom .content .right .box #sn-i2-uh1{
        width: 81% !important;
        height: 58px !important;
    }
   
    #intro-2-sn .container .bottom .content .right .box .up-half {
        height: 56px !important;
    }
    /*========================== Reasons END ==========================*/

    /*======================== Other locations ========================*/
    #intro-4-sn::before{
        height: 357px !important;
    }

    #intro-4-sn .pattern-3 div{
        width: 30% !important;
    }

    #intro-4-sn .container{
        padding-top: 54px !important;
    }

    #intro-4-sn .container .sub-title div h4{
        text-align: center;
    }

    #intro-4-sn .container #list {
        row-gap: 40px !important;
        margin-top: 43px !important;
        margin-bottom: 43px !important;
        padding-top: 0px !important;
    }
          
    #intro-4-sn .container #list .box{
        width: 45% !important;
    }
          
    #intro-4-sn .container #list .box .title{
        height: 51px !important;
        margin-bottom: 9px !important;
    }
    
    #intro-4-sn .container #list .title div h4{
        font-size: 24px !important;
    }

    #intro-4-sn .container .footer-intro-4-sn .left div p{
        font-size: 12px !important;
    }
    
    #intro-4-sn .container .footer-intro-4-sn .right .page-number .number a{
        font-size: 12px !important;
    }
    /*====================== Other locations END ======================*/

    /*=========================== Title ===============================*/
    #cu-intro::before{
        height: 346px !important;
    }
    
    #cu-intro .container .opening-text{
        height: 243px !important;
    }
    
    #cu-intro .container .opening-text .title div{
        width: 100% !important;
    }
    
    #cu-intro .container .opening-text .title .title-h1{
        font-size: 27px !important;
    }
    
    #cu-intro .container .opening-text .subtitle div{
        width: 49% !important;
        height: 71px !important;
    }
    /*========================= Title END =============================*/
    
    /*============================ Form ===============================*/ 
    #cu-intro .container form{
        padding: 50px 50px !important;
    }
    /*========================== Form END =============================*/
}
/*============================= Tablet END ============================*/





@media screen and (max-width:716px) { 
    /*=========================== Title ===============================*/
    /*========================= Title END =============================*/
    
    /*============================ Form ===============================*/ 
    #cu-intro .container form .info .infoData .info-le{
        align-items: center;
        gap: 20px !important;
        /* flex-direction: column; */
    }

    /* #cu-intro .container form .info .infoData .info-le .lokasi, .email{
        width: 100%;
        display: flex;
        justify-content: center;
    } */

    #cu-intro .container form .info .infoData .info-le .lokasi .box2, #cu-intro .container form .info .infoData .info-le .email .box2{
        width: 50%;
    }

    #cu-banner .title-h2 {
        font-size: 22px !important;
    }

    #cu-banner .cu-introText .mb40 {
        margin-bottom: 20px !important;
    }
    
    #cu-banner .description-fsize {
        line-height: 18px !important;
    }

    #cu-banner {
        height: 400px !important;
    }

    .contact-title {
        font-size: 20px !important;
    }

    #cu-intro .container form .info {
        gap: 10px !important;
    }

    #cu-intro .container form .formInput .boxes {
        gap: 14px !important;
    }

    #cu-intro {
        margin-bottom: 60px !important;
    }

    #cu-intro .container form .formInput .boxes #button {
        width: 120px !important;
        font-size: 12px !important;
    }

    .btn-contact img {
        width: 8px !important;
        height: 8px !important;
    }
    /*========================== Form END =============================*/
}
/*============================ Tablet END =============================*/





/*=============================== Phone ===============================*/
@media screen and (max-width:631px) { 
    /*=========================== Title ===============================*/
    /*========================= Title END =============================*/
        
    /*============================ Form ===============================*/ 
    /* #cu-intro .container form .formInput .boxes #button{
        width: 32% !important;
    } */

    #cu-intro .container form{
        padding: 20px !important;
    }
    /*========================== Form END =============================*/
}








/*=============================== Phone ===============================*/
@media screen and (max-width:600px) { 
    /* .title-h4{
        font-size: 24px !important;
    } */
    /*============================= Banner ============================*/
    .page-banner{
        height: 185px !important;
        padding-bottom: 20px !important;
    }
    
    .page-banner .container .title-f48{
        font-size: 26px !important;
    }
    /*=========================== Banner END ==========================*/
    
    /*========================== Banner title =========================*/
    /* #intro-1-sn{
        height: 132px !important;
    } */
    
    #intro-1-sn .container .title .title-f36{
        font-size: 12px !important;
    }

    #intro-1-sn .container .sub-title .description-fsize-m{
        font-size: 12px !important;
        line-height: 14px !important;
    }
    
    #intro-1-sn .container .sub-title{
        height: 30px !important;
    }

    #intro-1-sn .container .sub-title div{
        height: 30px !important;
    }
    /*======================== Banner title END =======================*/

    /*============================ Reasons ============================*/
    #intro-2-sn{
        margin-top: 40px !important;
    }

    #intro-2-sn .container .top{
        flex-direction: column !important;
    }

    #intro-2-sn .container .top .right{
        height: 94px !important;
    }

    #intro-2-sn .container .top .left, #intro-2-sn .container .top .right{
        width: 100% !important;
    }

    #intro-2-sn .container .top .left{
        height: auto !important;
        margin-bottom: 20px !important;
    }

    #intro-2-sn .container .top .left div{
        display: flex;
        justify-content: center;
    }

    #intro-2-sn .container .bottom{
        gap: 60px !important;
    }

    #intro-2-sn .container .bottom .content{
        flex-direction: column !important;
        align-items: center;
        gap: 30px;
        margin-top: 50px;
    }

    #intro-2-sn .container .bottom .content .left{
        width: 100% !important;
    }

    #intro-2-sn .container .bottom .content .right{
        width: 100% !important;
    }

    #intro-2-sn .container .bottom .content .left div{
        width: 75% !important;
    }
    
    #intro-2-sn .container .bottom .content .right .box #sn-i2-uh1{
        width: 95% !important;
        height: 51px !important;
    }
   
    #intro-2-sn .container .bottom .content .right .box .up-half {
        height: 52px !important;
    }

    #intro-2-sn .container .bottom .content .right .box {
        padding: 30px !important;
    }

    #intro-3-sn {
        margin-top: 40px !important;
    }

    #intro-4-sn {
        margin-top: 40px !important;
    }    
    
    /*========================== Reasons END ==========================*/

    /*======================== Other locations ========================*/
    #intro-4-sn::before{
        height: 512px !important;
    }

    #intro-4-sn .pattern-3 div{
        width: 40% !important;
        z-index: -1;
    }

    #intro-4-sn .container{
        padding-top: 40px !important;
        align-items: center;
        display: flex;
        flex-direction: column;
    }

    #intro-4-sn .container .sub-title div h4{
        text-align: center;
    }

    #intro-4-sn .container #list {
        row-gap: 40px !important;
        margin-top: 20px !important;
        margin-bottom: 43px !important;
        padding-top: 0px !important;
    }
          
    #intro-4-sn .container #list .box{
        width: 100% !important;
    }
          
    #intro-4-sn .container #list .box .title{
        height: 76px !important;
        margin-bottom: 19px !important;
    }

    #intro-4-sn .container #list .title div h4{
        font-size: 28px !important;
    }
    
    #intro-4-sn .container .footer-intro-4-sn{
        flex-direction: column !important;
        gap: 10px;
    }

    #intro-4-sn .container .footer-intro-4-sn .left div p{
        font-size: 12px !important;
    }
    
    #intro-4-sn .container .footer-intro-4-sn .right{
        font-size: 12px !important;
        justify-content: center;
    }
    
    #intro-4-sn .container .footer-intro-4-sn .right .page-number .number a{
        font-size: 12px !important;
    }
    /*====================== Other locations END ======================*/

     /*=========================== Title ===============================*/
     #cu-intro::before{
        height: 270px !important;
    }
                    
    #cu-intro .container .opening-text .title div{
        width: 100% !important;
    }
        
    #cu-intro .container .opening-text .subtitle div{
        width: 64% !important;
    }
    /*========================= Title END =============================*/
        
    /*============================ Form ===============================*/ 
    #cu-intro .container form .info .infoData .info-le div p{
        font-size: 14px !important;
    }
 
    #cu-intro .container form .formInput .boxes input::placeholder, textarea::placeholder{
        font-size: 12px !important;
    }  

    #cu-intro .container form .formInput .boxes #button{
        font-size: 14px !important;
    }
    
    #cu-intro .container form .formInput .boxes .phonemail{
        flex-direction: column !important;
        gap: 20px !important;
    }
    
    #cu-intro .container form .formInput .boxes input, textarea{
        padding: 12px 16px !important
    }

    /* #cu-intro .container form .formInput .boxes #button{
        width: 33% !important;
    } */

    #cu-intro .container form .info .infoData .info-le .email .dot p{
        font-size: 12px !important;
    }

    #cu-intro .container form .info .infoData .info-le .lokasi .dot img{
        width: 12px !important;
        height: 12px !important;
    }
    /*========================== Form END =============================*/

    /*=========================== Quote ===============================*/
    #content-annual-2 .pt80{
        padding-top: 51px !important;
    }
 
    #content-annual-2 #intro-1 .container .section-content .quote4{
        padding-bottom: 21px !important;
    }
 
    #content-annual-2 #intro-1 .container .section-content .quote4 .top .image img {
        width: 106px !important;
    }

    #content-annual-2 #intro-1 .container .section-content .quote4 .top .text {
        width: 100% !important;
        margin: 20px auto 31px !important;
    }

   #content-annual-2 #intro-1 .container .section-content .quote4 .bottom .title-h4 {
        font-size: 12px !important;
        line-height: 18px !important;
   }
   
   #content-annual-2 #intro-1 .container .section-content .quote4 .bottom .title-h4 br {
        display: none !important;
    }

    #content-annual-2 #intro-1 .container .section-content .quote4 .top .text .title-h1{
        font-size: 22px !important;
        line-height: 27px !important;
    }
    #content-annual-2 #intro-2 .section-subtitle .title-h4 br {
        display: none !important;
    }

    .speaker-list img {
        width: 100px !important;
        max-width: 90%;
    }

    #content-annual-2 #intro-3 {
        margin-top: 40px !important;
    }
    
    #content-annual-2 #intro-3 .bottom .right {
        margin-bottom: 60px !important;
        padding-bottom: 40px !important;
    }


    #content-annual-2 #intro-3 .bottom .right {
        margin-top: 20px !important;
    }
 
    .speaker-list{
        grid-template-columns: repeat(2, 1fr) !important;
        padding: 37px 15px !important;
        row-gap: 30px !important;
        }
    /*========================= Quote END =============================*/
}



@media screen and (max-width:540px) { 
    /*=========================== Title ===============================*/
    /*========================= Title END =============================*/
        
    /*============================ Form ===============================*/ 
    #cu-intro .container form .info .infoData .info-le .lokasi .box2, #cu-intro .container form .info .infoData .info-le .email .box2{
        width: 57% !important;
    }
    /*========================== Form END =============================*/

        /* Annual Conference */
/*=========================== Quote ===============================*/

    /*========================= Quote END =============================*/
    
    /*========================== Speaker ==============================*/
    
     
    /*======================== Speaker END ============================*/
    
    /*============================== AC ===============================*/
 
    /*============================= AC END =============================*/
        /* Annual Conference End*/
}





@media screen and (max-width:520px) { 
    /*=========================== Title ===============================*/
    /*========================= Title END =============================*/
        
    /*============================ Form ===============================*/ 
    /* #cu-intro .container form .formInput .boxes #button{
        width: 42% !important;
    } */
    /*========================== Form END =============================*/
}





@media screen and (max-width:465px) { 
    /*=========================== Title ===============================*/

    /*========================= Title END =============================*/
            
    /*============================ Form ===============================*/ 
    #cu-intro .container form .info .infoData .info-le .lokasi .box2, #cu-intro .container form .info .infoData .info-le .email .box2{
        width: 68% !important;
    }
    /*========================== Form END =============================*/
}






@media screen and (max-width:425px) { 
    /* .title-h4{
        font-size: 20px !important;
    } */
    /*============================= Banner ============================*/
    .page-banner{
        height: 131px !important;
        padding-bottom: 12px !important;
    }
    
    .page-banner .container .title-f48{
        font-size: 14px !important;
    }
    /*=========================== Banner END ==========================*/
    
    /*========================== Banner title =========================*/
    /* #intro-1-sn{
        height: 120px !important;
    } */
        
    #intro-1-sn .container .title div{
        width: 90% !important;
    }

    #intro-1-sn .container .sub-title{
        height: 20px !important;
    }

    #intro-1-sn .container .sub-title div{
        height: 20px !important;
    }
    /*======================== Banner title END =======================*/

    /*============================ Reasons ============================*/
    #intro-2-sn .container .top .right{
        height: 112px !important;
    }
       
    #intro-2-sn .container .bottom .content .right .box #sn-i2-uh1{
        width: 100% !important;
    }

    #intro-2-sn .container .bottom .content .right .box .up-half {
        height: 91px !important;
    }

    #intro-2-sn .container .bottom {
        gap: 30px !important;
    }
    /*========================== Reasons END ==========================*/

    /*======================== Other locations ========================*/
    #intro-4-sn::before{
        height: 392px !important;
    }

    #intro-4-sn .pattern-3 div{
        width: 60% !important;
    }
          
    #intro-4-sn .container #list .box .title{
        height: 58px !important;
        margin-bottom: 14px !important;
    }

    #intro-4-sn .container #list .title div h4{
        font-size: 22px !important;
    }
    
    #intro-4-sn .container .footer-intro-4-sn{
        flex-direction: column !important;
        gap: 10px;
    }

    #intro-4-sn .container .footer-intro-4-sn .left div p{
        font-size: 12px !important;
    }
    
    #intro-4-sn .container .footer-intro-4-sn .right{
        font-size: 12px !important;
        justify-content: center;
    }
    
    #intro-4-sn .container .footer-intro-4-sn .right .page-number .number a{
        font-size: 12px !important;
    }
    /*====================== Other locations END ======================*/

     /*============================ Form ===============================*/ 
     /* #cu-intro .container form .formInput .boxes #button{
        width: 50% !important;
    } */
    /*========================== Form END =============================*/

}





@media screen and (max-width:405px) { 
    /*=========================== Title ===============================*/

    /*========================= Title END =============================*/
            
    /*============================ Form ===============================*/ 
    #cu-intro .container form .info .infoData .info-le .lokasi .box2, #cu-intro .container form .info .infoData .info-le .email .box2{
        width: 80% !important;
    }
    /*========================== Form END =============================*/
}




@media screen and (max-width:375px) { 
    /*============================= Banner ============================*/
    .page-banner{
        height: 116px !important;
        padding-bottom: 12px !important;
    }
    
    .page-banner .container .title-f48{
        font-size: 14px !important;
    }
    /*=========================== Banner END ==========================*/
    
    /*========================== Banner title =========================*/
    /* #intro-1-sn{
        height: 135px !important;
    } */
    
    #intro-1-sn .pattern-1 div, #intro-1-sn .pattern-2 div {
        width: 15% !important;
    }

    #intro-1-sn .container .title div{
        width: 100% !important;
    }
    
    #intro-1-sn .container .sub-title{
        height: 20px !important;
    }

    #intro-1-sn .container .sub-title div{
        height: 20px !important;
    }
    /*======================== Banner title END =======================*/

    /*============================ Reasons ============================*/
        
    #intro-2-sn .container .bottom .content .right .box #sn-i2-uh1{
        height: 75px !important;
    }
    
    /*========================== Reasons END ==========================*/

    /*======================== Other locations ========================*/
    #intro-4-sn::before{
        height: 360px !important;
    }
          
    #intro-4-sn .container #list .box .title{
        height: 55px !important;
        margin-bottom: 14px !important;
    }

    #intro-4-sn .container #list {
        row-gap: 30px !important;
    }

    #intro-4-sn .container #list .title div h4{
        font-size: 20px !important;
    }
    /*====================== Other locations END ======================*/

      /*============================ Form ===============================*/ 
      /* #cu-intro .container form .formInput .boxes #button{
        width: 60% !important;
    } */

    #cu-intro .container form .info .infoData .info-le .lokasi .box2, #cu-intro .container form .info .infoData .info-le .email .box2{
        width: 86% !important;
    }
    /*========================== Form END =============================*/
    
}



@media screen and (max-width:373px) { 
    /*=========================== Title ===============================*/

    /*========================= Title END =============================*/
    /*============================ Form ===============================*/ 
    #cu-intro .container .opening-text .subtitle div {
        width: 100% !important;
    }
    /*========================== Form END =============================*/
    
}





@media screen and (max-width:344px) { 
    /*=========================== Title ===============================*/
    #cu-intro .container .opening-text .title .title-h1 {
        font-size: 22px !important;
    }
    /*========================= Title END =============================*/
    /*============================ Form ===============================*/ 

    /*========================== Form END =============================*/
}





@media screen and (max-width:347px) { 
    /*=========================== Title ===============================*/

    /*========================= Title END =============================*/
    /*============================ Form ===============================*/ 
    #cu-intro .container form .formInput .boxes #button{
        width: 70% !important;
    }
    
    #cu-intro .container form .info .infoData .info-le .lokasi .box2, #cu-intro .container form .info .infoData .info-le .email .box2{
        width: 100% !important;
    }
    /*========================== Form END =============================*/
}




@media screen and (max-width:320px) { 
    /*============================= Banner ============================*/
    .page-banner{
        height: 116px !important;
        padding-bottom: 12px !important;
    }
    
    .page-banner .container .title-f48{
        font-size: 14px !important;
    }
    /*=========================== Banner END ==========================*/
    
    /*========================== Banner title =========================*/
    /* #intro-1-sn{
        height: 135px !important;
    } */
    
    #intro-1-sn .pattern-1 div, #intro-1-sn .pattern-2 div {
        width: 15% !important;
    }

    #intro-1-sn .container .title div{
        width: 100% !important;
        z-index: 1 !important;
    }
    
    #intro-1-sn .container .sub-title{
        height: 20px !important;
    }

    #intro-1-sn .container .sub-title div{
        height: 20px !important;
    }
    /*======================== Banner title END =======================*/

    /*============================ Reasons ============================*/
        
    #intro-2-sn .container .bottom .content .right .box .up-half {
        height: 112px !important;
    }
    
    /*========================== Reasons END ==========================*/

    /*======================== Other locations ========================*/
    #intro-4-sn::before{
        height: 291px !important;
    }
          
    #intro-4-sn .container{
        padding-top: 32px !important;
    }

    #intro-4-sn .container #list {
        margin-top: 31px !important;
        margin-bottom: 31px !important;
        row-gap: 20px !important;
    }

    #intro-4-sn .container #list .box .title{
        height: 55px !important;
        margin-bottom: 14px !important;
    }

    #intro-4-sn .container #list .title div h4{
        font-size: 20px !important;
    }
    /*====================== Other locations END ======================*/
}
/*============================= Phone END =============================*/