/**
* Template Name: HeroBiz
* Template URL: https://bootstrapmade.com/herobiz-bootstrap-business-template/
* Updated: Jun 06 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 {
  --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: "Source Sans Pro",  sans-serif;
  --nav-font: "Poppins",  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: #1a1f24; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #485664; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #ab5a25; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --contrast-color: #ffffff; /* The contrast color is used for elements 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 */
}

/* 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: #6C6C6C;  /* The default color of the main navmenu links */
  --nav-hover-color: rgb(171, 90, 37); /* Applied to main navmenu links when they are hovered over or active */
  --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: rgb(0, 72, 58); /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: rgb(171, 90, 37); /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Template Custom Colors */
:root {
  --footer-background-color: rgba(0,57,46,1.00);
}

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

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
  overflow-x: hidden !important; 
  margin: 0; /* Ensure body has no margin */
  padding: 0; /* Ensure body has no padding */
}

* {
  box-sizing: border-box; /* Include padding and border in element's total width and height */
}



.content {/* Ensure content fills the viewport width */ /* Add padding if needed */
  margin: 0 auto; /* Center content */
}

a {
  color: rgb(171, 90, 37);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: #8c491e;
  text-decoration: none;
}
p {
	font-size: 15px;
}
h1,
  
h2,
h3,
h4,
h5 {
  
}
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
}
.jost {
  font-family: "Jost", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}
.cormorant-garamond-light {
  font-family: "Cormorant Garamond", serif;
  font-weight: 300;
  font-style: normal;
}

.cormorant-garamond-regular {
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-style: normal;
}

.cormorant-garamond-medium {
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  font-style: normal;
}

.cormorant-garamond-semibold {
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-style: normal;
}

.cormorant-garamond-bold {
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-style: normal;
}

.cormorant-garamond-light-italic {
  font-family: "Cormorant Garamond", serif;
  font-weight: 300;
  font-style: italic;
}

.cormorant-garamond-regular-italic {
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-style: italic;
}

.cormorant-garamond-medium-italic {
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  font-style: italic;
}

.cormorant-garamond-semibold-italic {
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-style: italic;
}

.cormorant-garamond-bold-italic {
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-style: italic;
}
.qwitcher-grypen-regular {
  font-family: "Qwitcher Grypen", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 50px;
  transform: rotate(-2deg);
}

.qwitcher-grypen-bold {
  font-family: "Qwitcher Grypen", cursive;
  font-weight: 700;
  font-style: normal;
}
/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 20px 100px;
  transition: all 0.5s;
  z-index: 997;
}

.header .logo {
  line-height: 1;
}

.header .logo img {
  max-height: 55px;
  margin-right: 8px;
}

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

.header .logo span {
  color: var(--accent-color);
  font-weight: 400;
  font-size: 34px;
  margin-left: 2px;
}

.header .btn-getstarted,
.header .btn-getstarted:focus {
  color: #FFFFFF;
  background: #ab5a25;
  font-size: 13px;
  padding: 8px 26px;
  margin: 0;
  border-radius: 4px;
  transition: 0.3s;
}

.header .btn-getstarted:hover,
.header .btn-getstarted:focus:hover {
  color: #FFFFFF;
  background: #8c491e;
}

@media (max-width: 1200px) {
  .header .logo {
    order: 1;
  }

  .header .btn-getstarted {
    order: 2;
    margin: 15px 15px 15px 15px;
    padding: 15px 20px;
	align-content: center!important;
	text-align: center!important;
  }

  .header .navmenu {
    order: 3;
  }
}

.scrolled .header {
  box-shadow: 0px 0 18px color-mix(in srgb, var(--default-color), transparent 85%);
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Desktop Navigation */
@media (min-width: 1200px) {
  .navmenu {
    padding-left: 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: rgb(0, 72, 58);
    font-size: 13px;
    padding: 0 2px;
    font-family: "Jost", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
    position: relative;
  }

  .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;
    width: 100%;
    height: 2px;
    bottom: -6px;
    left: 0;
    background-color: var(--nav-hover-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 li:hover>a,
  .navmenu .active,
  .navmenu .active:focus {
    color: rgb(171, 90, 37);
  }

  .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 color-mix(in srgb, var(--default-color), transparent 85%);
  }

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

  .navmenu .dropdown ul a {
    padding: 7px 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;
  }
}

/* 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: "Jost", sans-serif;
    font-size: 17px;
    font-weight: 600;
    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, rgb(171, 90, 37), transparent 90%);
  }

  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    background-color: rgb(171, 90, 37);
    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;
  }
}

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  --background-color: var(--footer-background-color);
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --contrast-color: #ffffff;
  color: var(--default-color);
  background-color: var(--background-color);
  font-size: 14px;
  position: relative;
}

.footer .footer-top {
  background-color: color-mix(in srgb, var(--background-color), white 5%);
  padding-top: 50px;
}

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

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

.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 h4 {
  font-size: 16px;
  font-weight: 600;
  position: relative;
  padding-bottom: 12px;
  margin-bottom: 15px;
}

.footer h4::after {
  content: "";
  position: absolute;
  display: block;
  width: 20px;
  height: 2px;
  background: rgb(171, 90, 37);
  bottom: 0;
  left: 0;
}

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

.footer .footer-links ul a:hover {
  color: rgb(171, 90, 37);
}

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

.footer .copyright {
  padding: 30px 0;
}

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

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

.footer .social-links a {
  font-size: 18px;
  display: inline-block;
  background: color-mix(in srgb, var(--default-color), transparent 90%);
  color: var(--contrast-color);
  line-height: 1;
  padding: 8px 0;
  margin-right: 4px;
  border-radius: 4px;
  text-align: center;
  width: 36px;
  height: 36px;
  transition: 0.3s;
}

.footer .social-links a:hover {
  background: rgb(171, 90, 37);
  text-decoration: none;
}

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

#preloader:before,
#preloader:after {
  content: "";
  position: absolute;
  border: 4px solid var(--accent-color);
  border-radius: 50%;
  animation: animate-preloader 2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

#preloader:after {
  animation-delay: -0.5s;
}

@keyframes animate-preloader {
  0% {
    width: 10px;
    height: 10px;
    top: calc(50% - 5px);
    left: calc(50% - 5px);
    opacity: 1;
  }

  100% {
    width: 72px;
    height: 72px;
    top: calc(50% - 36px);
    left: calc(50% - 36px);
    opacity: 0;
  }
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 99999;
  background-color: #ab5a25;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s; 
  margin: 3em;
  padding: 24px;
}

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

.scroll-top:hover {
  background-color: #8c491e;
  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: white;
  color: white;
  background-color: white;
  padding: 25px 0;
  position: relative;
}

.page-title h1 {
    font-size: 26px;
    margin-bottom: 15px;
	margin-left: 40px;
    font-family: "Jost", sans-serif;
    font-weight: 500;
    font-style: normal;
    color: rgb(0, 72, 58);
}
.page-title .breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding-left: 40px;
  margin: 0;
  font-size: 11px;
  color: white !important;
}

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

.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);
  scroll-margin-top: 100px;
  /*overflow: clip;*/
}

.top-photo-wrapper {
  margin: -30px; /* Match the article's padding */
  border-radius: 10px 10px 0 0; /* Maintain rounded corners at the top */
  overflow: hidden; /* Prevent image overflow */
}

/* Style the top image */
.top-photo {
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
}

@media (max-width: 1199px) {

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

@media (min-width: 1200px) {
  .show-on-phone {
    display: none;
  }
}

/* Show the <br> tag on screens 768px and smaller (mobile) */
@media (max-width: 768px) {
  .show-on-phone {
    display: block;
  }
}

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

.section-title h2 {
  font-size: 52px;
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-style: normal;
  color:rgb(0, 72, 58);
}	

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

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  width: 100%;
  min-height: 90vh;
  position: relative;
  padding: 120px 0 60px 0;
  display: flex;
  align-items: center;
  background: url("../img/Tilo-Hero.png") center center;
  background-size: cover;
}
@media (max-width: 1200px) {
    .hero {
        background: url("../img/Tilo-Hero-Table.png") center center;
        background-size: cover;
        align-items: flex-start !important;
        padding: 120px 0 60px 0;
    }
}

