/**
* Template Name: ZapGlobel
* Updated: Nov 07 2024 with Bootstrap v5.3.3
* Author: BootstrapMade.com
*/

/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/

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


/* Fonts */
:root {
  --default-font: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Roboto", sans-serif;
  --nav-font: "Lato", sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root {
  --background-color: #ffffff;
  /* Background color for the entire website, including individual sections */
  --default-color: #54575e;
  /* Default color used for the majority of the text content across the entire website */
  --heading-color: #0d273a;
  /* Color for headings, subheadings and title throughout the website */
  --accent-color: #0d273a;
  /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --surface-color: #ffffff;
  /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color: #ffffff;
  /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: #838f85;
  /* The default color of the main navmenu links */
  --nav-hover-color: #0d273a;
  /* Applied to main navmenu links when they are hovered over or active */
  --nav-mobile-background-color: #ffffff;
  /* Used as the background color for mobile navigation menu */
  --nav-dropdown-background-color: #ffffff;
  /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #0d273a;
  /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #0d273a;
  /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */

.light-background {
  --background-color: #f3f4f4;
  --surface-color: #ffffff;
}

.dark-background {
  --background-color: #060606;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --surface-color: #252525;
  --contrast-color: #ffffff;
}

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

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
  font-size: 15px;
}

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

img {
  max-width: 100%;
}


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);
}

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

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

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

.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(--surface-color);
  animation: php-email-form-loading 1s linear infinite;
}

@keyframes php-email-form-loading {
  0% {
    transform: rotate(0deg);
  }

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

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 10px 0;
  transition: all 0.5s;
  z-index: 997;
}

.header .logo,.main-logo {
  line-height: 1;
  position: relative;
}

.header .logo img,.main-logo .logo img {
  position: relative;
  transform: rotate(45deg);
}

.header .logo img,.main-logo .logo img {
  max-height: 32px;
  margin-right: 8px;
}

.header .logo h2,.main-logo .logo img {
  font-size: 30px;
  margin: 0;
  font-weight: 300;
  color: #0d273a;
  font-family: "Contrail One", sans-serif;
}

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

.theme-btn {
  background: #0d273a;
  color: #fff !important;
  text-transform: uppercase;
  padding: 12px 24px !important;
  border-radius: 50px;
  font-weight: bold !important;
  letter-spacing: 2px;
  font-size: 14px !important;
}

.theme-btn:hover {
  background: #4d606e;
}

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

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

  .navmenu li {
    position: relative;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-color);
    padding: 18px 15px;
    font-size: 18px;
    font-family: var(--nav-font);
    font-weight: 400;
    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;
    transition: 0.3s;
  }

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

  .navmenu li:hover>a,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-hover-color);
    font-weight: bold;
  }

  .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;
    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: -100%;
    visibility: visible;
  }
}

/* Navmenu - Mobile */
@media (max-width: 991px) {
  .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;
    list-style: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-mobile-background-color);
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-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-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);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    transition: all 0.5s ease-in-out;
  }

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

  .navmenu .dropdown ul a {
    color: var(--nav-dropdown-color);
  }

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

  .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;
  }
}


/* slider */
.slider-container {
  display: flex;
  align-items: center;
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
}

.slider-wrapper {
  display: flex;
  overflow: hidden;
  transition: all 0.5s ease;
  display: flex;
  grid-column: 1;
  grid-row: 1;
  gap: 8px;
  width: 100%;
  max-width: 100vw;
  height: 100vh;
  max-height: 500px;
  position: relative;
}

.slider-wrapper .slide {
  max-width: 100%;
  background-color: #ff6347;
  flex-basis: 96px;
  border-radius: 8px;
  color: #fff;
  flex: 0 0 90vw;
  flex-basis: 96px;
  height: auto;
  overflow: hidden;
  position: relative;
  transition: flex .5s cubic-bezier(.4, .2, .4, 1);
}

.slider-wrapper .slide.active {
  flex: 1;
}

.slider-wrapper .slide img {
  display: flex;
  height: 100%;
  left: 0;
  object-fit: cover;
  position: absolute;
  right: 0;
  top: 0;
  max-width: 100%;
  width: 100%;
}

.slider-wrapper .slide .card__mask {
  background-color: transparent;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(30, 29, 40, .5600000000000001) 100%);
  backdrop-filter: blur(20px);
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.slider-wrapper .slide.active .card__mask {
  backdrop-filter: initial;
}

