@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i');
*{box-sizing:border-box; }
html {
  scroll-behavior: smooth;
}
body{
    background-color:#fff;
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;font-size:16px; line-height:30px ; color:#545454;; font-weight:400
}
a:focus{outline:none}
a{background:0 0; font-size:14px;transition: all 0.4s ease 0s;  font-family: 'Poppins', sans-serif; color:#03041c; text-decoration:none; line-height:25px; font-weight:normal  ;;transition: all 0.3s ease 0s }
a:visited{color:#555; text-decoration:none;  }
a:active,a:hover{ outline:0;  color:#fff; text-decoration:none ;transition: all 0.3s ease 0s; cursor:pointer } /*  transition: all 0.4s ease 0s;*/
img{border:0}
hr {
    clear: both;
    border-color: #e4e4ec;
    margin:10px 0;
    border: 0;
    border-top: 1px solid #eeeeee;
}
table {
    border-collapse: collapse;
    border-spacing: 0; margin:0; padding:0
}
p{padding:0; margin:0}
.clear {clear:both}

.maincontent{width:1200px; min-width:1200px; margin:0 auto}
.menucontent {
    width: 1200px;
    min-width: 1200px;
    margin: 0 auto;
}

.topmenu{width:100%; height:100vh; background-color:#222 ;position:relative}
.topmenu a,.topmenu a:visited{color:#fff; font-size:16px}
.topmenu a:hover{color:#ffffff90}
.topmenu ul{list-style-type:none; margin:0;padding:0;  text-transform:uppercase; margin-top:30px}
.topmenu ul li{margin:5px 0}
.inlogo{ margin-top:50px; text-align:right}
.inlogo img{width:50%}
.topmenu video{display: block;
    width: 100%;
    object-fit: cover;
    height:100%; position:absolute; top:0; left:0
}


.services{width:100%; background-color:#9b793c; padding:40px 0;min-height:100vh;}
.header{margin-bottom:20px}
.header h3{font-size:40px; font-weight:700; text-transform:uppercase; color:#fff}

.services p{width:50%; color:#fff; font-weight:300}








.howwe{width:100%; background-color:#434343; padding:40px 0; color:#fff;min-height:100vh;}

.aboutleft {
    display: inline-block;
    vertical-align: top;
    width: 50%;
    position: relative;
}
.aboutright {
    display: inline-block;
    vertical-align: top;
    width: 50%;
    height:600px;
    padding-left: 40px;


    background: url(images/aboutimage.jpg);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size:cover
}
/*.aboutbg{
    width:100%;
    height:600px;
     background: url(/images/aboutimage.jpg) 100% 0 no-repeat fixed;
 background-repeat: no-repeat;
}*/

.workddiv{
    background-color:#0e793d; padding:40px;min-height:100vh;
}

.servcollapse{
    background-color:#003f74;
    padding:40px; width:100%; color:#fff
}

details[open] summary ~ * {
  animation: open 0.3s ease-in-out;
}

@keyframes open {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
details summary::-webkit-details-marker {
  display: none;
}

details summary {
  width: 100%;
  padding: 1.5rem 0;
  border-bottom: 1px solid #ffffff85;
  position: relative;
  cursor: pointer;
  font-size: 1.5rem;
  font-weight: 300;
  list-style: none;
  text-transform:uppercase
}

details summary:after {
  content: "+";
  color: #fff;
  position: absolute;
  font-size: 1.75rem;
  line-height: 0;
  margin-top: 0.75rem;
  right: 0;
  font-weight: 200;
  transform-origin: center;
  transition: 200ms linear;
}
details[open] summary:after {
  transform: rotate(45deg);
  font-size: 2rem;
}
details summary {
  outline: 0;
}
details p {
  font-size: 0.95rem;
  margin: 0 0 1rem;
  padding-top: 1rem;
}





.swiper-slide{position:relative; width:100%; height:399px!important;z-index:1000}
.swipertitle{position:absolute; bottom:0; padding:30px; color:#fff; font-size:20px; font-weight:400; z-index:1000}
.swipertitle a{color:#fff;font-size:20px; font-weight:300;}
.swipertitle span {color:#ccc;font-size:16px; font-weight:300; line-height:24px; padding-top:10px; display:block}
.swipertitle a hr{border-color:#fff; margin-bottom:0}
element {
}
.swiper-slide .slide__gradient {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 11;
  width: 100%;
  height: 60%;
  -webkit-transition: all ease .6s;
  -moz-transition: all ease .6s;
  -o-transition: all ease .6s;
  transition: all ease .6s;
  opacity: 1;
  background: -moz-linear-gradient(top, rgba(0,0,0,0) 19%, rgba(0,0,0,0) 20%, rgba(0,0,0,0.54) 40%, rgba(0,0,0,0.65) 50%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(19%, rgba(0, 0, 0, 0)), color-stop(20%, rgba(0, 0, 0, 0)), color-stop(40%, rgba(0, 0, 0, 0.54)), color-stop(50%, rgba(0, 0, 0, 0.65)));
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 19%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.54) 40%, rgba(0, 0, 0, 0.65) 50%);
  background: -o-linear-gradient(top, rgba(0,0,0,0) 19%,rgba(0,0,0,0) 20%,rgba(0,0,0,0.54) 40%,rgba(0,0,0,0.65) 50%);
  background: -ms-linear-gradient(top, rgba(0,0,0,0) 19%,rgba(0,0,0,0) 20%,rgba(0,0,0,0.54) 40%,rgba(0,0,0,0.65) 50%);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 19%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0.6) 70%);
    border-radius:0 0 7px 7px
}


.footer{
    width: 100%;
    background-color: #0e793d;
    padding: 80px 0;
    line-height: 40px;
    color: #fff;
    background-image: url(images/footerpattern.png); padding-bottom:50px;
    background-position: 95% 40%;
    background-size: 10%;
    background-repeat:no-repeat
}


.footer ul{padding:0; margin:0; list-style-type:none;}
.footer ul li{  color:#ffffff; font-size:16px; font-weight:200;
            /*    border-bottom:solid 1px rgba(206,180,106,.3);*/
}
.footer ul li i{margin-right:10px; color:rgb(206,180,106)}
.footerlogo{text-align:right}
.footerlogo img{width:250px; display:inline-block; margin-bottom:20px}
.footerlogo i{font-size:22px; margin:10px 5px; color:rgb(206,180,106)}

.copyright {
    margin-top: 20px;
    font-size: 13px;
    font-family: Poppins;
    text-align: left;
    color: rgba(206,180,106,1);
    font-weight:300; letter-spacing:1px; text-transform:uppercase;
    border-top:solid 1px rgba(206,180,106,.3);
}
.copyright a{color:#fff; font-size: 12px;font-weight:300;}




.logincontent{background-color:#fff; width:50dvw; margin:100px auto; color:#000; text-align:center}

.headerlogologin{width:100%;}
.headerlogologin img{width:50%; margin:30px auto}
.loginmain{width:80%; margin:30px auto; text-align:left}
.loginmain label{display:block; margin-top:15px }
.submitButton{padding-top:20px}






.text-slide{color:#9b793c}
.text-slide h1{font-size:60px; padding-top:100px}


.serviceheader{width:100%; padding:20px 60px;}

.serviceheader img{width:200px}

.closeback{
    position: fixed;
    right: 60px;
    top: 40px;
}
.closeback i {
    font-size: 35px;
}

.servicetitle{font-size:30px; text-align:center; text-transform:uppercase; padding:50px 0; font-weight:700}
.servicetitle span{display:block; text-align:center; font-size:20px; color:#ccc; padding-top:15px; text-transform:none
}
.serviceitem {
    width: 30%;
    margin: 20px 1.5%;
    display: inline-block;
    vertical-align: top;
    height: 20vw;
}

















.gallery {
	 --size: 150px;
	 display: grid;
	 grid-template-columns: repeat(8, var(--size));
	 grid-auto-rows: var(--size);
	 margin-bottom: var(--size);
	 place-items: start center;
	 gap: 5px;
    
}
 .gallery:has(:hover) img:not(:hover), .gallery:has(:focus) img:not(:focus) {
	/* filter: brightness(0.5) contrast(0.5);
	*/
	 transition: 0.5s;
}
 .gallery img {
	 object-fit: cover;
	 width: calc(var(--size) * 2);
	 height: calc(var(--size) * 2);
	 clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
	 grid-column: auto / span 2;
	 border-radius: 5px;
      background-color:#fff
}
 .gallery img:nth-child(7n + 1) {
	 grid-column: 2 / span 2;
      background-color:#fff
}
 .gallery img:hover, .gallery img:focus {
	 transform:scale(1.3)!important;
	
	 z-index: 1;
	 transition: 0.5s !important;
	 clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
 .gallery img:focus {
	/*outline: 1px dashed black;
	 outline-offset: -5px;
	*/
}
 










.image {
    display: block;
    overflow: hidden;
    position: relative;
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    transition: none;  height:100%;
 border-radius:7px

}
.image img {
  position : absolute;
 -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  top: 0px;
  right: 0px;
  object-fit: cover; width:100%; height:100%;
}


.image:hover img {
    /*opacity: 1;
    -webkit-animation: flash 1s;
    animation: flash 1s;*/
     -webkit-transform: scale(1.1);
     transform: scale(1.1);
       -moz-transition: all 0.7s;
    -webkit-transition: all 0.7s;
    transition: all 0.7s;

}




@-webkit-keyframes ani-mouse {
  0% {
  opacity: 1;
  top: 29%;
  }
  15% {
  opacity: 1;
  top: 50%;
  }
  50% {
  opacity: 0;
  top: 50%;
  }
  100% {
  opacity: 0;
  top: 29%;
  }
}
@-moz-keyframes ani-mouse {
  0% {
  opacity: 1;
  top: 29%;
  }
  15% {
  opacity: 1;
  top: 50%;
  }
  50% {
  opacity: 0;
  top: 50%;
  }
  100% {
  opacity: 0;
  top: 29%;
  }
}
@keyframes ani-mouse {
  0% {
  opacity: 1;
  top: 29%;
  }
  15% {
  opacity: 1;
  top: 50%;
  }
  50% {
  opacity: 0;
  top: 50%;
  }
  100% {
  opacity: 0;
  top: 29%;
  }
}
 .scroll-btn {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  margin-top:60px;
  bottom:15px
}
.scroll-btn > * {
  display: inline-block;
  line-height: 18px;
  font-size: 13px;
  font-weight: normal;
  color: #7f8c8d;
  color: #ffffff;
  font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: 2px;
}
.scroll-btn > *:hover,
.scroll-btn > *:focus,
.scroll-btn > *.active {
  color: #ffffff;
}
.scroll-btn > *:hover,
.scroll-btn > *:focus,
.scroll-btn > *:active,
.scroll-btn > *.active {
  opacity: 0.8;
  filter: alpha(opacity=80);
}
.scroll-btn .mouse {
  position: relative;
  display: block;
  width: 35px;
  height: 55px;
  margin: 0 auto 20px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: 3px solid white;
  border-radius: 23px;
}
    .scroll-btn .mouse > * {
        position: absolute;
        display: block;
        top: 29%;
        left: 50%;
        width: 8px;
        height: 8px;
        margin: -4px 0 0 -4px;
        background: white;
        border-radius: 50%;
        -webkit-animation: ani-mouse 2.5s linear infinite;
        -moz-animation: ani-mouse 2.5s linear infinite;
        animation: ani-mouse 2.5s linear infinite;
    }