/* for monitor 24inch */
@media only screen and (max-width:1920px){
   

    body::-webkit-scrollbar{
        width: 8px;
    }
    
    body::-webkit-scrollbar-thumb{
        background: rgb(241, 181, 13);
        border-radius: 5px;
    }
    
#nav{
    background-image: url("img/place-2.jpg");
    height: 25vh;
    width: 100%;
   background-position: center;
    background-repeat: no-repeat;

    display: flex;
    justify-content: center;
    padding: 0 80px;
}
.contact-info{
    margin-right: 40px;
    margin-left: 20px;
   
}
.show-visitor{
    color: #f2f2f2;
    margin-top: 7px;
    font-weight: bold;
}
.show-visitor:hover{
    color:rgb(212, 148, 9);
    font-weight: bold;
    margin-top: 8px;

}

.text-notyfi{
    color: #d30457;
    font-weight: bold;
}

.contact-info h5{
    font-family: Arial Black;

    font-size: 15;
   
}
.contact-info span{
    margin-right: 10px;
    
}
.contact-info p{
    font: italic bold 15px monospace;
}
.contact-info a{
    font: italic bold 15px monospace;
    color: black;
    text-decoration: none;
}

.h3-public h3{
    color:rgb(212, 148, 9);
    font-family: monospace;
    font-weight: bold;
}
.img-hotline img{
    position: absolute;
    width: 100px;
    height: 100px;
    margin-top: 30px;
    margin-left: 50px;
    color: #fff;
}
.img-hotline h3{
    padding-top: 20px;
    margin-left: 50px;
    margin-bottom: -20px;
    font-family: monospace;
    font-weight: bold;
    color: #992600;
}

/* calendar  */
.show-holiday{
    width: 100%;
    height: 39vh;
    overflow: auto;
    padding: 10px 5px 10px 15px;
    box-shadow: 0px 2px 2px 4px rgba(0, 0, 0, 0.2); 
    border-radius: 3px;
  padding-bottom: 20px;
}
.show-holiday::-webkit-scrollbar{
    width: 5px;
}

.show-holiday::-webkit-scrollbar-thumb{
    background: rgb(241, 181, 13);
    border-radius: 5px;
}
.show-holiday p{
    font-family: Helvetica;
    font-size: 14px;
    margin-left: 10px;
    margin-top: 5px;
}
.show-holiday-2{
    width: 100%;
    height: 10vh;
    overflow: auto;
    padding: 5px 5px 20px 15px;
}
.show-holiday-2 p{
   
    font-family: Helvetica;
    margin-left: 10px;
    margin-top: 5px;
    color: #ff1a1a ;
    font-size: 12px;
}.show-holiday-2::-webkit-scrollbar{
    width: 5px;
}

.show-holiday-2::-webkit-scrollbar-thumb{
    background: rgb(241, 181, 13);
    border-radius: 5px;
}
.bg-card-pf-2{
    background-color:#ff4d4d;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.card-body-2{
    height: 190px;
}
.bg-card-pf{
    background-color:#ccefff;
    height: 110px;
}
.bg-card-pf-3{
    background-color:#8080ff;
    height: 110px;
}

.text-info-card p{
    font-size: 13px;
    margin-right: 4px;
}
.text-info-card a{
    font-size: 14px;
    margin-right: 4px;
}
.text-info-card img{
    width: 100px;
    height: 100px;
    margin-top: 3px;
    
}
.search-bar{
    margin-top: 10px;
    display: flex;
    cursor: pointer;
    height: 40px;
    padding: 10px 20px;
    border-radius: 30px;
    background-color: #d9d9d9;
    align-items: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);

}
.mt-page-magination{
    margin-bottom: 70px;
}
.search-bar:hover input{
    width: 300px;
}
.search-bar input{
    width: 0;
    border: none;
    outline: none;
    font-weight: 400;
    background: transparent;
    transition: 0.8s;
}
.search-bar button{
    border: none;
    outline: none;
    background-color: #d9d9d9;
}
.text-info-card i{
    margin-right: 10px;
}

.bottom-contact{
    background-color: #0998c3;
  
}
.bottom-contact-2{
    padding-top: 25px;
    padding-bottom: 35px;
   

}

