h1 {

  padding-left: 15%;
  padding-right: 15%;
}

body {
  font-family: "Abel", Helvetica,"Open Sans",  Arial, sans-serif;
  font-weight:300;
  font-size: 12px;
  /*line-height:30px;*/
  color:#777;
  background:rgb(214, 212, 209);
}
@-ms-viewport{
  width: extend-to-zoom;
  zoom: 1.0;
}

a:link {
    text-decoration: none;
    color:rgb(240, 240, 240);
    font-family: "Abel", Helvetica,"Open Sans",  Arial, sans-serif;
  }
  
 a:visited {
    text-decoration: none;
    color:rgb(226, 226, 226);
  }
  
  a:hover {
    text-decoration: none;
    color:rgb(156, 121, 78);
  }
  
  a:active {
    text-decoration: none;
    }    

.logo{display: flex;
  padding: 5px;
align-items: center;
justify-content: center;


}
.websitecontainer{
display:flex;
flex-direction: column;
align-items: center;
width: 100%;

}


.titlecontainer{
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color:rgb(27, 27, 27);
justify-content: left;
}


.titlecontainerleft{
  display: flex;
  flex-direction: row;
  align-items: center;
  color: rgb(221, 221, 221);
  height: 45px;
  padding-left: 10%;
  width:100%;

  
}
    
.titlecontainerright {
  display: flex;
justify-content: center;
  
  flex-direction: row;

  color: rgb(221, 221, 221);
  height: 45px;
  padding-right: 10%;
  align-items: center;
  flex-wrap: nowrap;
}



.menu { 
  display: flex;
    /*position: absolute;*/
   /* margin-top: -40px;*/
    /*top: -100px;*/

    /*height: 100%;*/
    font-family: "Helvetica";
    flex-direction: row;
    justify-content: right;
    margin-top: 0%;
    padding-top: 20px;
    padding-right: 9.2%;
    
    /*justify-content:flex-end;*/
    align-items:flex-start;
    
        }
  @media (max-width: 900px) {
    .menu {
            display: flex;
            width: 100%; /* shrink to 50% width on smaller screens */
            justify-content: right;
            padding-top: 10px;
    padding-right: 0%;
          }}

  @media (max-width: 500px) {
      .menu {
          display: flex;
          flex-direction: column;
          width: 100%; /* shrink to 50% width on smaller screens */
         justify-content: right;
         align-items:flex-end;
         padding-top: 30px;
        padding-right: 5%;
        background-color: rgb(27, 27, 27);
                  }}
               

.green {
flex:none;

     /* background-color: blueviolet;*/
  margin: 15px;
  position: relative;
  overflow: hidden;
  
  color: rgb(245, 245, 245);
  margin-top: 10px; 
  font-weight: 100;
  z-index: 2;
  background-color: rgba(27, 27, 27);
    font-size: 25px;
    margin-top: -30px;
    padding: 15px;
    padding-top: 40px;
  /*width: 100px;*/
}
@media (max-width: 900px) {
  .green {
    padding-top: 15px;
    margin-top: -15px;
    font-size: 20px;
  }}

  @media (max-width: 500px) {
    .green {
      padding:5px;
     
      font-size: 20px;
      justify-content: center;
      align-items: center;
    }}


.vidcontainer {
    /*position: relative;*/
  overflow: hidden;
  padding-top: -55px;

 width:auto;
 margin-top: -100px;
  /*margin-top: 100px;*/
}     

.video {
   /* position: absolute;*/
    top: -10;
    left: 0;
    width: 100%;
    margin-top: -50px;
    /*height: 100%;*/
    object-fit: cover;
}
     
.mainlogo{
  display:flex;
justify-content: flex-start;
height: 150px;

margin-left: 6%;
margin-top: -50px;
}
@media (max-width: 900px) {
  .mainlogo {
    margin-left: 1%;
    margin-top: -65px;
    height: 80px;
  }}
  @media (max-width: 500px) {
    .mainlogo {
      margin-left: 12%;
      margin-top: -130px;
      height: 120px;
    }}

  
