@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

* {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
}

html {
   scroll-behavior: smooth;
}

body {

   font-family: 'Poppins', sans-serif;
   overflow-x: hidden;
}

/* --------------------------------scroll--------------------------------- */
#scroll-btn {

   position: fixed;
   bottom: 30px;
   right: 30px;
   z-index: 100;
   cursor: pointer;
}

/* Float Shadow */
.scroll-btn {
   display: inline-block;
   vertical-align: middle;
   -webkit-transform: perspective(1px) translateZ(0);
   transform: perspective(1px) translateZ(0);
   box-shadow: 0 0 1px rgba(0, 0, 0, 0);
   position: relative;
   -webkit-transition-duration: 0.3s;
   transition-duration: 0.3s;
   -webkit-transition-property: transform;
   transition-property: transform;
}

.scroll-btn:before {
   pointer-events: none;
   position: absolute;
   z-index: -1;
   content: '';
   top: 100%;
   left: 5%;
   height: 10px;
   width: 90%;
   opacity: 0;
   background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
   background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
   /* W3C */
   -webkit-transition-duration: 0.3s;
   transition-duration: 0.3s;
   -webkit-transition-property: transform, opacity;
   transition-property: transform, opacity;
}

.scroll-btn:hover,
.scroll-btn:focus,
.scroll-btn:active {
   -webkit-transform: translateY(-5px);
   transform: translateY(-5px);
   /* move the element up by 5px */
}

.scroll-btn:hover:before,
.scroll-btn:focus:before,
.scroll-btn:active:before {
   opacity: 1;
   -webkit-transform: translateY(5px);
   transform: translateY(5px);
   /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */
}


/*-------------------------- Preloader -------------------------------------*/

.preloader {
   position: fixed;
   top: 0;
   left: 0;
   z-index: 999999999;
   width: 100%;
   height: 100%;
   background-color: #fff;
   overflow: hidden;
}

.preloader-inner {
   position: absolute;
   top: 50%;
   left: 50%;
   -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
}

.preloader-icon {
   width: 100px;
   height: 100px;
   display: inline-block;
   padding: 0px;
}

.preloader-icon span {
   position: absolute;
   display: inline-block;
   width: 100px;
   height: 100px;
   border-radius: 100%;
   background: rgb(0, 129, 53);
   -webkit-animation: preloader-fx 1.6s linear infinite;
   animation: preloader-fx 1.6s linear infinite;
}

.preloader-icon span:last-child {
   animation-delay: -0.8s;
   -webkit-animation-delay: -0.8s;
}

@keyframes preloader-fx {
   0% {
      -webkit-transform: scale(0, 0);
      transform: scale(0, 0);
      opacity: 0.5;
   }

   100% {
      -webkit-transform: scale(1, 1);
      transform: scale(1, 1);
      opacity: 0;
   }
}

@-webkit-keyframes preloader-fx {
   0% {
      -webkit-transform: scale(0, 0);
      opacity: 0.5;
   }

   100% {
      -webkit-transform: scale(1, 1);
      opacity: 0;
   }
}

/* ======================================navbar===================================== */

nav {

   border-bottom: 2px solid rgb(0, 0, 0, .1);

   color: white;
   text-transform: uppercase;
   /* color: white; */
}

nav ul li {
   /* background-color: rgb(202, 202, 202); */
   margin-left: 14px;

}

nav ul li a {
   font-size: 18px;
   font-weight: 680;
   /* background-color: aqua; */

}

/* Overline Reveal */
nav ul li a {
   display: inline-block;
   vertical-align: middle;
   -webkit-transform: perspective(1px) translateZ(0);
   transform: perspective(1px) translateZ(0);
   box-shadow: 0 0 1px rgba(0, 0, 0, 0);
   position: relative;
   overflow: hidden;
}