.index-new{
    margin-top: 10px;
    margin-bottom: 10px;
   
}
.index-new .container{
    background-color: #f2f2f2
}
#nav-pic{
    padding-top: 80px;
}
#nav-pic img{
    width: 200px;
    margin-left: 40px;
    margin-top: -60px;
    display: flex;
   position: absolute;
    
}
#waether{
    position: absolute;
   
    width: 460px;
    margin-right: -1430px;
}
#waether a{
    font-size: 10px;
    color: red;
}
#card-img{
    height: 80vh;
}
/* bar menu */
#bar{
    height: 50px;
    background-color: rgb(5, 87, 112);
    margin: 2px;
     
    outline: none;
    
}
#bar:hover{
    box-shadow: 5px 5px 5px 4px rgba(0, 0, 0, 0.2); 
    background-color: rgb(5, 87, 130); 
}
#bar i{
    width: 100px;
    height: 37px;
}
#bar .b-02{
    display: none;
}
#bar img{
    width: 25px;
    
}
.ar-plan{
    margin-right: -65px;
}
#bar-air{
    height: 130px;
    
}
#Yemo{
width: 15%;
height: 30%;
border: 2px solid rgb(182, 233, 149);
border-radius: 7px;
background-color:  rgb(82, 165, 168);

}
#drop-menuy{
    display: none;
}
#btn .btn {
    border-radius: 15px 0 15px 0;
    width: 230PX;
    height: 60px;
    color: white;
    border: 3px solid rgb(224, 228, 211);
    background-color: rgb(12, 165, 7);
    margin: 2px;
    box-shadow: inset 0 0 0 0 rgb(5, 87, 112); 
    font-size: 14px;
    outline: none;
    transition: ease-out 0.3s;
    
}
#btn a:hover{
    box-shadow: inset 230px 0 0 0 rgb(5, 87, 112);
    color: rgb(212, 148, 9); 
}
#btn p {
    border-radius: 15px 0 15px 0;
    width: 230PX;
    height: 60px;
    color: white;
    border: 3px solid rgb(224, 228, 211);
    background-color: rgb(12, 165, 7);
    margin: 2px;
    font-size: 13px;
    box-shadow: inset 0 0 0 0 rgb(5, 87, 112);
    padding-top: 7px;
    
    outline: none;
    transition: ease-out 0.3s;
}
#btn p:hover{
    box-shadow: inset 230px 0 0 0 rgb(5, 87, 112); 
    
}
#btn p a{
    color: white;
    text-decoration-line: none;
    font-size: 13px;
    
}
#btn p a:hover{
 text-decoration: underline;
 color: rgb(212, 148, 9);
 text-decoration-color: #fff;
 
}
/* news post */

.a-news-post a{
   text-decoration-line: none;
   
   
}
.a-post-body{
    margin-bottom: 20px;
    
}
.new-bar{
    background-color: rgb(9, 133, 138);
    padding: 5px;
   width: 150px;
   border-radius: 20px 10px 0 0 ;
   text-align: center;
}
.hr-new{
    height: 5px;
    border: none;
    background: rgb(9, 133, 138);
    margin-top: 0;
}
.post-news{
    display: flex;
}
.post-img{
    width: 300px;
    height: 150px;
    transform: translate(-50% -50%);
    object-fit: cover;
    transition: .2s linear;
    overflow: hidden;

}

.post-img img{
    width: 300px;
    height: 150px;
    
}
.a-post-body:hover img{
    transform: scale(1.06);
}
.post-text{
    padding: 5px 5px 5px 30px;
    
    width: 70%;
    height: 150px;
    overflow: hidden;
}
.post-text span{
    font-weight: bold;
    font-size: 19px;
 color: rgb(26, 26, 26);
    
    
}
.post-text p{
    margin-bottom: 0;
    color: #666666;
    
}
.post-text hr{
    margin-top: 0;
}
.d-new-body{
    padding: 20px 5px 60px 10px;
   
}
.d-new-content{
    width: 70%;
    border-right: 1px solid rgb(214, 206, 206);
}
.d-new-date hr{
    margin-top: 0;
    margin-right: 10px;

}
.d-new-date p{
    color: #0998c3;
    margin-bottom: 0;
}
.d-news-content{
    margin: 0 10px 30px 10px;
}
.d-news-content-file{
    padding: 0 30px 20px 30px;
}
.d-news-content-file embed{
    border-radius: 10px;
}
.d-link-news{
    padding: 10px 0px 20px 5px;
    width: 30%;
   
}
.d-link-news-content{
    margin: 10px 0 10px 0;

}

.d-link-news a{
    padding: 0 2px 0 5px;
    color: #333333;
    font-weight: bold;
    font-style: italic;
   text-align: center;
   text-decoration: none;
}


.d-link-news-img{
    width: 130px;
    height: 80px; 
    object-fit: cover;
    transition: .2s linear;
    border-radius: 3px;

    

}
.d-link-news-img img{
    width: 130px;
    height: 80px;
   
   

}
.d-link-news-content:hover img{
    transform: scale(1.06);

}
.d-link-news p{
    font-size: 12px;
    margin: 15px 5px 5px 5px;
}
.d-link-news-body{
    display: flex;
}

#policy a{
    border: none;
    box-shadow:none;
    margin-left: 10px;
    margin-right: 10px;
}
.policy-span{
    display: flex;
    justify-content: center;
}
#btn .text-light {
    padding-top: 15px;
}
#cad{
position:relative;
width: 18rem; 
height: 400px;
}
#cad:hover{
    box-shadow: 5px 5px 5px 5px rgba(247, 207, 189, 0.3);
    color: rgb(9, 133, 138);
}
#cad h5:hover{
color: rgb(38, 125, 207);
}