@media (max-width: 767px) {
    .hero {
        background: url(../img/Tilo-Hero-Mobile.png) center center;
        background-size: cover;
		align-items: flex-start!important;
		padding: 120px 0 60px 0;

    }
}

.hero h1 {
  margin: 0 0 10px 0;
  font-size: 68px;
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-style: normal;
  color: rgb(0, 72, 58);
  line-height: 1.1em;
}

.hero h1 span {
  color: var(--accent-color);
}

.hero p {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin: 5px 0 30px 0;
  font-size: 20px;
  font-weight: 400;
}

.hero .btn-get-started {
  color: var(--contrast-color);
  background: #ab5a25;
  font-family: var(--heading-font);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: .5px;
  display: inline-block;
  padding: 10px 28px;
  border-radius: 4px;
  transition: 0.5s;
  text-transform: uppercase;
}

.hero .btn-get-started:hover {
  color: var(--contrast-color);
  background: #8c491e;
}

.hero .btn-watch-video {
  font-size: 16px;
  transition: 0.5s;
  margin-left: 25px;
  color: var(--default-color);
  font-weight: 500;
}

.hero .btn-watch-video i {
  color: var(--accent-color);
  font-size: 32px;
  transition: 0.3s;
  line-height: 0;
  margin-right: 8px;
}

.hero .btn-watch-video:hover {
  color: var(--accent-color);
}

.hero .btn-watch-video:hover i {
  color: color-mix(in srgb, var(--accent-color), transparent 15%);
}

.hero .animated {
  margin-bottom: 60px;
  animation: up-down 2s ease-in-out infinite alternate-reverse both;
}

@media (min-width: 992px) {
  .hero .animated {
    max-width: 45%;
  }
}

@media (max-width: 991px) {
  .hero .animated {
    max-width: 60%;
  }
}

@media (max-width: 575px) {
  .hero .animated {
    max-width: 80%;
  }
}
@media (max-width: 1200px) {

  .hero h1 {
    font-size: 75px;
    line-height: 80px;
    margin-left: 30px;
    margin-top: 0;
  }

  .hero p {
    font-size: 25px;
    line-height: 24px;
    margin-bottom: 30px;
    margin-left: 30px;
    margin-top: 0;
	padding-top: 20px;
  }

  .hero .btn-get-started,
  .hero .btn-watch-video {
    font-size: 20px;
    margin-left: 30px;
  }

  .onfocus .content h3 {
    font-weight: 600;
    font-size: 28px;
    font-family: "Jost", sans-serif;
  }

  .header .logo img {
    max-height: 60px;
    margin-right: 8px;
  }
}
@media (max-width: 1000px) {

  .hero h1 {
    font-size: 75px;
    line-height: 80px;
    margin-top: 0;
  }

  .hero p {
    font-size: 25px;
    line-height: 24px;
    margin-bottom: 30px;
    margin-top: 0;
	padding-top: 20px;
  }

  .hero .btn-get-started,
  .hero .btn-watch-video {
    font-size: 20px;
  }

  .onfocus .content h3 {
    font-weight: 600;
    font-size: 28px;
    font-family: "Jost", sans-serif;
  }

  .header .logo img {
    max-height: 60px;
    margin-right: 8px;
  }
}

@media (max-width: 844px) {

  .hero h1 {
    font-size: 60px;
    line-height: 52px;
    margin-left: 30px;
    margin-top: 0;
  }

  .hero p {
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 30px;
    margin-left: 30px;
    margin-top: 0;
  }

  .hero .btn-get-started,
  .hero .btn-watch-video {
    font-size: 15px;
    margin-left: 30px;
  }

  .onfocus .content h3 {
    font-weight: 600;
    font-size: 28px;
    font-family: "Jost", sans-serif;
  }

  .header .logo img {
    max-height: 60px;
    margin-right: 8px;
  }
}
@media (max-width: 375px) {

  .hero {
    padding-top: 80px;
  }
		
	
  .hero h1 {
    font-size: 41px;
    line-height: 43px;
    margin-left: 30px;
    margin-top: 0;
  }

  .hero p {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 30px;
    margin-left: 30px;
    margin-top: 0;
  }

  .hero .btn-get-started,
  .hero .btn-watch-video {
    font-size: 13px;
    margin-left: 30px;
  }

  .onfocus .content h3 {
    font-weight: 600;
    font-size: 28px;
    font-family: "Jost", sans-serif;
  }

  .header .logo img {
    max-height: 60px;
    margin-right: 8px;
  }
}


@media (max-width: 320px) {

   .hero {
    padding-top: 100px;
  }
	
  .hero h1 {
    font-size: 36px;
    line-height: 36px;
    margin-left: 20px;
    margin-top: 0;
  }

  .hero p {
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 20px;
    margin-left: 20px;
    margin-top: 0;
  }

  .hero .btn-get-started,
  .hero .btn-watch-video {
    font-size: 11px;
    margin-left: 20px;
  }

  .onfocus .content h3 {
    font-weight: 600;
    font-size: 24px;
    font-family: "Jost", sans-serif;
  }

  .header .logo img {
    max-height: 40px;
    margin-right: 8px;
  }
}




/*--------------------------------------------------------------
# Featured Services Section
--------------------------------------------------------------*/
.featured-services .service-item {
  padding: 50px 30px;
  transition: all ease-in-out 0.4s;
  height: 100%;
}

.featured-services .service-item .icon {
  margin-bottom: 10px;
}

.featured-services .service-item .icon i {
  color: var(--accent-color);
  font-size: 36px;
  transition: 0.3s;
}

.featured-services .service-item h4 {
  font-weight: 700;
  margin-bottom: 15px;
  font-size: 20px;
}

.featured-services .service-item h4 a {
  color: var(--heading-color);
  transition: ease-in-out 0.3s;
}

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

.featured-services .service-item:hover {
  transform: translateY(-10px);
  box-shadow: 0px 5px 90px 0px color-mix(in srgb, var(--default-color), transparent 90%);
}

