@import url(https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap);

@import url(https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css);

@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css);

@import url(https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css);

@import url(https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css);

@import url(https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css);

@import url(css/animate.css);

/* Global */

:root{--blueCOlor:#ad1e2d; --OrangeCOlor:#030000; --Roboto: "Roboto", serif;



  --box-shadow: 0 0 40px 5px rgb(0 0 0 / 5%);

  --box-shadow2: 0 0 15px rgba(0, 0, 0, 0.17);

  --transition: all .5s ease-in-out;

  --transition2: all .3s ease-in-out;

}

h1,h2,h3,h4,h5,h6{font-size: 30px; margin: 0px; padding: 0px; font-weight: 500; font-family: var(--Roboto);}

ul{padding: 0px; margin: 0px; list-style-type: none;}

li{padding: 0px; margin: 0px; font-size: 15px;}

a{font-size: 15px; text-decoration: none; font-weight: 500;}

a:hover{text-decoration: none;}

p{font-size: 15px; padding: 0px; margin: 0px; font-weight: 500;}

body{padding: 0px; margin: 0px; box-sizing: content-box; font-family: var(--Roboto);}

span{padding: 0px; margin: 0px;}

::selection {  color: #fff;  background: var(--blueCOlor);}

::-webkit-scrollbar {  width: 10px;}

::-webkit-scrollbar-track {  background: var(--OrangeCOlor);}

::-webkit-scrollbar-thumb {  background: var(--blueCOlor);}

::-webkit-scrollbar-thumb:hover {  background: #555;}

/* Header */

header{ background: var(--blueCOlor) url(img/ptrnBg-arrow.webp); background-repeat: repeat;}

a.bg-color {    background: var(--OrangeCOlor); padding: 9px 27px;}

.text-justify{text-align: justify;}

.navgation {z-index: 99; top: 0px; background-color: #fff;}

/* Fennec */

.fennec-mobile-nav .navbar-nav {  overflow-y: auto;  height: 428px;}

.fennec-nav .navbar .navbar-nav .nav-item {  position: relative;  padding: 0;}

.fennec-nav .navbar .navbar-nav .nav-item a {     font-weight: 400; font-weight: 500;   color: #000;    text-transform: capitalize;    padding: 20px 22px;    position: relative;    z-index: 1;    margin: 0;    font-size: 17px;}

.fennec-nav .navbar .navbar-nav .nav-item a:hover::before, .fennec-nav .navbar .navbar-nav .nav-item a:focus::before, .fennec-nav .navbar .navbar-nav .nav-item a.active::before {  opacity: 1;  visibility: visible;}

.fennec-nav .navbar .navbar-nav .nav-item .dropdown-menu {  -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);          box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);        background-color: var(--OrangeCOlor); position: absolute;  border: none;  top: 80px;  left: 0;  width: 300px;  z-index: 99;  display: block;  opacity: 0;  visibility: hidden;  border-radius: 0;  -webkit-transition: all 0.3s ease-in-out;  transition: all 0.3s ease-in-out;  padding-top: 15px;  padding-left: 5px;  padding-right: 5px;  padding-bottom: 15px;}

.fennec-nav .navbar .navbar-nav .nav-item .dropdown-menu li a {  text-transform: capitalize;  padding: 5px 15px;  display: block;  color: #fff;   font-size: 15px;  font-weight: 500;}

.fennec-nav .navbar .navbar-nav .nav-item .dropdown-menu li a::before {  display: none;}

.fennec-nav .navbar .navbar-nav .nav-item .dropdown-menu li a:hover, .fennec-nav .navbar .navbar-nav .nav-item .dropdown-menu li a:focus, .fennec-nav .navbar .navbar-nav .nav-item .dropdown-menu li a.active {  color: #fff; }

.fennec-nav .navbar .navbar-nav .nav-item .dropdown-menu li a:hover::after, .fennec-nav .navbar .navbar-nav .nav-item .dropdown-menu li a:focus::after, .fennec-nav .navbar .navbar-nav .nav-item .dropdown-menu li a.active::after {  opacity: 1;  visibility: visible;  -webkit-transform: scale(1);          transform: scale(1);}

.fennec-nav .navbar .navbar-nav .nav-item .dropdown-menu li a::first-child {  margin-top: 0;}

.fennec-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu {  left: 220px;  top: 0;  opacity: 0;  visibility: hidden;}

.fennec-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu {  left: 220px;  top: 0;  opacity: 0;  visibility: hidden;}

.fennec-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li:hover .dropdown-menu {  opacity: 1;  visibility: visible;  top: -15px;}

.fennec-nav .navbar .navbar-nav .nav-item .dropdown-menu li:hover .dropdown-menu {  opacity: 1;  visibility: visible;  top: -15px;}

.fennec-nav .navbar .navbar-nav .nav-item:hover .dropdown-menu {  opacity: 1;  visibility: visible;  top: 100%;  margin-top: 11px;}

.navbar{padding: 0px;}

.logo-side img{width: 60%;}





.about-left {	position: relative;}

.about-shape {	position: absolute;	left: -50px;	top: -50px;	width: 150px;	z-index: -1;}

.about-img {	position: relative;}

.about-img .img-1 {	width: 65%;}

.about-img .img-2 {	position: absolute;	right: 0;	top: -45px;	width: 200px;}

.about-img .img-3 {	position: absolute;	right: 0;	bottom: -45px;	width: 42%;}

.about-img img {	border-radius: 15px;}

.about-experience {	position: absolute;	display: flex;	align-items: center;	gap: 10px;	top: 20px;	left: 20px;	background: var(--OrangeCOlor);	border-radius: 15px;	padding: 10px 20px 10px 10px;	color: #fff;	box-shadow: 0 0 15px rgba(0, 0, 0, 0.17);}

.about-experience-icon {	color: #fff;	font-size: 45px;	width: 70px;	height: 70px;line-height: 60px;	text-align: center;	background: var(--blueCOlor);	border-radius: 50px;}

.about-experience-icon img {	width: 55px;	filter: brightness(0) invert(1);}

.about-right {	position: relative;	display: block;	padding-left: 30px;}

.about-list {	margin-top: 20px;	margin-bottom: 10px;}

.about-list ul {	display: flex;	flex-wrap: wrap;	gap: 20px;}

.about-list ul li {	display: flex;	align-items: center;	gap: 10px;	font-weight: 600;color: var(--color-dark);}

.about-list ul li i {	width: 35px;	height: 35px;	line-height: 35px;	color: var(--color-dark);	text-align: center;	background: var(--theme-color2);	border-radius: 50px;}

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

.about-right {		margin-top: 30px;		padding-left: 0;}

}

.about-area {    padding: 120px 0;}

.theme-btn {	position: relative;	font-size: 16px;	background: var(--blueCOlor);	color: #fff;	padding: 10px 20px;	display: inline-block;	vertical-align: middle;	text-transform: capitalize;	border-radius: 10px;	font-weight: 500;	cursor: pointer;	text-align: center;	overflow: hidden;	border: none; transition: 0.5s;	z-index: 1;     border: 2px solid #ccc;}

.theme-btn::before {	content: "";	height: 300px;	width: 300px;	background: var(--OrangeCOlor);	border-radius: 50%;	position: absolute;	top: 50%;	left: 50%;	transform: translateY(-50%) translateX(-50%) scale(0);	transition: .5s cubic-bezier(.25, .46, .45, .94);	z-index: -1;}

.theme-btn:hover {	color: #fff;}

.theme-btn:hover::before {	transform: translateY(-50%) translateX(-50%) scale(1);}

#toTop {    position: fixed;    bottom: 40px;    right: 25px;    cursor: pointer;    transition: 0.5s;    z-index: 9999; border: 1px solid #fff;}



.work__area-item {  text-align: center;  position: relative;}

.work__area-item span {  border: 1px solid #c3bebe;  color: #6a6666; -webkit-text-fill-color: transparent;  -webkit-text-stroke-width: 0.8px;  font-weight: 700;  font-size: 48px;  font-family: var(--heading-font);  width: 100px;  height: 100px;  line-height: 100px;  border-radius: 50%;  display: inline-block;  text-align: center;  transition: 0.4s; position: relative;  z-index: 1;  margin-bottom: 20px;}

.work__area-item span::before {  content: "";  position: absolute;  background: var(--blueCOlor);  width: 0;  height: 0;  border-radius: 50%;  margin: 0 auto;  left: 50%;  top: 50%;  transform: translate(-50%, -50%);  transition: 0.4s;  z-index: -1;}

.work__area-item h6 {  margin-bottom: 10px;}

.work__area-item p {  max-width: 280px;  margin: 0 auto;}

.work__area-item-arrow {  position: absolute;  top: 35px;  right: -58px;}

.work__area-item:hover span {  color: #fff;  border-color: var(--OrangeCOlor)}

.work__area-item:hover.work__area-item span::before {  width: 100%;  height: 100%;}

p.subheading {    font-size: 20px;    margin-bottom: 12px;}

.work__area{background: url(img/5.jpg); background-position: 50% 50%; background-repeat: repeat;}



@media (min-width: 1000px) {

#timeline .demo-card:nth-child(even) .head::after, #timeline .demo-card:nth-child(odd) .head::after {    position: absolute;    content: "";    width: 0;    height: 0;    border-top: 15px solid transparent;   border-bottom: 15px solid transparent;  }

#timeline .demo-card:nth-child(even) .head::before, #timeline .demo-card:nth-child(odd) .head::before {    position: absolute;    content: "";    width: 9px;    height: 9px;    background-color: var(--OrangeCOlor);    border-radius: 9px;    box-shadow: 0px 0px 2px 8px #fff;  }

}

/* Some Cool Stuff */

.demo-card:nth-child(1) {  order: 1;}

.demo-card:nth-child(2) {  order: 4;}

.demo-card:nth-child(3) {  order: 2;}

.demo-card:nth-child(4) {  order: 5;}

.demo-card:nth-child(5) {  order: 3;}

.demo-card:nth-child(6) {  order: 6;}

#timeline {  padding: 50px 0px 0px 0px;  background: #f1f1f1;  border-top: 1px solid rgba(191, 191, 191, 0.4);  border-bottom: 1px solid rgba(191, 191, 191, 0.4); background: url(img/process-bk.png); background-repeat: repeat;}

#timeline h4 {  text-align: center;  font-size: 30px;  width: 100%;  margin-bottom: 0px;}

#timeline p.leader {  text-align: center;  max-width: 100%;  margin: auto;  font-size: 30px;  color: #333;     font-weight: 500;}

#timeline .demo-card-wrapper {  position: relative;  margin: auto;}

@media (min-width: 1000px) {

#timeline .demo-card-wrapper {    display: flex;    flex-flow: column wrap;    width: 1170px;    height: 1350px;    margin: 0 auto;  }

}

#timeline .demo-card-wrapper::after {  z-index: 1;  content: "";  position: absolute;  top: 0;  bottom: 0;  left: 50%;  border-left: 1px solid rgba(191, 191, 191, 0.4);}

@media (min-width: 1000px) {

#timeline .demo-card-wrapper::after {    border-left: 1px solid #bdbdbd;  }

}

#timeline .demo-card {  position: relative;  display: block;  margin: 10px auto 80px;  max-width: 94%;  z-index: 2;}

@media (min-width: 480px) {

#timeline .demo-card {    max-width: 60%;    box-shadow: 0px 1px 22px 4px rgba(0, 0, 0, 0.07);  }

}

@media (min-width: 720px) {

 #timeline .demo-card {    max-width: 40%;  }

}

@media (min-width: 1000px) {

#timeline .demo-card {    max-width: 450px;    height: 500px;    margin: 90px;    margin-top: 45px;    margin-bottom: 45px; }

#timeline .demo-card:nth-child(odd) {    margin-right: 45px;  }

#timeline .demo-card:nth-child(odd) .head::after {    border-left-width: 15px;    border-left-style: solid;    left: 100%;}

#timeline .demo-card:nth-child(odd) .head::before {    left: 480.5px;  }

#timeline .demo-card:nth-child(even) {    margin-left: 45px;  }

#timeline .demo-card:nth-child(even) .head::after {    border-right-width: 15px;    border-right-style: solid;    right: 100%;  }

#timeline .demo-card:nth-child(even) .head::before {    right: 500px;  }  

#timeline .demo-card:nth-child(2) {    margin-top: 180px;  }

}

#timeline .demo-card .head {  position: relative;  display: flex;  align-items: center;  color: #fff;  font-weight: 400;}

#timeline .demo-card .head .number-box {  display: inline;  float: left;  margin: 15px;  padding: 10px;  font-size: 35px;  line-height: 35px;  font-weight: 600; /* background: rgba(0, 0, 0, 0.17); */  background-color: var(--OrangeCOlor); border-radius: 12px;}

#timeline .demo-card .head h2 {  text-transform: capitalize;  font-size: 1.3rem;  font-weight: inherit;  letter-spacing: 2px;  margin: 0;  padding-bottom: 6px;  line-height: 1rem;}

@media (min-width: 480px) {

 #timeline .demo-card .head h2 {    font-size: 20px;    line-height: 1.2rem; }

}

#timeline .demo-card .head h2 span {  display: block;  font-size: 0.6rem;  margin: 0;}

@media (min-width: 480px) {

#timeline .demo-card .head h2 span {    font-size: 0.8rem; }

}

#timeline .demo-card .body {  background: #fff;  border: 1px solid rgba(191, 191, 191, 0.4);  border-top: 0;  padding: 15px;}

@media (min-width: 1000px) {

#timeline .demo-card .body {    height: auto;  }

}

#timeline .demo-card .body p {  font-size: 16px;    line-height: 24px;    color: #333;    margin-bottom: 22px;   text-align: justify;}

#timeline .demo-card .body img {  display: block;  width: 100%;}

#timeline .demo-card--step1 {  background-color: var(--blueCOlor);}

#timeline .demo-card--step1 .head::after {  border-color: var(--blueCOlor);}

#timeline .demo-card--step2 {  background-color: var(--blueCOlor);}

#timeline .demo-card--step2 .head::after {  border-color: var(--blueCOlor);}

#timeline .demo-card--step3 {  background-color: var(--blueCOlor);}

#timeline .demo-card--step3 .head::after {  border-color: var(--blueCOlor);}

#timeline .demo-card--step4 {  background-color: var(--blueCOlor);}

#timeline .demo-card--step4 .head::after {  border-color: var(--blueCOlor);}

#timeline .demo-card--step5 {  background-color: var(--blueCOlor);}

#timeline .demo-card--step5 .head::after {  border-color: var(--blueCOlor);}

.demo-card.demo-card--step1 img {    border-radius: 15px;}

#timeline .demo-card-wrapper img {    border-radius: 15px;}

/* Mobile Three Item */

.mobile-three-item {    text-align: center;    display: none;    position: fixed;    z-index: 999;    bottom: 0;    width: 100%;}

.mobile-three-item li {    display: inline-block;    margin-right: 0;   width: 32%;}

.mobile-three-item li:nth-child(1) {    background-color: #001719;}

.mobile-three-item li:nth-child(2) {    background-color: #64b161;}

.mobile-three-item li:last-child { background-color: var(--blueCOlor);}

.mobile-three-item li:last-child a{color: #fff;}

.blink{animation: blink 1s linear infinite;}

@keyframes blink{

0%{opacity: 0;}

50%{opacity: .5;}

100%{opacity: 1;}

}

/*Call Me*/

.phone_lefts-side {    position: relative;}

.phone_lefts-side a {    position: fixed;    bottom: 120px;    color: white;  border: 2px solid #fff;  background-color: var(--blueCOlor);    animation: topBottom 4s infinite;    z-index: 999;    left: 25px;    color: white;    padding: 10px 16px;    border-radius: 50%;    font-size: 20px;    animation: bounce 4s infinite alternate;}

.glow {    font-size: 80px;    color: #fff;    text-align: center;    -webkit-animation: glow 1s ease-in-out infinite alternate;    -moz-animation: glow 1s ease-in-out infinite alternate;    animation: glow 1s ease-in-out infinite alternate;}

@-webkit-keyframes glow {

from {        text-shadow: 0 0 10px #f3fffd , 0 0 20px #f3fffd, 0 0 30px #f3fffd , 0 0 40px #f3fffd , 0 0 50px #f3fffd , 0 0 60px #f3fffd , 0 0 70px #f3fffd ;    }

to {        text-shadow: 0 0 20px #f3fffd, 0 0 30px #f3fffd , 0 0 40px #f3fffd , 0 0 50px #016098 , 0 0 60px #f3fffd , 0 0 70px #f3fffd , 0 0 80px #f3fffd ;    }

}

@keyframes glow {

from {        text-shadow: 0 0 10px #f3fffd , 0 0 20px #f3fffd, 0 0 30px #f3fffd , 0 0 40px #f3fffd , 0 0 50px #f3fffd , 0 0 60px #f3fffd , 0 0 70px #f3fffd ;    }

to {        text-shadow: 0 0 20px #f3fffd, 0 0 30px #f3fffd , 0 0 40px #f3fffd , 0 0 50px #016098 , 0 0 60px #f3fffd , 0 0 70px #f3fffd , 0 0 80px #f3fffd ;    }

}

.bounce {    animation: bounce 965 1.6s ease infinite;    transform-origin: 50% 50%;}

@keyframes bounce {

0% {        transform: translateY(0);    }

12.5% {        transform: translateY(0);    }

25% {        transform: translateY(0);    }

50% {        transform: translateY(-15px);    }

62.5% {        transform: translateY(0);    }

75% {        transform: translateY(-15px);    }

100% {        transform: translateY(0);    }

}

/*Whatsapp-popup*/

#whatsapp .wtsapp:focus {    border: none;    outline: none;}

#whatsapp .wtsapp {    position: fixed;    transition: all .5s ease;    background: #25d366;    display: block;    text-align: center;    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);    /* margin: 0; */    border-radius: 50px;    border-right: none;    color: #fff;    font-weight: 700;    font-size: 18px;    bottom: 35px;    left: 25px;    border: 0;    z-index: 999;    width: 50px;    height: 50px;    line-height: 48px;}

#whatsapp .wtsapp:before {    content: "";    position: absolute;    z-index: -1;    left: 50%;    top: 50%;    transform: translateX(-50%) translateY(-50%);    display: block;    width: 60px;    height: 60px;    background: #25d366;    border-radius: 50%;    -webkit-animation: pulse-border 1500ms ease-out infinite;    animation: pulse-border 1500ms ease-out infinite;}

@keyframes pulse-border {

0% {transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);opacity: 1;}

100% {transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);opacity: 0;}

}

/* Send Enquire */

.enquiry {    position: fixed;    z-index: 1000;    bottom: 210px;    left: 25px;    height: 50px;    color: #fff;    font-size: 18px;    text-align: center;    text-decoration: none;   cursor: pointer;}

.enquiry i {    float: left;    z-index: 999;    position: absolute;    left: 0;    width: 50px;    height: 50px;    border-radius: 50%;    color: #fff;    font-size: 24px;    line-height: 50px;    text-align: center;    text-decoration: none;    cursor: pointer;    background: #000;   transition: 0.5s;    box-shadow: 0px 2px 6px rgba(0,0,0,0.4);}

.enquiry strong {    background-color: #08639c;    line-height: 28px;    color: #000;    padding: 10px 20px;    border-radius: 0 30px 30px 0;    height: 45px;    float: left;    font-size: 15px;    margin-top: 3px;    margin-left: 35px;   box-shadow: 2px 2px 6px rgba(0,0,0,0.4);}

.modal-header{background-color: var(--blueCOlor); border-bottom: 1px solid #c25e5e;}

.modal-body{background-color: var(--blueCOlor);}

.modal-body input{height: 45px; background-color: transparent; border: none; color: #fff; border-bottom: 1px solid #c25e5e; margin-bottom: 10px;}

.modal-body select{height: 45px; background-color: transparent; border: none; color: #fff; border-bottom: 1px solid #c25e5e; margin-bottom: 10px;}

.modal-body select option{color: #000;}

.modal-body select:focus{outline: none;}

.modal-body textarea{height:100px; background-color: transparent; border: none; color: #fff; border-bottom: 1px solid #c25e5e; resize: none;}

.modal-body input::placeholder{color: #fff;}

.modal-body textarea::placeholder{color: #fff;}

.modal-body input:focus{outline: none;}

.modal-body textarea:focus{outline: none;}

.modal-body button {    width: 100%;    border: none;    padding: 10px 0; background-color: var(--OrangeCOlor);}

.modal-header span {    font-size: 25px;}



/* Card Box */

.card-box img {    background: var(--OrangeCOlor);    padding: 15px;   position: relative;    top: -25px;    margin: auto;    display: block;    border-radius: 8px;}

.service-section .card-body:hover .img {    transform: rotate(360deg);    transition: 0.4s ease-in-out;}

.service-section .card {    background-color: #fff;    border: 1px solid #dedede;    border-radius: 0;    text-align: center;}

.service-section .card-body {    padding: 0 30px 30px; background: var(--blueCOlor);       min-height: 215px; border-radius: 20px;}

.service-section .card-body h4 {    font-size: 23px;    font-weight: 500;    color: #1a191d;    margin-bottom: 17px;   position: relative;}

.service-section .card-body p {    font-size: 15px;    line-height: 1.6;    color: #666;    min-height: 98px;    display: -webkit-box;    -webkit-line-clamp: 4;    line-clamp: 4;   -webkit-box-orient: vertical;    overflow: hidden;}

p.leader {    font-size: 30px;}

.card-box span {    font-size: 22px;    font-weight: 400;    display: block;    margin-bottom: 12px;}

/*wave*/

.wave-center-line {  position: relative;  width: 100%;  height: 58vh;  display: flex;  overflow: hidden; }

.wave-center-line div {  position: absolute;  top: 0px; left: 0px;  width: 100%;  height: 100%;  background-color: var(--blueCOlor); }

.wave-center-line div:nth-child(2) {  background-color: var(--OrangeCOlor);  clip-path: circle(200px at center); }

.wave-center-line div span {  position: absolute;  left: 0px;  font-size: 10em;  color: #fff;  white-space: nowrap;  line-height: 55vh;  cursor: default;  animation: animate-wave 60s linear infinite; font-weight: bold;}

.wave-center-line div:nth-child(2) span {  -webkit-text-stroke: 2px;  -webkit-text-stroke-color: #fff;  color: transparent; }

@keyframes animate-wave {

0% {    transform: translateX(0);}  

100% {transform: translateX(-100%);} 

}

.industries-we-serve .title p{font-size: 30px;     font-weight: 500;}



.application-item img{box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;}



/* accordion */

.faqs{background: url(img/shape-3.png) no-repeat;}

.accordion {color: #fff;  cursor: pointer;  display: flex;  align-items: center;  justify-content: space-between;  width: 100%;   padding-right: 15px;  text-align: left; outline: none;  border-radius: 5px;  font-size: 15px;  transition: 0.4s;     background: transparent;}

.accordion:after {  content: '\002B';  color: var(--blueCOlor);  font-weight: bold;  float: right;  margin-left: 5px;  font-size: 30px;}

.active-faq:after {  content: "\2212";}

.panel {  padding: 0 18px;  background-color: var(--blueCOlor);  max-height: 0;  overflow: hidden;  transition: max-height 0.2s ease-out;}

.faqs .title p{font-size: 30px; font-weight: 500;}

button.accordion {    font-size: 20px;  padding-left: 20px;  font-weight: 600; background-color: #000;}

/* Footer */

.widget p{text-align: justify; color: #fff;}



.theme-btn-2 {	position: relative;	font-size: 16px; border: 1px solid #fff;	background: var(--OrangeCOlor);	color: #fff;	padding: 10px 20px;	display: inline-block;	vertical-align: middle;	text-transform: capitalize;	border-radius: 10px;	font-weight: 500;	cursor: pointer;	text-align: center;	overflow: hidden; transition: 0.5s;	z-index: 1;}

.theme-btn-2::before {	content: "";	height: 300px;	width: 300px;	background: var(--blueCOlor); border-radius: 50%;	position: absolute;	top: 50%;	left: 50%;	transform: translateY(-50%) translateX(-50%) scale(0);	transition: .5s cubic-bezier(.25, .46, .45, .94);	z-index: -1;}

.theme-btn-2:hover {	color: #fff ;}

.theme-btn-2:hover::before {	transform: translateY(-50%) translateX(-50%) scale(1);}

/* Footer */

footer{background: var(--OrangeCOlor); background-position: 50%, 50%; margin-top: 150px; padding-bottom: 40px;}

.copy-right{background-color: #000;}

footer svg{position: absolute; bottom: 364px; left:0px; width:100%;}

footer .row{padding-top: 50px;}

.form-content-side p{font-size: 25px;}

.content-side-form p{font-size: 15px;}

.icon-side{    width: 45px;    height: 45px;    text-align: center;    background-color: var(--blueCOlor);    display: block;    align-self: center;   align-items: center;    float: left;    margin-right: 25px;     line-height: 45px;}

.title-side span {    font-size: 20px;    font-weight: 700;    display: block;    margin-bottom: 0px;}

.form-design:after{width: 30%; height: 86vh; background-color: var(--OrangeCOlor); position: absolute; right: 0px; content: ''; top: 0px;  z-index: 1;}

.home-form-side{border-top: 5px solid var(--blueCOlor)}

.inner-form span{font-size: 25px; font-weight: 500;}

.inner-form form input{height: 40px; border: 1px solid #ccc; padding-left: 15px; margin-right: 8px;}

.inner-form form textarea{height: 100px; border: 1px solid #ccc; padding-left: 15px; margin-bottom: 25px; width: 98%; resize: none; padding-top: 10px;}

.inner-form form input:focus{outline: none;}

.inner-form form textarea:focus{outline: none;}

select:focus{outline: none;}

.w-48 {    width: 48%;}

.inner-form form select{height: 40px; border: 1px solid #ccc; padding-left: 15px; width: 98%; color: #666;}

.home-form-side button{width: 100%; border: none; background-color: var(--blueCOlor); float: right;}





.grid {	position: relative;	margin: 0 auto;	max-width: 100%;	list-style: none;	text-align: center;}

/* Common style */

.grid figure {	position: relative;	float: left;	overflow: hidden;	min-width: 100%;	max-width: 100%;width: 100%;	background: var(--blueCOlor);	text-align: center;	cursor: pointer;}

.grid figure img {	position: relative;	display: block;	min-height: 100%;	max-width: 100%;	/* opacity: 0.8; */}

.grid figure figcaption {	padding: 2em;	color: #fff;	text-transform: uppercase;	font-size: 1.25em;	-webkit-backface-visibility: hidden;	backface-visibility: hidden;}

.grid figure figcaption::before,.grid figure figcaption::after {	pointer-events: none;}

.grid figure figcaption,.grid figure figcaption > a {	position: absolute;	top: 0;	left: 0;	width: 100%;	height: 100%;}

.grid figure figcaption > a {	z-index: 1000;	text-indent: 200%;	white-space: nowrap;	font-size: 0;	opacity: 0;}

figure.effect-bubba {	background: var(--blueCOlor);}

figure.effect-bubba img {	-webkit-transition: opacity 0.35s;	transition: opacity 0.35s;}

figure.effect-bubba:hover img {	opacity: 0.4;}



figure.effect-bubba figcaption::before,

figure.effect-bubba figcaption::after {	position: absolute;	top: 30px;	right: 30px;	bottom: 30px;	left: 30px;	content: '';	opacity: 0;	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;	transition: opacity 0.35s, transform 0.35s;}

figure.effect-bubba figcaption::before {	border-top: 1px solid #fff;	border-bottom: 1px solid #fff;	-webkit-transform: scale(0,1);	transform: scale(0,1);}

figure.effect-bubba figcaption::after {	border-right: 1px solid #fff;	border-left: 1px solid #fff;	-webkit-transform: scale(1,0);	transform: scale(1,0);}

figure.effect-bubba:hover figcaption::before,

figure.effect-bubba:hover figcaption::after {	opacity: 1;	-webkit-transform: scale(1);	transform: scale(1);}

.form-design {background: url(img/eng.png.webp) repeat;}

.home-form-side {    position: relative;    z-index: 9;}

.img-wrapper {    width: 100%;  height: auto;  overflow: hidden; }

.inner-img {  transition: 0.3s;}

.inner-img:hover {  transform: scale(1.1);}

.img-wrapper {  display: inline-block;  box-sizing: border-box;}

/* main-industries */

.main-industries .slick-next,

.main-industries .slick-prev {font-size: 0;  line-height: 0;  position: absolute;  top: 50%;  transform: translate(0, -50%);  display: block;  width: 45px;  height: 45px;  padding: 0;  cursor: pointer;  color: #030000;  border: 1px solid var(--blueCOlor);  outline: none;  background-color: var(--blueCOlor); border-radius: 50px;}

.main-industries .slick-next {right: -4%;}

.main-industries .slick-prev {left: -4%;}

.main-industries .slick-next::before,

.main-industries .slick-prev::before {font-family: 'Font Awesome 5 Free';  font-weight: 900;  font-size: 15px;  line-height: 1;  color: var(--OrangeCOlor);   position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;}

.main-industries .slick-prev::before {content: '\f053';}

.main-industries .slick-next::before {content: '\f054';}

/* testimonial */

.testimonial .title p{font-size: 30px;}

.bg-color-mode{background-color: var(--blueCOlor); }

.testimonial_inner .bg-color-mode{border-radius: 15px;}

.bg-color-mode span{font-size: 50px; color: #fff;font-weight: bold; display: block;}

.flex-grow-1 span{font-size: 15px;}

p.large-1 {    font-size: 22px;    text-align: center;    color: #fff;    margin-top: 30px;}

.center-mode {    display: flex;    justify-content: center; align-items: center;}



.client-item i{font-size: 30px;}

.client-item p{text-align: justify; color: #777;}

.custom-flex i{font-size: 15px;}

.custom-flex i{color: peru;}

.main-testimonial{background-color: var(--OrangeCOlor); border-radius: 15px;}

.client-item{background: linear-gradient(145deg, #0a0a0a, #1a1a1a); box-shadow: 35px 35px 70px #000000, -35px -35px 70px #1c1c1c; border-radius: 15px;}

.client-item span {    font-size: 18px;    display: block;    margin-bottom: 8px;}

nav.mobile-menu {    display: none;}

.mobile-three-item ul li a {    font-size: 13px;}

.mobile-three-item ul a {    padding: 8px;}

.main-mobile .mobile-item a{background-color: var(--blueCOlor); padding: 10px 0;}

.mobile-products{display: none;}

/* Inner Pages */



.breadcumb-wrapper {    background: var(--OrangeCOlor);    border-bottom: 1px solid #e6e8e9;    padding-top: 1.2em;    padding-bottom: 1.2em;}

.inner-banner2 {  padding: 100px 0px; background: url(img/breadcumb.jpg) no-repeat; background-size: cover;  background-position: 100%, 0%;}



.color-site a {    background: var(--blueCOlor);    border-radius: 10px;    display: block;    padding: 10px 30px;}

.skin-color a {    background: var(--OrangeCOlor);    border-radius: 10px;    display: block;    padding: 10px 30px;}

.sitema-links-item h2 {    font-size: 22px;}

.sitema-links-item h3 {    font-size: 22px;}

ul.stlyed-exporter li a {    background: var(--blueCOlor);    padding: 10px 30px;    border-radius: 15px;}

.inner-states a {    background-color: var(--OrangeCOlor);    display: block;    border-radius: 15px;}

ul.stlyed-exporter li {    width: 32%;}





/* Box */

.box {    background: #333;    border-radius: 50px;    text-align: center;    overflow: hidden;    position: relative;    transition: all 0.35s ease-in-out;}

.box:before, .box:after {    content: "";    background-color: var(--OrangeCOlor);    width: 100%;    height: 0;    position: absolute;    opacity: 0.3;    transition: all 0.4s ease-in-out;    z-index: 1;}

.box:before {    right: 0;    bottom: 0;}

.box:after {    top: 0;    left: 0;}

.box:hover:before,.box:hover:after {    width: 100%;    height: 100%;}

.box img {    width: 100%;    height: auto;    transform: scale(1.1) translateY(4%);    transition: all 0.35s ease-in-out;}

.box:hover img {    opacity: 0.3;    transform: scale(1.1) translateY(-4%);}

.box-content {    color: #fff;    width: 100%;    opacity: 0;    transform: translateX(-50%) translateY(-50%);    position: absolute;    top: 50%;    left: 50%;    z-index: 2;    transition: all 0.25s ease 0s;}

.box:hover .box-content {    opacity: 1;}

.box .title {    font-size: 22px;    font-weight: 600;    text-transform: uppercase;    margin: 0;}

.box .post {    font-size: 25px;    font-weight: 300;    text-transform: capitalize;    margin: 0 0 10px;    display: block;}

.box .icon {    padding: 0;    margin: 0;    list-style: none;}

.box .icon li {    margin: 0 3px;    display: inline-block;}

.box .icon li a {    color: var(--blueCOlor);    background: #fff;    font-size: 14px;    line-height: 29px;    width: 32px;    height: 32px;    border: 3px solid transparent;    display: block;    position: relative;    transition: all 0.25s ease;}

.box .icon li a:hover {    color: #fff;    background: #000;    border: 3px solid #fff;    text-shadow: 3px 3px 3px rgba(0,0,0,0.4);}

.box .icon li a i {    line-height: inherit;}



@media only screen and (max-width: 990px) {

.box {margin: 0 0 30px; }

}

p.related-heading {    background: var(--blueCOlor);    width: 100%;    display: block;    padding: 10px 15px;    font-size: 22px;    font-weight: 700;}

.related_img img {    width: 100%;    object-fit: contain;    height: 250px;    margin: 10px 0px;    border: 1px solid #f1f1f1;   padding: 2px;}

.read-btn a {    background: #000;    border-radius: 10px;    padding: 7px 15px;    color: #fff;}

.related_content p {    text-align: justify;}

.img-side-details {    width: 40%;    float: left;    margin-right: 25px;}

.datails-content p{text-align: justify;}

.white-wrap {    background: var(--blueCOlor); border-radius: 30px;}

.white-wrap input{height: 40px; padding-left: 15px;     border-radius: 5px;}

.white-wrap select{height: 40px; padding-left: 15px; border: none; width: 100%; color: #666;   border-radius: 5px;}

.white-wrap textarea{height: 100px; padding-left: 15px; border: none; width: 100%;   border-radius: 5px;}

.white-wrap textarea:focus{outline: none;}

.white-wrap input:focus{outline: none;}

.inputBox button{background-color: var(--OrangeCOlor); border-radius: 5px; padding: 10px 0;}

.contact-info-section {    background-color: var(--blueCOlor);    border-radius: 30px;}

.wt-icon-box-wraper {    margin-bottom: 30px;}

.icon-content p {    padding-left: 25px;}

.icon-content i {    font-size: 20px;    position: relative;    top: 5px;}

.icon-content span {    font-weight: 600;}

/* input */

.form-group input{border: 1px solid #ccc; border-radius: 10px; margin-bottom: 15px;}

.form-group input:focus{outline: none; box-shadow: none; }

.form-group select{width: 100%;height: 45px; border-radius: 10px; border: 1px solid #ccc; color: #666; padding-left: 10px; margin-bottom: 15px;}

.form-group select:focus{outline: none; box-shadow: none;}

.form-group textarea:focus{outline: none; box-shadow: none;}

.text-design textarea{ border-radius: 10px;}

.contact-button-btn button{background-color: #000; border: 1px solid #ccc; padding: 10px 30px; color: #fff; border-radius: 15px;}

.contact-infomation > span{font-size: 30px; font-weight: 600;}

form.cons-contact-form {    border-radius: 25px;}

.frame-div iframe{border-radius: 15px;}



/* Portfolio */

.portfolio-img {  position: relative;}

.portfolio-img img{  border-radius: 30px 30px 30px 0;}

.portfolio-img::before {  content: '';  position: absolute;  top: 0px;  left: 0px;  width: 100%;  height: 100%;  opacity: 0;  background: var(--OrangeCOlor);  border-radius: 30px;  transform: scaleY(0);  transition: var(--transition);}

.portfolio-item:hover .portfolio-img::before {  opacity: .8;  transform: scaleY(1);}

.portfolio-link {  position: absolute;  width: 60px;  height: 60px;  line-height: 60px;  color: var(--blueCOlor);  background: var(--color-white);  border-radius: 50px;  text-align: center;  left: 50%;  top: 50%;  font-size: 28px;  margin-top: 50px;  opacity: 0;  box-shadow: var(--box-shadow);  transform: translate(-50%, -50%);  transition-delay: 0.3s;}

.portfolio-link:hover{  color: #000;}

.portfolio-item:hover .portfolio-link {  margin-top: 0px;  opacity: 1;}

.portfolio-content{    display: flex;    justify-content: space-between;    align-items: center;    background: #fff;    position: relative;    padding: 10px 10px 10px 15px;    border-radius: 0 50px 50px 0;    box-shadow: var(--box-shadow);    margin-top: -32px;}

.portfolio-content small{  text-transform: uppercase;  font-weight: 600;  color: #fff;  font-size: 14px;  letter-spacing: 2px;}

.portfolio-content h4 a{  font-size: 18px;  color: #000;}

.portfolio-content h4 a:hover{  color: var(--blueCOlor);}

.portfolio-arrow{  width: 45px;  height: 45px;  line-height: 45px;  background: var(--blueCOlor);  color: #fff;  text-align: center;  border-radius: 50px;}

.portfolio-arrow i{  color:#fff;  transform: rotate(-45deg);  transition: var(--transition);}

.portfolio-arrow:hover i{  transform: rotate(0);}

.product_box {    margin-bottom: 30px;}

.widget img {    filter: brightness(00) invert(1);}
.content-side p {    font-weight: 400;}

marquee {    position: absolute;    bottom: 40px; right: 0px;}