#menu-group{
    width: 100%;
    display: block;
}

#menu-group h5{
    margin-left: -25px;
    
}

.gener {
    transition: 0.3s;
    border: 1px solid rgba(173, 169, 169, 0.822);
    padding: 20px;
    border-radius: 10px;
    margin: 10px;
    
    
}

.gener:hover{
    transform: scale(1.02);
    color: rgb(9, 133, 138);
}
.gener a{
    text-decoration: none;
    color: rgb(97, 95, 95);
}
.gener a:hover{
    transform: scale(1.02);
    color: rgb(9, 133, 138);
}

#menu-group .collapse{
    font-size: 11px;

}

#menu-group .dropdown-item{
    font-size: 12px;
}

#training_select{
    display: block;
   
    height: 50%;
    font-size: 13px;
    margin-bottom: 20px;
}
.select-label{
  margin-bottom: 2px;
   background-color: #0080ff;
   color: #fff;
   padding: 3px  12px 3px 12px;
   border-radius: 3px;
   font-size: 13px;
}

.hotline img{
    width: 100%;
    position: relative;
   background-position: center;
   background-size: cover;
   height: 85vh;
}


#co{
    color: #fff;
    width: 85%;
    height: 5px;
    background-color: #fff;
    margin-bottom: 15px;
    margin-top: -10px;
   
    
}
#card-logo{
    background-image: url("img/background.jpg");
   
}
#btn-pro{
    margin-right: 5000px;
    border-radius: 15px 0 15px 0;
    width: 230PX;
    height: 60px;
    color: white;
    border: 3px solid rgb(224, 228, 211);
    background-color: rgb(12, 165, 7);
    

}
#btn-pro b{
    font-size:20px;
}
#nav-proced{
    background-color: rgb(192, 156, 117);
   

}
#nav-proced:hover{
    box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.2);
}
#job-btn .btn{
     margin-right: 0;
     background-color: rgb(192, 156, 117);
      box-shadow: inset 0 0 0 0 rgb(12, 165, 7);
    
     outline: none;
     transition: ease-out 0.3s;
 }
 #job-btn .btn:hover{
     box-shadow: inset 230px 0 0 0 rgb(12, 165, 7); 
 }
#footer{
    /*background-color: rgb(192, 156, 117);
    background-color: #c09c75;*/
    background-color: rgb(192, 156, 117);
    width: 100%;
    height: 40px;
    padding:0 2px 0 2px;
}
#footer .progress, .progress-bar{
    height: 2px;
    width: 75%;
    margin-top: 17px;
}
#footer p{
font-size: 13px;
}
#sam{
display: flex;
flex-direction: column;

width: 100%;
margin-top: 15px;

}
#dd-training{
    
    height: 40vh;
    margin-top: 30px;
    padding-bottom: 100px;
    overflow: auto;
    display: block;
}
#dd-training::-webkit-scrollbar{
    width: 1px;
}
#teb-ble{
   
    margin-top: 30px;
    padding-bottom: 100px;
    overflow: auto;
 
}
.acc-job{
    transition: 0.3s; 
    
}
.acc-job:hover{
    transform: scale(1.0); 
    margin-top: 20px;
    margin-bottom: 20px;
    box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.2);
   
    
}
#sam table{
    width: 90%;
   
}
#sam table th{
    font-size: 12px;
}
#sam table td{
    font-size: 12px;

}
#sam table a,.btn{
    width: 110px;
    height: 30px;
    font-size: 11px;
}
#d-pdf{
    width: 100%;
   height: 100vh;
}
/* caic career *view detail */
#hiring a{
    margin-top: 13px;
}

/* diplay img in photos.php */
#contain{
    position: relative;
    height: 100vh;
}
#contain .img-contianer{
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    padding: 10px;
}
#contain .img-contianer .images{
    height: 250px;
    width: 350px;
    border: 23px solid #fff;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    
}
#contain .img-contianer img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .2s linear;
}
#contain .img-contianer .images:hover img{
    transform: scale(1.1);
}
#contain .img-contianer a{
    margin-left: -40px;
}
#contain .img-contianer p{
    margin-top: -23px;
}
#contain .main-img{
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    width: 100%;
    height: 100%;
    z-index: 100;
    display: none;
    
}
#contain .main-img span{
    position: absolute;
    top: 0;
    right: 20px;
    font-size: 30px;
    font-weight: bolder;
    color: #fff;
    cursor: pointer;
}
#contain .main-img img{
    position: absolute;
    top: 15%;
    left: 25%;

    transform: translate(-50% -50%);
    width: 900px;
    height: 700px ;
    border-radius: 5px;
    border: 5px solid #fff;
    object-fit: cover;
   
} 
/* caic policy form procedure */
#menu-proced img{
    width: 30px;
}
#menu-proced a{
    transition: 0.3s;  
}
#menu-proced a:hover{
    transform: scale(1.06);
    transform-origin:left;
    color: blue;
 
  

} 
/* page disable : hr system */
#dis-page{
    height: 180px;
    width: 600px;
    margin-top: 200px;
    text-align: center;
    border: 1px solid rgb(221, 210, 210);
    background-color: rgb(164, 224, 243);
    border-radius: 5px;
   
}

