@media all and (min-width: 701px) {
#service_wrap{
padding:0;
margin:0;
width:100%;
height:300px;
max-height:300px;
display:table;
background-color:#000;
background-image: url('../images/734A5623.jpg') ;
background-size: cover;
background-repeat: no-repeat;
}	
h1{
color:#000;
width:90%;
text-align:center;
font-weight:bold;
font-size:22px;
text-transform:uppercase;
margin-top:4%;
margin-bottom:3%;
padding-left:3%;
}
h2{color:#000;
font-size:17px;
width:100%;
text-align:center;
margin: 0 auto;
margin-top:5%;
margin-bottom:5%;
}
h3{
color:#FFF;
font-size:16px;
width:100%;
text-align:center;
margin: 0 auto;
margin-top:1%;
margin-bottom:5%;
}
    h4,h5{
  margin-top: 0;
    margin-bottom: 0;
}
#thingstoknow{
border: 2px solid red;
border-radius: 3px;
width:30%;
margin: 0 auto;
text-transform:uppercase;
font-size:15px;
text-align:center;
line-height:46px;
height:48px;
display:table;
}	
.step-label{color:#5bee5d;
font-size:13px;
width:100%;
text-align:center;
margin: 0 auto;
margin-top:1%;
margin-bottom:5%;}

















    body { font-family: Arial, sans-serif; line-height: 1.6; margin: 10px; background-color: #f8f8f8; color: #333; }
    header2, main { max-width: 65%; margin: auto; }

    .RepairStage1, .RepairStage2, .RepairStage3, .RepairStage4, .RepairStage5 {
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.40);
      border: 0px solid rgba(60, 60, 60,0.8) !important;
      margin: 10px 0;
      padding: 15px;
      min-height: 220px;
      width: 100%;
      background-color: #B14848;
      border: px solid yellow;
      z-index: 99;
      overflow: hidden;
      clear: both;
      border-radius: 5px; box-sizing: border-box;
    }
    .SqlActive {
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.40);
      border: 0px solid rgba(60, 60, 60,0.8) !important;
      background-color: #2e7d32 !important; color: white; margin: 20px 0; padding: 20px;
      border-radius: 6px; box-shadow: 0 0 10px #3c763d;
    }
    #notit { scroll-margin-top: 15px; }

    .disclaimer { font-size: 12px; font-style: italic; color: #555; margin-bottom: 20px; }

    .error-box {
      width: 100%; color: #b30000; background-color: #ffe5e5; border: px solid #b30000;
      padding: 0.85em; margin: 1em 0; border-radius: 5px; font-weight: bold; display:none;
    }
    .ok-box {
      width: 100%; color: #0a5f1f; background-color: #e8f7ec; border: px solid #0a5f1f;
      padding: 0.85em; margin: 1em 0; border-radius: 5px; font-weight: 600; display:none;
    }

    img.stage-img {
      max-height: 100px; width: auto; float: left; margin-right: 15px;
      opacity: 0; transition: opacity 0.8s ease-in-out; border-radius: 4px; object-fit: cover;
    }
    img.stage-img.loaded { opacity: 1; }

    .Sheadtitle { font-weight: bold; font-size: 1.3em; margin-top: 0; }
    .Sheadtitledesc { font-style: italic; color: #444; margin-bottom: 10px; }
    .Scont { clear: both; padding-top: 10px; font-size: 14px; }
    .sql-details { margin-top: 10px; border-top: px solid rgba(255,255,255,.5); padding-top: 8px; font-weight: 600; }

    .step-label { font-weight: 700; margin-bottom: 4px; } /* You can style later */

    form label { font-weight: bold; display: inline-block; margin-bottom: 6px; }
    form input[type="text"] {
        
        
        
      
    
    

        
        
        
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
      padding: 8px; width: 260px; border: 2px solid black; border-radius: 3px; text-transform: uppercase;
    }
    form input[type="submit"] {
        
        
        
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  margin-bottom: 40px;
  text-decoration: none;
  font-size: 15px;
  border-radius: 3px;
  text-align: center;
  background-color: #000;
  color: #FFF;

        
        
        
        
        
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);padding: 8px 15px; border: none; font-weight: bold; cursor: pointer; border-radius: 3px; margin-left: 8px;
    }
    form input[type="submit"]:hover { background-color: #555; }
    .help { font-size: 12px; color: #666; margin-top: 6px; }





























#thingstoknow a{color:#FFF;width:100%;height:100%;display:block;text-decoration:none;
white-space:nowrap;
text-align:center;
padding-right:20px;}

#service_top{
margin: 0 auto;
width:60%;
display:table;
margin-bottom:8%;
}
#service_bottom{
height:49%;
width:100%;
display:table;
margin-bottom:8%;
}
/*     contact form     */