nav ul li a:before {
   content: "";
   position: absolute;
   z-index: -1;
   left: 0;
   right: 0;
   top: 0;
   background: rgb(0, 129, 53);
   height: 4px;
   -webkit-transform: translateY(-4px);
   transform: translateY(-4px);
   -webkit-transition-property: transform;
   transition-property: transform;
   -webkit-transition-duration: 0.3s;
   transition-duration: 0.3s;
   -webkit-transition-timing-function: ease-out;
   transition-timing-function: ease-out;
}

nav ul li a:hover:before,
nav ul li a:focus:before,
nav ul li a:active:before {
   -webkit-transform: translateY(0);
   transform: translateY(0);

}


/* ==========================================about=========================================== */

.about-top {
   /* position: relative; */
   margin-top: 128px;
}

.about-head {

   background-image: url('../image/bg/c6.jpg');
   background-position: center center;
   background-repeat: no-repeat;
   /* background-attachment: fixed; */
   background-size: cover;

}

.about-head .about-middle {
   /* background-color: rgb(32, 31, 31); */
   background-image: linear-gradient(to right, rgb(39, 38, 38, .7), rgb(32, 30, 30, .6));
   /* opacity: .8; */
}

.about-head .about-title {
   padding: 100px 0px;
   color: white;
}

.about-head .about-title h1 {
   font-size: 65px;
   font-weight: 800;
   letter-spacing: 2px;
   text-transform: uppercase;

   /* text-shadow: 0 2px 5px black; */
}

.about-head .about-title p {
   text-transform: uppercase;
   font-weight: 700;
}

.about-head .about-title p a {
   text-decoration: none;
   color: white;
}

.about-head .about-title p a:hover {
   border-bottom: 3px solid rgb(0, 129, 53);
}

/* ----------------about 1 ---------------------------- */

.about-1-head {

   background-image: url('../image/bg/b1.jpg');
   background-position: center center;
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-size: cover;

}

.about-1-row {
   background-image: linear-gradient(to right, rgba(255, 250, 250, 0.8), rgb(251, 251, 251, .8), white);
}

.about-1-row img {
   box-shadow: 2px 2px 7px rgb(122, 121, 121), 2px 2px 10px rgb(90, 87, 87);
}

.about-1-head .about-1-col1 h5 {
   color: rgb(0, 129, 53);
   letter-spacing: 1px;
   /* line-height: 35px; */
}

.about-1-head .about-1-col1 h1 {
   font-size: 50px;
   font-weight: 700;

}

.about-1-head .about-1-col1 p {
   font-size: 17px;
   font-weight: 500;
   letter-spacing: 1px;
   word-spacing: 2px;
}

@media (min-width:992px) and (max-width:1200px) {
   .about-1-head .about-1-col1 h1 {
      font-size: 40px;
      font-weight: 700;
   }

   .about-1-head .about-1-col1 p {
      font-size: 16px;
   }
}

/* ------------------about 2----------------------- */
.contact-plan {
   /* background-color: rgb(255, 243, 243); */
   padding: 50px 0px;

}

.contact-plan h2 {
   text-align: center;
   text-transform: uppercase;
   /* color:  rgb(157, 158, 157); */
   color: rgb(0, 129, 53);
   font-weight: 650;
   letter-spacing: 1px;

}

.about-2-row .about-2-col {
   background-color: white;
   box-shadow: 0 2px 4px rgb(231, 226, 226), 0 2px 4px rgb(201, 197, 197);
   padding: 20px;
   height: 150px;
   transition: 1s ease;
}

.about-2-row .about-2-col:hover {
   transform: scale(1.2);
   /* background-color: rgb(0, 129, 53) ;
      color: white; */
}

.about-2-row p {
   font-size: 18px;
   font-weight: 700;
   letter-spacing: 1px;
   margin-top: 5px;
}

/* -------------------------about 3 -------------------------- */
.about-3-pad {
   padding: 40px 0;
}

.about-3-row h5 {
   font-size: 38px;
   font-weight: 600;
   letter-spacing: 1px;
   color: rgb(0, 129, 53);


}

.about-3-row p {
   font-size: 17px;
   font-weight: 550;
   letter-spacing: 1px;
   word-spacing: 1px;
   /* line-height: 10px; */
}