/* about us  */
#about-bar{
    position:relative;
}
#about-bar h1{
    
    font-family: fantasy;
    margin-top: 5px;
    margin-bottom: 30px;
}
#con-about{
    display: flex;
    justify-content: space-between;
}
#con-about-2{
    display: flex;
    justify-content: space-between;
    width: 50%;
    padding: 5px 5px 5px 5px;
}
#con-about-2:hover{
    background-color: bisque;
    border-radius: 5px;
   
}
#con-text{
    width: 42%;
    padding-right: 30px;
    margin-top: 30px;
}
#con-text p{
 text-align: justify;
 text-indent: 50px;
 font-family: Plusjakartadisplay, sans-serif;
 
 margin-left: 10px;
 
}
#con-text h2{
    color: rgb(238, 135, 10); 
}
#con-text-2{
    width: 100%;
    justify-content: flex-start;
    margin-bottom: 1px;
}

#con-text-2 h5{
    font-size: 16px;
}
#con-text-2 p{
    font-size: 11px;
}

#pic-car{
    width: 100%;
    padding: 30px;
    
}
#radar-gif-1{
    margin-top: 30px;
    margin-bottom: 10px;
}
#radar-gif-1 .container{
    background-color: #f2f2f2;
    padding-top: 10px;
    padding-bottom: 10px;
}
.text-radar{
    font-family: Plusjakartadisplay, sans-serif;
    width: 55%;
    padding: 35px;
}
.text-radar h5{
    color: rgb(238, 135, 10);
    font-size: 25px;
    font-weight: bold;
   
   
   
}
.text-radar p{
    text-align: justify;
 
}
.tia{
    text-indent: 20px;
}
.gif{
    width: 50%;
}
.up-iig label{
    display: block;
  
}

.gif img{
    width: 100%;
    height: 50vh;
    border-radius: 10px;
    border: 2px solid rgb(187, 180, 180);
}
#pic-cart iframe{
    
    height: 15vh;
    width: 35vh;
    border-radius: 15px;
    margin-top: 1px;
}

#pic-car .carousel-item, #pic-car .carousel-item img{
    width: 100%;
    height: 55vh;
    border-radius: 15px;
    object-fit: cover;
    transition: .2s linear;
    overflow: hidden;
}
#pic-car .carousel-item img:hover{
    border-radius: 15px;
    transform: scale(1.2);
   
    
   
}
.spaff{
    width: 40px;
    height: 17px;
    
   
}

.new-b{
    
    color: transparent;
     background-image: linear-gradient(#fff, #fff); 
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-position: -30px 0;
    animation: backcolor 4s linear infinite;
    
    
}
@keyframes backcolor{
    100%{
        background-position: 0 0;
    }
}
.new-c{
    
    color: transparent;
     background-image: linear-gradient(#ffda09, #ff9114); 
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-position: -30px 0;
    animation: anini 3s linear infinite;
    font-weight: bold;
    overflow: hidden;
   
    
    
}

.new-c{
    font-size: 10px;
   
}
@keyframes anini{
    100%{
        background-position: 30px 0;
    }
}


.bell-noti{
    position: relative;
    border: none;
    outline: none;
   
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    top: -35px;
    right: -130px;

   
}
.bell-noti i{
   font-size: 25px;
}
.bage-noti{
    position: absolute;
    right: -1px;
   
    height: 13px;
    width: 13px;
    background-color: red;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.bage-not{
    height: 15px;
    padding: 1px 4px 2px 2px;
    width: 15px;
    background-color: red;
    color: #fff;
   font-size: 8px;
    border-radius: 50%;
    margin-left: -4px;
    

}
.bage-news{
    position: absolute;
    height: 20px;
    width: 20px;
   background-color: none;
    color: #fff;
    margin-left: 5px;
    border: 1px solid gainsboro;
    border-radius: 10px;
    
}
.digi-text{
    font-family: Plusjakartadisplay, sans-serif;
    width: 50%;
    
    margin: 90px 0 0 80px;
  

}
.digi-intro{
    font-family: Plusjakartadisplay, sans-serif;
    width: 50%;
   text-align: justify;
    margin: 30px;
}
.digi-intro h5{
    color: rgba(5, 84, 158, 0.781);
    font-weight: bold;
}

.digi-img{
    width: 50%;
}
.digi-img img{
    width: 500px;
}
#digital-in .d-flex{
    margin-top: 30px;
    border: 1px solid rgb(214, 209, 209);
    border-radius: 10px;
}
#digital-in .d-flex:hover{
    border: 3px solid rgba(219, 164, 13, 0.959);  
}
.mrm-room{
    width: 100%;
    height: 105vh;
}
.mrm-room iframe{
    width: 100%;
    height: 100%;
}

/* pgae messager */
#haha{
   position: absolute;
   right: 70px;
   bottom: 90px;
  
    

}
#haha button{
    font-size: 30px;
    border-radius: 10px;
    position: absolute;
    border: 2px solid gray;
   
    
    
    
}
#haha button:hover{
    border: 2px solid rgb(223, 190, 6);
    box-shadow: 0 0 3px 4px rgba(133, 109, 2, 0.2);
}
#haha button img{
    width: 30px;
    height: 30px;
}
#haha p{
    margin-top: 50px;