input, select, textarea{

    
    -ms-box-sizing:content-box;
    -moz-box-sizing:content-box;
    box-sizing:content-box;
    -webkit-box-sizing:content-box; 
}
#contact_slide1{
display:table;
width:70%;
margin: 0 auto;
margin-bottom:30px;
margin-top:30px;
}
#contact_name{min-width:170px;width:30%;display:table;float:left;}
#contact_phone{min-width:170px;width:30%;display:table;float:right;white-space:nowrap;}
#contact_slide2{display:table;width:70%;margin: 0 auto;margin-bottom:30px;
margin-top:30px;}
#contact_email{min-width:170px;width:30%;display:table;float:left;}
#contact_contact{min-width:170px;width:30%;display:table;float:right;
white-space:nowrap;}



#contact_message{width:70%;display:table;margin: 0 auto;margin-bottom:20px;}

#contact_slide3{display:table;width:70%;margin: 0 auto;margin-bottom:30px;
margin-top:30px;}

input {

border: 2px solid black;
border-radius: 4px;
width:100%;
text-align:center;
line-height:46px;
height:30px;
}
textarea {
margin: 0 auto;
text-align:center;
clear:both;
border: 2px solid black;
border-radius: 1px;
width:100%;margin: 0 auto;
text-align:center;
display: block;

margin-left: auto;
margin-right: auto;
text-align:center;
height:100px;margin: 0 auto;
text-align:center;
}


#updddb2 {
  width: 100%;
  text-align: center;
}



#updddb2 select {
  width: 100%;
  max-width: 400px; /* Optional: limit max width */
  margin: 0 auto;

  
 
border: 2px solid black;
border-radius: 1px;

text-align:center;
line-height:35px;
height:35px;
  
  
  
  
}





#contact_contact select {

float:left;
border: 2px solid black;
border-radius: 1px;
width:100%;
text-align:center;
line-height:35px;
height:35px;
}

input[type=submit] {
text-transform:uppercase;
border: 2px solid red;
border-radius: 2px;
width:30%;
text-align:center;
float:right;
line-height:46px;
height:50px;
background-color:#F00;
color:#FFF;
}
/*     ADDITIONAL SERVICES     */
#additional_services{
width:96%;
margin: 0 auto;
height:350px;
margin-top:20px;
margin-bottom:20px;
font-size:14px;
display:table;
background-color:#FFF;
}
/*     map and locations     */
#loc_holder{
background-color:#f0f0f0;
width:100%;
height:350px;
display:table;
padding-bottom:20px;
padding-top:20px;
}
#loc_info > h3{
color:#000;
width:90%;
text-align:center;
font-weight:bold;
font-size:18px;
text-transform:uppercase;
margin-top:2%;
margin-bottom:3%;
padding-left:3%;
}
#loc_buttons{
width:100%;
height:100px;
background-color:#0F0;
display:none;
}


#loc_info{
border:px solid red;
background-color:#FFF;
width:47%;
height:420px;
float:left;
overflow:scroll;
-webkit-overflow-scrolling: touch;
margin-left:2%;
margin-right:1%;

}
#loc_map{
background-color:#FFF;
width:47%;float:left;
margin-left:1%;
margin-right:2%;
height:400px;
display:table;
}



#mloc{
width:96.9%;
border:px solid blue;
float:left;
margin: 0 auto;
padding-left:3%;
padding-bottom:2%;
margin-bottom:2%;
	border-bottom: 2px solid #CCC;
}
#mloc_left{
width:55%;
height:115px;
display:table;
border:px solid green;
float:left;
padding-left:3%;
}
#loc_info_dir{
padding:2%;
width:30%;
height:110px;
display:table;
float:left;
}
#loc_info_dir #loc_info_maplink{width:80%;margin:0 auto;
margin-top:3%;
margin-bottom:10%;
text-align:center;
font-size:13px;}
#loc_info_dir #loc_info_maplink a{
	text-decoration:none;

	}
#loc_info_dir #loc_info_dist{width:80%;margin:0 auto;
margin-top:10%;
margin-bottom:3%;
text-align:center;
display:none;/* delete when sql code is done*/
}
	
	
.maptitle{	width:99%;
border:px solid red;
font-weight:bold;
text-transform:uppercase;}
.manager{width:99%;
border:px solid red;
margin-bottom:3px;margin-top:3px;}
.manager span{
	font-weight:bold;}