.slider-wrapper .slide .card__icon {
  bottom: 32px;
  left: 28px;
  display: block;
  height: 40px;
  width: auto;
  position: absolute;
  transition-duration: .5s;
  transition-property: opacity, transform;
  transition-timing-function: cubic-bezier(0.4, 0.2, 0.4, 1);
}

.slider-wrapper .slide.active .card__icon {
  display: none;
}

.hero-slider {
  padding: 0;
  position: relative;
}

.slider-wrapper .slide .card__name {
  font-size: 15px;
  line-height: 24px;
  padding-left: 0;
  padding-right: 26px;
  position: absolute;
  text-align: right;
  transform-origin: right;
  transform: rotate(-90deg);
  transition-duration: .5s;
  transition-property: transform, top;
  transition-timing-function: cubic-bezier(0.4, 0.2, 0.4, 1);
  margin-bottom: 20px;
  margin-top: 16px;
  margin-left: 16px;
  white-space: nowrap;
  width: 250px;
  right: 48px;
  top: 14px;
}

.slider-wrapper .slide.active .card__name {
  top: 19px;
  transform: rotate(0) translateX(16px);
}

.slider-wrapper .slide .card__name:after {
  border-radius: 50%;
  border: 1px solid #fff;
  content: '';
  height: 10px;
  margin-top: -5px;
  position: absolute;
  top: 50%;
  width: 10px;
  left: auto;
  right: 0;
}

.slider-wrapper .slide .card__text {
  padding-bottom: 40px;
  padding-top: 50px;
  height: 100%;
  position: absolute;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  display: flex;
  padding-left: 112px;
  opacity: 0;
  justify-content: center;
}

.slider-wrapper .slide .title-h1 {
  margin-bottom: 24px;
  font-size: 56px;
  line-height: 1;
  font-weight: 300;
  color: #fff;

}

.slider-wrapper .slide.active .card__text {
  opacity: 1;
}

.slider-wrapper .slide:not(.active):hover {
  flex-basis: 132px;
}


/* Navigation buttons */
.nav-button {
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  border-radius: 5px;
  padding: 10px;
  cursor: pointer;
  position: absolute;
  bottom: 15px;
  z-index: 1;
}

.nav-button:hover {
  background-color: rgba(0, 0, 0, 0.7);
}

.nav-button.prev {
  left: 15px;
}

.nav-button.next {
  right: 15px;
}

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  background-color: var(--background-color);
  color: var(--default-color);
  padding: 60px 0;
  padding-bottom: 15px;
  font-size: 14px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
}

.footer a {
  color: var(--default-color) !important;
}

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

.footer .copyright {
  margin-top: 50px;
  position: relative;
  padding-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
}

.footer .copyright p,
.footer .copyright .credits {
  margin: 2px 0;
}

.footer .btn-learn-more {
  background-color: var(--accent-color);
  border-radius: 30px;
  padding: 8px 30px;
  border: 2px solid transparent;
  transition: 0.3s all ease-in-out;
  font-size: 14px;
  color: var(--contrast-color) !important;
}

.footer .btn-learn-more:hover {
  border-color: var(--accent-color);
  background-color: transparent;
  color: var(--accent-color) !important;
}

.footer .widget .widget-heading {
  font-size: 15px;
  color: var(--heading-color);
  margin-bottom: 20px;
}

.footer .widget ul li {
  margin-bottom: 10px;
  line-height: 1.5;
}

.footer .widget ul li a {
  color: color-mix(in srgb, var(--heading-color), transparent 50%);
}

.footer .widget ul li a:hover {
  text-decoration: none;
  color: var(--heading-color);
}

.footer .widget .footer-blog-entry .date {
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 12px;
}

.footer .social-icons li {
  display: inline-block;
}

.footer .social-icons li a {
  display: inline-block;
  width: 40px;
  height: 40px;
  position: relative;
  border-radius: 50%;
  background: color-mix(in srgb, var(--default-color), transparent 90%);
}

.footer .social-icons li a span {
  color: color-mix(in srgb, var(--heading-color), transparent 0%);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: 0.3s all ease-in-out;
}

.footer .social-icons li a:hover {
  background: var(--accent-color);
}

.footer .social-icons li a:hover span {
  color: var(--contrast-color);
}