.ourservices{
  display: flex;
  align-content: center;
  justify-content: center;
  margin: 30px auto 0;
  width: 50%;
  z-index: -1;

  background-color: rgb(27, 27, 27);
  color: #f5f5f5;

  padding-top:40px;
  padding-bottom:40px;
}
@media (max-width: 500px) {
  .ourservices {
    font-size: 10px;
    width: 100%;
  }}


.ourservices2{
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0;
  width: 100%;
  z-index: -1;

  background-color: rgb(27, 27, 27);
  color: #f5f5f5;

  padding-top:80px;
  padding-bottom:80px;
}
@media (max-width: 900px) {
  .ourservices2 {
    flex-direction: column;
    padding-top:40px;
  padding-bottom:40px;
  }}
@media (max-width: 500px) {
    .ourservices2 {
      flex-direction: column;
      padding-top:10px;
      font-size: 6px;
    padding-bottom:20px;
    margin-bottom: 10px;
    }}
  

    .aboutus{
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      margin: 0 auto 0;
      width: 20%;
      z-index: -1;
    
      background-color: rgb(27, 27, 27);
      color: #f5f5f5;
    
      padding-top:80px;
      padding-bottom:80px;
    }
    @media (max-width: 900px) {
      .aboutus {
        flex-direction: row;
        padding-top:40px;
      padding-bottom:40px;
      }}
    @media (max-width: 500px) {
        .aboutus {
          flex-direction: row;
          padding-top:10px;
          font-size: 6px;
        padding-bottom:20px;
        margin-bottom: 10px;
        }}
      





.textrow1 {
  
  align-content: center;
  text-align: center;
  font-size: 500%;
  width: 40%;
  padding-top: 15px;
  padding-right: 10%;
  color: #f5f5f5;
/*padding-left: 20%;*/
}
@media (max-width: 900px) {
  .textrow1 {
    width: 100%;
    padding-right: 0%;
  }}

.textrow12 {
  
  align-content: center;
  text-align: center;
  font-size: 500%;
  width: 60%;
  padding-top: 15px;
 
  color: #f5f5f5;
/*padding-left: 20%;*/
}
@media (max-width: 900px) {
  .textrow12 {
    width:100%;
    height: auto;
    padding: 0px;
  }}
  @media (max-width: 500px) {
    .textrow12 {
      width:100%;
      height: auto;
      padding: 0px;
      font-size: 300%;
    }}
  

.textrow2 {
  
  flex-wrap: wrap;
  width: 30%;
  align-items: center;
  text-align: center;
  font-size: 200%;
  color: #f5f5f5;
  /*padding-right: 10%;*/
 
  /*width: 50%;*/ 
}
@media (max-width: 900px) {
  .textrow2 {
    width: 80%;
  }}


.image-row {
  background-color: rgb(255, 255, 255);
  display: flex;
  align-content: center;
  flex-direction: row;
  flex-wrap: wrap;
  width:60% ;
  margin: 30px auto 50px;
  padding:0px;
  justify-content:space-between; /* Distribute the images evenly */

  border: 5px solid rgb(27, 27, 27);
}
@media (max-width: 900px) {
  .image-row{
    width: 90%;
    height: auto;
  }}
@media (max-width: 500px) {
  .image-row{
    width: 90%;
  
    
  }}


.image-row2{
  display: flex;
  background-color: rgb(27, 27, 27);
  align-content: center;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  justify-content:center; /* Distribute the images evenly */
  margin: 0 auto 0;
}
@media (max-width: 900px) {
  .image-row2{
    flex-wrap: wrap;
  }}
  @media (max-width: 500px) {
    .image-row2{
      width: 90%;
      height: auto;
      flex-wrap: wrap;
      
      padding-top: 10px;
    }}




.image-row-box {
  display: flex;
  background-color: rgb(255, 255, 255);
  flex-direction: column;
  align-items:stretch;
  justify-content: space-evenly;
  
 width: 50%;
  height: auto;
  overflow: hidden;
  padding-top: 5px;
  justify-content: top;
  padding: 10px;
}
@media (max-width: 900px) {
  .image-row-box{
    width: 50%;
    height: auto;
    overflow: cover;
  }}

  @media (max-width: 500px) {
    .image-row-box{
      width: 50%;
      height: auto;
      overflow: hidden;
      padding-top: 0px;
    }}
  
 