.addy1{text-transform:uppercase;width:99%;
border:px solid red;margin-bottom:3px;}
.addy2{text-transform:uppercase;width:99%;
border:px solid red;}
.phone1{width:99%;
border:px solid red;
font-size:12px;font-weight:600;}
.fax1{
width:99%;
border:px solid red;
font-size:12px;
font-weight:600;
}
}


/*mobile site*/
@media all and (max-width: 700px) {
    
    
    h4,h5{
  margin-top: 0;
    margin-bottom: 0;
}
    
    
    
    
    
#service_wrap{
padding:0;
margin:0;
width:100%;
height:300px;
max-height:300px;
display:none;
background-color:#000;
background-image: url('../images/734A5623.jpg') ;
background-size: cover;
background-repeat: no-repeat;
}	
h1{
color:#000;
width:90%;
text-align:center;
font-weight:800;
font-size:22px;
text-transform:uppercase;
margin-top:4%;
margin-bottom:3%;
padding-left:3%;
}


.po-info {font-size:10px;
  text-align: center;
  font-weight: ;
  color: red;
}



h2{color:#000;
font-size:20px;
width:100%;
text-align:center;
margin: 0 auto;
margin-top:10px;
margin-bottom:5px;
}




form label[for="PO"] {

    display: none;         /* Ensure label takes up full width */
  
}



#poHelp{
    
    font-size:10px;
width:90%;
    text-align:center;
    margin: 0 auto;
    border:px solid red;
    
    color:red;
   margin-top:5px; 
    
}
#errorBox{    
font-size:14px;
font-weight: bold;
background-color: #ffe5e5;
width:90%;line-height:50px;
height:50px;
text-align:center;
margin: 0 auto;
border:px solid red;
color: #b30000;
margin-top:5px;
margin-bottom:5px;
padding: 0.85em; 
border-radius: 4px;
 display:none;
}
.ok-box {  
border-radius: 4px; 
font-size:14px;
width:90%;
height:50px;line-height:50px;
text-align:center;
margin: 0 auto;
border:px solid red;
color: #0a5f1f;
font-weight: bold;
margin-top:5px;margin-bottom:5px; 
background-color: #e8f7ec;
padding: 0.85em;
display:none; 
    
}
   
   
   
   
   
   


   
   
   
   
   
   
   

section[aria-label="Repair Status Information"] {
 /* target section use div too  if u want */
 padding:10px;
}



























    .RepairStage1, .RepairStage2, .RepairStage3, .RepairStage4, .RepairStage5 {
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.40);
      border: 0px solid rgba(60, 60, 60,0.8) !important;
      margin: 10px 0;
      padding: 15px;
      min-height: 220px;
      width: 100%;
      background-color: #B14848;
      border: px solid yellow;
      z-index: 99;
      overflow: hidden;
      clear: both;
      border-radius: 5px; box-sizing: border-box;
    }
    .SqlActive {
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.40);
      border: 0px solid rgba(60, 60, 60,0.8) !important;
      background-color: #2e7d32 !important; color: white; margin: 20px 0; padding: 20px;
      border-radius: 6px; box-shadow: 0 0 10px #3c763d;
    }
    #notit { scroll-margin-top: 15px; }

    .disclaimer { font-size: 12px; font-style: italic; color: #555; margin-bottom: 15px;text-align:center; }

    img.stage-img {
      max-height: 100px; width: auto; float: left; margin-right: 15px;
      opacity: 0; transition: opacity 0.8s ease-in-out; border-radius: 4px; object-fit: cover;
    }
    img.stage-img.loaded { opacity: 1; }

    .Sheadtitle { font-weight: bold; font-size: 11px;  }
    .Sheadtitledesc { font-style: italic; color: #444; margin-bottom: 10px; }
    .Scont { clear: both; padding-top: 10px; font-size: 14px; }
    .sql-details { margin-top: 10px; border-top: px solid rgba(255,255,255,.5); padding-top: 8px; font-weight: 600; }

    .step-label { font-weight: 700; margin-bottom: 4px; font-size: 10px;color:#5bee5d;} /* You can style later */

    form label { font-weight: bold; display: inline-block; margin-bottom: 6px; }





































h3{margin-top:20px;
margin-bottom:5px;
color:#FFF;
font-size:14px;
width:100%;
text-align:center;


}
#thingstoknow{
border: 2px solid red;
border-radius: 3px;
width:30%;
margin: 0 auto;
text-transform:uppercase;
font-size:15px;
text-align:center;
line-height:46px;
height:48px;
display:table;
}	

#thingstoknow a{color:#FFF;width:100%;height:100%;display:block;text-decoration:none;
white-space:nowrap;
text-align:center;
padding-right:20px;}











#service_top{
margin: 0 auto;
width:60%;
display:table;
margin-bottom:8%;
}
#service_bottom{
height:49%;
width:100%;
display:table;
margin-bottom:8%;
}