.footer .social-icons li:first-child a {
  padding-left: 0;
}

.footer .footer-subscribe form {
  position: relative;
}

.footer .footer-subscribe .form-control {
  font-size: 14px;
  height: 42px;
  border: 2px solid color-mix(in srgb, var(--default-color), transparent 40%);
  background: none;
  color: var(--heading-color);
  padding-right: 40px;
}

.footer .footer-subscribe .form-control:focus {
  border-color: color-mix(in srgb, var(--default-color), transparent 10%);
  box-shadow: none;
}

.footer .footer-subscribe .form-control::placeholder {
  color: color-mix(in srgb, var(--heading-color), transparent 60%);
}

.footer .footer-subscribe .btn-link {
  padding: 0;
  margin: 0;
  font-size: 1.5rem;
  background-color: none;
  border-color: none;
  position: absolute;
  line-height: 0;
  color: color-mix(in srgb, var(--heading-color), transparent 20%);
  top: 20px;
  right: 10px;
  transform: translateY(-50%) rotate(0deg);
}

.footer .footer-subscribe .btn-link:hover,
.footer .footer-subscribe .btn-link:focus,
.footer .footer-subscribe .btn-link:active {
  text-decoration: none;
}

.icon-text i {
  margin-right: 5px;
}

/*--------------------------------------------------------------
# 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(--contrast-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 {
  color: var(--default-color);
  background-color: #c1cbca;
  padding: 50px 0;
  position: relative;
}

.page-title-image img {
  max-width: 110px;
}

.page-title-image {
  text-align: center;
  gap: 16px;
  display: flex;
  justify-content: center;
}

.page-title h1 {
  font-size: 38px;
  margin: 0 0 5px 0;
  margin: 0 0 5px 0;
}

.page-title .breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
}

.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 70%);
}

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

@media (max-width: 1199px) {

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

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

.section-title h2 {
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 0;
}

.section-title p {
  font-size: 15px;
  margin-bottom: 10px;
}

/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services {
  padding-top: 60px;
  padding-bottom: 60px;
}

.services-item {
  border-color: #c7c7d6;
  background-color: transparent;
  border-radius: 8px;
  border: 1px solid #c7c7d6;
  flex: 0 0 290px;
  padding: 16px;
  position: relative;
  text-decoration: none;
  transition-duration: .3s;
  transition-property: background-color, border-color;
}

.services-item .link {
      display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    left: 0;
    cursor: pointer;
    z-index: 1;
}



.service-cat:before {
  border-radius: 50%;
  border: 1px solid #0d273a;
  content: '';
  height: 10px;
  transition: border-color .3s;
  width: 10px;
}

.service-cat {
  align-items: center;
  font-size: 16px;
  line-height: 24px;
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  padding-top: 4px;
  padding-bottom: 4px;
  transition: color .3s;
}


.services-item .title {
  min-height: 80px;
  align-items: center;
  display: flex;
  margin-bottom: 8px;
  min-height: 64px;
  transition: color .3s;
  font-size: 24px;
  line-height: 32px;
  font-weight: 300;
}

.services-item .des {
  color: #54575e;
  transition: color .3s;
  font-size: 15px;
  line-height: 1.6;
  height: 74px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  margin-bottom: 20px;
}

.services-picker__item-link {
  height: 120px;
  align-items: center;
  border-radius: 64px;
  border: 1px solid #c7c7d6;
  display: flex;
  justify-content: center;
  overflow: hidden;
  position: relative;
  transition: border-color .3s;
}

.services-picker__item-link .services-picker__item-line {
  background-color: #c7c7d6;
  height: 1px;
  position: absolute;
  width: 74%;
}

.services-picker__item-link > img {
  height: 100%;
  object-fit: cover;
  opacity: 0;
  position: relative;
  transition: opacity .3s;
  width: 100%;
  display: block;
  max-width: 100%;
}

.services-picker__item-mask {
  background-color: rgba(0, 0, 0, .24);
  bottom: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.services-picker__item-view {
  color: #fff;
  font-weight: 700;
  opacity: 0;
  position: absolute;
  transition: opacity .3s;
  font-size: 15px;
  line-height: 1.6;
}

.services-picker__item-icon {
  height: 40px;
  left: 10%;
  margin-top: -20px;
  position: absolute;
  top: 50%;
  transition: left .6s;
  width: 40px;
}

.services-item:hover {
  background-color: #0d273a;
  border-color: #0d273a;
}

.services-item:hover .service-cat {
  color: #fff;
}

.services-item:hover .title {
  color: #fff;
}

.services-item:hover .des {
  color: #fff;
}

.services-item:hover .services-picker__item-link {
  border-color: #0d273a;
}

.services-item:hover .services-picker__item-link > img {
  opacity: 1;
}

.services-item:hover .services-picker__item-mask {
  opacity: 1;
}

.services-item:hover .services-picker__item-view {
  opacity: 1;
  transition-delay: 0.2s;
}

.services-item:hover .services-picker__item-icon {
  left: calc(90% - 40px);
}

.services-item:hover .service-cat:before {
  border-color: #fff;
}

/*--------------------------------------------------------------
# Stats Section
--------------------------------------------------------------*/
.stats {
  padding-top: 60px;
}