.featured-services .service-item:hover h4 a {
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about .about-img {
  position: relative;
  margin: 60px 0 0 60px;
}

.about .about-img:before {
  position: absolute;
  inset: -60px 0 0 -60px;
  content: "";
  background: url("../img/about-bg.png") top left;
  background-repeat: no-repeat;
  z-index: 1;
}

.about .about-img img {
  position: relative;
  z-index: 2;
}

@media (max-width: 575px) {
  .about .about-img {
    margin: 30px 0 0 30px;
  }

  .about .about-img:before {
    inset: -30px 0 0 -30px;
  }
}

.about h3 {
  font-weight: 300;
  font-size: 32px;
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .about h3 {
    font-size: 28px;
  }
}

.about .nav-pills {
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
}

.about .nav-pills li+li {
  margin-left: 40px;
}

.about .nav-link {
  background: none;
  font-size: 18px;
  font-weight: 400;
  color: var(--default-color);
  padding: 12px 0;
  margin-bottom: -2px;
  border-radius: 0;
}

.about .nav-link.active {
  color: var(--accent-color);
  background: none;
  border-bottom: 3px solid var(--accent-color);
}

@media (max-width: 575px) {
  .about .nav-link {
    font-size: 16px;
  }
}

.about .tab-content h4 {
  font-size: 18px;
  margin: 0;
  font-weight: 700;
  color: var(--default-color);
}

.about .tab-content i {
  font-size: 22px;
  line-height: 0;
  margin-right: 8px;
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Clients Section
--------------------------------------------------------------*/
.clients {
  padding: 20px 0;
}

.clients .client-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.clients .client-logo img {
  padding: 20px 40px;
  max-width: 90%;
  transition: 0.3s;
  opacity: 0.5;
  filter: grayscale(100);
}

.clients .client-logo img:hover {
  filter: none;
  opacity: 1;
}

@media (max-width: 640px) {
  .clients .client-logo img {
    padding: 20px;
  }
}

/*--------------------------------------------------------------
# Call To Action Section
--------------------------------------------------------------*/
.call-to-action {
  padding: 0;
}

.call-to-action .container {
  padding: 80px;
  background: color-mix(in srgb, var(--default-color), transparent 96%);
  border-radius: 15px;
}

@media (max-width: 992px) {
  .call-to-action .container {
    padding: 60px;
  }
}

.call-to-action .content h3 {
  font-size: 52px;
    margin-bottom: 15px;
    font-family: "Cormorant Garamond", serif;
    font-weight: 700;
    font-style: normal;
    color: rgb(0, 72, 58);	
}

.call-to-action .content h3 em {
  font-style: normal;
  position: relative;
  z-index: 1;
}

.call-to-action .content h3 em:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  height: 10px;
  background: color-mix(in srgb, var(--accent-color), transparent 30%);
  z-index: -1;
}

.call-to-action .content p {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  font-weight: 400;
  font-size: 15px;
}

.call-to-action .content .cta-btn {
    color: var(--contrast-color);
    background: #ab5a25;
    font-family: var(--heading-font);
    font-weight: 400;
    font-size: 15px;
    letter-spacing: .5px;
    display: inline-block;
    padding: 10px 28px;
    border-radius: 4px;
    transition: 0.5s;
    text-transform: uppercase;
}

.call-to-action .content .cta-btn:hover {
  background: color-mix(in srgb, var(--accent-color) 90%, black 15%);
}

.call-to-action .img {
  position: relative;
}

.call-to-action .img:before {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--contrast-color), transparent 20%);
  border-radius: 15px;
  transform: rotate(6deg);
  z-index: 2;
}

.call-to-action .img:after {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--default-color), transparent 95%);
  border-radius: 15px;
  transform: rotate(12deg);
  z-index: 1;
}

.call-to-action .img img {
  position: relative;
  z-index: 3;
  border-radius: 15px;
  z-index: 3;
}

/*--------------------------------------------------------------
# Onfocus Section
--------------------------------------------------------------*/
.onfocus {
  --default-color: #fff;
  --background-color: #000000;
  --heading-color: #fff;
  padding: 0;
}

.onfocus .video-play {
  min-height: 400px;
  background: linear-gradient(color-mix(in srgb, var(--background-color), transparent 90%), color-mix(in srgb, var(--background-color), transparent 75%)), url("../img/onfocus-video-bg.png") center center;
  background-size: cover;
}

.onfocus .video-play2 {
  min-height: 400px;
  background: linear-gradient(color-mix(in srgb, var(--background-color), transparent 90%), color-mix(in srgb, var(--background-color), transparent 75%)), url("../img/about/tilo-history.png") center center;
  background-size: cover;
}

.onfocus .video-play3 {
  min-height: 400px;
  background: linear-gradient(color-mix(in srgb, var(--background-color), transparent 90%), color-mix(in srgb, var(--background-color), transparent 75%)), url("../img/about/sustainability.png") center center;
  background-size: cover;
}

.onfocus .content {
  background: rgb(0, 72, 58);
  background-size: cover;
  padding: 40px;
}

@media (min-width: 768px) {
  .onfocus .content {
    padding: 80px;
  }
}

.onfocus .content h3 {
  font-weight: 600;
  font-size: 30px!important;
	font-family: "Jost", sans-serif;
}

.onfocus .content ul {
  list-style: none;
  padding: 0;
}

.onfocus .content ul li {
  padding-bottom: 10px;
}

.onfocus .content ul i {
  font-size: 20px;
  padding-right: 4px;
  color: var(--accent-color);
}

.onfocus .content p:last-child {
  margin-bottom: 0;
}

.onfocus .content .read-more {
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  padding: 12px 24px;
  border-radius: 5px;
  transition: 0.3s;
  display: -nline-flex;
  align-items: center;
  justify-content: center;
  color: var(--contrast-color);
  background: var(--accent-color);
}

.onfocus .content .read-more i {
  font-size: 18px;
  margin-left: 5px;
  line-height: 0;
  transition: 0.3s;
}

.onfocus .content .read-more:hover {
  background: color-mix(in srgb, var(--accent-color) 90%, black 15%);
  padding-right: 19px;
}

.onfocus .content .read-more:hover i {
  margin-left: 10px;
}

.onfocus .play-btn {
  width: 94px;
  height: 94px;
  background: radial-gradient(var(--accent-color) 50%, color-mix(in srgb, var(--accent-color), transparent 75%) 52%);
  border-radius: 50%;
  display: block;
  position: absolute;
  left: calc(50% - 47px);
  top: calc(50% - 47px);
  overflow: hidden;
}

.onfocus .play-btn:before {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  animation-delay: 0s;
  animation: pulsate-btn 2s;
  animation-direction: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: steps;
  opacity: 1;
  border-radius: 50%;
  border: 5px solid color-mix(in srgb, var(--accent-color), transparent 30%);
  top: -15%;
  left: -15%;
  background: rgba(198, 16, 0, 0);
}

.onfocus .play-btn:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
  z-index: 100;
  transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.onfocus .play-btn:hover:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border: none;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
  z-index: 200;
  animation: none;
  border-radius: 0;
}

.onfocus .play-btn:hover:after {
  border-left: 15px solid var(--accent-color);
  transform: scale(20);
}

@keyframes pulsate-btn {
  0% {
    transform: scale(0.6, 0.6);
    opacity: 1;
  }

  100% {
    transform: scale(1, 1);
    opacity: 0;
  }
}

.onfocus2 {
  --default-color: #fff;
  --background-color: #000000;
  --heading-color: #fff;
  padding: 0;
}

.onfocus2 .video-play {
  min-height: 400px;
  background: linear-gradient(color-mix(in srgb, var(--background-color), transparent 90%), color-mix(in srgb, var(--background-color), transparent 75%)), url("../img/onfocus-video-bg-brown.png") center center;
  background-size: cover;
}

.onfocus2 .video-play2 {
  min-height: 400px;
  background: linear-gradient(color-mix(in srgb, var(--background-color), transparent 90%), color-mix(in srgb, var(--background-color), transparent 75%)), url("../img/about/tilo-history.png") center center;
  background-size: cover;
}

.onfocus2 .video-play3 {
  min-height: 400px;
  background: linear-gradient(color-mix(in srgb, var(--background-color), transparent 90%), color-mix(in srgb, var(--background-color), transparent 75%)), url("../img/about/sustainability.png") center center;
  background-size: cover;
}

.onfocus2 .content {
  background: #ab5a25;
  background-size: cover;
  padding: 40px;
}

@media (min-width: 768px) {
  .onfocus2 .content {
    padding: 80px;
  }
}

.onfocus2 .content h3 {
  font-weight: 600;
  font-size: 35px;
	font-family: "Jost", sans-serif;
}

.onfocus2 .content ul {
  list-style: none;
  padding: 0;
}

.onfocus2 .content ul li {
  padding-bottom: 10px;
}

.onfocus2 .content ul i {
  font-size: 20px;
  padding-right: 4px;
  color: var(--accent-color);
}

.onfocus2 .content p:last-child {
  margin-bottom: 0;
}

.onfocus2 .content .read-more {
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  padding: 12px 24px;
  border-radius: 5px;
  transition: 0.3s;
  display: -nline-flex;
  align-items: center;
  justify-content: center;
  color: var(--contrast-color);
  background: var(--accent-color);
}

