/**
* Template Name: Company
* Template URL: https://bootstrapmade.com/company-free-html-bootstrap-template/
* Updated: Aug 07 2024 with Bootstrap v5.3.3
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts */
:root {
  --urbanist-default: "urbanist", sans-serif;
  --urbanist-medium: "urbanist-medium", sans-serif;
  --urbanist-semibold: "urbanist-semibold", sans-serif;
  --urbanist-bold: "urbanist-bold", sans-serif;
  --poppins-regular: "poppins-regular", 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: #000000;
  /* Default color used for the majority of the text content across the entire website */
  --heading-color: var(--primary-light-color);
  /* 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. */
  /* --primary-color: #0A3981; */
  --primary-color: #193E52;
  /* --primary-light-color: #1F509A; */
  --primary-light-color: #22536E;
  /* --primary-bg-color: #D4EBF8; */
  /* --primary-bg-color: #E3F0F6; */
  --black: #000000;
  --primary-bg-color: #F4FBFF;
  --text-hover-color: #7f9ba6;
  --primarybtnshadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
  --secondarybtnshadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
  --primary-extralight-color: #D9EFFD;
  --green-light-color: #F2FFF0;

}

/* 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: var(--primary-color);
  /* The default color of the main navmenu links */
  --nav-hover-color: var(--primary-color);
  /* 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: #000000;
  /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: var(--primary-color);
  /* 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. */

.section-background {
  --background-color: var(--primary-bg-color);
}

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

/* .accent-background {
  --background-color: #1bbd36;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --primary-color: #ffffff;
  --surface-color: #2ae149;
  --contrast-color: #ffffff;
} */

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

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
@font-face {
  font-family: 'urbanist';
  src: url('../fonts/urbanist/Urbanist-Regular.woff2') format('woff2'),
    url('../fonts/urbanist/Urbanist-Regular.woff') format('woff'),
    url('../fonts/urbanist/Urbanist-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'urbanist-medium';
  src: url('../fonts/urbanist/Urbanist-Medium.woff2') format('woff2'),
    url('../fonts/urbanist/Urbanist-Medium.woff') format('woff'),
    url('../fonts/urbanist/Urbanist-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'urbanist-semibold';
  src: url('../fonts/urbanist/Urbanist-SemiBold.woff2') format('woff2'),
    url('../fonts/urbanist/Urbanist-SemiBold.woff') format('woff'),
    url('../fonts/urbanist/Urbanist-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'urbanist-bold';
  src: url('../fonts/urbanist/Urbanist-Bold.woff2') format('woff2'),
    url('../fonts/urbanist/Urbanist-Bold.woff') format('woff'),
    url('../fonts/urbanist/Urbanist-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'poppins-regular';
  src: url('../fonts/poppins/Poppins-Regular.woff2') format('woff2'),
    url('../fonts/poppins/Poppins-Regular.woff') format('woff'),
    url('../fonts/poppins/Poppins-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

* {
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
}

.container {
  max-width: 1460px;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

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

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

.page-top .top-bar-slider a:hover{
  color: white !important;
}


h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
}

.form-control:focus {
  outline: 0;
  border-color: unset;
  box-shadow: unset;
}

.fw-bold {
  font-weight: 700;
}

i.bi.bi-arrow-right-short {
  font-size: 24px;
  margin: 0px;
}

/*--------------------------------------------------------------
# Primary / Secondary Button
--------------------------------------------------------------*/

.btn {
  transition: all 0.3s;
  padding: 9px 12px;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  font-family: var(--urbanist-bold);
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  width: fit-content;
}

.btn.btn-primary {
  background-color: #0A7E3C;
  color: #FFFFFF;
  border: 1px solid #0A7E3C;
}

.btn.btn-primary:hover {
  background-color: #ffffff;
  color: #0A7E3C;
  border-color: #0A7E3C;
}

.btn.btn-secondary {
  background-color: #ffffff;
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
}

.btn.btn-secondary:hover {
  background-color: var(--primary-color);
  color: var(--primary-bg-color);
}

.btn i {
  font-size: 24px;
}

@media (max-width: 768px) {
  .btn {
    padding: 8px 16px;
    font-size: 14px;
  }
}

/*------------------------------
# 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(--primary-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);
  }
}