/* ===========================================service================================================ */
.service-top {
   margin-top: 128px;
}

.service-head {
   background-image: url('../image/bg/c3.jpg');
   background-position: center center;
   background-repeat: no-repeat;
   /* background-attachment: fixed; */
   background-size: cover;
}

.service-head .service-middle {

   background-image: linear-gradient(to right, rgb(39, 38, 38, .7), rgb(32, 30, 30, .6));

}

.service-head .service-title {
   padding: 100px 0px;
   color: white;
}

.service-head .service-title h1 {
   font-size: 65px;
   font-weight: 800;
   letter-spacing: 2px;
   text-transform: uppercase;
   text-shadow: 1px 2px 5px black;

}

.service-head .service-title p {
   text-transform: uppercase;
   font-weight: 700;
}

.service-head .service-title p a {
   text-decoration: none;
   color: white;
}

.service-head .service-title p a:hover {
   border-bottom: 3px solid rgb(0, 129, 53);

}

/* ------------------service 1------------------------ */
.service-1 h3 {
   font-size: 45px;
   font-weight: 660;
   letter-spacing: 1px;
}

.service-row-1 .box-col {
   height: 170px;
   width: 100%;
   padding: 40px;
   text-align: center;
   transition: 1s ease-out;

}

.service-row-1 .box-col:hover {
   /* transform: scale(1.2); */
   transform: rotate(10deg);
}

.service-row-1 p i {
   font-size: 50px;
}

.service-row-1 h5 {
   font-size: 20px;

}

.service-row-1 .box-1 {
   background-color: rgb(19, 71, 212);
   color: white;
}

.service-row-1 .box-2 {
   background-color: rgb(1, 30, 54);
   color: white;
}

.service-row-1 .box-3 {
   background-color: rgb(229, 242, 255);
}

@media (min-width:1200px) and (max-width:1400px) {
   .service-row-1 .box-3 h5 {
      margin-right: 25px;
      font-size: 18px;
   }
}



.service-row-1 .box-4 {
   background-color: rgb(226, 101, 63);
   color: white;
}

@media (min-width:1200px) and (max-width:1400px) {
   .service-row-1 .box-4 h5 {
      margin-right: 25px;
      font-size: 19px;
   }

   .service-row-1 .box-col {
      height: 170px;
      width: 100%;
      padding: 37px;
      text-align: center;
      transition: 1s ease-out;

   }
}

.service-row-1 .box-5 {
   background-color: rgba(230, 225, 217, 0.308);
}

.service-row-1 .box-6 {
   background-color: rgb(253, 250, 250);
}

/* -----------------service 2 --------------------------- */
.parent-bg {
   padding: 70px 0px;
   background-color: rgb(238, 241, 242);
}

.parent-bg h2 {
   font-size: 60px;
   font-weight: 650;
   padding-bottom: 50px;
   text-align: center;
}


.parent {
   margin: 5px;
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   grid-auto-rows: 350px;
   grid-gap: 20px;
   word-wrap: break-word;


}

.child {
   background-color: white;
   color: rgb(8, 6, 6);
   padding: 30px;
   display: flex;
   justify-content: center;
   align-items: center;
   word-break: break-word;
   text-align: center;
}

.child h1 {
   font-size: 60px;
}

.child h5 {
   font-weight: 700;
   letter-spacing: 2px;
   font-style: italic;
}

.child p {
   color: grey;
   font-weight: 490;

}

.child a {
   text-decoration: none;
   color: black;
   font-size: 17px;
   font-weight: 550;
   text-transform: uppercase;
   letter-spacing: 2px;
   padding-bottom: 3px;
   border-bottom: 1px solid black;
}


@media (min-width:768px) and (max-width:995px) {
   .parent {
      margin: 5px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: 350px;
      grid-gap: 20px;
      word-wrap: break-word;
   }
}