.onfocus2 .content .read-more i {
  font-size: 18px;
  margin-left: 5px;
  line-height: 0;
  transition: 0.3s;
}

.onfocus2 .content .read-more:hover {
  background: color-mix(in srgb, var(--accent-color) 90%, black 15%);
  padding-right: 19px;
}

.onfocus2 .content .read-more:hover i {
  margin-left: 10px;
}

.onfocus2 .play-btn {
  width: 94px;
  height: 94px;
  background: radial-gradient(var(--accent-color) 50%, color-mix(in srgb, var(--accent-color), transparent 75%) 52%);
  border-radius: 50%;
  display: block;
  position: absolute;
  left: calc(50% - 47px);
  top: calc(50% - 47px);
  overflow: hidden;
}

.onfocus2 .play-btn:before {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  animation-delay: 0s;
  animation: pulsate-btn 2s;
  animation-direction: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: steps;
  opacity: 1;
  border-radius: 50%;
  border: 5px solid color-mix(in srgb, var(--accent-color), transparent 30%);
  top: -15%;
  left: -15%;
  background: rgba(198, 16, 0, 0);
}

.onfocus2 .play-btn:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
  z-index: 100;
  transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.onfocus2 .play-btn:hover:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border: none;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
  z-index: 200;
  animation: none;
  border-radius: 0;
}

.onfocus2 .play-btn:hover:after {
  border-left: 15px solid var(--accent-color);
  transform: scale(20);
}

/*--------------------------------------------------------------
# Features Section
--------------------------------------------------------------*/
.features .nav-tabs {
  border: 0;
}

.features .nav-link {
  border: 0;
  padding: 25px 20px;
  color: var(--color-secondary);
  box-shadow: 5px 5px 25px color-mix(in srgb, var(--default-color), transparent 92%);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: 0s;
  cursor: pointer;
  height: 100%;
}

.features .nav-link i {
  font-size: 32px;
  line-height: 0;
}

.features .nav-link h4 {
  font-size: 20px;
  font-weight: 600;
  margin: 10px 0 0 0;
}

.features .nav-link:hover {
  color: var(--accent-color);
}

.features .nav-link:hover,
.features .nav-link.active {
  transition: 0.3s;
  background: var(--accent-color);
  color: var(--contrast-color) !important;
  border-color: var(--accent-color);
}

.features .nav-link:hover h4,
.features .nav-link.active h4 {
  color: var(--contrast-color);
}

.features .nav-link:hover i,
.features .nav-link.active i {
  color: var(--contrast-color) !important;
}

.features .tab-content {
  margin-top: 30px;
}

.features .tab-pane.active {
  animation: fadeIn 0.5s ease-out;
}

.features .tab-pane h3 {
  font-weight: 600;
  font-size: 28px;
}

.features .tab-pane ul {
  list-style: none;
  padding: 0;
}

.features .tab-pane ul li {
  padding-bottom: 10px;
}

.features .tab-pane ul i {
  font-size: 24px;
  margin-right: 4px;
  color: var(--accent-color);
}

.features .tab-pane p:last-child {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services .img {
  border-radius: 8px;
  overflow: hidden;
}

.services .img img {
  transition: 0.6s;
}

.services .details {
  padding: 50px 30px;
  margin: -100px 30px 0 30px;
  transition: all ease-in-out 0.3s;
  position: relative;
  background: color-mix(in srgb, var(--contrast-color), transparent 5%);
  text-align: center;
  border-radius: 8px;
  box-shadow: 0px 0 25px color-mix(in srgb, var(--default-color), transparent 92%);
}

.services .details .icon {
  margin: 0;
  width: 72px;
  height: 72px;
  background: var(--accent-color);
  color: var(--contrast-color);
  border: 6px solid var(--contrast-color);
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  font-size: 28px;
  transition: ease-in-out 0.3s;
  position: absolute;
  top: -36px;
  left: calc(50% - 36px);
}

.services .details h3 {
  font-weight: 700;
  margin: 10px 0 15px 0;
  font-size: 22px;
  transition: ease-in-out 0.3s;
}

.services .details p {
  color: color-mix(in srgb, var(--default-color), transparent 10%);
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
}

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

.services .service-item:hover .details .icon {
  background: var(--contrast-color);
  border: 2px solid var(--accent-color);
}

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

.services .service-item:hover .img img {
  transform: scale(1.2);
}

/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonials {
  --default-color: #ffffff;
  --background-color: #000000;
  --heading-color: #ffffff;
  padding: 80px 0;
  position: relative;
}

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

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

.testimonials .container {
  position: relative;
  z-index: 3;
}

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

.testimonials .testimonial-item {
  text-align: center;
}

.testimonials .testimonial-item .testimonial-img {
  width: 100px;
  border-radius: 50%;
  border: 6px solid color-mix(in srgb, var(--default-color), transparent 85%);
  margin: 0 auto;
}

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

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

.testimonials .testimonial-item .stars {
  margin-bottom: 15px;
}

.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(--default-color), transparent 40%);
  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: 0 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: color-mix(in srgb, var(--default-color), transparent 50%);
  opacity: 0.5;
}

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

@media (min-width: 992px) {
  .testimonials .testimonial-item p {
    width: 80%;
  }
}

/*--------------------------------------------------------------
# Pricing Section
--------------------------------------------------------------*/
.pricing .pricing-item {
  padding: 60px 40px;
  box-shadow: 0 3px 20px -2px color-mix(in srgb, var(--default-color), transparent 92%);
  background: var(--color-white);
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 4px solid var(--contrast-color);
  border-radius: 10px;
  overflow: hidden;
}

.pricing .pricing-header {
  background: linear-gradient(color-mix(in srgb, var(--default-color), transparent 10%), color-mix(in srgb, var(--default-color), transparent 20%)), url("../img/pricing-bg.jpg") center center;
  background-size: cover;
  text-align: center;
  padding: 40px;
  margin: -60px -40px 0;
}

.pricing h3 {
  font-weight: 600;
  margin-bottom: 5px;
  font-size: 36px;
  color: var(--contrast-color);
}

.pricing h4 {
  font-size: 48px;
  color: var(--contrast-color);
  font-weight: 400;
  margin-bottom: 0;
}

.pricing h4 sup {
  font-size: 28px;
}

.pricing h4 span {
  color: color-mix(in srgb, var(--contrast-color), transparent 20%);
  font-size: 24px;
}

.pricing ul {
  padding: 30px 0;
  list-style: none;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  text-align: left;
  line-height: 20px;
}

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

.pricing ul i {
  color: var(--accent-color);
  font-size: 36px;
  padding-right: 3px;
  line-height: 0;
}

.pricing ul .na {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
}

.pricing ul .na i {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
  font-size: 24px;
  padding-left: 4px;
}

.pricing ul .na span {
  text-decoration: line-through;
}

.pricing .buy-btn {
  display: inline-block;
  padding: 12px 40px;
  border-radius: 6px;
  color: var(--default-color);
  transition: none;
  font-size: 16px;
  font-weight: 500;
  transition: 0.3s;
  border: 1px solid var(--default-color);
}

.pricing .buy-btn:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
  border-color: var(--accent-color);
}

.pricing .featured {
  border-color: var(--accent-color);
}

.pricing .featured .pricing-header {
  background: linear-gradient(color-mix(in srgb, var(--accent-color), transparent 10%), color-mix(in srgb, var(--accent-color), transparent 20%)), url("../img/pricing-bg.jpg") center center;
}

.pricing .featured .buy-btn {
  border-color: var(--accent-color);
  background: var(--accent-color);
  color: var(--contrast-color);
}

/*--------------------------------------------------------------
# Faq Section
--------------------------------------------------------------*/
.faq .content h3 {
  font-weight: 400;
  font-size: 34px;
}