margin-left: -15px;
    font-weight: bold;
    color: rgb(67, 67, 223);
}
#message{
    background-color: rgb(155, 177, 207);
}
#inter-chat{
    height: 83vh;
    width: 100%;
    overflow: auto;
}

#ifam iframe{
    width: 100%;
    height: 70vh;
    margin: 30px 0px 0px 0px;
    border: 2px solid gainsboro;
    border-radius: 9px;
}


#caic-chat-page::-webkit-scrollbar{
    width: 1px;
}
#inter-chat::-webkit-scrollbar{
    width: 7px;
}
#inter-chat::-webkit-scrollbar-thumb{
    background: linear-gradient(transparent,rgb(241, 181, 13));
    border-radius: 5px;
}


.inter-flat{
    display: flex;
    margin: 10px 10px 0 4px;
}

#inter-chat .inter-flat-pro img{
    width: 25px;
    height: 25px;
    border-radius: 50%;
    margin-right: 5px;
    cursor: pointer;
}
#reply{
    position: absolute;
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 1px gainsboro;
    margin-top: -60px;
    margin-left: 40px;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid gainsboro;
    height: 60px;
}
#reply i{
    color: white;
    display: flex;
    justify-content: end;
    font-size: 15px;
   
  
}
#reply span{
    font-size: 12px;
    padding: 5px;
    width: 300px;
    height: 100%;
    
    
    color: #fff;
}
.main-reply{
    background: rgba(0, 0, 0, 0.05);
    border-radius: 5px;
    display: block;
    font-size: 10px;
    color: gray;
    
   
}
.text-chat{
    background-color: rgb(140, 240, 243);
    padding: 3px 10px 3px 10px;
    border-radius: 10px;
    overflow: hidden;
  
  
}
.text-size-file{
    color: rgb(170, 103, 3);
    font-size: 10px;
}
.session-file-size{
font-size: 10px;
color: red;
text-align: center;
}
.text-chat img{
    width: 30px;
    height: 30px;
}
.text-chat-2 img{
    width: 30px;
    height: 30px;
}
.text-chat a{
    text-decoration: none;
    font-size: 13px;
    text-align: justify;
    
}
.text-chat-2 a{
    text-decoration: none;
    font-size: 13px;
}
.pic-in-chat {
    width: 300px;
    height: 200px;
    border: 1px solid gainsboro;
}
.pic-in-chat img{
    width: 100%;
    height: 100%;
}


.text-chat-2{
    background-color: rgb(216, 219, 221);
    padding: 3px 10px 3px 10px;
    border-radius: 10px;
}
.kon-text-chat{
    margin: 0 0 0 0;
}
.kon-text-chat p{
    margin: 0;
    text-align: justify;
}
.kon-text-chat span{
    margin: 0;
    font-size: 10px;
    color: rgb(196, 161, 7);
}
.kon-text-chat i{
    color: gray;
    font-size: 14px;
    cursor: pointer;
}
.kon-text-chat i:hover{
   
   color: red;
}
.bar-chat{
    display: flex;
    margin: 10px;
}
.bar-chat img{
    width: 50px;
    height: 30px;
    border: 2px solid rgb(196, 179, 179);
   
    
}
.bg-bar-chat{
    background-color: rgba(220, 224, 231, 0.274);
    border-bottom: 1px solid gainsboro;
    box-shadow: 0 0 5px 0;
}
.bar-chat-2 img{
    width: 30px;
    height: 30px;
    border: 2px solid rgb(196, 179, 179);
    border-radius:50%;
    margin: 10px 10px 0 0;
    cursor: pointer;
  
}

    
.bar-chat-2 li, .inter-flat li{
   font-size: 10px;
   
 
}
.bar-chat h5{
    font-size: 15px;
    margin-left: 10px;
    margin-top: 10px;
}
#write-ms{
    display: flex;
    width: 100%;
    height: 40px;
}
#write-ms textarea{
    margin-top: 2px;
    width: 500px;
    border: 1px solid gainsboro; 
    border-right: none;
   height: 40px;
    outline: none;
    border-left: none;
}
#write-ms textarea::-webkit-scrollbar{
    width: 1px;
}
#write-ms button{
background-color: white;
    border: 1px solid gainsboro; 
    border-left: none;
    height: 40px;
    
    border-radius: 0 5px 5px 0;
}

