@font-face {
  font-family: GlacialIndifference-Bold;
  src: url('font/GlacialIndifference-Bold.otf');
}
@font-face {
  font-family: Ralewayt;
  src: url('font/Ralewayt.ttf');
}
@font-face {
  font-family: Arial;
  src: url('font/arialbd.ttf');
}
html {
  scroll-behavior: smooth;
   overflow-x: hidden;
   font-family: GlacialIndifference-Bold;
}
body{
  margin-top: -4%;
  height: 100%;

}
.content{
  height: 100%;
  position: relative;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  background-color: #223049;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
  border-style: none;
  box-shadow:
  0 2.8px 2.2px rgba(0, 0, 0, 0.034),
  0 6.7px 5.3px rgba(0, 0, 0, 0.048),
  0 12.5px 10px rgba(0, 0, 0, 0.06),
  0 22.3px 17.9px rgba(0, 0, 0, 0.072),
  0 41.8px 33.4px rgba(0, 0, 0, 0.086),
  0 100px 80px rgba(0, 0, 0, 0.12);
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 2vw;
  color: #fff;
  display: block;
  transition: 0.3s;
  z-index: 1;
}

.sidenav a:hover {
  color: #FFC707;
  background-color: #223049;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 40px;
}
#span {
  font-size: 5vw;
  cursor: pointer;
  position: fixed;
  left: 4%;
  top: 3%;
  color: #000;
  opacity: .7;
  z-index: 1;

}
#span:hover{
  transform: scale(1.5);
  transition: 0.3s;
  opacity: 1;
  color:  #000;
}
h4 {
    font-size: 2vw;
    line-height: 40px;
    padding: 0px;
    text-align: left;
    margin-left: 25%;
    position: relative;
    text-shadow: 1px 1px #000;
}


.parallax {
 background-image: url('images/home.png');
  min-height: 60%; 
  min-width: 100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;


}

  .parallax h1{
    line-height: 25;
    text-align: left;
    font-size: 2.25vw;
    color: white;
    display: block;
    letter-spacing: 4px;
    margin-left: 20%;
    margin-top: -10%;
    position: relative;
    word-wrap: break-word;
   }
   .parallax h2 {
    text-align: center;
    font-size: 1vw;
    line-height: 2;
    color: #111d5e;
   }
  h1 {
    text-align: center;
    font-size: 3.25vw;
    line-height: 2.5;
    color: #223049;
    color:  #fff;
    font-family: Arial;

   }
  h2{
    font-size: 1.5 vw;
    text-align: center;
     color: #000;
     letter-spacing: 1px;
     font-family: Ralewayt;
   }
    hr {
    max-width: 15%;
    height: 2%;
    background-color: #000;
    margin-top: -3.5%;
    margin-bottom: 5%;
    background-color: #FFC707;
    border-style: none;
   }

.box{
    background: #223049;
    overflow: hidden;
    position: absolute;
    transition: all 0.3s ease-in-out;
    max-width: 30%;
    margin-left: 17%;
    box-shadow:

}
.box:hover{ box-shadow: 0 0 15px rgba(0, 0, 0, 0.15); }

.box img{
    max-width: 100%;
    max-height: 25%;
    transform: scale(1.3);
    transition: all 0.3s ease-in-out;
}
.box:hover img{
    opacity: 0.3;
    transform: scale(1);
}
.box .box-content{
    color: #223049;
    background-color: #FFC707;
    width: 100%;
    font-size: 18px;
    font-weight: 700;
    padding: 10px 0 10px 30px;
    opacity: 0;
    transform: translateX(-50%) translateY(50%);
    position: absolute;
    bottom: 50%;
    left: 50%;
    z-index: 2;
    transition: all 0.3s ease-in-out;
}
.box:hover .box-content{
    opacity: 1;
    transform: translateX(-50%) translateY(25%);
}
.box .title{
    font-size: 2vw;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: capitalize;
    margin: 0 0 2px;
}
.box .post{
    font-size: 1vw;
    font-weight: 400;
    letter-spacing: 3px;
    text-transform: uppercase;
    display: block;
}
.box .icon{
    background-color: #fff;
    text-align: right;
    width: 25%;
    padding: 9px 30px 7px 0;
    margin: 0;
    list-style: none;
    opacity: 0;
    transform: translateX(-50%) translateY(130%);
    position: absolute;
    bottom: 50%;
    left: 50%;
    z-index: 1;
    transition: all 0.3s ease-in-out;
}
.box:hover .icon{
    opacity: 1;
    transform: translateX(-50%) translateY(130%);
}
.box .icon li{
    display: inline-block;
    margin: 0 4px;
    opacity: 0;
    transform: translateY(-40px);
    transition: all 0.3s ease-in-out;
    transition-delay: 0.2s;
}
.box:hover .icon li{
    opacity: 1;
    transform: translateY(0);
}
.box:hover .icon li:nth-child(2){ transition-delay: 0.4s; }
.box .icon li a{
    color: #FFC707;
    font-size: 17px;
    text-align: center;
    display: block;
    opacity: 0.7;
    transition: all 0.3s ease 0s;
}
.box .icon li a:hover{ opacity: 1; }




