 {box-sizing:border-box}
body {

}
body{

font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  width:100%;
  font-size: 18px;
  background-image: url(../images/pages/bgd.jpg);
  background-size: contain;
}


@media screen and (max-width:600px)
{
body  {
    font-size: 22px;
  }
}


hr{
  border: 3px solid red;
width: 10%;
}


h1 {
  font-family: 'Oswald', sans-serif;
text-align:center;
color:#ffffff;
}
h2
{
text-align: center;
font-family: georgia, times serif;

}

span
{
font-size: 25px;
}


.magc{
  width:100%;
  position: fixed;
  top: 0;
    z-index: 1;
opacity:0.9;

}

.top-images
{
  display:flex;
  background-color:   #000066;
  width:100%


}

.top-images img
{
  width:170px;
}

@media screen and (min-width: 992px){
 .top-images img  { width: 400px;

  }
}



.ryt
{
  width:40%
}

.lft
{
  display:flex;
  justify-content:flex-end;
width:60%

}


.hdn
{
	background-color: #eaeae1;
	 max-width: 100%;
    margin-left: 10%;
    margin-right: 10%;
	margin-top: 190px;
	border-radius: 10px;
   
}




.bodied{
	max-width: 100%;

}

.hdn
{
	background-color: #eaeae1;
	 max-width: 100%;
    margin-left: 10%;
    margin-right: 10%;
	margin-top: 190px;
	border-radius: 10px;
   
}

  .about-us
  {

    max-width: 100%;
    padding-left: 10%;
    padding-right: 10%;
    display: flex;
  margin:auto;
  margin-bottom: 20px;
    justify-content: center;
  flex-wrap: wrap;
  position:relative;

  }


  @media screen and (max-width: 768px){
    .about-us  {
      padding-left: 1%;
      padding-right: 1%;
    }
  }



.about-box1
   {
	  background-image: url(../images/bg2.png);
  background-size: contain;
    width: 100%;
  background-color: #d5d5c3;

  }
  
 /* desktop */
@media screen and (min-width: 992px){
  .about-box1 { width: 35%;

  }
}

/* tablets 
@media screen and (min-width: 600px){
 .about-box1  { width: 40%;

  }
}
  */

.about-box1 img {
  width:100%;
}

  .about-box2 {
    width: 100%;
  background-color:#ffffff ;
    padding: 30px;
  }
  
  /* desktop */
@media screen and (min-width: 820px){
  .about-box2 { width: 65%;

  }
}

 /* tablet */
@media screen and (max-width: 820px){
  .about-box2 { width: 100%;

  }
}
  
  
  
  .about-box2 img{
	  max-width:600px;
	  display: block;
	  margin:auto;
  }
  
   @media screen and (max-width: 600px){
    .about-box2 img  {
      width: 100%;
    }
  }
  
  

  @media screen and (max-width: 600px){
    .about-box1, .about-box2  {
      width: 100%;
    }
  }


table{
	width:300px;
text-align: center;
margin:auto;
background-color: #eaeae1;
}


	/* forms */

	.form
	{
	max-width: 94%;
	margin: auto;
	margin-top: 10px;
	margin-bottom: 20px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	background-color: white;
	border-radius: 15px
	
	}

	input[type=text], input[type=email], select, textarea
 {
  max-width: 100%;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
  width: 100%;

}

input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  width: 100%;
  }

  input[type=submit]:hover {
  background-color: #45a049;
}

/* what we do */



.headings
{
   width: 20%;
margin: auto
}

@media screen and (max-width: 600px){
  .headings { width: 100%;

  }
}


.what-we-do {
max-width: 100%;

padding: 20px;
display:flex;
margin:auto;
flex-wrap: wrap;
justify-content:center;
}

.box, .sbox
{
  width: 25%;
  height: auto;
  background-color:#ffffff;
  padding: 15px;
  border-radius: 15px;
  margin: 7px;

  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  overflow: hidden;
}



@media screen and (max-width: 600px){
  .box { width: 100%;

  }
}

@media screen and (max-width: 600px){
  .sbox { width: 100%;
height: 600px;
  }
}

@media screen and (max-width: 768px){
  .box { width: 100%;

  }
}

.box img{
  max-width: 50%;
  display: block;
  margin-left: auto;
  margin-right: auto;

}

.sbox img{
  max-width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;

}




.services{
  text-align: center;
}

.servicestxt{
  font-size: 17px;
}


/* policies */

.corp-box2 {
  width: 95%;
background-color:#ffffff ;

padding:20px;
padding-top: 20px;

  margin:auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
border-radius: 15px;

}



.button{
  width:100%;
   
background-color: #ddd;
margin: 10px auto;
text-align: center;
padding: 5px;
transition: 0.3s;
color: black;
}

.bt
{

  border-radius: 15px;

width:100%;

  text-align: center;
  font-size: 16px;

}



.button:hover {
  background-color: #ff0000;
  color: white;
}




/* category */
.category
{
display: -webkit-flex;
display: flex;
max-width: 1300px;
flex-wrap: wrap;
margin: auto;
margin-left: auto;
margin-right: auto;
-webkit-justify-content: center;
justify-content: center;

}

.categoryitems{
  margin:auto;
  width: 30%;
}

.categoryitems img
{
width: 100%;
height: 250px;
border-radius: 13px;
margin: 3px;
transition: opacity: 1;
}

.categoryitems img:hover
{
opacity: 0.5;
}

.categorytexts
{
position: relative;
display: block;
color: black;
background-color: white;
font-size: 20px;
text-align: center;
width: 100%;
margin-bottom: 8px;

}

.pbox{
	display: flex;
	flex-wrap: wrap;
	width: 1000px;
}

.pboxi img{
	width: 300px;
	margin:10px;
}