.stats .content-subtitle {
  font-size: 15px;
  margin-bottom: 10px;
  display: block;
  color: var(--default-color);
}

.stats .lead {
  line-height: 1.6;
  font-size: 18px;
  font-weight: normal;
  color: var(--default-color);
}

.stats .content-title {
  color: var(--heading-color);
  font-size: 22px;
  margin-bottom: 12px;
}

.stats p {
  line-height: 1.7;
  color: var(--default-color);
}

.stats .btn-get-started {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  border-radius: 30px;
  padding: 8px 30px;
  border: 2px solid transparent;
  transition: 0.3s all ease-in-out;
  font-size: 14px;
}

.stats .btn-get-started:hover {
  border-color: var(--accent-color);
  background-color: transparent;
  color: var(--accent-color);
}

.stats .count-numbers .number {
  font-size: 1.8rem;
  color: var(--heading-color);
  position: relative;
  display: block;
  padding-bottom: 7px;
  margin-bottom: 10px;
}

.stats .count-numbers .number:after {
  content: "";
  left: 0;
  bottom: 0;
  position: absolute;
  width: 20px;
  height: 2px;
  background: var(--accent-color);
}


/*--------------------------------------------------------------
# Tabs Section
--------------------------------------------------------------*/
.tabs .service-item .service-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 4px;
  position: relative;
  color: var(--accent-color);
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
  margin-right: 20px;
  font-size: 16px;
}

.tabs .service-item .service-contents h3 {
  font-size: 16px;
  color: var(--heading-color);
}

.tabs .service-item.link {
  padding: 20px;
  margin-bottom: 10px;
  border-radius: 7px;
}

.tabs .service-item.link .service-contents {
  color: var(--default-color);
}

.tabs .service-item.link .service-contents p {
  font-size: 14px;
}

.tabs .service-item.link .service-contents *:last-child {
  margin-bottom: 0;
}

.tabs .service-item.link:hover {
  background: color-mix(in srgb, var(--default-color), transparent 96%);
}

.tabs .service-item.link:hover .service-icon {
  background-color: color-mix(in srgb, var(--default-color), transparent 90%);
  color: var(--default-color);
}

.tabs .service-item.link.active {
  background: var(--surface-color);
}

.tabs .service-item.link.active .service-icon {
  background-color: var(--accent-color);
  color: var(--contrast-color);
}



/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/

.custom-form {
  border-radius: 10px;
  background-color: transparent;
}

.contact-sec {
  background: #0d273a;
}

.testimonials p {
  line-height: 1.7;
  color: #fff;
}

.testimonials .testimonial {
  max-width: 500px;
  margin-bottom: 30px;
}

.testimonials .testimonial .name {
  font-size: 18px;
  color: #fff;
}

.testimonials .testimonial .img-wrap img {
  margin: 0 auto;
  width: 100%;
  max-width: 150px;
  border-radius: 10px;
}

.testimonials .swiper-pagination {
  position: absolute;
  bottom: 0px;
}

.testimonials .swiper-pagination .swiper-pagination-bullet {
  margin: 0 5px;
  background-color: #fff;
  opacity: 0.3;
}

.testimonials .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background:#fff;
  opacity: 1;
}

.testimonial-wrap > h3 {
  color: #fff;
  text-align: center;
  margin-bottom: 50px;
}

.testimonial .author-box {
  display: flex;
  gap: 16px;
  margin-top: 30px;
}

.testimonial .author-box .img-wrap {
  flex: 0 0 80px;
  border-radius: 8px;
  width: 80px;
}