.box2{
    background: #223049;
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease-in-out;
    max-width: 30%;
    min-height: 50%;
    margin-left: 55%;
    margin-top: 0%;
    box-shadow:

}
.box2:hover{ box-shadow: 0 0 15px rgba(0, 0, 0, 0.15); }

.box2 img{
    width: 100%;
    height: 25%;
    transform: scale(1.3);
    transition: all 0.3s ease-in-out;
}
.box2:hover img{
    opacity: 0.3;
    transform: scale(1);
}
.box2 .box-content{
    color: #223049;
    background-color: #FFC707;;
    width: 95%;
    font-size: 2vw;
    font-weight: 700;
    padding: 10px 0 10px 30px;
    opacity: 0;
    transform: translateX(-50%) translateY(50%);
    position: absolute;
    bottom: 50%;
    left: 50%;
    z-index: 2;
    transition: all 0.3s ease-in-out;
}
.box2:hover .box-content{
    opacity: 1;
    transform: translateX(-50%) translateY(25%);
}
.box2 .title{
    font-size: 2vw;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: capitalize;
    margin: 0 0 2px;
}
.box2 .post{
    font-size: 1vw;
    font-weight: 400;
    letter-spacing: 3px;
    text-transform: uppercase;
    display: block;
}
.box2 .icon{
    background-color: #fff;
    text-align: right;
    width: 25%;
    padding: 9px 30px 7px 0;
    margin: 0;
    list-style: none;
    opacity: 0;
    transform: translateX(-50%) translateY(130%);
    position: absolute;
    bottom: 50%;
    left: 50%;
    z-index: 1;
    transition: all 0.3s ease-in-out;
}
.box2:hover .icon{
    opacity: 1;
    transform: translateX(-50%) translateY(130%);
}
.box2 .icon li{
    display: inline-block;
    margin: 0 4px;
    opacity: 0;
    transform: translateY(-40px);
    transition: all 0.3s ease-in-out;
    transition-delay: 0.2s;
}
.box:hover .icon li{
    opacity: 1;
    transform: translateY(0);
}
.box2:hover .icon li:nth-child(2){ transition-delay: 0.4s; }
.box2 .icon li a{
    color: #36100c;
    font-size: 17px;
    text-align: center;
    display: block;
    opacity: 0.7;
    transition: all 0.3s ease 0s;
}
.box2 .icon li a:hover{ opacity: 1; }

  .service1 {
    background-color: #fff;
    height: 100%;
    width: 100%;
    position: absolute;
    margin-top: -20%;
    font-size: 2vw;
    line-height: 2;
   }
   #p1 {
    font-size: 3vw;
    letter-spacing: 2px;
    color: #223049;
   }
   #h1 {
    margin-top: -2%;
    width: 6%;
    height: 1%;
    background-color: #FFC707;
    border-style: none;

   }
   .service1 p {
    font-size: 1.25vw;
    text-align: center;
    margin-top: 5%;
    margin-bottom: 3%;
     font-family: Ralewayt;
    }
   .text-block {
    position: absolute;
    bottom: 10%;
    right: 20%;
    background-color: none;
    color: white;
    padding-left: 20%;
    padding-right: 20%;
    font-size: 1.5vw;

  }


   .service1 .image1 {
      position: relative;
      min-height: 30%;
      min-width: 20%;
      display: inline-block;
      filter: blur(1px);
      -webkit-filter: blur(1px);
      margin-left: 5%;
      background-image: url('images/Flood/dredging/13.jpg');
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
   }
 
   .image1:hover {
      filter: 0;
      -webkit-filter: blur(0px);
      transition: .3s;
      box-shadow:
      0 2.8px 2.2px rgba(0, 0, 0, 0.034),
      0 6.7px 5.3px rgba(0, 0, 0, 0.048),
      0 12.5px 10px rgba(0, 0, 0, 0.06),
      0 22.3px 17.9px rgba(0, 0, 0, 0.072),
      0 41.8px 33.4px rgba(0, 0, 0, 0.086),
      0 100px 80px rgba(0, 0, 0, 0.12);
   }

     .service1 .image2 {
      position: relative;
      min-height: 30%;
      min-width: 20%;
      display: inline-block;
      filter: blur(1px);
      -webkit-filter: blur(1px);
      margin-left: 3%;
      background-image: url('images/Construction/Breakwater/4.jpg');
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
   }
 
   .image2:hover {
      filter: 0;
      -webkit-filter: blur(0px);
      transition: .3s;
      box-shadow:
      0 2.8px 2.2px rgba(0, 0, 0, 0.034),
      0 6.7px 5.3px rgba(0, 0, 0, 0.048),
      0 12.5px 10px rgba(0, 0, 0, 0.06),
      0 22.3px 17.9px rgba(0, 0, 0, 0.072),
      0 41.8px 33.4px rgba(0, 0, 0, 0.086),
      0 100px 80px rgba(0, 0, 0, 0.12);
   }
    .service1 .image3 {
      position: relative;
      min-height: 30%;
      min-width: 20%;
      display: inline-block;
      filter: blur(1px);
      -webkit-filter: blur(1px);
      margin-left: 3%;
      background-image: url('images/Equipment/Cranes/3.jpg');
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
   }
 
   .image3:hover {
      filter: 0;
      -webkit-filter: blur(0px);
      transition: .3s;
      box-shadow:
      0 2.8px 2.2px rgba(0, 0, 0, 0.034),
      0 6.7px 5.3px rgba(0, 0, 0, 0.048),
      0 12.5px 10px rgba(0, 0, 0, 0.06),
      0 22.3px 17.9px rgba(0, 0, 0, 0.072),
      0 41.8px 33.4px rgba(0, 0, 0, 0.086),
      0 100px 80px rgba(0, 0, 0, 0.12);
   }

     .service1 .image4 {
      position: relative;
      min-height: 30%;
      min-width: 20%;
      display: inline-block;
      filter: blur(1px);
      -webkit-filter: blur(1px);
      margin-left: 3%;
      background-image: url('images/Marine/Agrotech/c.jpg');
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
   }
 
   .image4:hover {
      filter: 0;
      -webkit-filter: blur(0px);
      transition: .3s;
      box-shadow:
      0 2.8px 2.2px rgba(0, 0, 0, 0.034),
      0 6.7px 5.3px rgba(0, 0, 0, 0.048),
      0 12.5px 10px rgba(0, 0, 0, 0.06),
      0 22.3px 17.9px rgba(0, 0, 0, 0.072),
      0 41.8px 33.4px rgba(0, 0, 0, 0.086),
      0 100px 80px rgba(0, 0, 0, 0.12);
   }

   .service1 .header{
    background-image: url('images/Flood/dredging/9.jpg');
    height: 16%; ;
    min-width: 10%;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color:  white;
    margin-bottom: 50%;
    display: block;
    margin-top: 10%;
   }


 .service2 {
    background-color: #fff;
    height: 100%;
    width: 100%;
    position: absolute;
    margin-top: 110%;
   }
   .service2 .header{
    background-image: url('images/Construction/Yacht/6.jpg');
    height: 16%; ;
    min-width: 10%;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color:  white;
    margin-bottom: 50%;
    display: block;
   }

 .service3 {
    background-color: #fff;
    height: 100%;
    width: 100%;
    position: absolute;
    margin-top: 15%;
   }
   .service3 .header{
    background-image: url('images/Equipment/Cranes/1.jpg');
    height: 16%; ;
    min-width: 10%;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color:  white;
    margin-bottom: 50%;
    display: block;
   }

    .service4 {
    background-color: #fff;
    height: 100%;
    width: 100%;
    position: absolute;
    margin-top: 90%;
   }
   .service4 .header{
    background-image: url('images/Marine/Agrotech/4.jpg');
    height: 16%; ;
    min-width: 10%;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color:  white;
    margin-bottom: 50%;
    display: block;
   }