/*     contact form     */
input, select, textarea{
-ms-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
-webkit-box-sizing:content-box; 
}
#contact_slide1{
display:table;
width:90%;
margin: 0 auto;
margin-bottom:30px;
margin-top:30px;
}
#contact_name{min-width:170px;width:100%;display:table;float:left;}
#contact_phone{min-width:170px;width:100%;display:table;float:right;white-space:nowrap;}
#contact_slide2{display:table;width:90%;margin: 0 auto;margin-bottom:30px;
margin-top:30px;}
#contact_email{min-width:170px;width:100%;display:table;float:left;}
#contact_contact{min-width:170px;width:100%;display:table;float:right;
white-space:nowrap;}



#contact_message{width:90%;display:table;margin: 0 auto;margin-bottom:20px;}

#contact_slide3{display:table;width:90%;margin: 0 auto;margin-bottom:30px;
margin-top:30px;}
form input[type="text"] {
    display: block;             /* Ensure the input is a block-level element */
    margin: 0 auto;             /* Center it horizontally */
    border: 2px solid black;
    border-radius: 4px;
    width: 90%;                 /* Ensure the width is set */
    text-align: center;         /* Center the text inside the input */
    line-height: 46px;          /* Adjust the height of the input */
    height: 30px;               /* Adjust the height */
}
textarea {
margin: 0 auto;
text-align:center;
clear:both;
border: 2px solid black;
border-radius: 1px;
width:100%;margin: 0 auto;
text-align:center;
display: block;

margin-left: auto;
margin-right: auto;
text-align:center;
height:100px;margin: 0 auto;
text-align:center;
}
select {
float:left;
border: 2px solid black;
border-radius: 1px;
width:100%;
text-align:center;
line-height:35px;
height:35px;
}

input[type=submit] {margin: 0 auto;    display: block;             /* Ensure the input is a block-level element */
text-transform:uppercase;
border: 2px solid #000;
border-radius: 2px;
width:90%;
text-align:center;

line-height:35px;
height:35px;
background-color:#000;
color:#FFF;margin-top:5px;
}
/*     ADDITIONAL SERVICES     */
#additional_services{
width:96%;
margin: 0 auto;
height:350px;
margin-top:20px;
margin-bottom:20px;
font-size:14px;
display:table;
background-color:#FFF;
}
/*     map and locations     */
#loc_holder{
background-color:#f0f0f0;
width:100%;
height:350px;
display:table;
padding-bottom:20px;
padding-top:20px;
}
#loc_info > h3{
color:#000;
width:90%;
text-align:center;
font-weight:bold;
font-size:18px;
text-transform:uppercase;
margin-top:2%;
margin-bottom:3%;
padding-left:3%;
}
#loc_buttons{
width:100%;
height:100px;
background-color:#0F0;
display:none;
}

.sub_menu2{display:none;}
#loc_info{border:px solid red;
background-color:#FFF;
width:100%;
-webkit-overflow-scrolling: touch;
display:table;

}
#loc_map{
background-color:#FFF;
width:100%;
height:400px;
display:table;
}



#mloc{
width:96.9%;
border:px solid blue;
float:left;
margin: 0 auto;
padding-left:3%;
padding-bottom:2%;
margin-bottom:2%;
	border-bottom: 2px solid #CCC;
}
#mloc_left{
width:55%;
height:115px;
display:table;
border:px solid green;
float:left;
padding-left:3%;
}
#loc_info_dir{
padding:2%;
border:px solid red;
width:30%;
height:110px;
display:table;
float:left;
}
#loc_info_dir #loc_info_maplink{;width:80%;margin:0 auto;
margin-top:3%;
margin-bottom:10%;
text-align:center;
font-size:13px;}
#loc_info_dir #loc_info_dist{width:80%;margin:0 auto;
margin-top:10%;
margin-bottom:3%;
text-align:center;
display:none;/* delete when sql code is done*/
}
.maptitle{	width:99%;
border:px solid red;
font-weight:bold;
text-transform:uppercase;}
.manager{width:99%;
border:px solid red;
margin-bottom:3px;margin-top:3px;}
.manager span{
	font-weight:bold;}
.addy1{text-transform:uppercase;width:99%;
border:px solid red;margin-bottom:3px;}
.addy2{text-transform:uppercase;width:99%;
border:px solid red;}
.phone1{width:99%;
border:px solid red;
font-size:12px;font-weight:600;}
.fax1{width:99%;
border:px solid red;font-size:12px;font-weight:600;}

}