#layout {
  width: 775px;
  height: 975px;
  background-color: black;
  margin: auto;
}

body {
  margin: 0px auto;
  background-color: #666666;
}

#titlebg {
  width: 775px;
  height: 123px;
}

.title {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 36px;
  font-weight: bold;
  color: white;
  width: 400px;
  margin-left: 40px;
  padding-top: 40px;
}

.title1 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  font-weight: bold;
  color: #fdc901;
  width: 30px;
  margin-left: 200px;
  margin-top: 5px;
  clear: left;
}

.title2 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: bold;
  color: white;
  width: 150px;
  margin-left: 575px;
  margin-top: 20px;
}

.title3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: bold;
  color: #66ff99;
  width: 250px;
  margin-left: 500px;
  margin-top: 5px;
}
 
.title4 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 25px;
  font-weight: bold;
  color: white ;
  width: 250px;
  margin-left: 530px;
  margin-top: -95px;
  
}
     
.title5 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: bold;
  color: white ;
  width: 250px;
  margin-left: 515px;
  margin-top: 5px;
}

#hrline {
  width: 775px;
  height: 5px;
  background-color: #787878;
}

#gradientbg {
  background-image: url("images/gradientbg.jpg");
  width: 775px;
  height: 294px;
  background-repeat: no-repeat;
  margin-top: -7px;
}

#header {
  background-image: url("images/20-07-2024-use.jpg");
  width: 512px;
  height: 393px;
  background-repeat: no-repeat;
  margin-left: 265px;
  margin-top: -250px ;
}

.header-intro {
  width: 215px ;
  height: 250px ;
  margin-left: 30px ;
  color: white ;
  font-weight: bold ;
  font-size: 16px ;
}  

#bodypart {
  width: 775px;
  height: 224px;
}

#catalogue {
  width: 215px;
  height: 223px;
  color: white;
}

.cat {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: bold;
  color: white;
  width: 240px;
  margin-left: 30px;
  padding-top: 20px;
}

#cat1 {
  background-image: url("images/image_1235-use.jpg");
  width: 200px;
  height: 142px;
  background-repeat: no-repeat;
  margin-top: 15px;
}

#ourservices {
  width: 240px;
  height: 212px;
  margin-left: 250px;
  margin-top: -258px;
  color: white;
}

.our {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: bold;
  color: white;
  width: 180px;
  margin-left: 30px;
  margin-top: -410px ;
  
}
     
#pic1 {
  background-image: url("images/image_0723-use.jpg");
  width: 200px;
  height: 142px;
  margin-top: 15px;
  background-repeat: no-repeat;
}

#pic2 {
  background-image: url("images/bassendean-use.jpg");
  width: 200px;
  height: 225px;
  background-repeat: no-repeat;
  margin-top: 15px;
  margin-left: 10px;
}

.txt {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: bold;
  color: #edfb16;
  width: 200px;
}

.txt1 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: bold;
  color: #edfb16;
  width: 200px;
  
}

.txt2 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: bold;
  color: #edfb16;
  width: 230px;
  
}

#aboutus {
  width: 500px;
  height: 300px;
  margin-left: 110%;
  margin-top: -260px;
}

.abt {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: bold;
  color: white;
  width: 200px;
  margin-left: 10px;
  margin-top: -425px ;
  
}

#hrline1 {
  width: 775px;
  height: 5px;
  background-color: #e99f08;
  margin-left: -250px;
  margin-top: 150px;
}

.foottxt {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: normal;
  color: #bfc1b4;
  text-align: center;
  margin-left: 0px;
  margin-top: 10px;
  text-decoration: none;
}

/*  START of MEDIA SCREEN SIZES   ****************************************************************** */

@media only screen and ( max-width : 360px ) {

#layout {
  height: 2000px ;
  max-width: 360px ;
 }

#titlebg {
  max-width: 360px;
  height: 223px;
}
   
.title {
  font-size: 25px;
  margin-left: 12% ;
} 
   
.title1 {
  margin-left: 40%;
  margin-top: 5px;
}
  
.title2 {
  margin-left: 36%;
  margin-top: -120px;
}

.title3 {
  margin-left: 17%;
  margin-top: 1px;
}

.title4 {
  margin-left: 22%;
  margin-top: 70px;
}

.title5 {
  margin-left: 20%;
  margin-top: 10px;
}

#header  {
  display: none ;
}

.header-intro {
  margin-left: 10% ;
}  

#bodypart  {
  max-width: 360px ;
}

#catalogue {
  margin-left: 10%;
}

#ourservices  {
  margin-left: 5% ;
}

.our  {
  margin-top: 260px ;
 
}

#aboutus   {
   margin-top: 420px ;
   margin-left: 5% ;
}

 }
  /* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX  */
@media only screen and ( max-width : 480px ) and ( min-width : 361px ) {

#layout {
  height: 2000px ;
  max-width: 480px ;
 }

#titlebg {
  max-width: 480px;
  height: 223px;
}
   
.title {
  font-size: 25px;
  margin-left: 18% ;
} 
   
.title1 {
  margin-left: 40%;
  margin-top: 5px;
}
  
.title2 {
  margin-left: 38%;
  margin-top: -120px;
}

.title3 {
  margin-left: 21%;
  margin-top: 1px;
}

.title4 {
  margin-left: 25%;
  margin-top: 70px;
}

.title5 {
  margin-left: 25%;
  margin-top: 10px;
}

#header  {
  display: none ;
}

.header-intro {
  margin-left: 15% ;
}  

#bodypart  {
  max-width: 480px ;
}

#catalogue {
  margin-left: 20%;
}

#ourservices  {
  margin-left: 5% ;
}

.our  {
  margin-top: 260px ;
 
}

#aboutus   {
   margin-top: 420px ;
   margin-left: 5% ;
}
  
}
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX  */
@media only screen and ( max-width : 740px ) and ( min-width : 481px ) {

#layout {
  height: 2000px ;
  max-width: 740px ;
 }

#titlebg {
  max-width: 740px;
  height: 223px;
}
   
.title {
  font-size: 25px;
  margin-left: 25% ;
} 
   
.title1 {
  margin-left: 40%;
  margin-top: 5px;
}
  
.title2 {
  margin-left: 38%;
  margin-top: -120px;
}

.title3 {
  margin-left: 27%;
  margin-top: 1px;
}

.title4 {
  margin-left: 30%;
  margin-top: 70px;
}

.title5 {
  margin-left: 30%;
  margin-top: 10px;
}

#header  {
  display: none ;
}

.header-intro {
  margin-left: 28% ;
}  

#bodypart  {
  max-width: 740px ;
}

#catalogue {
  margin-left: 25%;
}

#ourservices  {
  margin-left: 5% ;
}

.our  {
  margin-top: 260px ;
 
}

#aboutus   {
   margin-top: 420px ;
   margin-left: 5% ;
}
  
}