.image-row-box2 {
  display: flex;
  background-color: rgb(27, 27, 27);
  flex-direction: column;
  align-items:stretch;
  justify-content: center;
  
 width: 40%;
  height: auto;
  overflow: hidden;
  padding-top: 5px;
  justify-content: top;
  padding: 10px;

}
@media (max-width: 800px) {
  .image-row-box2{
    width: 50%;
    height: auto;
    overflow: cover;
    padding-top: 0px;
  }}

@media (max-width: 500px) {
  .image-row-box2{
    width: 50%;
    height: auto;
    overflow: cover;
    padding-top: 0px;
  }}


.image-row-box img {
  
  /*border-radius: 60%;*/
  width:auto;
  height: 500px;
  object-fit: cover;
}
@media (max-width: 900px) {
  .image-row-box img {
    width:auto;
    height: 400px;
    object-fit: cover;
  }}
  @media (max-width: 900px) {
    .image-row-box img {
      width:auto;
      height: 150px;
      object-fit: cover;
    }}



.image-row-box2 img {
  
  /*border-radius: 60%;*/
  width:auto;
  height: 500px;
  object-fit: cover;
}
@media (max-width: 900px) {
  .image-row-box2 img {
    width:100%;
    height: auto;
  }}


.image-row-title{
  display: flex;
  font-size: 25px;
  justify-content: center;
  padding: 8px;
  color: #f5f5f5;
  width: 100%;
 /* width: 24.5%;*/
 z-index: 1;
  background-color: rgb(27, 27, 27);
}
@media (max-width: 500px) {
  .image-row-title {
    font-size: 15px;
    padding: 5px;
    padding-bottom: -5px;
  }}
/*.image-row-box img {

 width: 24.45%;
  transition: transform 0.2s; /* Add a transition effect */






  * {
    margin:0;
    padding:0;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-font-smoothing:antialiased;
    -moz-font-smoothing:antialiased;
    -o-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}
 
.butt{
  display: flex;
  flex-direction: row;
align-content: center;
flex-wrap: nowrap;
justify-content: center;

width: 100%;
margin: 0 auto 0;
}
@media (max-width: 900px) {
  .butt {
    flex-direction: column;
    height: auto;
  }}


.contactuscontainer {
  
display: flex;
align-content: center;
flex-wrap: nowrap;
justify-content: center;
width:auto;



margin: 0 0 0;
padding: 0;

}


.contactuscontainer img{
 height: 640px;
  object-fit: contain;
  padding-top: 50px;


}
@media (max-width: 900px) {
  .contactuscontainer img{
    display: none;
  }
}


.container {
  
  
    width:100%;
padding: 0;
    margin:0;
  
}
 
#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea, #contact button[type="submit"] { font:400 12px/16px "Open Sans", Helvetica, Arial, sans-serif; }
 
#contact {
    background:#F9F9F9;
    padding:25px;
    margin:50px 0;
}
 
@media (max-width: 900px) {
  .contact{
    width: 100%;
    margin:50px;
  }
}

#contact h3 {
    color: rgb(27, 27, 27);
    display: block;
    font-size: 30px;
    font-weight: 700;
}
 
#contact h4 {
    margin:5px 0 15px;
    display:block;
    color: black;
    font-size:13px;
}
 
fieldset {
    border: medium none !important;
    margin: 0 0 10px;
    min-width: 100%;
    padding: 0;
    width: 100%;
}
 
#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact textarea {
    width:100%;
    border:1px solid #CCC;
    background:#FFF;
    margin:0 0 5px;
    padding:10px;
}
 
#contact input[type="text"]:hover, #contact input[type="email"]:hover, #contact input[type="tel"]:hover, #contact input[type="url"]:hover, #contact textarea:hover {
    -webkit-transition:border-color 0.3s ease-in-out;
    -moz-transition:border-color 0.3s ease-in-out;
    transition:border-color 0.3s ease-in-out;
    border:1px solid #AAA;
}
 
#contact textarea {
    height:100px;
    max-width:100%;
  resize:none;
}
 