.parallax2 {
  margin-top: 300%;
  background-image: url('images/home.png');
  min-height: 50%; 
  min-width: 100%;
  position: absolute;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: rgba(255,255,255,0.7);
  background-blend-mode: lighten;
  color:  white;
  font-family: sans-serif;
  margin-bottom: 10%;
  display: block;
 }
 .parallax2 img {
  width: 100%;
  margin-left: 1%; 
  }

 .parallax2 h1{
  line-height: 1;
  margin-left: 72%;
  font-size: 2.5vw;
    font-family: arialbd;
  color: #0c1831;
  margin-top: 4%;

 }
 .parallax2 h2{
  margin-left: 40%;
  margin-top: 5%;
  font-size: 2vw;
  color:#223049;
 }
.parallax2 hr {
  max-width: 6%;
  height: 0.5vw;
  background-color: #000;
  margin-top:  3%;
  margin-bottom: -1%;
  margin-left: 37%;
  background-color: #FFC707;
  border-style: none;
}
#p12{
  font-size: 2.5vw;
  margin-left: 37%;
  text-align: justify;
  line-height: 0;
  width: 50%;
  color:  #000;
  margin-bottom: 0%;
  font-family: arialbd;
  color: #0c1831;
  margin-top: -4%;
}
#p15{
  margin-left: 37%;
  margin-top: 1.25%;
  line-height: .6;
  text-align: left;
  color:  #000;
  margin-bottom: 3%;
}
#p13{
  font-size: 1.5vw;
  margin-left: 40%;
  margin-top: 1%;
  text-align: left;
  line-height: 1;
  width: 50%;
  color:  #000;
  margin-bottom: 3%;
  font-family: Ralewayt;
}

 .parallax2 p {
  font-size: 1vw;
  margin-left: 40%;
  margin-top: 8%;
  color:#000;
 }

 #p7{
  font-size: 1.5vw;
  margin-left: 7%;
  margin-top: 1%;
  width: 22%;
  word-wrap: break-word;
  text-align: center;
  color: #000;
  font-family: PlayfairDisplay-Regular;
 }
  .parallax2 h3{
  margin-left: 10%;
  margin-top: 11%;
  font-size: 2vw;
  color: #223049;
 }

 .parallax2 .logo {
  max-height: 25%;
  max-width: 25%;
  background-color: transparent;
  display: inline-block;

 }
 .logo img {
  display: block;
  margin: 0 auto;
  text-align: justify;
  position: sticky;
  width: 70%;
 }

  .logo2 img {
  display: block;
  margin: 0 auto;
  text-align: justify;
  width: 20%;
  margin-top: -26%;
  margin-left: 8%;
  position: sticky;
 }

 #p6 {
  font-size: 2.25vw;
  margin-left: 8%;
  margin-top: 3%;
  width: 22%;
  word-wrap: break-word;
  position: absolute;
  font-family: arialbd;
  color: #0c1831;
 }
  #p14 {
  font-size: 1.5vw;
  margin-left: 8%;
  margin-top: 6%;
  width: 22%;
  word-wrap: break-word;
  font-family: Ralewayt;
 }
.parallax2 a {
  font-size: 3vw;
  color: #223049;
  margin-left: 15%;
  margin-top: -30%;
  position: absolute;
}
.parallax2 i{
  color:  #223049;
  font-size: 2vw;
  margin-top: 0%;
  margin-left: 37%;
}
iframe{
  max-height: 20%;
  max-width: 20%;
  margin-top: -39%;
  margin-left: 72%;
  position: absolute;
  z-index: ;
}
.links {
  margin-top: 10%;
  margin-left: 30%;
  position: static;
}
.links2 {
  margin-top: 10%;
  margin-left: 40%;
  position: static;
}