.faq .content p {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.faq .faq-container {
  margin-top: 15px;
}

.faq .faq-container .faq-item {
  position: relative;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0px 5px 25px 0px color-mix(in srgb, var(--default-color), transparent 90%);
  overflow: hidden;
}

.faq .faq-container .faq-item:last-child {
  margin-bottom: 0;
}

.faq .faq-container .faq-item h3 {
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  margin: 0 30px 0 32px;
  transition: 0.3s;
  cursor: pointer;
  font-family: "Jost", sans-serif;	
}

.faq .faq-container .faq-item h3 span {
  color: var(--accent-color);
  padding-right: 5px;
}

.faq .faq-container .faq-item h3:hover {
  color: var(--accent-color);
}

.faq .faq-container .faq-item .faq-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: 0.3s ease-in-out;
  visibility: hidden;
  opacity: 0;
}

.faq .faq-container .faq-item .faq-content p {
  margin-bottom: 0;
  overflow: hidden;
}

.faq .faq-container .faq-item .faq-icon {
  position: absolute;
  top: 22px;
  left: 20px;
  font-size: 22px;
  line-height: 0;
  transition: 0.3s;
  color: var(--accent-color);
}

.faq .faq-container .faq-item .faq-toggle {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 16px;
  line-height: 0;
  transition: 0.3s;
  cursor: pointer;
}

.faq .faq-container .faq-item .faq-toggle:hover {
  color: var(--accent-color);
}

.faq .faq-container .faq-active h3 {
  color: var(--accent-color);
}

.faq .faq-container .faq-active .faq-content {
  grid-template-rows: 1fr;
  visibility: visible;
  opacity: 1;
  padding-top: 10px;
}

.faq .faq-container .faq-active .faq-toggle {
  transform: rotate(90deg);
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Portfolio Section
--------------------------------------------------------------*/
.portfolio h3{
	font-weight: 600;
    font-size: 25px;
    font-family: "Jost", sans-serif;
}

.portfolio .portfolio-filters {
  padding: 0;
  margin: 0 auto 20px auto;
  list-style: none;
  text-align: center;
}

.portfolio .portfolio-filters li {
  cursor: pointer;
  display: inline-block;
  padding: 0;
  font-size: 18px;
  font-weight: 400;
  margin: 0 10px;
  line-height: 1;
  margin-bottom: 5px;
  transition: all 0.3s ease-in-out;
}

.portfolio .portfolio-filters li:hover,
.portfolio .portfolio-filters li.filter-active {
  color: var(--accent-color);
}

.portfolio .portfolio-filters li:first-child {
  margin-left: 0;
}

.portfolio .portfolio-filters li:last-child {
  margin-right: 0;
}

@media (max-width: 575px) {
  .portfolio .portfolio-filters li {
    font-size: 14px;
    margin: 0 5px;
  }
}

.portfolio .portfolio-content {
  position: relative;
  overflow: hidden;
}

.portfolio .portfolio-content img {
  transition: 0.3s;
}

.portfolio .portfolio-content .portfolio-info {
  opacity: 0;
  position: absolute;
  inset: 0;
  z-index: 3;
  transition: all ease-in-out 0.3s;
  background: rgba(0, 0, 0, 0.6);
  padding: 15px;
}

.portfolio .portfolio-content .portfolio-info h4 {
  font-size: 14px;
  padding: 5px 10px;
  font-weight: 400;
  color: #ffffff;
  display: inline-block;
  background-color: var(--accent-color);
}

.portfolio .portfolio-content .portfolio-info p {
  position: absolute;
  bottom: 10px;
  text-align: center;
  display: inline-block;
  left: 0;
  right: 0;
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
}

.portfolio .portfolio-content .portfolio-info .preview-link,
.portfolio .portfolio-content .portfolio-info .details-link {
  position: absolute;
  left: calc(50% - 40px);
  font-size: 26px;
  top: calc(50% - 14px);
  color: #fff;
  transition: 0.3s;
  line-height: 1.2;
}

.portfolio .portfolio-content .portfolio-info .preview-link:hover,
.portfolio .portfolio-content .portfolio-info .details-link:hover {
  color: var(--accent-color);
}

.portfolio .portfolio-content .portfolio-info .details-link {
  left: 50%;
  font-size: 34px;
  line-height: 0;
}

.portfolio .portfolio-content:hover .portfolio-info {
  opacity: 1;
}

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

.portfolio .btn-getstarted {
    color: #FFFFFF;
    background: #ab5a25;
    font-size: 13px;
    padding: 8px 26px;
    margin: 0;
    border-radius: 4px;
	transition: 0.3s;
}

.portfolio .btn-getstarted:hover {
    color: #FFFFFF;
    background: #8c491e;
}

/*--------------------------------------------------------------
# Team Section
--------------------------------------------------------------*/
.team .team-member .member-img {
  border-radius: 8px;
  overflow: hidden;
}

.team .team-member .social {
  position: absolute;
  left: 0;
  top: -18px;
  right: 0;
  opacity: 0;
  transition: ease-in-out 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.team .team-member .social a {
  transition: color 0.3s;
  color: var(--contrast-color);
  background: var(--accent-color);
  margin: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  transition: 0.3s;
}

.team .team-member .social a i {
  line-height: 0;
  font-size: 16px;
}

.team .team-member .social a:hover {
  background: color-mix(in srgb, var(--accent-color) 90%, black 15%);
}

.team .team-member .social i {
  font-size: 18px;
  margin: 0 2px;
}

.team .team-member .member-info {
  padding: 30px 15px;
  text-align: center;
  box-shadow: 0px 2px 15px color-mix(in srgb, var(--default-color), transparent 92%);
  background: var(--contrast-color);
  margin: -50px 20px 0 20px;
  position: relative;
  border-radius: 8px;
}

.team .team-member .member-info h4 {
  font-weight: 500;
  margin-bottom: 5px;
  font-size: 20px;
}

.team .team-member .member-info span {
  display: block;
  font-size: 16px;
  font-weight: 400;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.team .team-member .member-info p {
  font-style: italic;
  font-size: 14px;
  line-height: 26px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.team .team-member:hover .social {
  opacity: 1;
}

/*--------------------------------------------------------------
# Recent Posts Section
--------------------------------------------------------------*/
.recent-posts article {
  box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color), transparent 90%);
  padding: 30px;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
}

.recent-posts .post-img {
  max-height: 240px;
  margin: -30px -30px 15px -30px;
  overflow: hidden;
}

.recent-posts .post-category {
  font-size: 16px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  margin-bottom: 10px;
}

.recent-posts .title {
  font-size: 20px;
  font-weight: 700;
  padding: 0;
  margin: 0 0 20px 0;
}

.recent-posts .title a {
  color: var(--heading-color);
  transition: 0.3s;
}

.recent-posts .title a:hover {
  color: var(--accent-color);
}

.recent-posts .post-author-img {
  width: 50px;
  border-radius: 50%;
  margin-right: 15px;
}

.recent-posts .post-author {
  font-weight: 600;
  margin-bottom: 5px;
}

.recent-posts .post-date {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .info {
  padding: 40px;
  box-shadow: 0px 2px 15px color-mix(in srgb, var(--default-color), transparent 92%);
  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;
  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;
  border-radius: 0px;
  box-shadow: none;
  font-size: 14px;
  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],
.contact .php-email-form input[type=email] {
  height: 48px;
  padding: 10px 15px;
}

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

.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%);
}
.contact .btn-contact {
    color: var(--contrast-color);
background: #ab5a25;
font-family: var(--heading-font);
font-weight: 400;
font-size: 15px;
display: inline-block;
padding: 10px 28px;
border-radius: 4px;
border: 1px solid var(--contrast-color);
transition: 0.5s;
text-transform: uppercase;
	box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
}

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

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

/*--------------------------------------------------------------
# Portfolio Details Section
--------------------------------------------------------------*/
.portfolio-details .portfolio-details-slider img {
  width: 100%;
}

.portfolio-details .swiper-wrapper {
  height: auto;
}

.portfolio-details .swiper-button-prev,
.portfolio-details .swiper-button-next {
  width: 48px;
  height: 48px;
}

.portfolio-details .swiper-button-prev:after,
.portfolio-details .swiper-button-next:after {
  color: rgba(255, 255, 255, 0.8);
  background-color: rgba(0, 0, 0, 0.15);
  font-size: 24px;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
}

.portfolio-details .swiper-button-prev:hover:after,
.portfolio-details .swiper-button-next:hover:after {
  background-color: rgba(0, 0, 0, 0.3);
}

@media (max-width: 575px) {

  .portfolio-details .swiper-button-prev,
  .portfolio-details .swiper-button-next {
    display: none;
  }
}

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

.portfolio-details .swiper-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background-color: color-mix(in srgb, var(--default-color), transparent 85%);
  opacity: 1;
}

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