@media (min-width:568px) and (max-width:767PX) {
   .parent {
      margin: 0px 20px;
      display: grid;
      grid-template-columns: 1fr;
      grid-auto-rows: 350px;
      grid-gap: 20px;
      word-wrap: break-word;
   }
}

@media (max-width:567px) {
   .parent {
      margin: 0px 20px;
      display: grid;
      grid-template-columns: 1fr;
      grid-auto-rows: 350px;
      grid-gap: 20px;
      word-wrap: break-word;
   }
}

/* ---------------------------service 3----------------------- */
.service-3-head h3 {
   font-size: 45px;
   text-align: center;
   margin-top: 20px;
   font-weight: 660;
   letter-spacing: 1px;
   text-transform: uppercase;
   color: rgb(0, 129, 53);
}


.mission-row .mission-col h2 {
   text-transform: uppercase;
   font-weight: 700;
   letter-spacing: 2px;
}

.mission-row .mission-col h5 {
   font-size: 17px;
   font-weight: 500;
   color: grey;
   margin-top: 14px;
}

/* =============================================career========================================== */
.careers-top {
   margin-top: 128px;
}

.careers-head {
   background-image: url('../image/bg/f7.webp');
   background-position: center center;
   background-repeat: no-repeat;
   /* background-attachment: fixed; */
   background-size: cover;
}

.careers-head .careers-middle {

   background-image: linear-gradient(to right, rgb(39, 38, 38, .6), rgb(32, 30, 30, .5));

}

.careers-head .careers-title {
   padding: 100px 0px;
   color: white;
}

.careers-head .careers-title h1 {
   font-size: 65px;
   font-weight: 800;
   letter-spacing: 2px;
   text-transform: uppercase;
   text-shadow: 1px 2px 5px rgb(0, 0, 0);

}

.careers-head .careers-title p {
   text-transform: uppercase;
   font-weight: 700;
}

.careers-head .careers-title p a {
   text-decoration: none;
   color: white;
}

.careers-head .careers-title p a:hover {
   border-bottom: 3px solid rgb(0, 129, 53);

}


/* ---------------career 1------------------------ */
.career1 {
   padding: 80px 0;
}

.career1-row h1 {
   font-size: 45px;
   letter-spacing: 1px;
   font-weight: 700;
   /* text-transform: uppercase; */
}

.career1-row h5 {
   font-size: 17px;
   line-height: 25px;
   color: grey;
}

.career1-row img {
   box-shadow: 1px 3px 20px rgb(90, 90, 90);
}

/* ----------------career 2--------------------- */

.career2-bg {
   background-color: rgba(238, 231, 231, 0.4);
   padding: 80px 0
}

.career2 h2 {
   text-align: center;
   font-size: 16px;
   color: rgb(0, 129, 53);
   font-weight: 500;
   letter-spacing: 1px;
}

.career2 h1 {
   text-align: center;
   font-size: 45px;
   font-weight: 700;
   letter-spacing: 1px;
}

.career2-row {
   margin-top: 30px;
}

.career2-row .card {
   box-shadow: 2px 2px 10px 1px rgb(184, 180, 180);
   border-radius: 15px;
   padding: 0 0 15px 0;
   transition: 1s ease;
}

.career2-row .card:hover img {

   opacity: .7;
}

.career2-row .card:hover {
   /* transform: scale(1.1); */
   transform: skew(2deg);
}

.career2-row h5 {
   font-size: 24px;
   font-weight: 620;
   text-align: center;
}

.career2-row p {
   font-size: 17px;
   font-weight: 500;
   color: grey;
}

/* ---------------career 3 ------------------- */
.career3-bg {
   background-color: #030038;
   color: white;
   padding: 90px 0;
}

.career3-bg h1 {
   font-size: 43px;
   text-align: center;
}

.career3-bg h5 {
   color: rgb(211, 206, 206, .8);
   font-size: 17px;
   margin-top: 20px;
   text-indent: 150px;
   font-weight: 450;
}

/* =========================================contact================================================= */

.contact-top {
   margin-top: 128px;
}

