@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@200&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* font style */
h1{
    font-family: 'lato', sans-serif;
}
h4, h5, h6{
    font-family: 'lato', sans-serif;
}
p{
    font-family: 'Roboto', sans-serif;
}
/* img{
    pointer-events: none;
} */
.link-none{
	text-decoration: none;
	list-style: none;
}
.nav-link-c{
	list-style: none;
}
.custom-link{
    color: black;
    text-decoration: none;
}
.custom-link:hover{
    color: #049ad4;
}
.custom-link-2{
    color: rgb(245, 245, 245);
    text-decoration: none;
}
.custom-link-2:hover{
    color: #bbec07;
}
.os_img{
  opacity: 1;
}
.os_main:hover + .os_img{
  opacity: .2;
}
.custom-link-1{
    color: #fff;
    text-decoration: none;
}
.custom-link-1:hover{
    color: #a8a8a8;
}
.custom-link:hover h4{
    color: #049ad4;
}
.custom-link:hover .service-box{
    background-color: #f1f1f1;
}
.custom-link:hover .ser01{
    transform: scale(1.5, 1.1);
}
.bg-custom1:hover .ms-6{
    margin-left: 170px;
    transition: ease 1s;
}

/* slider start */
.img-x{
	transform: scale(1.5, 1.5);
	-webkit-animation-name: zoomin;
  	-webkit-animation-duration: 40s;
  	animation-name: zoomin;
  	animation-duration: 40s;
}

@-webkit-keyframes zoomin {
    from {transform: scale(1, 1);}
    to {transform: scale(1.5, 1.1);}
  }
  @keyframes zoomin {
    from {transform: scale(1, 1);}
    to {transform: scale(1.5, 1.1);}
  }

  .fade-x {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
  }
  @-webkit-keyframes fade {
    from {opacity: 0.8}
    to {opacity: 1}
  }
  @keyframes fade {
    from {opacity: 0.8}
    to {opacity: 1}
  }

.sliderx{
	position: relative;
	width: 100%;
	background: #2c3e50;    
}

.myslidex{
	height: 655px;
	display: none;
	overflow: hidden;
}
.prev, .next{
	position: absolute;
	top: 50%;
	transform: translate(0, -50%);
	font-size: 50px;
	padding: 15px;
	cursor: pointer;
	color: #fff;
	transition: 0.1s;
	user-select: none;
  text-decoration: none;
}
.prev:hover, .next:hover{
	color: #00a7ff; /* blue */
}
.next{
	right: 0;
}
.dotsbox{
	position: absolute;
	left: 50%;
	transform: translate(-50%);
	bottom: 20px;
	cursor: pointer;
}
.dot{
	display: inline-block;
	width: 15px;
	height: 15px;
	border: 3px solid #fff;
	border-radius: 50%;
	margin: 0 10px;
	cursor: pointer;
}
.active, .dot:hover{
	border-color: #00a7ff; /* blue */
}
.txt{
	position: absolute;
	color: #fff;
	letter-spacing: 2px;
	line-height: 35px;
	top: 40%;
	left: 15%;
	-webkit-animation-name: posi;
  	-webkit-animation-duration: 2s;
  	animation-name: posi;
  	animation-duration: 2s;
	z-index: 1;
}
@-webkit-keyframes posi {
  from {left: 25%;}
  to {left: 15%;}
}
@keyframes posi {
  from {left: 25%;}
  to {left: 15%;}
}
.txt h1{
	color: #00a7ff; /* blue */
	font-size: 50px;
	margin-bottom: 20px;
}
.txt p{
	font-weight: bold;
	font-size: 20px;
}
/* 
767
768 - 991 */
/* TABLET SCREEN */
@media screen and (max-width: 800px){
	.myslidex{
		height: 500px;
	}
	.txt{
		letter-spacing: 2px;
		line-height: 25px;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		-webkit-animation-name: posi2;
		-webkit-animation-duration: 2s;
		animation-name: posi2;
		animation-duration: 2s;
	}
	@-webkit-keyframes posi2 {
	  from {top: 35%;}
	  to {top: 50%;}
	}
	@keyframes posi2 {
	  from {top: 35%;}
	  to {top: 50%;}
	}
	.txt h1{
		font-size: 40px;
	}
	.txt p{
		font-size: 13px;
	}
  /* HOME PAGE */
  .mobile{
    position: unset !important;
  }
}
/* MOBILE SCREEN */
@media screen and (max-width: 520px){
  .txt h1{
		font-size: 30px;
		margin-bottom: 20px;
	}
}