.portfolio-details .portfolio-info h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
}

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

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

.portfolio-details .portfolio-info ul li {
  display: flex;
  flex-direction: column;
  padding-bottom: 15px;
}

.portfolio-details .portfolio-info ul strong {
  text-transform: uppercase;
  font-weight: 400;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 14px;
}

.portfolio-details .portfolio-info .btn-visit {
  padding: 8px 40px;
  background: var(--accent-color);
  color: var(--contrast-color);
  border-radius: 50px;
  transition: 0.3s;
}

.portfolio-details .portfolio-info .btn-visit:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.portfolio-details .portfolio-description h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
}

.portfolio-details .portfolio-description p {
  padding: 0;
}

.portfolio-details .portfolio-description .testimonial-item {
  padding: 30px 30px 0 30px;
  position: relative;
  background: color-mix(in srgb, var(--default-color), transparent 97%);
  margin-bottom: 50px;
}

.portfolio-details .portfolio-description .testimonial-item .testimonial-img {
  width: 90px;
  border-radius: 50px;
  border: 6px solid var(--background-color);
  float: left;
  margin: 0 10px 0 0;
}

.portfolio-details .portfolio-description .testimonial-item h3 {
  font-size: 18px;
  font-weight: bold;
  margin: 15px 0 5px 0;
  padding-top: 20px;
}

.portfolio-details .portfolio-description .testimonial-item h4 {
  font-size: 14px;
  color: #6c757d;
  margin: 0;
}

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

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

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

.portfolio-details .portfolio-description .testimonial-item p {
  font-style: italic;
  margin: 0 0 15px 0 0 0;
  padding: 0;
}

/*--------------------------------------------------------------
# Service Details Section
--------------------------------------------------------------*/
.service-details h5 {
	font-size: 12px;
    margin-bottom: 12px;
	padding-top: 7px;
    font-family: "Jost", sans-serif;
    font-weight: 700;
    font-style: normal;
    color: rgb(0, 72, 58);
	text-transform: uppercase;
}
@media (max-width: 576px) {
    .service-details h5 {
        font-size: 12px;
		 margin-top: 0px!important;
    }
}

.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;
    max-width: 100%;
    height: 500px;
}

.service-details h2 {
    font-size: 42px;
    margin-bottom: 15px;
    font-family: "Cormorant Garamond", serif;
    font-weight: 700;
    font-style: normal;
    color: rgb(0, 72, 58);
}
.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 p2 {
  color: #ab5a25;
    font-weight: 600;
	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);
}

.service-details .photo-container {
  text-align: center;
}

.service-details .photo {
  max-width: 100%;
  height: auto;
}

.service-details .photo-header {
  font-weight: bold;
}
/*--------------------------------------------------------------
# Blog Posts Section
--------------------------------------------------------------*/
.blog-posts article {
  box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color), transparent 90%);
  padding: 30px;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
}

.blog-posts .post-img {
  max-height: 240px;
  margin: -30px -30px 15px -30px;
  overflow: hidden;
}

.blog-posts .post-category {
  font-size: 13px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 10px;
}

.blog-posts .title {
  font-size: 20px;
  font-weight: 700;
  padding: 0;
  margin: 0 0 15px 0;
}

.blog-posts .title a {
    color: #212529;  
	font-weight: 650;
    font-size: 19px;
    font-family: "Jost", sans-serif;
  transition: 0.3s;
}

.blog-posts .title a:hover {
  color: var(--accent-color);
}

.blog-posts .post-author-img {
  width: 50px;
  border-radius: 50%;
  margin-right: 15px;
}

.blog-posts .post-author {
  color: #ab5a25;
  font-weight: 600;
  margin-bottom: 5px;
}

.blog-posts .post-date {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 0;
}

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

/*--------------------------------------------------------------
# Blog Details Section
--------------------------------------------------------------*/
.blog-details {
  padding-bottom: 30px;
}

.blog-details .article {
  padding: 30px;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color), transparent 90%);
}

.blog-details .post-img {
  margin: -30px -30px 20px -30px;
  overflow: hidden;
}

.blog-details .title {
  color: var(--heading-color);
  font-size: 28px;
  font-weight: 700;
  padding: 0;
  margin: 30px 0;
}

.blog-details .content {
  margin-top: 20px;
}

.blog-details .content h3 {
  font-size: 22px;
  margin-top: 30px;
  font-weight: bold;
}

.blog-details .content blockquote {
  overflow: hidden;
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
  padding: 60px;
  position: relative;
  text-align: center;
  margin: 20px 0;
}

.blog-details .content blockquote p {
  color: var(--default-color);
  line-height: 1.6;
  margin-bottom: 0;
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
}

.blog-details .content blockquote:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: var(--accent-color);
  margin-top: 20px;
  margin-bottom: 20px;
}

.blog-details .meta-top {
  margin-top: 20px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.blog-details .meta-top ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  align-items: center;
  padding: 0;
  margin: 0;
}

.blog-details .meta-top ul li+li {
  padding-left: 20px;
}

.blog-details .meta-top i {
  font-size: 16px;
  margin-right: 8px;
  line-height: 0;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.blog-details .meta-top a {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-size: 14px;
  display: inline-block;
  line-height: 1;
}

.blog-details .meta-bottom {
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.blog-details .meta-bottom i {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  display: inline;
}

.blog-details .meta-bottom a {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  transition: 0.3s;
}

.blog-details .meta-bottom a:hover {
  color: var(--accent-color);
}

.blog-details .meta-bottom .cats {
  list-style: none;
  display: inline;
  padding: 0 20px 0 0;
  font-size: 14px;
}

.blog-details .meta-bottom .cats li {
  display: inline-block;
}

.blog-details .meta-bottom .tags {
  list-style: none;
  display: inline;
  padding: 0;
  font-size: 14px;
}

.blog-details .meta-bottom .tags li {
  display: inline-block;
}

.blog-details .meta-bottom .tags li+li::before {
  padding-right: 6px;
  color: var(--default-color);
  content: ",";
}

.blog-details .meta-bottom .share {
  font-size: 16px;
}

.blog-details .meta-bottom .share i {
  padding-left: 5px;
}

/*--------------------------------------------------------------
# Blog Author Section
--------------------------------------------------------------*/
.blog-author {
  padding: 10px 0 40px 0;
}

.blog-author .author-container {
  padding: 20px;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color), transparent 90%);
}

.blog-author img {
  max-width: 120px;
  margin-right: 20px;
}