#write-ms button img{
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
#write-ms button img:hover{
    box-shadow: 0 0 3px 4px rgba(133, 109, 2, 0.1); ;
}
#write-ms label{
 
    width: 50px;
    height: 40px;
   cursor: pointer;
    color: rgb(24, 21, 240);
    font-size: 20px;
    padding-right: 5px;
    border: 1px solid gainsboro; 
    border-right: none;
    padding-left: 5px;
    border-radius: 5px 0 0px 5px;
}
#write-ms label:hover{
    color: rgb(10, 201, 214);
}
.pro-info{
    display: flex;
    justify-content: center;
    align-items: center;
 flex-direction: column;
}
.pro-info img{
    width: 80px;
    height: 80px;
    border: 2px solid rgb(247, 200, 48);
    border-radius: 50%;
}
.pro-info label{
   margin-top: -30px;
   margin-right: -25px;
    border: 2px solid rgb(224, 216, 216);
    background-color: #fff;
    
    width: 30px;
    height: 30px;
    border-radius: 50%;
    

}
.pro-info i{
    font-size: 17px;
    padding-left: 5px;
   
    
}
.detail-info div{
    display: flex;
}
.detail-info div span{
    margin-right: 10px; 
   
}
.detail-info input{
    height: 28px;
    width: 200px;
    border: 1px solid rgb(230, 216, 216);
    border-radius: 5px;
}

.detail-info2{
    margin-top: 40px;
}
.detail-info2 div{
    display: flex;
    justify-content: space-between;
}
.detail-info2 div span{
 
    display: flex; 
}
.detail-info2 i{
    margin-right: 5px;
}
.detail-info2 input{
    height: 28px;
    width: 200px;
    border: 1px solid rgb(230, 216, 216);
    border-radius: 5px;
    outline: none;
}
.title-info{
    display: flex;
}
.title-info h5{
    color: rgb(38, 91, 204);
    
}
.title-info span{
    margin-right: 20px;
    color: rgb(226, 137, 19);
}
.image-message img{

    width: 250px;
    height: 90px;
    
}
.but-save button{
    width: 70px;
    height: 30px;
    border: 1px solid gainsboro;
    border-radius: 5px;
    text-align: center;
    text-decoration: none;
    background-color: rgb(5, 87, 112);
    color: #fff;
    margin-top: 20px;
}

#scan img{
    width: 100px;
    height: 100px;
    margin: 10px;
    border-radius: 5px;
}


}







@media (max-width:1732px){
    .bottom-contact-2{
        margin-left: 100px;
     }
    #menu-group{
        width: 100%;
        margin-left: 20px;
         margin-top: 13px;
    }
    #nav-pic img{
        width: 230px;
        margin-left: 140px;
        margin-top: -40px;
       
    }
    #nav{
        background-image: url("img/place-2.jpg");
        height: 35vh;
        width: 100%;
       background-position:center;
        background-repeat: no-repeat;
    
        display: flex;
        justify-content: center;
        padding: 0 80px;
    }
    #cad{
        width: 15rem; 
         height: 400px;
    }
    #waether{
       
        margin-top:0px;
        height: 110px;
        margin-left: -400px;
        
       
    }
    #haha{
        
        position: absolute;
        right: 1px; 
        bottom: 70px;
       
         
     
     }
}





