/* Fonts */
:root {

  --default-font: "Montserrat", sans-serif;
  --heading-font: "Montserrat", sans-serif;
  --nav-font: "Montserrat", sans-serif;
  /* font-family: "Space Grotesk", sans-serif; */
}

/* Global Colors */
:root {
  /* Background Color - This color is applied to the background of the entire website as well as individual sections. */
  --background-color: #ffffff;

  /* Default Color - This is the default color used for the majority of the text content. */
  --default-color: #364d59;

  /* Heading Color - This color is used for titles, headings and secondary elements. */
  --heading-color: #404246;

  /* Accent Color - This is the main accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out. */
  --accent-color: #009BD7;

  /* Contrast Color - This is a color used for text when the background color is one of the heading, accent, or default colors. Its purpose is to ensure proper contrast and readability when placed over these more dominant colors. */
  --contrast-color: #ffffff;
}

/* Nav Menu Colors */
:root {
  /* Nav Color - This is the default color of the main navmenu links. */
  --nav-color: rgba(255, 255, 255, 1);

  /* Nav Hover Color - This color is applied to main navmenu links when they are hovered over. */
  --nav-hover-color: #ffffff;

  /* Nav Dropdown Background Color - This color is used as the background for dropdown boxes that appear when hovering over primary navigation items. */
  --nav-dropdown-background-color: #ffffff;

  /* Nav Dropdown Color - This color is used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-color: #212529;

  /* Nav Dropdown Hover Color - Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
  --nav-dropdown-hover-color: #009cd8;
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
}
img{
  width: 100%;
}
ul,li{
  list-style: none;
}
/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  --background-color: rgba(255, 255, 255, 0);
  --default-color: #ffffff;
  --heading-color: #ffffff;
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 14px 0;
  transition: all 0.5s;
  z-index: 997;
}

.header .logo img {
  max-height: 40px;
  margin-right: 8px;
  width: 180px;
}
.header .logo p{
  font-size: 9.6px;
  color: #fff;
  font-weight: 600;
}
.index-page.scrolled .header .logo p, .about-page.scrolled .header .logo p{
  color: #000;
}
.header .logo p {
    font-size: 8.7px;
    color: #fff;
    font-weight: 600;
}

.header .logo h1 {
  font-size: 24px;
  margin: 0;
  font-weight: 700;
  color: var(--heading-color); 
}

.header .logo span {
  font-size: 24px;
  padding-left: 1px;
  font-family: var(--heading-font);
  color: var(--color-primary);
}

.scrolled .header {
  box-shadow: 0px 0 18px rgba(0, 0, 0, 0.1);
}

/* Global Header on Scroll
------------------------------*/
.scrolled .header {
  --background-color: rgba(255, 255, 255, 1);
  --heading-color: #3c3c3c;
  --nav-color: #3c3c3c;
  --nav-hover-color: #3c3c3c;
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Desktop Navigation */
@media (min-width: 1200px) {
  .navmenu {
    padding: 0;
  }

  .navmenu ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  .navmenu li {
    position: relative;
  }

  .navmenu>ul>li {
    white-space: nowrap;
    padding: 15px 14px;
  }

  .navmenu>ul>li:last-child {
    padding-right: 0;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-color);
    font-size: 16px;
    padding: 0 2px;
    font-family: var(--nav-font);
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
    position: relative;
    text-transform: uppercase;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    transition: 0.3s;
  }

  .navmenu>ul>li>a:before {
    content: "";
    position: absolute;
    height: 2px;
    bottom: -6px;
    left: 0;
    background-color: var(--accent-color);
    visibility: hidden;
    width: 0px;
    transition: all 0.3s ease-in-out 0s;
  }

  .navmenu a:hover:before,
  .navmenu li:hover>a:before,
  .navmenu .active:before {
    visibility: visible;
    width: 100%;
  }
  
  .navmenu .active>a:before {
    content: "";
    position: absolute;
    height: 2px;
    bottom: -6px;
    left: 0;
    background-color:#00b8ff;
    visibility: visible;
    width: 100%;
    transition: all 0.3s ease-in-out 0s;
  }

  .navmenu li:hover>a,
  .navmenu .active>a,
  .navmenu .active>a:focus {
    /*color: var(--nav-hover-color);*/
    color:#00b8ff;
  }

  .navmenu .dropdown ul {
    margin: 0;
    padding: 10px 0;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    left: 14px;
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }

  .navmenu .dropdown ul li {
    min-width: 200px;
  }

  .navmenu .dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
    font-weight: 400;
    color: var(--nav-dropdown-color);
  }

  .navmenu .dropdown ul a i {
    font-size: 12px;
  }

  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover>a {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .navmenu .dropdown .dropdown ul {
    top: 0;
    left: -90%;
    visibility: hidden;
  }

  .navmenu .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    left: -72%;
    visibility: visible;
  }
}

/* Mobile Navigation */
@media (max-width: 1199px) {
  .mobile-nav-toggle {
    color: var(--nav-color);
    font-size: 28px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s;
  }

  .navmenu {
    padding: 0;
    z-index: 9997;
  }

  .navmenu ul {
    display: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-dropdown-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-dropdown-color);
    padding: 10px 20px;
    font-family: var(--nav-font);
    font-size: 17px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  }

  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color);
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .active i,
  .navmenu .active:focus i {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    transform: rotate(180deg);
  }

  .navmenu .dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    transition: all 0.5s ease-in-out;
  }

  .navmenu .dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
  }

  .navmenu .dropdown>.dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }

  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .mobile-nav-toggle {
    color: #fff;
    position: absolute;
    font-size: 32px;
    top: 15px;
    right: 15px;
    margin-right: 0;
    z-index: 9999;
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    overflow: hidden;
    inset: 0;
    background: rgba(33, 37, 41, 0.8);
    transition: 0.3s;
  }

  .mobile-nav-active .navmenu>ul {
    display: block;
  }
}


