/* 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;
    background-size: cover;        /* fill the banner at all screen widths */
    position: relative;            /* needed so #waether can be positioned inside */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 80px;
    overflow: hidden;              /* keeps Ripples canvas clipped to the element */
}
.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: 100px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#nav-pic img{
    width: 230px;
    margin-top: -60px;
    display: block;
    position: relative;  /* was absolute with a pixel-hack margin; now flows normally */
}
#waether{
    position: absolute;
    top: 10px;
    right: 16px;         /* top-right corner of #nav (which is position:relative) */
    width: 460px;
    z-index: 10;
}
#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(5, 87, 112);
   

}
#nav-proced:hover{
    box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.2);
}
#job-btn .btn{
     margin-right: 0;
     background-color: rgb(5, 87, 112);
      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); 
 }
#foter{
    background-color: rgb(5, 87, 112);
    width: 100%;
    height: 40px;
}
#foter .progress, .progress-bar{
    height: 2px;
    width: 75%;
    margin-top: 17px;
}
#foter 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: 510px;
        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: 230px;
        margin-left: 440px;
        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;
    }
    #foter{
        
        width: 100%;
        height: 30px;
    }
    #foter .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;
}
#foter p{
    font-size: 7px;
    }
    #foter .progress, .progress-bar{
        height: 2px;
        width: 40%;
        
    }



}

/* ════════════════════════════════════════════════════════════════
   INDEX PAGE LAYOUT
   Left sidebar (visitor + date + quick links) | Right main content
════════════════════════════════════════════════════════════════ */
.index-page-wrap {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.25rem 1.5rem;
  max-width: 1400px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* LEFT SIDEBAR */
.index-sidebar {
  flex: 0 0 220px;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Visitor Today card */
.visitor-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e4e7ed;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  padding: 1.1rem 1rem 1rem;
  text-align: center;
}
.visitor-card .vc-label {
  font-size: .8rem;
  font-weight: 600;
  color: #555;
  letter-spacing: .04em;
  text-transform: uppercase;
  display: block;
  margin-bottom: .35rem;
}
.visitor-card .vc-count {
  font-size: 2.4rem;
  font-weight: 700;
  color: #1C2A38;
  line-height: 1.1;
  display: block;
}
.visitor-card .vc-divider {
  border: none;
  border-top: 1px solid #e4e7ed;
  margin: .65rem 0 .5rem;
}
.visitor-card .vc-date {
  font-size: .78rem;
  color: #777;
  display: block;
}

/* Quick Links card */
.quick-links-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e4e7ed;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  padding: 1rem;
}
.quick-links-card .ql-title {
  font-size: .82rem;
  font-weight: 700;
  color: #1C2A38;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .8rem;
  display: block;
}
.quick-links-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem;
}
.ql-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding: .6rem .3rem;
  border-radius: 10px;
  border: 1px solid #e4e7ed;
  text-decoration: none;
  color: #1C2A38;
  font-size: .72rem;
  font-weight: 500;
  text-align: center;
  transition: background .15s, border-color .15s, color .15s;
  cursor: pointer;
  background: #fafbfc;
}
.ql-item:hover {
  background: rgba(9,152,195,.07);
  border-color: #0998c3;
  color: #0998c3;
}
.ql-item i {
  font-size: 1.3rem;
  color: #0998c3;
}
.ql-item span { line-height: 1.2; }

/* RIGHT MAIN CONTENT */
.index-main {
  flex: 1 1 0;
  min-width: 0;
}

/* TIA white content card */
.tia-card {
  background: #fff;
  border-radius: 14px;
  border: 1px solid #e4e7ed;
  box-shadow: 0 2px 12px rgba(0,0,0,.07);
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.25rem;
}

/* TIA HERO SECTION */
#tia-hero { margin-bottom: 0; }
.tia-hero-inner {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}
.tia-text { flex: 1 1 0; min-width: 0; }
.tia-text .eyebrow {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  color: #0998c3;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: .4rem;
}
.tia-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #C9A84C;
  margin-bottom: .75rem;
  line-height: 1.25;
}
.tia-desc {
  font-size: .875rem;
  color: #444;
  line-height: 1.65;
  text-align: justify;
  margin-bottom: 0;
}
.tia-embed { flex: 0 0 460px; max-width: 460px; }
.tia-embed iframe {
  width: 100%;
  height: 280px;
  border-radius: 12px;
  border: 1px solid #e4e7ed;
  box-shadow: 0 4px 16px rgba(0,0,0,.10);
  display: block;
}

/* SECTION HEADINGS */
.section-heading {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1C2A38;
  margin: 0 0 1rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid #e4e7ed;
}