/* responsive for laptop 15> */
@media only screen and (max-width:1400px){
    #haha{
        position: absolute;
        right: 1px; 
        bottom: 70px;
       
         
     
     }
     #haha button img{
        width: 30px;
        height: 25px;
    }
    #haha p{
        font-size: 13px;
    }
     .gif img{
        width: 100%;
        height: 75vh;
        
    }

     
     
     .image-message img{
        display: none;
   margin-top: 0;
        width: 150px;
        height: 60px;
        
    }
    .image-message h4{
        display: none;
        font-size: 15px;
    }
    #ifam iframe{
        width: 100%;
        height: 95vh;
        margin: 0px 0px 0px 0px;
        border: 2px solid gainsboro;
        border-radius: 9px;
    }
    .bg-img-mess::-webkit-scrollbar{
        width: 5px;
        height: 50%;
        border-radius: 10px;
        background-color: rgb(2, 153, 90);
    }
    
    #nav{
        background-image: url("img/place-2.jpg");
        height: 35vh;
        width: 100%;
       background-position: bottom ;
        background-repeat: no-repeat;
    
        display: flex;
        justify-content: center;
        padding: 0 80px;
    }
    #waether{
        margin-top:0px;
        height: 110px;
       margin-right: -1190px;
       
    }
    
    #nav-pic{
        padding-top: 45px;
    }
    #nav-pic img{
        width: 200px;
        margin-left: 140px;
        margin-top: -40px;
        display: block;
       position: absolute;
        
    }
    #bar-air{
        height: 95px;
    }
    
    #Yemo{
    width: 15%;
    height: 50%;
    border: 1px solid rgb(182, 233, 149);
    border-radius: 7px;
    background-color:  rgb(82, 165, 168);
    
    }
    #demo p{
        font-size: 14px; 
    }
    
    #btn .btn {
        border-radius: 15px 0 15px 0;
        width: 200px;
        height: 50px;
        font-size: 12px;
        color: white;
        border: 3px solid rgb(224, 228, 211);
        background-color: rgb(12, 165, 7);
        margin: 2px;
        outline: none;
    transition: ease-out 0.5s;
       
    }
    #btn p {
        border-radius: 15px 0 15px 0;
        width: 230PX;
        height: 50px;
        color: white;
        border: 3px solid rgb(224, 228, 211);
        background-color: rgb(12, 165, 7);
        margin: 2px;
        
        font-size: 12px;
    
        outline: none;
        transition: ease-out 0.5s;
    }
    #policy a{
        border: none;
        box-shadow:none;
        margin-left: 6px;
    }
    #footer{
        
        width: 100%;
        height: 30px;
    }
    #footer .progress, .progress-bar{
        height: 2px;
        width: 67%;
        
    }
    #cad{
        width: 12rem; 
        height: 300px; 
    
    }
    #card-img{
        width: 100%;
        display:flex;
        
    }
    #card-logo{
        height: 30px;
    }
    #card-logo .card-title{
        font-size:15px ;
    }
    #card-logo .card-text{
        font-size:12px ;
    }
    /* caic career *view detail */
    #hiring a{
        margin-top: 12px;
    }

    /* diplay menu intrudtion Guidelines ,sites construction, Event. */
    #menu-group{
        width: 100%;
        margin-left: -20px;
         margin-top: 13px;
        
    }
    #card-img{
        margin-bottom: 100px;
    }
    #menu-group h5{
        font-size: 14px;
    }
    #menu-group p, .collapse{
        font-size: 11px;
    }
    #menu-group .nav-link{
        font-size: 11px;
    }
    #menu-group .dropdown-item{
        font-size: 9px;
    }
    #job-btn .btn{
        margin-right: 0;
   }
   #sam table{
    width: 100%;
   }
   #contain .main-img img{
    position: absolute;
    top: 8%;
    left: 15%;
    transform: translate(-50% -50%);
    width: 900px;
    height: 450px ;
    border-radius: 5px;
    border: 3px solid #fff;
    object-fit: cover;
   
}
#pic-cart iframe{
    width: 500px;
    margin-top: 20px;
    height: 55vh;
    border-radius: 15px;
}
#scan img{
    width: 150px;
    height: 100px;
}
#con-text p{
    font-size: 13px;
}
.acc-job{
    width: 90%;
    
}
.acc-job{
    margin-left: 30px;
}
.gener {
    
    
    padding: 10px;
    
    margin: 6px;
}

#teb-ble h5{
    font-size: 15px;
}
#teb-ble p{
    font-size: 12px;
}
.bell-noti{

    right: -100px;
}
.bell-noti i{
   font-size: 20px;
}
#pic-cart iframe{
    width: 300px;
    margin-top: 20px;
    height: 20vh;
    border-radius: 15px;
}
   
}
@media(max-width:799px){
    
    #nav{

    width:100%;
    height:9vh;
    background-position: bottom 100% right 0;
    background-size: cover;
    align-items: flex-start;
    display: flex;
    justify-content: center;
    padding: 0px;
   
        
        
    }
    #nav-pic{
        padding-top:30px;
    }
    #nav-pic img{
        width: 20px;
    }
    
    #btn a {
        border-radius: 5px 0 5px 0;
        width: 100px;
        height: 45px;
        font-size: 7px;
        color: white;
        border: 3px solid rgb(224, 228, 211);
        background-color: rgb(12, 165, 7);
        margin: 2px;
        box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.2);
        
    }
    #btn p {
        border-radius: 5px 0 5px 0;
        width: 120px;
        height: 45px;
        font-size: 7px;
        color: white;
        border: 3px solid rgb(224, 228, 211);
        background-color: rgb(12, 165, 7);
        margin: 2px;
        box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.2);
        
        
    }
    #policy a{
        border: none;
        box-shadow:none;
        margin-left: 6px;
        
    }
    
       
    
    #card-img{
        width: 100%;
        display:flex;
    }
    
    #cad{
        width: 7rem; 
        height: 200px; 
    
    }
    #card-logo .card-title{
        font-size:8px ;
    }
    #card-logo .card-text{
        font-size:7px ;
    }
    #menu-group{
        width:100%;
        margin-left: 10px;
    margin-top: 13px;
        
        display: flex;
    }
    #menu-group h5{
        font-size: 7px;

    }
    #menu-group p, .collapse{
        font-size: 7px;
    }
    #menu-group .nav-link{
        font-size: 7px;
    }
    #card-img{
        width: 100%;
        display:flex;
    }
    #job-btn .btn{
        margin-left: 140px;
        width: 150px;
        height: 55px;
        font-size: 10px;
   }
   #job-btn .bi{
    font-size: 14px;
   }
   #job-btn h5{
    font-size: 13px;
   }
    
   
}
#hiring h5{
 font-size: 14px;
}
#hiring p{
    font-size: 13px;
}