.blog-author h4 {
  font-weight: 600;
  font-size: 20px;
  margin-bottom: 0px;
  padding: 0;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.blog-author .social-links {
  margin: 0 10px 10px 0;
}

.blog-author .social-links a {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
  margin-right: 5px;
}

.blog-author p {
  font-style: italic;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Blog Comments Section
--------------------------------------------------------------*/
.blog-comments {
  padding-top: 10px;
}

.blog-comments .comments-count {
  font-weight: bold;
}

.blog-comments .comment {
  margin-top: 30px;
  position: relative;
}

.blog-comments .comment .comment-img {
  margin-right: 14px;
}

.blog-comments .comment .comment-img img {
  width: 60px;
}

.blog-comments .comment h5 {
  font-size: 16px;
  margin-bottom: 2px;
}

.blog-comments .comment h5 a {
  font-weight: bold;
  color: var(--default-color);
  transition: 0.3s;
}

.blog-comments .comment h5 a:hover {
  color: var(--accent-color);
}

.blog-comments .comment h5 .reply {
  padding-left: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.blog-comments .comment h5 .reply i {
  font-size: 20px;
}

.blog-comments .comment time {
  display: block;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 5px;
}

.blog-comments .comment.comment-reply {
  padding-left: 40px;
}

.blog-comments .reply-form {
  margin-top: 30px;
  padding: 30px;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color), transparent 90%);
}

.blog-comments .reply-form h4 {
  font-weight: bold;
  font-size: 22px;
}

.blog-comments .reply-form p {
  font-size: 14px;
}

.blog-comments .reply-form input {
  background-color: var(--background-color);
  color: var(--default-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
  font-size: 14px;
  border-radius: 4px;
  padding: 10px 10px;
}

.blog-comments .reply-form input:focus {
  box-shadow: none;
  border-color: var(--accent-color);
}

.blog-comments .reply-form textarea {
  background-color: var(--background-color);
  color: var(--default-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
  border-radius: 4px;
  padding: 10px 10px;
  font-size: 14px;
  height: 120px;
}

.blog-comments .reply-form textarea:focus {
  box-shadow: none;
  border-color: var(--accent-color);
}

.blog-comments .reply-form .form-group {
  margin-bottom: 25px;
}

.blog-comments .reply-form .btn-primary {
  border-radius: 4px;
  padding: 10px 20px;
  border: 0;
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

.blog-comments .reply-form .btn-primary:hover {
  color: var(--contrast-color);
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
}

/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/
.starter-section {
  /* Add your styles here */
}

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widgets-container {
  padding: 30px;
  margin: 60px 0 30px 0;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color), transparent 90%);
}

.widget-title {
  color: var(--heading-color);
  font-size: 20px;
  font-weight: 700;
  padding: 0;
  margin: 0 0 20px 0;
}

.widget-item {
  margin-bottom: 40px;
}

.widget-item:last-child {
  margin-bottom: 0;
}

.search-widget form {
  background: var(--background-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
  padding: 3px 10px;
  position: relative;
}

.search-widget form input[type=text] {
  border: 0;
  padding: 4px;
  border-radius: 4px;
  width: calc(100% - 40px);
  background-color: var(--background-color);
  color: var(--default-color);
}

.search-widget form input[type=text]:focus {
  outline: none;
}

.search-widget form button {
  background: var(--accent-color);
  color: var(--contrast-color);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  border: 0;
  font-size: 16px;
  padding: 0 15px;
  margin: -1px;
  transition: 0.3s;
  border-radius: 0 4px 4px 0;
  line-height: 0;
}

.search-widget form button i {
  line-height: 0;
}

.search-widget form button:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.categories-widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.categories-widget ul li {
  padding-bottom: 10px;
}

.categories-widget ul li:last-child {
  padding-bottom: 0;
}

.categories-widget ul a {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  transition: 0.3s;
}

.categories-widget ul a:hover {
  color: var(--accent-color);
}

.categories-widget ul a span {
  padding-left: 5px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 14px;
}

.recent-posts-widget .post-item {
  display: flex;
  margin-bottom: 15px;
}

.recent-posts-widget .post-item:last-child {
  margin-bottom: 0;
}

.recent-posts-widget .post-item img {
  width: 80px;
  margin-right: 15px;
}

.recent-posts-widget .post-item h4 {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 5px;
}

.recent-posts-widget .post-item h4 a {
  color: var(--default-color);
  transition: 0.3s;
}

.recent-posts-widget .post-item h4 a:hover {
  color: var(--accent-color);
}

.recent-posts-widget .post-item time {
  display: block;
  font-style: italic;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.tags-widget {
  margin-bottom: -10px;
}

.tags-widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tags-widget ul li {
  display: inline-block;
}

.tags-widget ul a {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-size: 14px;
  padding: 6px 14px;
  margin: 0 6px 8px 0;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 60%);
  display: inline-block;
  transition: 0.3s;
}

.tags-widget ul a:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
  border: 1px solid var(--accent-color);
}

.tags-widget ul a span {
  padding-left: 5px;
  color: color-mix(in srgb, var(--default-color), transparent 60%);
  font-size: 14px;
}
.container-custom {
  width: 100%;
  max-width: 100%;
}

.portfolio-image {
  max-height: 500px; /* Adjust this value to the desired maximum height */
  width: auto;
  height: auto;
  object-fit: cover; /* Ensures the image covers the area while maintaining aspect ratio */
}
.portfolio-image1 {
  max-height: 700px; /* Adjust this value to the desired maximum height */
  width: auto;
  height: auto;
  object-fit: cover; /* Ensures the image covers the area while maintaining aspect ratio */
}
.bg-green {
    background-color: rgb(0, 72, 58) !important;
}
.bg-brown {
    background-color: #ab5a25 !important;
}
.btn-brown {
	color: #FFFFFF;
    background: #ab5a25;
    font-size: 13px;
    padding: 8px 26px;
    margin: 0;
    border-radius: 4px;
    transition: 0.3s;
}
.btn-brown:hover {
    color: #FFFFFF;
    background: #8c491e;
}
.c2a1 {
    font-family: "Jost", sans-serif;
    font-weight: 600;
	color: #FFFFFF;
	background-position: center top;
    background-size: cover;
	font-style: normal;
	font-size: 35px;
}

.c2a1 h1, .c2a1 h2, .c2a1 h3, .c2a1 h4, .c2a1 h5, .c2a1 h6 {
  color: #3e4555;
}

.c2a1 .op-8 {
	opacity: 0.8;
}

.c2a1 .font-weight-medium {
	font-weight: 500;
}
.cta-btn {
    color: var(--contrast-color);
    background: #ab5a25;
    font-family: var(--heading-font);
    font-weight: 400;
    font-size: 15px;
    display: inline-block;
    padding: 10px 28px;
    border-radius: 4px;
    transition: 0.5s;
	text-transform: uppercase;
}
.cta-btn:hover, .cta-btn:focus:hover {
    color: #FFFFFF;
    background: #8c491e;
}

.c2a1 .btn-md {
    padding: 15px 45px;
    font-size: 16px;
}

.portfolio .portfolio-filters {
  padding: 0;
  margin: 0 auto 20px auto;
  list-style: none;
  text-align: center;
}

.portfolio .portfolio-filters li {
  cursor: pointer;
  display: inline-block;
  padding: 8px 20px 10px 20px;
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  margin-bottom: 5px;
  border-radius: 50px;
  transition: all 0.3s ease-in-out;
  font-family: var(--heading-font);
  background-color: #EDEDED;	
}

.portfolio .portfolio-filters li:hover,
.portfolio .portfolio-filters li.filter-active {
  color: var(--contrast-color);
  background-color: var(--accent-color);
}

.portfolio .portfolio-filters li:first-child {
  margin-left: 0;
}

.portfolio .portfolio-filters li:last-child {
  margin-right: 0;
}

@media (max-width: 575px) {
  .portfolio .portfolio-filters li {
    font-size: 14px;
    margin: 0 0 10px 0;
  }
}

.portfolio .portfolio-item {
  position: relative;
  overflow: hidden;
}

.portfolio .portfolio-item .portfolio-info {
  opacity: 0;
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -100%;
  z-index: 3;
  transition: all ease-in-out 0.5s;
  background: color-mix(in srgb, var(--background-color), transparent 10%);
  padding: 15px;
}

.portfolio .portfolio-item .portfolio-info h4 {
  font-size: 15px;
  font-weight: 600;
  padding-right: 50px;
}

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

.portfolio .portfolio-item .portfolio-info .preview-link,
.portfolio .portfolio-item .portfolio-info .details-link {
  position: absolute;
  right: 15px;
  font-size: 20px;
  top: calc(50% - 14px);
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  transition: 0.3s;
  line-height: 0;
}

.portfolio .portfolio-item .portfolio-info .preview-link:hover,
.portfolio .portfolio-item .portfolio-info .details-link:hover {
  color: var(--accent-color);
}

.portfolio .portfolio-item .portfolio-info .details-link {
  right: 14px;
  font-size: 28px;
}

.portfolio .portfolio-item:hover .portfolio-info {
  opacity: 1;
  bottom: 0;
}
.photo {
  width: 130px!important;
  height: 150px;
  margin-bottom: 5px; /* Adjust margin as needed */
}

.photo-header {
  margin: 0;
  font-size: 16px; /* Adjust font size as needed */
}

.position-relative {
    position: relative;
}

.text-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 25px;
    margin-bottom: 15px;
    color: white;
    z-index: 1; /* Ensure text is above the gradient */
}

.text-overlay::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent); /* Adjust gradient colors as needed */
    z-index: -1; /* Place gradient behind the text */
}