/* TIA GALLERY */
#tia-gallery {
  padding: 1.25rem 1.5rem;
  max-width: 1400px;
  margin: 0 auto;
}
.gallery-img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
}

/* TIA CONTACT */
#tia-contact {
  padding: 1.25rem 1.5rem 2rem;
  max-width: 1400px;
  margin: 0 auto;
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.contact-card {
  background: #fff;
  border-radius: 14px;
  border: 1px solid #e4e7ed;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  padding: 1.5rem;
}
.contact-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: #1C2A38;
  margin-bottom: 1rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid #e4e7ed;
}
.contact-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .75rem; }
.contact-list li { display: flex; align-items: flex-start; gap: .7rem; font-size: .875rem; color: #444; }
.contact-list li i { color: #0998c3; font-size: 1rem; flex-shrink: 0; margin-top: .1rem; }
.contact-list li a { color: #0998c3; text-decoration: none; }
.contact-list li a:hover { text-decoration: underline; }
.tia-info-row  { display: flex; gap: 1.5rem; align-items: flex-start; }
.tia-info-left { flex: 1; display: flex; flex-direction: column; }
.tia-info-right{ flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.info-label    { font-size: .75rem; font-weight: 600; color: #777; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .35rem; display: block; }
.tia-web-link  { display: flex; align-items: center; gap: .4rem; font-size: .875rem; font-weight: 500; color: #0998c3; text-decoration: none; margin-bottom: .5rem; }
.tia-web-link:hover { text-decoration: underline; }
.app-row       { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.store-badge   { height: 36px; width: auto; display: block; }
.tia-qr        { width: 90px; height: 90px; border-radius: 8px; border: 1px solid #e4e7ed; padding: 4px; background: #fff; }

/* CSS CUSTOM PROPERTIES (variables) */
:root {
  --gold: #C9A84C;
  --teal: #0998c3;
  --dark: #1C2A38;
  --radius: 12px;
  --shadow: 0 4px 16px rgba(0,0,0,.10);
}

/* FOOTER */
#site-footer {
  background-color: var(--gold);
  padding: .85rem 2rem;
  margin-top: 1.5rem;
}
#site-footer .footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1400px;
  margin: 0 auto;
}
#site-footer .footer-brand,
#site-footer .footer-powered {
  font-size: .875rem;
  font-weight: 600;
  color: #fff;
  margin: 0;
}
#site-footer .footer-powered b { color: #fff; }

/* MESSENGER FLOATING ACTION BUTTON */
#messenger-fab {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 1050;
}
#messenger-fab button {
  display: flex;
  align-items: center;
  gap: .45rem;
  background: var(--gold);
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: .55rem 1.1rem .55rem .65rem;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,.22);
  transition: background .2s, transform .15s, box-shadow .2s;
  white-space: nowrap;
}
#messenger-fab button:hover {
  background: #b8922e;
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(0,0,0,.28);
}
#messenger-fab button img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* OFFCANVAS / MOBILE NAV */
.offcanvas-logo { height: 44px; width: auto; }
.mobile-visitor { display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: #555; margin-bottom: 1rem; padding-bottom: .75rem; border-bottom: 1px solid #e4e7ed; }
.mobile-nav-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .1rem; }
.mobile-nav-list li a { display: flex; align-items: center; gap: .6rem; padding: .55rem .5rem; font-size: .9rem; color: #1C2A38; text-decoration: none; border-radius: 8px; transition: background .15s, color .15s; }
.mobile-nav-list li a:hover { background: rgba(9,152,195,.08); color: #0998c3; }
.mobile-group-label { display: flex; align-items: center; gap: .6rem; padding: .55rem .5rem; font-size: .9rem; font-weight: 600; color: #1C2A38; }
.mobile-group > ul { list-style: none; padding-left: 1.5rem; margin: 0; }

/* RESPONSIVE */
@media (max-width: 1100px) {
  .tia-embed { flex: 0 0 340px; max-width: 340px; }
}
@media (max-width: 900px) {
  .index-page-wrap { flex-direction: column; }
  .index-sidebar   { flex: none; width: 100%; flex-direction: row; flex-wrap: wrap; }
  .visitor-card    { flex: 1 1 180px; }
  .quick-links-card{ flex: 2 1 280px; }
  .tia-hero-inner  { flex-direction: column; }
  .tia-embed       { flex: none; max-width: 100%; width: 100%; }
  .tia-embed iframe{ height: 220px; }
  .contact-grid    { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .index-page-wrap { padding: .75rem; }
  #tia-gallery     { padding: .75rem; }
  #tia-contact     { padding: .75rem 0.75rem 1.5rem; }
  .gallery-img     { height: 220px; }
  .quick-links-grid{ grid-template-columns: repeat(2,1fr); }
}