@media screen and (max-width:767px){
    
    
    #bar{
        height: 50px;
       
    }
    #bar .b-02{
        display:inline;
    }
    #bar .b-01{
        display:none;
    }
    #Date{
        font-size: 11px;
    } 
   
   
    #bar img{
        width: 20px;
        height: 10px;
        
    }
    #bar-air{
    display: none;
    }
    #btn a { 
    display: none;
    }
    #btn p {
        display: none;
    }
    #Yemo{
        width: 50%;
        height: 50%;
        border: 1px solid rgb(182, 233, 149);
        border-radius: 7px;
        background-color:  rgb(82, 165, 168);
        font-size: 12px;
    } 
    
    #cad{
        display: none;
        position: static;
        width: 15rem; 
        height: 400px;
        margin-left: 50px;
        }
    #card-logo .card-text{
        font-size: 14px;
    }
    #card-logo .card-title{
        font-size: 15px;
    }
    #menu-group{
        width: 100%;
        display: block;
       
    }
    #event{
        display: none;
    }
    #menu-group h5{
        font-size: 10px;
        color: rgb(5, 139, 88);
    }
    #menu-group p, .collapse{
        font-size: 9px;
    }
    #menu-group .nav-link{
        font-size: 9px;
    }
    #menu-group .dropdown-item{
        font-size: 9px;
    }
    #drop-menuy{
        display: inline;
    }

  
   .i-foot{
   
    height: 20px;
   }
   #btn-pro b{
    font-size:10px;
      }


  
#job-btn .btn{
   display: none;
   
}
#job-btn .nav-link{
    font-size: 8px;
    margin-right: -240;
}

#sam table th{
    font-size: 6px;
}
#sam table td{
    font-size: 5px;

}
#sam table a,.btn{
    width: 30px;
    height: 15px;
   
    padding-bottom: 5px;
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
   
}
#sam table a{
    font-size: 4px;
    
}
#sam table a i{
    margin: 0 0 0 0;
    
}
td span img{
    width: 10px;
}
#sam table{
    width:100%;
   
   }
   #hiring{
    display: block;
    flex-direction: column-reverse;
   }

#hiring h5{
    font-size: 8px;
   }
   #hiring p{
       font-size: 5px;
   }
   #hiring a{
    font-size: 7px;
    position: absolute;
   
   }
   #d-job{
    width: 100%;
   }
  /* About barrrrrrrrr */
#about-bar h1{
    
    font-family: fantasy;
    margin-top: 15px;
    margin-bottom: 50px;
    font-size: 25px;
}
#con-about{
    display: flex;
    flex-direction: column;
}
#con-text{
    width: 100%;
}
#pic-car{
    width: 100%;

}
#scan img{
    display: none;
}
#waether{
   display:none;
}
#pic-cart iframe{
    width: 150px;
    margin-top: 20px;
    height: 15vh;
    border-radius: 15px;
}
#haha{
    position: absolute;
    right: 10px;
    bottom: 30px;
   
     
 
 }
 #haha button{
     font-size: 30px;
     border-radius: 10px;
     position: absolute;
     border: 2px solid gray;
    
     
     
     
 }
 #haha button:hover{
     border: 2px solid rgb(223, 190, 6);
     box-shadow: 0 0 3px 4px rgba(133, 109, 2, 0.2);
 }
 #haha button img{
     width: 30px;
     height: 30px;
 }
 #haha p{
     margin-top: 50px;
 margin-left: -15px;
     font-weight: bold;
     color: rgb(67, 67, 223);
 }
 .gif-mobile{
    display: flex;
    flex-direction: column;
 }
 .gif{
    width: 100%;
}
.text-radar{
    width: 100%;
    padding: 15px;
}
.text-radar p{
    font-size: 13px;
}
#ifam iframe{
    width: 100%;
    height: 81vh;
    margin: 10px 0px 0px 0px;
    border: 2px solid gainsboro;
    border-radius: 9px;
}
.image-message img{

    display: none;
    
}
.show-visitor{
    display: none;
}
.image-message h4{
   display: none;
}
#footer p{
    font-size: 7px;
    }
    #footer .progress, .progress-bar{
        height: 2px;
        width: 40%;
        
    }



}