.testimonial .author-box .auth-info {
  text-align: left;
}

.testimonials .testimonial blockquote:before {
  content: url("data:image/svg+xml,%3Csvg width='24' height='16' viewBox='0 0 24 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.8664 0C23.4389 1.65442 22.9877 3.43945 22.5128 5.3551C22.0378 7.27075 21.6104 9.14286 21.2304 10.9714C20.8504 12.8 20.5417 14.4762 20.3043 16H13.5362L13.0375 15.2816C13.4649 13.7578 14.0111 12.1252 14.6761 10.3837C15.341 8.59864 16.0772 6.81361 16.8846 5.02857C17.692 3.24354 18.4757 1.56735 19.2356 0H23.8664ZM10.6864 0C10.259 1.65442 9.80778 3.43945 9.33283 5.3551C8.85788 7.27075 8.43042 9.14286 8.05046 10.9714C7.67049 12.8 7.36177 14.4762 7.1243 16H0.427458L0 15.2816C0.427458 13.7578 0.973654 12.1252 1.63859 10.3837C2.30352 8.59864 3.01595 6.81361 3.77588 5.02857C4.5833 3.24354 5.36697 1.56735 6.1269 0H10.6864Z' fill='%23ffffff'/%3E%3C/svg%3E%0A");
  display: block;
  margin-bottom: 24px;
}

.custom-form .form-control {
  background: transparent;
  border-radius: 0;
  border: none;
  border-color: #605757;
  border-bottom-color: #fff;
  border-bottom: 1px solid #ddd;
  height: 40px;
  color:#fff;
}

.custom-form .form-label {
  color: #fff;
  font-size: 12px;
  margin-bottom: 5px;
}

.custom-form .submit-btn {
  background-color: #fff;
  border-radius: 50px;
  color: #0d273a;
  cursor: pointer;
  display: inline-block;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3 !important;
  margin: 0;
  min-width: 150px;
  outline: 0;
  padding: 15px !important;
  text-align: center;
  text-decoration: none;
  transition-duration: .3s;
  transition-property: background-color, color;
  -moz-user-select: none;
  user-select: none;
  vertical-align: middle;
  white-space: nowrap;
  -webkit-appearance: none;
  margin-top: 20px;
  border-color: transparent;
}

canvas#captcha {
  background: transparent;
  margin-right: 20px;
}

.custom-form .btn:hover {
  background: transparent;
  border-color: #fff;
  color: #fff;
}

.custom-form input#captcha-input {
    color:#fff;
}

input#captcha-input {
display: block;
    border: none;
    height: 40px;
    line-height: 40px;
    padding: 5px;
    background: transparent;
    border: 2px solid #ddd;
}

.detail-sidebar input#captcha-input{
  margin: 0 auto;
}

.form-title {
  font-weight: 300;
  margin-bottom: 30px;
}

.custom-form .form-group {
  position: relative;
}

.custom-form .form-group .form-label {
  color: #fff;
  font-size: .875rem;
  font-weight: 400 !important;
  left: 0;
  line-height: 1.63 !important;
  max-width: 100%;
  opacity: .7;
  overflow: hidden;
  position: absolute;
  text-overflow: ellipsis;
  top: 8px;
  transition-duration: .3s;
  transition-property: transform;
  white-space: nowrap;
}

.custom-form .form-control:focus{
  border-color:#ff0000;
}

.custom-form .form-control:focus ~ label {
  transform: translateY(-23px);
  color: red;
}