#contact button[type="submit"] {
    cursor:pointer;
    width: 100%;
    border:none;
    background:rgb(3, 153, 212);
    color:#FFF;
    margin:0 0 5px;
    padding:10px;
    font-size:15px;
}
 
#contact button[type="submit"]:hover {
    background:#09C;
    -webkit-transition:background 0.3s ease-in-out;
    -moz-transition:background 0.3s ease-in-out;
    transition:background-color 0.3s ease-in-out;
}
 
#contact button[type="submit"]:active { box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5); }
 
#contact input:focus, #contact textarea:focus {
    outline:0;
    border:1px solid #999;
}
::-webkit-input-placeholder {
 color:#888;
}
:-moz-placeholder {
 color:#888;
}
::-moz-placeholder {
 color:#888;
}
:-ms-input-placeholder {
 color:#888;
}
 
.success{
    color: green;
    font-weight: 700;
    padding: 5px;
    text-align: center;
}
.failed{
    color: red;
    font-weight: 700;
    padding: 5px;
    text-align: center;
}


/* image slider section*/

.slider-container {
  display: flex;
  overflow-x: hidden;
  width: 100%;
  height: auto;
  margin-top: -200px;
  z-index: -10;
}
@media (max-width: 900px) {
  .slider-container {
    margin-top: -0px;
  }}


.slider {
  display: flex;
  width: 100%;
  z-index: -1;
}

.slider img {
  width:100%;
  height: auto;
  object-fit: cover;
  z-index: -1;
}

.prev-arrow,
.next-arrow {
  position: absolute;
  top: 35%;
  transform: translateY(-50%);
  background-color: transparent;
  border: none;
  color: white;
  font-size: 25px;
  cursor: pointer;
}

.prev-arrow {
  left: 0;
  padding-left: 30px;
}

.next-arrow {
  right:0;
  padding-right: 30px;
}





.image-fade {
  display: flex;
  overflow-x: hidden;
  width: 100%;
  height: auto;
  margin-top: -200px;
  z-index: -1;
}
@media (max-width: 900px) {
  .image-fade {
    margin-top: -100px;
  }}

  @media (max-width: 500px) {
    .image-fade {
      margin-top: 10px;
    }}
  

.image {
  display: none;
  top: 200px;
  left: 0;
  opacity: 0;
  transition: opacity 2s ease-in-out;

  width: 100%;
  z-index: -1;

  height: auto;
  /*object-fit: cover;*/
  z-index: -1;
}

  
.image.active {
  opacity: 1;
  display: block;
  transition: opacity 2s ease-in-out;
}



.websitecontainerabout{
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-content: flex-start;
  width: 100%;
  background: black;
  }

.ericimage{
  display: flex;
  width : auto;
  align-content: flex-start;
  height : 500px;
  padding-left: 10%;
  padding-top:20px;
  background-color: rgb(0, 0, 0);
}
@media (max-width: 1100px) {
  .ericimage {
    width: auto;
    height: 300px;
  }}

.textrowabout {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  align-items: flex-start;
  text-align: center;justify-content: center;
  font-size: 400%;
  color: #f5f5f5;
  padding-top: 50px;
  padding-bottom: 50px;
  background-color: black;
  /*padding-right: 10%;*/
 
  /*width: 50%;*/ 
}
@media (max-width: 900px) {
  .textrowabout {
    width: 100%;
  }}

  @media (max-width: 700px) {
    .textrowabout {
      flex-direction: column;
    }}

  .textrowabout2 {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 80%;
    align-items: center;
    text-align: center;
    justify-content: center;
    font-size: 150%;
    color: #f5f5f5;
    background-color: black;
    padding: 0;
    /*padding-right: 10%;*/
   
    /*width: 50%;*/ 
  }
  @media (max-width: 900px) {
    .textrowabout2 {
      width: 100%;
    }}


    .aboutc{display: flex;
      width:600%;
      background-color: rgb(0, 0, 0);
      flex-direction: column;
      align-items: flex-start;
      justify-content: left;
      padding-top:10px;
    padding-right: 10%;
    font-size: 40%;
  padding-left: 10%;
  padding-bottom:50px;
  text-align: left;
}
@media (max-width: 900px) {
  .aboutc {
    width: 100%;
  }}