.input-box {
  position: relative;
  /* width: 100%; */
  max-width: 37px;
  height: 35px;
  margin: 0 50px;
  background-color: #fff;
  border-radius: 6px;
  transition: all 0.5s ease-in-out;
}
.input-box.open {
  max-width: 350px;
}
.input-box input {
  position: relative;
  width: 100%;
  height: 100%;
  font-size: 16px;
  font-weight: 400;
  color: #333;
  padding: 0 15px;
  border: none;
  border-radius: 6px;
  outline: none;
  transition: all 0.5s ease-in-out;
}
.input-box.open input {
  padding: 0 15px 0 65px;
}
.input-box .search {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  border-radius: 6px;
  cursor: pointer;
}
.input-box .search .fa-magnifying-glass{
  color: #2196f3;
}
.input-box.open .search {
  border-radius: 6px 0 0 6px;
}
.search .search-icon {
  font-size: 30px;
  color: #1c1c1c;
}
.input-box .close-icon {
  position: absolute;
  top: 50%;
  right: -45px;
  font-size: 30px;
  color: #1c1c1c;
  padding: 5px;
  transform: translateY(-50%);
  transition: all 0.5s ease-in-out;
  cursor: pointer;
  pointer-events: none;
  opacity: 0;
}
.input-box.open .close-icon {
  transform: translateY(-50%) rotate(180deg);
  pointer-events: auto;
  opacity: 1;
}


.search-form {
	right: 200px;
	top: 200px;
}
.global{
	background-image: url("../img/search-icon.png");
	background-position: center;
	background-repeat: no-repeat;
  background-size: cover;
}
 .search-field {
	background-color: transparent;
	background-image: url("../img/search-icon.png");
	background-position: 5px  center;
	background-repeat: no-repeat;
	background-size: 24px 24px;
	border: none;
	cursor: pointer;
	height: 40px;
	margin: 3px 0;
	padding: 0 0 0 34px;
	position: relative;
	-webkit-transition: width 400ms ease, background 400ms ease;
	transition:         width 400ms ease, background 400ms ease;
	width:0px;
   cursor: pointer;
}
.search-field:focus {
	background-color: #000;
	border: 2px solid #c3c0ab;
	cursor: text;
	outline: 0;
	width: 250px;
  color:#fff;
}
.search-form
.search-submit { 
display:none;
}


/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  --background-color: #000000;
  --heading-color: var(--contrast-color);
  --default-color: var(--contrast-color);
  color: var(--default-color);
  background-color: var(--background-color);
  background: url("../img/footer-bg.jpg") top center no-repeat;
  background-size: cover;
  font-size: 14px;
  padding-bottom: 50px;
  position: relative;
}

.footer .container {
  position: relative;
}

.footer:before {
  content: "";
  background: color-mix(in srgb, var(--background-color), transparent 15%);
  position: absolute;
  inset: 0;
}

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

.footer .footer-about .logo {
  line-height: 1;
  margin-bottom: 25px;
}

.footer .footer-about .logo img {
  max-height: 40px;
  margin-right: 6px;
  max-width: 130px;
}

.footer .footer-about .logo span {
  color: var(--heading-color);
  font-family: var(--heading-font);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 1px;
}

.footer .footer-about p {
  font-size: 14px;
  font-family: var(--heading-font);
}

.footer .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 5px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 16px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-right: 10px;
  transition: 0.3s;
}

.footer .social-links a:hover {
  color: var(--accent-color);
  border-color: var(--accent-color);
}

.footer h4 {
  font-size: 16px;
  font-weight: bold;
  position: relative;
  padding-bottom: 12px;
}

.footer .footer-links {
  margin-bottom: 30px;
}

.footer .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer .footer-links ul i {
  padding-right: 2px;
  font-size: 12px;
  line-height: 0;
}

.footer .footer-links ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

.footer .footer-links ul li:first-child {
  padding-top: 0;
}

.footer .footer-links ul a {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  display: inline-block;
  line-height: 1;
  font-size: 16px;
}

.footer .footer-links ul a:hover {
  color: var(--accent-color);
}

.footer .footer-contact p {
  margin-bottom: 5px;
}

.footer .copyright {
  padding-top: 25px;
  padding-bottom: 25px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.footer .copyright p {
  margin-bottom: 0;
}

.footer .credits {
  margin-top: 8px;
  font-size: 13px;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  background: var(--background-color);
  transition: all 0.6s ease-out;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #ffffff;
  border-color: var(--accent-color) transparent var(--accent-color) transparent;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: animate-preloader 1.5s linear infinite;
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 99999;
  background-color: var(--accent-color);
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: var(--default-color);
  line-height: 0;
}

.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: var(--contrast-color);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  --background-color: #000000;
  --heading-color: var(--contrast-color);
  --default-color: var(--contrast-color);
  color: var(--default-color);
  background-color: var(--background-color);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 160px 0 60px 0;
  text-align: center;
  position: relative;
}

.page-title:before {
  content: "";
  background-color: color-mix(in srgb, var(--background-color), transparent 40%);
  position: absolute;
  inset: 0;
}

.page-title h1 {
  font-size: 36px;
  font-weight: 500;
  margin-bottom: 10px;
}

.page-title .breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  justify-content: center;
  padding: 0;
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}

.page-title .breadcrumbs ol li+li {
  padding-left: 10px;
}

.page-title .breadcrumbs ol li+li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  /* background-color: var(--background-color); */
  padding: 60px 0;
  scroll-margin-top: 92px;
  overflow: clip;
}