/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .info {
  background-color: var(--surface-color);
  padding: 40px;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.contact .info h3 {
  font-weight: 600;
  font-size: 24px;
}

.contact .info p {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 30px;
  font-size: 15px;
}

.contact .info-item+.info-item {
  padding-top: 20px;
  margin-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.contact .info-item i {
  font-size: 24px;
  color: var(--accent-color);
  transition: all 0.3s ease-in-out;
  margin-right: 20px;
}

.contact .info-item h4 {
  padding: 0;
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  margin-bottom: 5px;
}

.contact .info-item p {
  padding: 0;
  margin-bottom: 0;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.contact .php-email-form {
  width: 100%;
}

.contact .php-email-form .form-group {
  padding-bottom: 8px;
}

.contact .php-email-form input[type=text],
.contact .php-email-form input[type=email],
.contact .php-email-form textarea {
  color: var(--default-color);
  background-color: var(--surface-color);
  border-radius: 0px;
  box-shadow: none;
  font-size: 14px;
  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 input[type=text],
.contact .php-email-form input[type=email] {
  height: 48px;
  padding: 10px 15px;
}

.contact .php-email-form textarea {
  padding: 10px 12px;
  height: 150;
}

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

.contact .php-email-form button[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color) 90%, black 15%);
}

/* Detail page */

.thumbnail-image {
  border-radius: 15px;
  overflow: hidden;
  margin-bottom: 30px;
  margin-top: 15px;
}

.list-style2 {
  padding: 0;
  margin: 0;
  list-style: none;
  margin-bottom: 20px;
}

.list-style2 > li {
  padding-left: 23px;
  position: relative;
  margin-bottom: 9px;
  color: #838f85;
}

.list-style2 > li:before {
  content: "\F271";
  font-family: 'bootstrap-icons';
  position: absolute;
  left: 0;
  color: #0d273a;
  font-size: 17px;
  vertical-align: middle;
}

.servic-detail-col h2 {
  margin: 20px 0;
}

.servic-detail-col h3 {
  font-size: 1.4rem;
  margin-bottom: 10px;
}

.detail-sidebar-wrap {
  position: sticky;
  top: 83px;
  height: 100%;
}

.quiery-form {
  background: #b0e9e9;
  background-color: #c1cbca;
  padding: 20px 15px;
  border-radius: 15px;
  box-shadow: 0 0 10px #dddddd;
  margin-top: 15px;
}

.quiery-form .form-title {
  text-align: center;
  margin-bottom: 15px;
}

.quiery-form .btn-wrap {
  margin-top: 30px;
  text-align: center;
}

.quiery-form  label {
  color: #0d273a;
  font-size: 12px;
  text-transform: uppercase;
  margin-bottom: 5px;
  font-weight: bold;
}

.quiery-form .form-group {
  margin-bottom: 15px;
}

.services-item:hover .services-icon {
  color: #fff;
  font-size: 40px;
}

.services-item:hover .services-icon {
  color: #fff;
}

.services-item:hover h3 {
  color: #fff;
}

.services-item:hover p {
  color: #fff;
}

.services-item .services-icon {
  font-size: 40px;
}

.why-testi {
    text-align: center;
}

.why-2-image {
  max-height: 500px;
  overflow: hidden;
}


.why-testi:before {
    display: none !important;
}

.why-testi h3 {
    color: #fff;
    position: relative;
    padding-bottom: 5px;
}

.why-testi h3:before {
    content: "";
    height: 2px;
    width: 100%;
    position: absolute;
    background: #fff;
    bottom: 0;
}

.why-testi h3 {
    display: inline-block;
    margin-bottom: 20px;
}

/* Resposnive Media */
@media(max-width:991px) {
  .slider-wrapper .slide .title-h1 {
    font-size: 48px;
  }

  .slider-wrapper .slide .card__text{
    padding: 20px;
  }

  .navmenu a.theme-btn {
    display: inline-block;
    margin-left: 15px;
  }

  .custom-form .submit-btn {
    margin-bottom: 30px;
}
  
}

@media(max-width:767px) {
  .slider-wrapper .slide .card__text {
    width: 100%;
    text-align: center;
  }

  .slider-wrapper .slide .title-h1 {
    padding-left: 15px;
    font-size: 30px;
    text-align: center;
  }

  .page-title-image {
    justify-content: start;
  }

  .page-title h1 {
    font-size: 28px;
}

}

@media(max-width:600px){
  .slider-wrapper .slide {
    flex-basis: 60px;
}

.slider-wrapper .slide .card__name {
    right: 27px;
}

.slider-wrapper .slide .card__icon {
    left: 16px;
    height: 30px;
}

.slider-wrapper .slide.active .card__text {
  font-size: 14px;
}
}

@media(max-width:500px){
  .slider-wrapper .slide .title-h1 {
    font-size: 22px;
    padding: 0;
}

.slider-wrapper .slide .card__text {
    justify-content: center;
    padding: 0 15px;
}

.slider-wrapper .slide {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 53px;
  transition: .3s ease-in-out;
}

.slider-wrapper .slide.active {
  width: calc(100% - 74px);
  margin-right: 74px;
}

.slider-wrapper {
  max-height: 350px;
}
}