.contact-head {
   background-image: url('../image/bg/f8.png');
   background-position: center center;
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-size: cover;


}

.contact-head .contact-middle {
   background-color: rgb(19, 18, 18);
   opacity: .8;
}

.contact-head .contact-title {
   padding: 100px 0px;
   color: white;
}

.contact-head .contact-title h1 {
   font-size: 65px;
   font-weight: 800;
   letter-spacing: 2px;
   text-transform: uppercase;
   /* text-shadow: 0 2px 5px black; */
}

.contact-head .contact-title p {
   text-transform: uppercase;
   font-weight: 700;
}

.contact-head .contact-title p a {
   text-decoration: none;
   color: white;
}

.contact-head .contact-title p a:hover {
   border-bottom: 3px solid rgb(0, 129, 53);
}

/* ---------------contact 2------------------------- */
.info-row h3 {
   font-weight: 700;
   opacity: .5;
}

.info-row p {
   font-size: 17px;
   font-weight: 600;
}

.info-row .first,
.third {
   box-shadow: 2px 4px 7px rgb(224, 221, 221);
}

.info-row .second {
   box-shadow: 0 0 5px rgb(202, 199, 199);
}

/* -------------------contact 3----------------------- */
.contact-row h2 {
   font-weight: 600;
   color: rgb(0, 129, 53);

}

.contact-row p {
   font-weight: 600;
   color: grey;
}


/* -----------------------enquiry --------------------------- */
.enquiry-head {
   background-image: linear-gradient(to right, rgb(255, 254, 254, .8), rgba(241, 231, 231, 0.8));
   /* background-color: rgba(240, 237, 237, 0.527); */
   border-radius: 10px;
   box-shadow: 2px 3px 9px rgb(7, 6, 6);
}

.enquiry-head h4 {
   font-weight: 700;

}

.enquiry-head p {
   font-weight: 600;
   color: rgb(15, 14, 14, .8);
}

/* ======================================footer========================================== */

footer {
   background-color: #241f1f;

   /* background-image: linear-gradient(to right , rgb(43, 42, 42),rgb(34, 28, 28)); */
   color: white;
   position: relative;
}

footer h3 {
   opacity: .3;
   margin-top: 24px;

}

footer ul li {
   list-style: none;
   line-height: 32px;
}

footer ul li a {
   text-decoration: none;
   color: white;
   font-size: 17px;
}

footer ul li i {
   color: rgb(0, 129, 53);
   font-size: 18px;
}

footer ul li a:hover {
   /* text-decoration: underline red; */
   border-bottom: 2px solid rgb(0, 129, 53);
   color: white;

}


footer .social-icon li {
   display: inline-block;

   margin-left: 9px;
   margin-top: 10px;

}

footer .social-icon li a i {
   width: 38px;
   height: 38px;
   line-height: 38px;
   font-size: 20px;
   text-align: center;
   color: white;
   border-radius: 2px;
   background-color: rgb(63, 63, 63);
   -webkit-transition: all ease 0.5s;
   transition: all ease 0.5s;
}

footer .social-icon li a:hover i {
   -webkit-transform: translateY(-3px);

   transform: translateY(-3px);
   background-color: rgb(0, 129, 53);
   color: white;
}

footer .last {
   color: rgb(156, 154, 154);
   font-weight: 500;
   opacity: .7 bx-fade-right-hover;
}

footer .last a {
   text-decoration: none;
   color: rgb(255, 250, 250);

}

footer .last a:hover {
   color: rgb(0, 129, 53);
}

.wave {
   position: absolute;
   top: -69%;
   z-index: -1;

}

@media (min-width: 1201px) and (max-width: 1420px) {
   .wave {
      position: absolute;
      top: -53%;
      z-index: -1;
   }
}

@media (min-width: 992px) and (max-width: 1200px) {
   .wave {
      position: absolute;
      top: -40%;
      z-index: -1;
   }
}

@media (min-width: 768px) and (max-width: 991px) {

   .wave {
      position: absolute;
      top: -25%;
      z-index: -1;
   }
}