/* slider end */
.bg-custom1{
    /* background-color:#97daf7; */
    background-color:#0071bd;
    color: #fff;
}
.clr-sky-blue{
  color: #0071bd;
}
.rotate{
  transform: rotate(-90deg);
}
.shadow-1{
  box-shadow: rgba(0, 0, 0, 0.5) 0px 20px 30px;
  transition: all 1s;
}
.shadow-1:hover{
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px;
  transition: all 1s;
}
.ms-6{
    margin-left: 150px;
    transition: ease 1s;
}
.img-shadow{
    box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}

/* copy right */
.epp{
    color:rgb(224, 166, 4);
    text-decoration: none;
    transition: all 0.2s;
}
.epp:hover{
    color:#2ef806;
    letter-spacing: .5mm;
}
/* custom font */
.fsmy-1{
  font-size: 3.5rem;
}
/* custom css */
.btn-1{
	appearance: none;
  background-color: #97daf7;
  border-width: 0;
  box-sizing: border-box;
  color: #000000;
  cursor: pointer;
  display: inline-block;
  font-family: Clarkson,Helvetica,sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1em;
  margin: 0;
  opacity: 1;
  outline: 0;
  padding: 1em 1.7em;
  position: relative;
  text-align: center;
  text-decoration: none;
  text-rendering: geometricprecision;
  text-transform: uppercase;
  transition: opacity 300ms cubic-bezier(.694, 0, 0.335, 1),background-color 100ms cubic-bezier(.694, 0, 0.335, 1),color 100ms cubic-bezier(.694, 0, 0.335, 1);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: baseline;
  white-space: nowrap;
}
.btn-1:before{
	animation: opacityFallbackOut .5s step-end forwards;
  backface-visibility: hidden;
  background-color: #fff;
  clip-path: polygon(-1% 0, 0 0, -25% 100%, -1% 100%);
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transform: translateZ(0);
  transition: clip-path .5s cubic-bezier(.165, 0.84, 0.44, 1), -webkit-clip-path .5s cubic-bezier(.165, 0.84, 0.44, 1);
  width: 100%;
}
.btn-1:hover:before {
	animation: opacityFallbackIn 0s step-start forwards;
	clip-path: polygon(0 0, 101% 0, 101% 101%, 0 101%);
	color: black;
  }
.btn-1:after {
	background-color: #fff;
  }
.btn-1 span {
	z-index: 1;
	position: relative;
}
  /* service-menu */
  #custom-menu{
    width: auto;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 1rem;
    padding: 1.5rem 1rem;
    margin: 2.7rem -170px;
}
#custom-menu a{
    color: white;
}
#custom-menu a:hover{
    color: #07b1db;
    background-color: transparent;
}
.bg{
  background-size: cover;
  background-repeat: no-repeat;
  height: 70vh;
}
.bg-none{
  color: white;
  mix-blend-mode: difference;
}
.about{
  background-image: url("./about.jpg");
}
.contact{
  /* background-image: url("/storage/contact.jpg"); */
  background-image: url("./contact.jpg");
}
.serv-1{
  background-image: url("./01.png");
}
.serv-2{
  background-image: url("./02.png");
}
.serv-3{
  background-image: url("./03.png");
}
.serv-4{
  background-image: url("./04.png");
}
.serv-5{
  background-image: url("./05.png");
}
.serv-6{
  background-image: url("./ser6.jpg");
}
.serv-7{
  background-image: url("./ser7.jpg");
}
.serv-8{
  background-image: url("./ser8.jpg");
}
/* CONTACT FORM */
.input1[type=text]{
  background-color:transparent;
  border:none;
  border-bottom: 1px solid white;
  outline: none;
  color: white;
  padding: 5px 0 5px 15px;
}
.input1[type=text]:focus {
  border-bottom: 1px solid white;
}
.textarea1{
  background-color:transparent;
  border:none;
  border-bottom: 1px solid white;
  outline: none;
  color: white;
  padding: 10px 0 5px 15px;
}
.textarea1:focus {
  border-bottom: 1px solid white;
}
.bg-form{
  background-color: #0071bd;
}
.btn-2{
  width: 95%;
  margin: 0 auto;
  background-color: rgb(0, 0, 0);
  height: 50px;
  border-radius: 10px;
  border: 1px solid rgb(255, 255, 255);
  color: white;
  font-weight: 700;
  transition: all ease 1s;
}
.btn-2:hover{
  color: rgb(241, 189, 43);
  background-color: rgb(0, 0, 0, 0.5);
  border: 1px solid rgb(255, 255, 255);
  transition: all ease 1s;
}

.zoom-effect{
  transition: all 1.5s;
}
.zoom-effect:hover{
  transform: scale(1.3);
  transition: all 1.5s;
}