.photo-container {
    overflow: hidden; /* Ensure text and gradient stay within the photo */
}

.resources-h3 {
	padding-top: 8px;
    font-weight: 650;
    font-size: 19px;
    font-family: "Jost", sans-serif;
}
.text-black {
    color: #2E2E2E !important;
}
.text-brown {
    color: rgb(171, 90, 37) !important;
}
.text-green {
    color: rgb(0, 72, 58) !important;
}

.embed-responsive {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
}

.embed-responsive::before {
  content: "";
  display: block;
  padding-top: 56.25%; /* 16:9 aspect ratio */
}

.embed-responsive-16by9::before {
  padding-top: 56.25%;
}

.embed-responsive-item {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 767px) {
  .footer-links {
    display: none;
  }
}
@media (max-width: 767px) {
  .footer .footer-top .row {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer .footer-top .footer-links,
  .footer .footer-top .footer-about {
    width: 100%;
    text-align: center;
  }

  .footer .footer-top .footer-contact p {
    text-align: center;
  }
}
@media (max-width: 767px) {
  .logo {
    justify-content: center;
    width: 100%;
  }

  .logo img {
    margin: 0 auto!important;
  }
}
@media (max-width: 767px) {
  .scroll-top {
    right: 5px; /* Adjust the value as needed */
    bottom: 5px; /* Adjust the value as needed */
    margin: 1.5em; /* Adjust or remove the margin as needed */
    padding: 18px; /* Adjust the padding as needed */
  }
}
@media (max-width: 767px) {
    .logo img {/* Adjust as needed */
        height: auto; /* Maintain aspect ratio */
    }

    .header {
        padding: 20px 15px; /* Adjust padding for mobile */
    }
@media (max-width: 767px) {
    .header .btn-getstarted, .header .btn-getstarted:focus {
        padding: 12px 16px; /* Adjust padding for mobile */
        font-size: 14px;
		text-align: center;/* Optionally adjust font size for mobile */
    }
}
	@media (max-width: 885px) {
    h2.text-white { /* Adjust as needed for smaller screens */
        line-height: 1.2;  /* Optionally adjust line-height for better readability */
    }
}
	@media (max-width: 885px) {
    .service-details h2 {
        font-size: 2rem; /* Adjust to desired size for mobile screens */
    }
}
	@media (max-width: 991px) {
  .breadcrumbs {
    display: none !important;
  }
}
	@media (max-width: 991px) {
    .page-title .breadcrumbs ol li+li {
        display: none !important; 
    }
}
	
	@media (max-width: 768px) {
    .page-title h1 { /* Remove left margin on mobile */
        margin-right: auto; /* Center horizontally */
        margin-left: auto;  /* Center horizontally */
        text-align: center; /* Center text alignment */
        font-size: 22px; /* Optional: Adjust font size for smaller screens */
    }
}
	@media (max-width: 576px) {
  .photo {
    width: 80%;
  }

  .photo-header {
    font-size: 0.875rem;
  }

  .service-details .col-6 {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
    margin-bottom: 0.5rem; /* Reduce bottom margin for less spacing */
  }

  .service-details .col-6 .photo-container {
    margin: 0 auto; /* Center the photo containers */
  }
}
	@media (max-width: 768px) {
    .photo-container {
      margin-bottom: 0.25rem; /* Reduce space on mobile */
    }
  }

  @media (max-width: 576px) {
    .photo-container {
      margin-bottom: 0.125rem; /* Further reduce space on smaller mobile screens */
    }
  }
	@media (max-width: 768px) {
    .call-to-action .content h3 {
            font-size: 42px;
            padding-top: 20px;

    }
}

@media (max-width: 576px) {
    .call-to-action .content h3 {
        font-size: 42px;
		padding-top: 20px;/* Even smaller font size for smaller mobile screens */
    }
}

@media (max-width: 375px) {
    .call-to-action .content h3 {
        font-size: 42px;
		padding-top: 20px;/* Smallest font size for very small mobile screens */
    }
}
	@media (max-width: 768px) {
    .section-title h2 {
        font-size: 32px; /* Adjust this value as needed for mobile screens */
    }
}
	@media (max-width: 768px) {
  .video-play {
    display: none!important; /* Hide the photo */
  }
}
.show-on-phone {
    display: none;
}

@media (max-width: 768px) {
    .show-on-phone {
        display: block;
    }
}
	@media (max-width: 768px) {
    .c2a1 {
        font-size: 27px; /* Font size for mobile screens */
    }
}
	
	@media (max-width: 991px) {
  ul {
    list-style-type: disc!important; /* Ensure bullets are shown */
  }
  
  nav li {
    color: transparent!important; /* Bullet color */
  }
}
	@media (max-width: 991px) {
  ul {
 /* Background color for mobile */
  }
}
	.img-mobile-hidden {
    display: block;
}

/* Hide on screens smaller than 768px (you can adjust this breakpoint as needed) */
@media (max-width: 768px) {
    .img-mobile-hidden {
        display: none;
    }
}
	.portfolio-filters li {
  color: #6B6B6B!important; /* Adjust the color as needed */
}

/* Optional: style the active filter differently, if needed */
.portfolio-filters .filter-active {
  color: white!important; /* Adjust the color for the active item */
}
	@media (max-width: 991px) {
  #header .navmenu ul {
    list-style: none; /* Remove bullets from all list items */
    padding: 0; /* Remove padding */
  }

  #header .navmenu ul li {
    margin: 0; /* Remove margins */
  }

  #header .navmenu ul li.d-xl-none {
    display: block; /* Ensure it shows up as a block item */
  }

  #header .navmenu ul li.d-xl-none a {
    display: block; /* Make the link a block element */
    padding: 10px 15px; /* Add padding for better click area */
    text-align: center; /* Center text */
  }
}
	.contact-link:visited {
  color: white;
}
	#message {
    height: 800px; /* Adjust the height as needed */
}
.img-container img {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.img-container img:hover {
    transform: scale(1.05); /* Slight zoom effect on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

 .modal-body {
      position: relative;
    }
    .modal-body img {
      max-width: 100%;
    }
    .modal .btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 10;
    }
    .modal .btn-left {
      left: 10px;
    }
    .modal .btn-right {
      right: 10px;
    }
	
	 @media (max-width: 767px) {
        iframe {
            height: 220px;  /* Adjust this value to your desired mobile size */
        }
		 
    }
	
}