@media (max-width: 1199px) {

  section,
  .section {
    scroll-margin-top: 76px;
  }
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  text-align: center;
  padding-bottom: 40px;
  position: relative;
}

.section-title h2 {
  font-size: 32px;
  font-weight: 700;
  position: relative;
}

.section-title h2:before,
.section-title h2:after {
  content: "";
  width: 50px;
  height: 2px;
  background: var(--accent-color);
  display: inline-block;
}

.section-title h2:before {
  margin: 0 15px 10px 0;
}

.section-title h2:after {
  margin: 0 0 10px 15px;
}

.section-title p {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  --default-color: #ffffff;
  /* --background-color: #000000; */
  --background-color: none;
  --heading-color: #ffffff;
  width: 100%;
  min-height: 100vh;
  position: relative;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero .info {
  position: relative;
  inset: 0;
  z-index: 3;
  padding: 140px 0 60px 0;
  margin: 60px 0 140px 0;
}


@media (max-width: 768px),
(max-height: 480px) {
  .hero .info {
    padding: 80px 20px 60px 20px;
    margin-bottom: 10px;
  }
}


.hero .info h2 {
  margin-bottom: 30px;
  padding-bottom: 30px;
  font-size: 36px;
  font-weight: 700;
  position: relative;
}

.hero .info h2:after {
  content: "";
  position: absolute;
  display: inline;
  width: 80px;
  height: 4px;
  background: var(--accent-color);
  left: 0px;
  right: 0;
  bottom: 0;
  /*margin: auto;*/
}




.hero .info h1 {
  margin-bottom: 30px;
  padding-bottom: 30px;
  font-size: 36px;
  font-weight: 700;
  position: relative;
}

.hero .info h1:after {
  content: "";
  position: absolute;
  display: inline;
  width: 80px;
  height: 4px;
  background: var(--accent-color);
  left: 0px;
  right: 0;
  bottom: 0;
  /*margin: auto;*/
}




@media (max-width: 768px) {
  .hero .info h2 {
    font-size: 30px;
  }
  .hero .carousel-item img {
      height:85vh;
  }
  .hero .info h2:after {
    margin: auto !important;
  }
 
  
    .hero .info h1 {
    font-size: 30px;
  }
  
   .hero .info h1:after {
    margin: auto !important;
  }
  
}


.hero .info p {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  font-size: 20px;
}

@media(max-width:600px){
    .hero .info p {
  color: #009BD7;
  
}
}

.hero .info .btn-get-started {
  color: var(--contrast-color);
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 12px 40px;
  border-radius: 50px;
  transition: 0.5s;
  margin-top: 24px;
  border: 2px solid var(--accent-color);
}

.hero .info .btn-get-started:hover {
  background: var(--accent-color);
}

.hero .carousel {
  inset: 0;
  position: absolute;
  overflow: hidden;
}

.hero .carousel-item {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  transition-duration: 0.4s;
}

.hero .carousel-item img {
  position: absolute;
  inset: 0;
  display: block;
  /*width: 100%;*/
  /*height: 100%;*/
  object-fit: cover;
  z-index: 1;
}

.hero .carousel-item::before {
  content: "";
  background-color: color-mix(in srgb, var(--background-color), transparent 30%);
  position: absolute;
  inset: 0;
  z-index: 2;
}

.hero .carousel-control-prev {
  justify-content: start;
}

@media (min-width: 640px) {
  .hero .carousel-control-prev {
    padding-left: 15px;
  }
}

.hero .carousel-control-next {
  justify-content: end;
}

@media (min-width: 640px) {
  .hero .carousel-control-next {
    padding-right: 15px;
  }
}

.hero .carousel-control-next-icon,
.hero .carousel-control-prev-icon {
  background: none;
  font-size: 26px;
  line-height: 0;
  background: color-mix(in srgb, var(--default-color), transparent 80%);
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  border-radius: 50px;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero .carousel-control-prev,
.hero .carousel-control-next {
  z-index: 3;
  transition: 0.3s;
  width:8%;
}

.hero .carousel-control-prev:focus,
.hero .carousel-control-next:focus {
  opacity: 0.5;
}

.hero .carousel-control-prev:hover,
.hero .carousel-control-next:hover {
  opacity: 0.9;
}

/*--------------------------------------------------------------
# Get Started Section
--------------------------------------------------------------*/
.get-started .content {
  padding: 30px 0;
}

.get-started .content h3 {
  font-size: 36px;
  font-weight: 600;
  margin-bottom: 25px;
  padding-bottom: 25px;
  position: relative;
}

.get-started .content h3:after {
  content: "";
  position: absolute;
  display: block;
  width: 60px;
  height: 4px;
  background: var(--accent-color);
  left: 0;
  bottom: 0;
}

.get-started .content p {
  font-size: 14px;
}

.get-started .php-email-form {
  background: color-mix(in srgb, var(--default-color), transparent 97%);
  padding: 30px;
  height: 100%;
  max-height: 720px;
}

.product-enquiry-form{
  background: color-mix(in srgb, var(--default-color), transparent 97%);
  padding: 30px;
}

.become-partner h5{
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.5;
}
.become-partner button[type=submit] {
    color: var(--contrast-color);
    background: var(--accent-color);
    border: 0;
    padding: 10px 30px;
    transition: 0.4s;
    border-radius: 4px;
}

.become-partner input[type=text], .become-partne input[type=email], .become-partne textarea {
    font-size: 14px;
    padding: 10px 15px;
    box-shadow: none;
    border-radius: 0;
    color: var(--default-color);
    background-color: color-mix(in srgb, var(--background-color), transparent 20%);
    border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.become-partner input[type=text]::placeholder,
.become-partner input[type=email]::placeholder,
.become-partner textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

@media (max-width: 575px) {
  .get-started .php-email-form {
    padding: 20px;
  }
}

.get-started .php-email-form h3 {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.get-started .php-email-form p {
  font-size: 14px;
  margin-bottom: 20px;
}

.get-started .php-email-form .error-message {
  display: none;
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.get-started .php-email-form .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.get-started .php-email-form .loading {
  display: none;
  background: var(--background-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.get-started .php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--background-color);
  animation: animate-loading 1s linear infinite;
}

.get-started .php-email-form input[type=text],
.get-started .php-email-form input[type=email],
.get-started .php-email-form textarea {
  font-size: 14px;
  padding: 10px 15px;
  box-shadow: none;
  border-radius: 0;
  color: var(--default-color);
  background-color: color-mix(in srgb, var(--background-color), transparent 20%);
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.get-started .php-email-form input[type=text]:focus,
.get-started .php-email-form input[type=email]:focus,
.get-started .php-email-form textarea:focus {
  border-color: var(--accent-color);
}

.get-started .php-email-form input[type=text]::placeholder,
.get-started .php-email-form input[type=email]::placeholder,
.get-started .php-email-form textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.get-started .php-email-form button[type=submit] {
  color: var(--contrast-color);
  background: var(--accent-color);
  border: 0;
  padding: 10px 30px;
  transition: 0.4s;
  border-radius: 4px;
}

.get-started .php-email-form button[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

@keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
/*--------------------------------------------------------------
# Product Section
--------------------------------------------------------------*/
.main_Product{
  background-color: #F7F9FB;
  /* background-color: color-mix(in srgb, #e1f5ff, transparent 64%); */
}
.main_Product .product_box{
  border-radius: 10px;
  background: #fff;
  box-shadow: rgba(99, 99, 99, 0.3) 0px 2px 8px 0px;
}
.cat_box:before {
    content: attr(data-name);
    position: absolute;
    font-size: 70px;
    right: 30px;
    top: 10px;
    line-height: 80px;
    font-weight: 700;
    color: #009bd7;
    opacity: 0.1;
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
}
/* .main_Product .product_box:hover .box_bg1{
  border-radius: 10px;
  background-image: linear-gradient(45deg, rgba(254, 246, 210, 0.53) 0%, rgba(254, 246, 210, 0.53) 14.286%,rgba(221, 240, 216, 0.53) 14.286%, rgba(221, 240, 216, 0.53) 28.572%,rgba(188, 233, 223, 0.53) 28.572%, rgba(188, 233, 223, 0.53) 42.858%,rgba(156, 227, 229, 0.53) 42.858%, rgba(156, 227, 229, 0.53) 57.144%,rgba(123, 220, 235, 0.53) 57.144%, rgba(123, 220, 235, 0.53) 71.42999999999999%,rgba(90, 214, 242, 0.53) 71.43%, rgba(90, 214, 242, 0.53) 85.71600000000001%,rgba(57, 207, 248, 0.53) 85.716%, rgba(57, 207, 248, 0.53) 100.002%),linear-gradient(135deg, rgb(246, 99, 200) 0%, rgb(246, 99, 200) 12.5%,rgb(223, 98, 196) 12.5%, rgb(223, 98, 196) 25%,rgb(199, 97, 192) 25%, rgb(199, 97, 192) 37.5%,rgb(176, 96, 188) 37.5%, rgb(176, 96, 188) 50%,rgb(152, 95, 184) 50%, rgb(152, 95, 184) 62.5%,rgb(129, 94, 180) 62.5%, rgb(129, 94, 180) 75%,rgb(105, 93, 176) 75%, rgb(105, 93, 176) 87.5%,rgb(82, 92, 172) 87.5%, rgb(82, 92, 172) 100%);
}
.main_Product .product_box:hover .box_bg2{
  background-image: linear-gradient(131deg, rgba(186, 186, 186, 0.01) 0%, rgba(186, 186, 186, 0.01) 16.667%,rgba(192, 192, 192, 0.01) 16.667%, rgba(192, 192, 192, 0.01) 33.334%,rgba(48, 48, 48, 0.01) 33.334%, rgba(48, 48, 48, 0.01) 50.001000000000005%,rgba(33, 33, 33, 0.01) 50.001%, rgba(33, 33, 33, 0.01) 66.668%,rgba(182, 182, 182, 0.01) 66.668%, rgba(182, 182, 182, 0.01) 83.33500000000001%,rgba(211, 211, 211, 0.01) 83.335%, rgba(211, 211, 211, 0.01) 100.002%),linear-gradient(148deg, rgba(48, 48, 48, 0.01) 0%, rgba(48, 48, 48, 0.01) 16.667%,rgba(178, 178, 178, 0.01) 16.667%, rgba(178, 178, 178, 0.01) 33.334%,rgba(192, 192, 192, 0.01) 33.334%, rgba(192, 192, 192, 0.01) 50.001000000000005%,rgba(237, 237, 237, 0.01) 50.001%, rgba(237, 237, 237, 0.01) 66.668%,rgba(194, 194, 194, 0.01) 66.668%, rgba(194, 194, 194, 0.01) 83.33500000000001%,rgba(227, 227, 227, 0.01) 83.335%, rgba(227, 227, 227, 0.01) 100.002%),linear-gradient(138deg, rgba(146, 146, 146, 0.03) 0%, rgba(146, 146, 146, 0.03) 25%,rgba(33, 33, 33, 0.03) 25%, rgba(33, 33, 33, 0.03) 50%,rgba(46, 46, 46, 0.03) 50%, rgba(46, 46, 46, 0.03) 75%,rgba(172, 172, 172, 0.03) 75%, rgba(172, 172, 172, 0.03) 100%),linear-gradient(38deg, rgba(3, 3, 3, 0.03) 0%, rgba(3, 3, 3, 0.03) 16.667%,rgba(28, 28, 28, 0.03) 16.667%, rgba(28, 28, 28, 0.03) 33.334%,rgba(236, 236, 236, 0.03) 33.334%, rgba(236, 236, 236, 0.03) 50.001000000000005%,rgba(3, 3, 3, 0.03) 50.001%, rgba(3, 3, 3, 0.03) 66.668%,rgba(207, 207, 207, 0.03) 66.668%, rgba(207, 207, 207, 0.03) 83.33500000000001%,rgba(183, 183, 183, 0.03) 83.335%, rgba(183, 183, 183, 0.03) 100.002%),linear-gradient(145deg, rgba(20, 20, 20, 0.02) 0%, rgba(20, 20, 20, 0.02) 20%,rgba(4, 4, 4, 0.02) 20%, rgba(4, 4, 4, 0.02) 40%,rgba(194, 194, 194, 0.02) 40%, rgba(194, 194, 194, 0.02) 60%,rgba(34, 34, 34, 0.02) 60%, rgba(34, 34, 34, 0.02) 80%,rgba(71, 71, 71, 0.02) 80%, rgba(71, 71, 71, 0.02) 100%),linear-gradient(78deg, rgba(190, 190, 190, 0.02) 0%, rgba(190, 190, 190, 0.02) 20%,rgba(95, 95, 95, 0.02) 20%, rgba(95, 95, 95, 0.02) 40%,rgba(71, 71, 71, 0.02) 40%, rgba(71, 71, 71, 0.02) 60%,rgba(7, 7, 7, 0.02) 60%, rgba(7, 7, 7, 0.02) 80%,rgba(130, 130, 130, 0.02) 80%, rgba(130, 130, 130, 0.02) 100%),linear-gradient(293deg, rgba(213, 213, 213, 0.03) 0%, rgba(213, 213, 213, 0.03) 20%,rgba(220, 220, 220, 0.03) 20%, rgba(220, 220, 220, 0.03) 40%,rgba(146, 146, 146, 0.03) 40%, rgba(146, 146, 146, 0.03) 60%,rgba(57, 57, 57, 0.03) 60%, rgba(57, 57, 57, 0.03) 80%,rgba(120, 120, 120, 0.03) 80%, rgba(120, 120, 120, 0.03) 100%),linear-gradient(90deg, rgb(225, 15, 180),rgb(78, 198, 243));
}

.main_Product .product_box:hover .box_bg3{
  background-image: radial-gradient(circle at 85% 1%, hsla(190,0%,93%,0.05) 0%, hsla(190,0%,93%,0.05) 96%,transparent 96%, transparent 100%),radial-gradient(circle at 14% 15%, hsla(190,0%,93%,0.05) 0%, hsla(190,0%,93%,0.05) 1%,transparent 1%, transparent 100%),radial-gradient(circle at 60% 90%, hsla(190,0%,93%,0.05) 0%, hsla(190,0%,93%,0.05) 20%,transparent 20%, transparent 100%),radial-gradient(circle at 79% 7%, hsla(190,0%,93%,0.05) 0%, hsla(190,0%,93%,0.05) 78%,transparent 78%, transparent 100%),radial-gradient(circle at 55% 65%, hsla(190,0%,93%,0.05) 0%, hsla(190,0%,93%,0.05) 52%,transparent 52%, transparent 100%),linear-gradient(135deg, rgb(37, 56, 222),rgb(96, 189, 244));
} */

.product_box .categories-img img{
  width: 90%;
  border-radius: 10px;
}
.product_box .categories-details{
  padding: 10px 0;
}
.main_Product .product_box .cat_box{
    border: 4px solid #d4d4d4;
    border-radius: 8px
}
.main_Product .product-box:hover {
  color: #fff;
}
.main_Product .product_box:hover .cat_box{
  border:4px solid #009BD7;
  border-radius: 8px
}
.main_Product .product_box:hover .cat_box:before {
    color: #009bd7 !important;
    opacity: 1;
    animation: fadeInUp;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services {
  /* background-color: color-mix(in srgb, var(--default-color), transparent 95%); */
  /* background-color: color-mix(in srgb, #e1f5ff, transparent 64%);  */
}

.services .service-item {
  padding: 40px;
  box-shadow: 0px 0 30px color-mix(in srgb, var(--default-color), transparent 90%);
  background-color: var(--contrast-color);
  height: 100%;
}

.services .service-item .icon {
  width: 48px;
  height: 48px;
  position: relative;
  margin-bottom: 50px;
}

.services .service-item .icon i {
  color: #1b03ff;
  font-size: 56px;
  transition: ease-in-out 0.3s;
  z-index: 2;
  position: relative;
}

.services .service-item .icon:before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  background: color-mix(in srgb, #009bd7, transparent 50%);
  border-radius: 50px;
  z-index: 1;
  top: 10px;
  right: -20px;
  transition: 0.3s;
}

.services .service-item h3 {
  color: color-mix(in srgb, var(--heading-color), transparent 20%);
  font-weight: 700;
  margin: 14px 0 20px 0;
  padding-bottom: 8px;
  font-size: 22px;
  position: relative;
  display: inline-block;
  border-bottom: 4px solid color-mix(in srgb, #009bd7, transparent 70%);
  transition: 0.3s;
}

.services .service-item p {
  line-height: 24px;
  font-size: 16px;
  margin-bottom: 0;
}

.services .service-item .readmore {
  margin-top: 15px;
  display: inline-block;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.services .service-item:hover .icon i {
  color: var(--heading-color);
}

.services .service-item:hover .icon:before {
  background: var(--accent-color);
}

.services .service-item:hover h3 {
  border-color: var(--accent-color);
  color: var(--heading-color);
}

.services .service-item:hover .readmore {
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Alt Services Section
--------------------------------------------------------------*/
.alt-services .features-image {
  position: relative;
  min-height: 400px;
}

.alt-services .features-image img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.alt-services h3 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
}

.alt-services h3:after {
  content: "";
  background: var(--accent-color);
  position: absolute;
  display: block;
  width: 50px;
  height: 3px;
  left: 0;
  bottom: 0;
}

.alt-services .icon-box {
  margin-top: 30px;
}

.alt-services .icon-box i {
  color: var(--accent-color);
  background-color: var(--contrast-color);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 25px;
  font-size: 28px;
  width: 56px;
  height: 56px;
  border-radius: 4px;
  line-height: 0;
  /* box-shadow: 0px 2px 30px color-mix(in srgb, var(--default-color), transparent 90%); */
  transition: 0.3s;
}

.alt-services .icon-box:hover i {
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

.alt-services .icon-box h4 {
  font-weight: 700;
  margin-bottom: 10px;
  font-size: 18px;
}

.alt-services .icon-box h4 a {
  color: var(--heading-color);
  transition: 0.3s;
}

.alt-services .icon-box h4 a:hover {
  color: var(--accent-color);
}

.alt-services .icon-box p {
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonials .testimonial-wrap {
  padding-left: 50px;
}

.testimonials .testimonials-carousel,
.testimonials .testimonials-slider {
  overflow: hidden;
}

.testimonials .testimonial-item {
  box-shadow: 0px 2px 15px color-mix(in srgb, var(--default-color), transparent 90%);
  box-sizing: content-box;
  padding: 30px 30px 30px 60px;
  margin: 30px 15px;
  min-height: 200px;
  position: relative;
  background-color: #fff;
}

.testimonials .testimonial-item .testimonial-img {
  width: 90px;
  border-radius: 10px;
  border: 6px solid var(--background-color);
  position: absolute;
  left: -45px;
}

.testimonials .testimonial-item h3 {
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0 5px 0;
}

.testimonials .testimonial-item h4 {
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 14px;
  margin: 0;
}

.testimonials .testimonial-item .stars {
  margin: 10px 0;
}

.testimonials .testimonial-item .stars i {
  color: #ffc107;
  margin: 0 1px;
}

.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right {
  color: color-mix(in srgb, var(--accent-color), transparent 60%);
  font-size: 26px;
  line-height: 0;
}

.testimonials .testimonial-item .quote-icon-left {
  display: inline-block;
  left: -5px;
  position: relative;
}

.testimonials .testimonial-item .quote-icon-right {
  display: inline-block;
  right: -5px;
  position: relative;
  top: 10px;
  transform: scale(-1, -1);
}

.testimonials .testimonial-item p {
  font-style: italic;
  margin: 15px auto 15px auto;
}

.testimonials .swiper-wrapper {
  height: auto;
}

.testimonials .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.testimonials .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: var(--background-color);
  opacity: 1;
  border: 1px solid var(--accent-color);
}

.testimonials .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}

@media (max-width: 767px) {
  .testimonials .testimonial-wrap {
    padding-left: 0;
  }

  .testimonials .testimonials-carousel,
  .testimonials .testimonials-slider {
    overflow: hidden;
  }

  .testimonials .testimonial-item {
    padding: 30px;
    margin: 15px;
  }

  .testimonials .testimonial-item .testimonial-img {
    position: static;
    left: auto;
  }
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about .inner-title {
  font-size: 2.75rem;
  font-weight: 700;
  margin: 30px 0;
}

@media (min-width: 991px) {
  .about .inner-title {
    max-width: 65%;
    margin: 0 0 80px 0;
  }
}

.about .our-story {
  padding: 40px;
  background-color: color-mix(in srgb, var(--default-color), transparent 96%);
}

@media (min-width: 991px) {
  .about .our-story {
    padding-right: 35%;
  }
}

.about .our-story h4 {
  text-transform: uppercase;
  font-size: 1.1rem;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.about .our-story h3 {
  font-size: 2.25rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.about .our-story p:last-child {
  margin-bottom: 0;
}

.about ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.about ul li {
  padding: 5px 0;
  display: flex;
  align-items: center;
}

.about ul i {
  font-size: 1.25rem;
  margin-right: 0.5rem;
  line-height: 1.2;
  color: var(--accent-color);
}

.about .watch-video i {
  font-size: 2rem;
  transition: 0.3s;
  color: var(--accent-color);
}

.about .watch-video a {
  font-weight: 600;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-left: 8px;
  transition: 0.3s;
}

.about .watch-video:hover a {
  color: var(--accent-color);
}

.about .about-img {
  min-height: 400px;
  position: relative;
}

@media (min-width: 992px) {
  .about .about-img {
    position: absolute;
    top: 0;
    right: 0;
    min-height: 600px;
  }
}

.about .about-img img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
}

/*--------------------------------------------------------------
# Stats Counter Section
--------------------------------------------------------------*/
.stats-counter .stats-item {
  box-shadow: 0px 0 30px color-mix(in srgb, var(--default-color), transparent 92%);
  padding: 30px;
}

.stats-counter .stats-item i {
  color: var(--accent-color);
  font-size: 42px;
  line-height: 0;
  margin-right: 20px;
}

.stats-counter .stats-item span {
  color: var(--heading-color);
  font-size: 36px;
  display: block;
  font-weight: 600;
}

.stats-counter .stats-item p {
  padding: 0;
  margin: 0;
  font-family: var(--heading-font);
  font-size: 16px;
}

/*--------------------------------------------------------------
# Main Service Details Section
--------------------------------------------------------------*/
.main_service {

}

/*--------------------------------------------------------------
# Solution Details Section
--------------------------------------------------------------*/
.solution {
  background-image: url(../img/solution_bg.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/*--------------------------------------------------------------
# Service Details Section
--------------------------------------------------------------*/
.service-details .services-list {
  padding: 10px 30px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  margin-bottom: 20px;
}

.service-details .services-list a {
  display: block;
  line-height: 1;
  padding: 8px 0 8px 15px;
  border-left: 3px solid color-mix(in srgb, var(--default-color), transparent 70%);
  margin: 20px 0;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  transition: 0.3s;
}

.service-details .services-list a.active {
  color: var(--heading-color);
  font-weight: 700;
  border-color: var(--accent-color);
}

.service-details .services-list a:hover {
  border-color: var(--accent-color);
}

.service-details .services-img {
  margin-bottom: 20px;
}

.service-details h3 {
  font-size: 26px;
  font-weight: 700;
}

.service-details h4 {
  font-size: 20px;
  font-weight: 700;
}

.service-details p {
  font-size: 15px;
}

.service-details ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.service-details ul li {
  padding: 5px 0;
  display: flex;
  align-items: center;
}

.service-details ul i {
  font-size: 20px;
  margin-right: 8px;
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Pagination 2 Section
--------------------------------------------------------------*/
.pagination-2 {
  padding-top: 0;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.pagination-2 ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
}

.pagination-2 li {
  margin: 0 5px;
  transition: 0.3s;
}

.pagination-2 li a {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  padding: 7px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pagination-2 li.active,
.pagination-2 li:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
}

.pagination-2 li.active a,
.pagination-2 li:hover a {
  color: var(--contrast-color);
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .info-item {
  padding: 20px 0 30px 0;
  box-shadow: 0px 0px 20px color-mix(in srgb, var(--default-color), transparent 90%);
}

.contact .info-item i {
  color: var(--accent-color);
  width: 56px;
  height: 56px;
  font-size: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease-in-out;
  border-radius: 50%;
  border: 2px dotted color-mix(in srgb, var(--accent-color), transparent 40%);
}

.contact .info-item h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 10px 0;
}

.contact .info-item p {
  padding: 0;
  margin-bottom: 0;
  font-size: 14px;
}

.contact .php-email-form {
  height: 100%;
  padding: 30px;
  box-shadow: 0px 0px 20px color-mix(in srgb, var(--default-color), transparent 90%);
}

@media (max-width: 575px) {
  .contact .php-email-form {
    padding: 20px;
  }
}

.contact .php-email-form .error-message {
  display: none;
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.contact .php-email-form .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.contact .php-email-form .loading {
  display: none;
  background: var(--background-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.contact .php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--background-color);
  animation: animate-loading 1s linear infinite;
}

.contact .php-email-form input[type=text],
.contact .php-email-form input[type=email],
.contact .php-email-form textarea {
  font-size: 14px;
  padding: 10px 15px;
  box-shadow: none;
  border-radius: 0;
  color: var(--default-color);
  background-color: color-mix(in srgb, var(--background-color), transparent 50%);
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.contact .php-email-form input[type=text]:focus,
.contact .php-email-form input[type=email]:focus,
.contact .php-email-form textarea:focus {
  border-color: var(--accent-color);
}

.contact .php-email-form input[type=text]::placeholder,
.contact .php-email-form input[type=email]::placeholder,
.contact .php-email-form textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.contact .php-email-form button[type=submit] {
  color: var(--contrast-color);
  background: var(--accent-color);
  border: 0;
  padding: 10px 30px;
  transition: 0.4s;
  border-radius: 4px;
}

.contact .php-email-form button[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}
.contact-page .info {
  width: 100%;
  background: #fff;
}
.contact-page .info i {
  font-size: 20px;
  background: #009bd7;
  color: #fff;
  float: left;
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  transition: all 0.3s ease-in-out;
}
.contact-page .info h4 {
  padding: 0 0 0 60px;
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 5px;
  color: #151515;
}
.contact-page .info p {
  padding: 0 0 0 60px;
  margin-bottom: 0;
  font-size: 14px;
  color: #484848;
}

.contact-page .info .email, .contact-page .info .phone {
  margin-top: 36px;
}

@keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Two Ways Radios Section
--------------------------------------------------------------*/
.two-ways-radios{
  background-image: url(../img/features-bg.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
.two-ways-radios .product-box {
  margin-bottom: 30px;
  border-radius: 6px;
  background-color: #f7f7f7;
  border: 4px solid #808080;
}
.two-ways-radios .product-box:hover{
  border: 4px solid #009bd7;
}
.two-ways-radios .inner-box{ 
  padding: 20px 20px 20px 20px;
  border-radius: 10px;
  /* box-shadow: inset rgb(201 201 201) 0px 0px 30px 0px, rgb(255 255 255) 0px 1px 3px -1px; */
  height: 550px;
}
.product-box .inner-box a{
  display: none;
}
.product-box:hover .inner-box a{
  display: block;
}
.product-box:hover .inner-box img{
  transform: scale(1.1);
  /* transition: transform 0.3s ease 0s; */
  transition: all .3s ease-in-out;
}
.product-box .inner-box img{
  position: relative;
  overflow: hidden;
}
.product-box .inner-box p{
  text-align: justify;
  font-size: 14px;
}
/*--------------------------------------------------------------
# Global Section
--------------------------------------------------------------*/
.global{
	background-image: url("../img/world_map.png");
	background-position: center;
	background-repeat: no-repeat;
  background-size: cover;
}
.global h3{
  font-size: 36px;
  line-height: 56px;
}
.global-box{
  padding: 30px 20px;
  border: 1px dotted #009bd7;
  background: #dfdaff36;
  margin-top: 50px;
}
.global-box span{
  font-size: 40px;
  color: #009bd7;
}

.global-box p{
  font-size: 20px;
  font-weight: 600;
}

/*--------------------------------------------------------------
# Product Page Section
--------------------------------------------------------------*/
.product-page .nav.nav-tabs{
  border: 0;
}
.product-page .nav-link{
  border: 0;
  padding: 12px 15px 12px 0;
  transition: 0.3s;
  color: #2c4964;
  border-radius: 0;
  border-right: 2px solid #ebf1f6;
  font-weight: 600;
  font-size: 18px;
}
.product-page .nav-link.active {
  color: #009bd7;
  border-color: #009bd7;
  padding-left: 10px;
  background-image: linear-gradient(45deg, transparent, #e6e6e6);
}
.product-page ul li i{
  color: #006b95;
  margin-right: 10px;
  font-size: 12px;
}
.product-page .product-img{
    position:relative;
}
.product-page .product-img img{
    cursor: pointer;
}
.product-page table th, .product-page table td{
  padding: 6px;
}
.product-page .accessories-img{
  text-align: center;
  border: 1px solid #009bd7;
  margin-top: 40px;
}
.product-page .key-feature-point p{
    line-height: 1.8;
}

/*--------------------------------------------------------------
# About Us Page Section
--------------------------------------------------------------*/
.about-page .nav.nav-tabs{
  border-bottom: 0;
}
.about-page .nav.nav-tabs li{
 margin-right: 6px;
}
.about-page .nav-link.active{
  background: #eeeeee;
  color: #009bd7;
  font-size: 20px;
  font-weight: 500;
  border-radius: 0;
  border-top: 4px solid;
}
.about-page .nav-link{
  background: #eeeeee;
  color: #404246;
  font-size: 20px;
  font-weight: 500;
  border-radius: 0;
  height: 50px;
  position: relative;
  border-top: 0 0 0 0;
}
.about-page .details ul li{
  margin-right: 15px;
}
.about-page .details ul li i{
  color: #009BD7;
  margin-right: 10px;
}

/*----------- Team Section ------------*/
.team{
  background-image: url(../img/map_bg.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.team .team-item{
  position: relative;
}
.team .team-item .image-wrap {
  clip-path: polygon(0% 0%, 88% 0, 100% 10%, 100% 100%, 0% 100%) !important;
  overflow: hidden;
  position: relative;
}
.team .team-item .image-wrap .social-icons {
  background: #009BD7;
}
.team .team-item .image-wrap .social-icons {
  position: absolute;
  height: 39px;
  background-color: #009bd7;
  border-radius: 2px 0px 0px 2px;
  right: -108px;
  top: 65px;
  -webkit-transition: 0.3s all ease;
  transition: 0.3s all ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
}
.team .team-item .image-wrap .social-icons a {
  display: inline-block;
  margin: 0 8px;
}
.team .team-item:hover .image-wrap .social-icons {
  right: 0;
}
.team .team-item:hover .image-wrap .social-icons i{
  color: #fff;
}
.team .team-item .team-content {
  box-shadow: 0px 6px 25px 0px rgba(2.0000000000000044, 59.00000000000002, 74, 0.06);
}
.team .team-item .team-content {
  background: #fff;
  padding: 20px;
  text-align: center;
  z-index: 9;
  position: absolute;
  z-index: 1;
  opacity: 1;
  width: unset;
  height: unset;
  display: inline-block;
  border-radius: 2px;
  top: unset;
  bottom: -80px;
  padding: 10px 10px 15px;
  left: 50%;
  max-width: 300px;
  transform: translateX(-50%);
  width: 100%;
}
.team .team-item .team-content .team-name {
  display: block;
  font-size: 24px;
  line-height: 36px;
  margin-bottom: 0px;
  text-transform: capitalize;
  font-weight: 700;
}
.team .team-item .team-content .team-title {
  font-size: 16px;
  font-weight: 400;
  padding-top: 5px;
  display: block;
  color: #616161;
}

/*----------- INDUSTRIES PARTNERS Section ------------*/
.industry{
  background-image: url(../img/bg-4.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.industry .partner-box {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 12px 0px 12px 0px;
  height: 202px;
  background: rgb(255 255 255 / 12%);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/*----------- Similar Product Section ------------*/
.similar-product .product-box {
  margin-bottom: 30px;
  border-radius: 6px;
  background-color: #ffffff;
  border: 2px solid #dadada;
}
.similar-product .inner-box {
  padding: 20px 20px 20px 20px;
  border-radius: 10px;
  min-height: 370px;
}

.product-view img{
  width: 70%;
}

.main_service h2, .main_service h3, .main_service p{
    font-family: "Montserrat";
}

/*----------- INDUSTRIES PARTNERS Section ------------*/
.license-free-product-page .similar-product.product-page .inner-box {
  min-height: 360px;
}
.product-box:hover {
  border: 2px solid #009bd7;
}
.license-radios .nav-tabs li:nth-child(2) a, .license-radios .nav-tabs li:nth-child(3) a, .license-radios .nav-tabs li:nth-child(4) a{
    font-size: 17px;
    margin-left:30px;
    font-weight: 500;
}

/*------------------- Aspera Web & Mobile View Banner  --------------------------*/
@media (min-width: 767px){
  .mob-banner {
      display: none !important;
  } 
}
@media (max-width: 768px){
  .web-banner {
      display: none !important;  
    }
  .hero {
        min-height: 84vh;
    }
}