/**
* Template Name: UpConstruction
* Template URL: https://bootstrapmade.com/upconstruction-bootstrap-construction-website-template/
* Updated: May 10 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: "Open Sans", 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: "Poppins", sans-serif;
}

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

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

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

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

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

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

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

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

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

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

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

@font-face {
  font-family: 'CustomFont';
  src: url('assets/fonts/RedHatDisplay-VariableFont_wght.ttf') format('truetype');
}

@font-face {
  font-family: 'RedHatDisplayItalic';
  src: url('assets/fonts/RedHatDisplay-Italic-VariableFont_wght.ttf') format('truetype');
}

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

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

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

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

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  --default-color: #4a5749;
  --heading-color: #4a5749;
  color: var(--default-color);
  /* background-color: #000000; */
  background-image: linear-gradient(90deg, rgb(38, 92, 24) 0%, rgb(44, 148, 21) 7%, rgba(0,0,0,1) 48%);
  /* background-image: linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 28%, rgba(0,0,0,1) 60%); */
  padding-right: 10px;
  transition: all 0.5s;
  z-index: 997;
  display: flex;
  justify-content: space-between; /* Ensures alignment between logo and nav */
  align-items: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Adds a shadow to the bottom */
  
}
/* rgb(24, 97, 35) 0% */

/* Remove padding/margin from container */
.container-xl {
  padding-left: 0;
  padding-right: 0;
  margin: 0;
}

/* Logo background styling */
.logo-background {
  /* background-color: #f3f3f3; */
  height: 100%; /* Full height of the header */
  display: flex;
  align-items: center;
  padding: 12px 10px 10px 10px; /* Optional padding around the logo */
}


.header img {
  width: 100%; /* Set to 100% of the parent container */
  max-width: 380px; /* Maximum width to prevent the image from getting too large */
  height: auto;
}

.header-logo-container {
  display: flex;
  align-items: center;
  width: 100%;
  background-color: #4a90e2; /* Set background color to match your desired color */
}

.header .logo h1 {
  font-size: 24px;
  margin: 0;
  font-weight: 700;
  color: var(--heading-color);
  font-family: 'CustomFont', sans-serif; /* Apply the custom font */
}

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

.header .logo .quality {
  font-family: 'RedHatDisplayItalic', sans-serif; /* Apply the second custom font */
  font-size: 20px; /* Adjust the size as needed */
  color: var(--heading-color);
  font-style: italic; /* Make the text italic */
}

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


/* Global Header on Scroll
------------------------------*/
.scrolled .header {
  --background-color: rgba(237, 250, 233, 1);
  --heading-color: #4a5749;
  --nav-color: #4a5749;
  --nav-hover-color: #4a5749;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Adds a shadow to the bottom */
}

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

  .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: #ffffff;
    font-size: 14px;
    padding: 0 2px;
    font-family: var(--nav-font);
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
    position: relative;
    text-transform: uppercase;
  }

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

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

  .navmenu a:hover:before,
  .navmenu li:hover>a:before,
  .navmenu .active:before {
    visibility: visible;
    width: 100%;
  }

  .navmenu li:hover>a,
  .navmenu .active,
  .navmenu .active:focus {
    color: #217b0f;
  }

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

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

  .navmenu .dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
    font-weight: 400;
    color: #ffffff;
  }

  .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: #217b0f;
  }

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

  /*.navmenu .dropdown .dropdown .submenu{
    left: 50%;
  }*/

  .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: #ffffff;
    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: #000000;
    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: #ffffff;
    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: #217b0f;
  }

  .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: #000000;
  --heading-color: var(--contrast-color);
  --default-color: var(--contrast-color);
  color: var(--default-color);
  background-color: var(--background-color);
  background: url("../img/Picture2.png") top center no-repeat;
  background-size: cover;
  font-size: 14px;
  padding-bottom: 20px;
  position: relative;
}

.footer .container {
  position: relative;
}

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

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

.footer-about .sitename{
  margin-top: -10px;
}

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

.footer .footer-about .logo img {
  max-height: 40px;
  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 .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 5px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 18px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-right: 10px;
  transition: 0.3s;
}

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

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

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

.footer-products {
  display: inline-block;
  text-align: left; /* Aligns the content within this block to the left */
}

.footer .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-block; /* Aligns the entire list as a block */
}

.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%);
  font-size: 13px;
  display: inline-block;
  line-height: 1;
}

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

.footer-links .footer-products .footer-subitem {
  padding-left: 20px;
}


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

.footer .copyright {
  padding-top: 25px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

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

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

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

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

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

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

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

.scroll-top i {
  font-size: 24px;
  color: rgba(237, 250, 233, 1);
  line-height: 0;
}

.scroll-top:hover {
  background-color: var(--accent-color);
  /* color: var(--accent-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: #444444;
  --heading-color: var(--contrast-color);
  --default-color: var(--contrast-color);
  color: var(--default-color);
  background-color: var(--background-color);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 160px 0 60px 0;
  text-align: center;
  position: relative;
}


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

.page-title .breadcrumbs .current{
  color: var(--accent-color);
}

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

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

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

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

@media (max-width: 1199px) {

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

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

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

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

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

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

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

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

/* Overlay effect */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5); /* Adjust opacity and color here */
  z-index: 2; /* Places overlay above background but below content */
}

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

@media (max-width: 768px),
(max-height: 480px) {
  .hero .info {
    padding: 100px 50px 60px 50px;
  }
}

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

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

@media (max-width: 768px) {
  .hero .info h2 {
    font-size: 36px;
  }
}

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

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

.hero .info .btn-get-started:hover {
  color: #212529;
}

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

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


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

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

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

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

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

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

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

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

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

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

/*--------------------------------------------------------------
# Get Started Section
--------------------------------------------------------------*/
.get-started{
  background-color: #ffffff;
}

.get-started .content {
  padding: 30px 0;
}

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

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

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

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

.about-img {
  flex: 1 1 45%; /* Two items per row */
  max-width: 45%; /* Adjust width to fit two images per row */
  margin: 10px; /* Add space between images */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* background-color: #a3edb0; */
}

.about-img .img-cont{
  background-color: #a3edb0;
  padding: 20px;
  border-radius: 50%; /* Makes the background circular */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px; /* Space between icon and text */
}

.about-img p{
  margin-left: 10px;
}

.about-img img {
  width: 100%; /* Full width within the container */
  max-width: 50px; /* Set a max-width for the image */
  height: auto;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/*--------------------------------------------------------------
# Constructions Section
--------------------------------------------------------------*/
.constructions {
  background-color: #052b01;
}

.constructions .card-item {
  display: flex;
  flex-direction: row;
  height: 100%;
  border-radius: 10px;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.7);
  overflow: hidden;
  margin-right: 20px;
  background-color: #fafafa9d;
}

.col-lg-6 {
  padding-bottom: 20px; /* Adjust as needed */
}

.constructions .card-item .card-bg {
  flex: 1; /* Take up equal space in the row */
  height: 100%; /* Make sure it fills the card's height */
  position: relative;
}

.constructions .card-item .card-bg img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.constructions .card-item .card-body {
  flex: 1; /* Take up equal space in the row */
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.constructions .card-item h4 {
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 15px;
}

.constructions .card-item p {
  color: color-mix(in srgb, var(--default-color), transparent 10%);
  margin: 0;
}

/*--------------------------------------------------------------
# Summary Section
--------------------------------------------------------------*/
/* Table shell */
#summary { 
  padding-top: 0;          /* or 10–20px if you want a little space */
}
.summary-table{
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
  background: #fff;
}

/* Header */
.summary-table thead th{
  background: #1f2937;
  color: #fff;
  font-weight: 700;
  border-color: #1f2937;
  vertical-align: middle;
  white-space: nowrap;
}

/* Left column (row headings) */
.summary-table .row-heading{
  background: #2e7d32;
  color: #fff;
  font-weight: 700;
  width: 220px;                 /* fixed visual width on desktop */
  border-right: 1px solid #e5e7eb;
}

/* Zebra rows for readability */
.summary-table tbody tr:nth-child(even) td{
  background: #f9fafb;
}

/* Bullets spacing */
.summary-table td ul{
  padding-left: 0;
  list-style: none;     /* removes the bullets */
}


/* Borders */
.summary-table td, 
.summary-table th{
  border-color: #e5e7eb;
}

/* Sticky left heading on wide screens (nice touch) */
@media (min-width: 992px){
  .summary-table .col-heading,
  .summary-table .row-heading{
    position: sticky;
    left: 0;
    z-index: 2;
  }
}

/* Mobile: stack cells as cards */
@media (max-width: 767.98px){
  .summary-table thead{ display: none; }
  .summary-table, 
  .summary-table tbody, 
  .summary-table tr, 
  .summary-table td, 
  .summary-table th{
    display: block;
    width: 100%;
  }
  .summary-table tr{
    border-top: 1px solid #e5e7eb;
  }
  .summary-table .row-heading{
    background: #2e7d32;
    color: #fff;
    border-right: none;
    border-bottom: 1px solid #e5e7eb;
    width: 100%;
    padding: .85rem 1rem;
  }
  .summary-table td{
    padding: .85rem 1rem;
  }
}


/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services {
  background-color: #000000;
}

.services .section-title h2{
  color: #ffffff;
}

.service-container {
  display: flex;
  align-items: center; /* Centers the icon and description vertically */
  gap: 20px; /* Space between the icon and description */
  border-radius: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  will-change: transform; /* Optimize for the transform on hover */
}

.services .icon{
  background-color: #a3edb0;
  color: #000000;
  padding: 50px;
  border-radius: 50%; /* Makes the background circular */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px; /* Fixed height to maintain a smaller circle */
  font-size: 40px;
  transition: ease-in-out 0.3s;
}


.services .service-item {
  padding: 15px 30px;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.4);
  background-color: #f2f2f2;
  height: 100%;
  border-radius: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease; 
  text-align: right;
}

.services .service-container:hover {
  transform: translateY(-10px) scale(1.03); /* Slight upward movement and scale */
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.5); /* Increase shadow on hover */
}

/* Disable the “pop” for the ATS card only */
.services .service-container.no-hover:hover {
  transform: none;
  box-shadow: none;
}

.services .service-item h4 {
  color: var(--heading-color);
  font-weight: 700;
  padding-bottom: 5px;
  font-size: 19px;
  position: relative;
  /* display: inline-block; */
  /* border-bottom: 3px solid var(--accent-color); */
  text-align: left;
}

.services .service-item h4::after {
  content: "";
  position: absolute;
  bottom: 0; /* Position it at the bottom of the text */
  left: 0;
  width: 20%; /* Change this to adjust the border length */
  height: 3px; /* Border thickness */
  background-color: var(--accent-color); /* Border color */
}

.services .service-item p {
  line-height: 24px;
  font-size: 15px;
  margin-bottom: 0;
  text-align: left;
}

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

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

/* Prevent hover effect on whole Automated Test Solutions card */
.services .service-item .ats-links .readmore{
  display: inline-block;           /* needed so transform/box-shadow apply */
  cursor: pointer;
  color:#6c757d;
  text-decoration: none;
  transition: color .15s ease,
              transform .15s ease,
              box-shadow .15s ease; /* smooth pop */
}

/* The little arrow should animate smoothly too */
.services .service-item .ats-links .readmore i{
  display: inline-block;           /* allow transform */
  transition: transform .15s ease;
}

/* “Pop” on the link ONLY (not the whole card) */
.services .service-item .ats-links .readmore:hover{
  color: var(--accent-color);
  transform: translateY(-1px);     /* tiny lift = “pop” */
  text-decoration: underline;      /* optional emphasis */
}

.services .service-item .ats-links .readmore:hover i{
  transform: translateX(3px);      /* arrow slides a bit */
}

.ats-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;  /* left align */
  gap: 6px;
  margin-top: .25rem;
}

/* One row = label + link */
.ats-link {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.ats-links .ats-link span,
.ats-links .ats-link a {
  font-size: 0.9rem;   /* match the "Read more" in the other cards */
  line-height: 1.4;
}

/* Fixture cards */
.fixture-card {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

/* Equal visual image area so all texts start aligned */
.fixture-thumb{
  height: 220px;                 /* uniform image area height */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;              /* or #f8f9fa if you want a light bg */
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  padding: 12px;                 /* breathing room around image */
}

.fixture-thumb img{
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;           /* keep proportions, no cropping */
  display: block;
}

/* Tidy text area */
.fixture-card .card-title{
  font-weight: 700;
  color: var(--heading-color);
}

.fixture-card .card-text{
  font-size: 0.95rem;
  color: color-mix(in srgb, var(--default-color), transparent 15%);
}

/* Optional: make all bodies equal height for perfect bottoms */
.fixture-card .card-body{
  display: flex;
  flex-direction: column;
}
/* -------------------------------------------------------------
# Partners
---------------------------------------------------------------- */
.partners {
  padding: 60px 0;
}

.partners .section-title h2{
  color: #454545;
  font-size: 36px;
  font-weight: 600;
  position: relative;
}

.partners .section-title h2:before,
.partners .section-title h2:after {
  content: "";
  width: 50px;
  height: 3px;
  color: #217b0f;
  display: inline-block;
}

.partner-slider {
  overflow: hidden;
  width: 100%;
}

.partner-track {
  display: flex;
  gap: 30px; /* Space between images */
  animation: scroll 130s linear infinite;
}

.partner-track img {
  max-height: 50px; /* Set a max height for the images */
  object-fit: contain; /* Keeps the aspect ratio of the images */
}

@keyframes scroll {
  0% {
    transform: translateX(5%);
  }
  100% {
    transform: translateX(-280%);
  }
}


/*--------------------------------------------------------------
# Alt Services Section
--------------------------------------------------------------*/
.alt-services {
  background-color: #000000;
  padding: 40px 0;
}

/* Center align items in the row */
.alt-services .row {
  display: flex;
  justify-content: space-between; /* Spaces out the two sections */
  align-items: flex-start; /* Aligns the sections to the top */
  gap: 20px; /* Adds spacing between the two sections */
}


/* Quality Policy and Objectives Header Alignment */
.alt-services .header-container {
  display: flex;
  align-items: center;
  justify-content: center; /* Center-aligns header container horizontally */
  gap: 10px;
  margin-bottom: 20px; /* Space between header and content */
}

.alt-services .header-container h3 {
  color: #ffffff;
  font-size: 28px;
  font-weight: 700;
  /* padding-bottom: 10px; */
  text-align: center; /* Center the text itself */
  position: relative;
}

.alt-services .header-container h3:after {
  content: "";
  background: var(--accent-color);
  position: absolute;
  display: block;
  width: 90px;
  height: 3px;
  bottom: -8px; /* Positioned below the text */
}


/* Icon Container Styling */
.alt-services .img-cont {
  background-color: #a3edb0;
  padding: 10px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
}

.alt-services .img-cont img {
  width: 100%;
  max-width: 30px;
  height: auto;
}

/* Icon Box Styling for Each Point */
.alt-services .icon-box {
  display: flex;
  align-items: center;
  text-align: left; /* Left-align text within icon boxes */
  margin-bottom: 15px; /* Space between each icon-box */
}

.alt-services .icon-box i {
  color: var(--accent-color);
  background-color: var(--contrast-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  margin-right: 15px;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
  transition: 0.3s;
}

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

/* Center-align content within Quality Objectives */
.alt-services .col-lg-6 .icon-box {
  justify-content: center; /* Center-align each icon box */
}

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

.features .nav-link {
  color: var(--heading-color);
  padding: 15px 0;
  transition: 0.3s;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  height: 100%;
  border: 0;
  border-bottom: 4px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.features .nav-link i {
  padding-right: 15px;
  font-size: 48px;
}

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

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

.features .nav-link:hover {
  color: var(--accent-color);
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.features .nav-link.active {
  background-color: var(--background-color);
  color: var(--accent-color);
  border-color: var(--accent-color);
}

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

.features .tab-pane h3 {
  color: var(--heading-color);
  font-weight: 700;
  font-size: 32px;
  position: relative;
  margin-bottom: 20px;
  padding-bottom: 20px;
}

.features .tab-pane h3:after {
  content: "";
  position: absolute;
  display: block;
  width: 60px;
  height: 3px;
  background: var(--accent-color);
  left: 0;
  bottom: 0;
}

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

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

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

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

/*--------------------------------------------------------------
# Projects Section
--------------------------------------------------------------*/
.projects .portfolio-filters {
  padding: 0;
  margin: 0 auto 20px auto;
  list-style: none;
  text-align: center;
}

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

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

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

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

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

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

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

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

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

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

.projects .portfolio-content .portfolio-info .preview-link,
.projects .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;
}

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

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

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

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

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

.testimonials .col {
  display: flex;
  flex-direction: column;
  align-items: center; /* Center horizontally */
  justify-content: center; /* Center vertically */
  text-align: center;
  height: 100%; /* Make sure the column fills the full height */
}

.testimonials .col p{
  margin: 20px 0;
}

/*--------------------------------------------------------------
# Awards Section
--------------------------------------------------------------*/
.awards .award-wrap {
  padding-left: 50px;
}

.awards .col {
  display: flex;
  flex-direction: column;
  align-items: center; /* Center horizontally */
  justify-content: center; /* Center vertically */
  text-align: center;
  height: 100%; /* Make sure the column fills the full height */
}

.awards .col p{
  margin: 20px 0;
  text-align: center;
}

.awards img{
  width: 300px;
  height: 400px;
  object-fit: cover;
  margin-bottom: 10px;
}

/* -------------------------------------------------------------
# Serving
---------------------------------------------------------------- */
.serving .row{
  justify-content: space-between;
}

.serving .row img{
  max-width: 80px;
  height: auto;
}

.serving .row .col {
  flex-direction: column;
}

/* Mobile view */
@media (max-width: 768px) {
  .serving .row{
    flex-direction: column;
    gap: 30px;
  }
}

/* -------------------------------------------------------------
#Milestone
---------------------------------------------------------------- */
/* ===== Milestones / Vertical timeline ===== */
.milestones-alt{ --line: color-mix(in srgb, var(--accent-color), transparent 60%); }

.timeline-v{
  position: relative;
  padding: 20px 0;
}

/* center vertical line */
.timeline-v::before{
  content:"";
  position:absolute;
  top:80px; bottom:0;
  left:50%; transform:translateX(-50%);
  width:6px;
  background: var(--line);
  border-radius:3px;
  z-index:0;              /* behind dots/cards */
}

/* each stop */
.timeline-v .timeline-item{
  position: relative;
  padding: 78px 0;        /* distance between stops */
  min-height: 140px;
}

/* -------- Year dot (on the center line) -------- */
.timeline-v .dot{
  position:absolute;
  left:50%; top:50%;                      /* <-- center on item */
  transform: translate(-50%,-50%);
  width:88px; height:88px;                /* dot size */
  border:6px solid #196f0b;               /* your green */
  background:#fff;
  border-radius:50%;
  color:#196f0b;
  font-weight:800;
  box-sizing:border-box;
  z-index:2;
}

/* single year: perfect center */
.timeline-v .dot.single{
  display:flex; align-items:center; justify-content:center;
}
.timeline-v .dot.single span{ line-height:1; }

/* year range: evenly spaced inside the circle */
.timeline-v .dot.range{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:center;
  padding:10px 0;                          /* breathing room */
}
.timeline-v .dot.range .start,
.timeline-v .dot.range .end{ line-height:1; }
.timeline-v .dot.range .mid{ line-height:1; }

/* optional: using data attributes for start/end (works with your markup) */
.timeline-v .dot.range[data-start]::before{
  content: attr(data-start);
  font-weight:800;
}
.timeline-v .dot.range[data-end]::after{
  content: attr(data-end);
  font-weight:800;
}
.timeline-v .dot.range[data-start]::before,
.timeline-v .dot.range[data-end]::after{
  /* keep same look as .start/.end if you prefer pseudo content */
  display:none; /* turn ON if you want pseudos: remove this line */
}

/* -------- Cards (always centered to the dot) -------- */
.timeline-v .content{
  position:absolute;
  top:50%;
  transform: translateY(-50%);             /* vertical align to dot */
  width: min(720px, calc(50% - 110px));    /* half-page minus center gutter */
  background:#eeeeeea5;
  border-radius:14px;
  box-shadow:0 12px 36px rgba(0,0,0,.12);
  padding:22px 26px;
  z-index:1;
}

/* alternate sides */
.timeline-v .timeline-item:nth-child(odd)  .content{ left:  calc(50% + 90px); }
.timeline-v .timeline-item:nth-child(even) .content{ right: calc(50% + 90px); }
/* 90px = (dot width 88 / 2) + desired gap; tweak if you change dot size */

/* connector from card to line, centered vertically */
.timeline-v .content::before{
  content:"";
  position:absolute;
  top:50%; transform:translateY(-50%);
  width:60px; height:3px;
  background:#196f0b;
}
.timeline-v .timeline-item:nth-child(odd)  .content::before{ left: -60px; }
.timeline-v .timeline-item:nth-child(even) .content::before{ right: -60px; }

/* headings inside cards */
.timeline-v .content h4{
  color: var(--heading-color);
  font-weight:700;
  font-size:22px;
  margin:0 0 8px;
}

/* -------- Mobile: stack on the left -------- */
@media (max-width: 767.98px){

  /* the vertical line hugs the left */
  .timeline-v::before{
    left: 24px;               /* distance from the left edge */
    right: auto;
    width: 4px;
    top: 0; bottom: 0;
    transform: none;
  }

  /* each item reserves space for the dot/line column */
  .timeline-v .timeline-item{
    padding: 28px 0 28px 96px;   /* <-- 96px = gutter for dot + spacing */
    min-height: auto;
  }

  /* dot sits on the line */
  .timeline-v .dot{
    left: 24px;
    top: 0;
    transform: translate(-50%, -50%);
    width: 64px; height: 64px;   /* a bit smaller on mobile */
  }
  .timeline-v .dot.range{
    padding: 6px 0;           /* was 10px */
  }
  .timeline-v .dot.range span{
    font-size: 14px;          /* was 16px */
    line-height: 1.05;
  }

  /* cards become normal flow blocks to the right of the line */
  .timeline-v .content{
    position: relative;          /* cancel absolute/transform from desktop */
    top: auto; transform: none;
    left: auto; right: auto;
    width: 100%;                 /* fills the item's content area */
    margin: 0;                   /* let the item's padding-left create the gutter */
    padding: 16px 16px;
    max-width: none;
  }

  /* all cards on the same side; cancel alternating rules */
  .timeline-v .timeline-item:nth-child(odd)  .content,
  .timeline-v .timeline-item:nth-child(even) .content{
    left: auto; right: auto;
    margin: 0;
  }

  /* optional: small connector from the card to the line */
  .timeline-v .content::before{
    content: "";
    position: absolute;
    left: -48px;                 /* draws back toward the line */
    top: 28px;                   /* adjust to taste */
    width: 48px; height: 2px;
    background: #196f0b;
    transform: none;
  }
}

/* -------------------------------------------------------------
ICT
---------------------------------------------------------------- */
.ict .icon-box {
  background-color: #eeeeeea5;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  padding: 0;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
  margin-top: 20px;
}

.ict .row .box1{
  background-color: #eeeeeea5;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  padding: 0;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
}

.ict img{
  max-width: 250px;
  height: auto;
}

.ict p{
  font-size: 15px;
}

.ict h4{
  font-size: 20px;
}


.ict .icon-box img{
  max-width: 250px;
  height: auto;
  /* margin-right: 30px; */
}


/* Mobile view */
@media (max-width: 768px) {
  .ict .row{
    flex-direction: row;
  }

  .ict .row .col-6{
    width: 100%;
  }

  .ict .icon-box{
    width: 100%;
  }

  .ict img{
    max-width: 100px;
    height: 100px;
  }

  .ict .icon-box img{
    max-width: 100px;
    height: 100px;
  }
}


/*--------------------------------------------------------------
# Recent Blog Posts Section
--------------------------------------------------------------*/
.recent-blog-posts .post-item {
  box-shadow: 0px 2px 20px color-mix(in srgb, var(--default-color), transparent 92%);
  transition: 0.3s;
}

.recent-blog-posts .post-item .post-img img {
  transition: 0.5s;
}

.recent-blog-posts .post-item .post-date {
  position: absolute;
  right: 0;
  bottom: 0;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  text-transform: uppercase;
  font-size: 13px;
  padding: 6px 12px;
  font-weight: 500;
}

.recent-blog-posts .post-item .post-content {
  padding: 30px;
}

.recent-blog-posts .post-item .post-title {
  color: var(--heading-color);
  font-size: 20px;
  font-weight: 700;
  transition: 0.3s;
  margin-bottom: 15px;
}

.recent-blog-posts .post-item .meta i {
  font-size: 16px;
  color: var(--accent-color);
}

.recent-blog-posts .post-item .meta span {
  font-size: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.recent-blog-posts .post-item hr {
  color: color-mix(in srgb, var(--default-color), transparent 80%);
  margin: 20px 0;
}

.recent-blog-posts .post-item .readmore {
  display: flex;
  align-items: center;
  font-weight: 600;
  line-height: 1;
  transition: 0.3s;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.recent-blog-posts .post-item .readmore i {
  line-height: 0;
  margin-left: 6px;
  font-size: 16px;
}

.recent-blog-posts .post-item:hover .post-title,
.recent-blog-posts .post-item:hover .readmore {
  color: var(--accent-color);
}

.recent-blog-posts .post-item:hover .post-img img {
  transform: scale(1.1);
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about .inner-title {
  font-size: 2.75rem;
  font-weight: 700;
  color: #464646;
}

.about-content {
  display: flex;
  align-items: stretch;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3); /* Single shadow for both sections */
  border-radius: 20px;
  overflow: hidden; /* Ensures content stays within rounded corners */
}

.about .col-lg-6{
  padding: 0;
}

.about .col-lg-6 img {
  width: 100%; /* Full width for responsive sizing */
  height: 100%; /* Full height to match the about container */
  object-fit: cover; /* Ensures the image covers the container without distortion */
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}

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

}

.about .our-story {
  padding: 40px;
  background-color: #eeeeeea5;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}

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

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

.about p{
   font-size: 15px;
}

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

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

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

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

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

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

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

/* Mobile view */
@media (max-width: 768px) {
  .about h2{
    margin-bottom: 20px;
  }
  
  .about-content {
    flex-direction: column; /* Stack text and image vertically */
  }
  
  .about .col-lg-6 {
    order: 1; /* Text content comes first */
  }

  .about .col-lg-6 img {
    order: 2; /* Image appears after text content */
    width: 100%;
    height: auto; /* Allows the image to adjust height automatically */
    object-fit: cover;
  }
}

/*-------------------------------------------------------------
 Corporate Governance (CG) 
 --------------------------------------------------------------*/
.CG h4{
  font-size: 19px;
}

.CG li{
  font-size: 15px;
  padding-bottom: 5px;
}

.CG-Card{
  background: #eeeeeea5;
  padding: 5px;
  margin: 10px 0;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease-in-out;
  cursor: pointer;
  text-align: left;
}

.CG-Card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  color: var(--accent-color);
  font-weight: bold;
}

.CG-Card a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
  padding: 15px;
}

@media (max-width: 768px) {
  .CG .row{
    display: flex;
    flex-direction: column;
  }
}



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

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

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

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


/*--------------------------------------------------------------
# Team Section
--------------------------------------------------------------*/
.team .member {
  position: relative;
}

.team .member .member-img {
  margin: 0 80px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
}

@media (max-width: 1024px) {
  .team .member .member-img {
    margin: 0 60px;
  }
}

.team .member .member-img img {
  position: relative;
  z-index: 1;
}

.team .member .member-img .social {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  padding-bottom: 20px;
  transition: 0.3s;
  visibility: hidden;
  opacity: 0;
}

.team .member .member-img .social a {
  transition: 0.3s;
  color: var(--contrast-color);
  font-size: 20px;
  margin: 0 8px;
}

.team .member .member-img .social a:hover {
  color: var(--accent-color);
}

.team .member .member-info {
  margin-top: 30px;
}

.team .member .member-info h4 {
  font-weight: 700;
  margin-bottom: 6px;
  font-size: 18px;
}

.team .member .member-info span {
  font-style: italic;
  display: block;
  font-size: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 10px;
}

.team .member .member-info p {
  margin-bottom: 0;
  font-size: 14px;
}

.team .member:hover .member-img .social {
  padding-bottom: 0;
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Features Cards Section
--------------------------------------------------------------*/
.features-cards h3 {
  font-size: 20px;
  font-weight: 700;
}

.features-cards p {
  font-size: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-bottom: 20px;
}

.features-cards img{
  max-width: 60px;
  height: auto;
  margin-bottom: 20px;
}

.features-cards ul li {
  display: flex;
  align-items: center;
  font-size: 14px;
  padding-top: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.features-cards ul li i {
  font-size: 16px;
  color: var(--accent-color);
  margin-right: 6px;
}

/* ------------------------------------------------------------
Benefits
--------------------------------------------------------------- */
.benefits {
  background-color: #000000;
  padding: 0; /* Remove any padding from the benefits section */
}

.benefits .container-fliud {
  display: flex;
  align-items: stretch; /* Ensures all columns take the same height */
}

.benefits .benefits-title {
  background-color: #024a09;
  padding: 20px;
  text-align: center;
  height: 260px; /* Ensure it takes full height */
}

.benefits .benefits-title h3 {
  color: #ffffff;
}

.benefits img {
  max-width: 70px;
  height: auto;
}

.benefits p {
  color: #ffffff;
  font-size: 14px; /* Adjust font size if needed */
  margin-top: 15px;
  text-align: left;
}

.benefits .row {
  margin: 0;
}

.benefits .row .col-2 {
  padding: 0 5px; /* Adjust padding to control spacing */
  flex: 1; /* Allows columns to fill available space */
}

.benefits .icons-container {
  display: flex;
  justify-content: space-evenly; /* Evenly space each column */
  gap: 40px; /* Adds consistent space between items */
  text-align: center;
}

/* Define the jump animation */
@keyframes jump {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px); /* Adjust the value for higher/lower jump */
  }
}

/* Apply the jump animation on hover */
.icons-container .col-2:hover {
  animation: jump 0.5s ease-in-out; /* Duration and easing of the jump */
}

/* Mobile View */
@media (max-width: 768px) {
  .icons-container {
    flex-direction: column; /* Stack items vertically */
    gap: 20px; /* Add spacing between each item */
  }

  .benefits .benefits-title {
    flex-basis: 100%; /* Full width for the title */
    text-align: center;
    width: 100%;
  }

  .icons-container .col-2 {
    width: 100%; /* Make each benefit take the full width */
  }
}

/* ------------------------------------------------------------
Flip Card
--------------------------------------------------------------- */
.flip-card, .flip-card-inner {
  height: 300px; /* Adjust to the desired height */
}

.flip-card {
  position: relative;
  margin-bottom: 40px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: left;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  display: flex;
  flex-direction: column; /* Ensures content is arranged in a column */
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 8px;
  position: absolute; /* Keeps front and back aligned */
  top: 0;
  left: 0;
  padding: 20px;
  background-color: #eeeeeea5;
  border-radius: 8px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
}

.flip-card-front {
  color: black;
}

.flip-card-back {
  color: black;
  transform: rotateY(180deg);
}


/*-------------------------------------------------------------
Platform
---------------------------------------------------------------*/
/* Platforms – simple card */
.platform-card{
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
  padding: 24px 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform .2s ease, box-shadow .2s ease;
}

/*.platform-card:hover{*/
/*  transform: translateY(-4px);*/
/*  box-shadow: 0 10px 28px rgba(0,0,0,.12);*/
/*}*/

.platform-img {
  width: 100%;
  max-width: 300px;        /* control max size */
  height: 200px;           /* fixed height */
  object-fit: contain;     /* scale image without stretching */
  display: block;
  margin: 0 auto 16px;     /* center the image, add spacing below */
}

.platform-body{
  width: 100%;
  text-align: left;        /* title/paragraph left-aligned like your ref */
}

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

.platform-text{
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--default-color);
}

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

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

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

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

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

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

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

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

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

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

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

/*-------------------------------------------------------------
 News 
 --------------------------------------------------------------*/
.roadmap h4{
  font-size: 19px;
}

.roadmap li{
  font-size: 15px;
  padding-bottom: 5px;
}

.roadmap-desc {
  display: flex; /* Enables flexbox */
  flex-direction: column; /* Ensures content stacks vertically */

}

 .roadmap-desc img{
  max-width: 70px;
  height: auto;
  display: block; /* Ensures the image is treated as a block-level element */
  margin: 0 auto; /* Horizontally centers the image */
  padding-bottom: 10px; /* Adds spacing below the image for better layout */
}

@media (max-width: 768px) {
  .roadmap .row{
    display: flex;
    flex-direction: column;
  }
}

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

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

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

.project-details .swiper-button-prev:after,
.project-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;
}

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

@media (max-width: 575px) {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/*--------------------------------------------------------------
# Blog Posts Section
--------------------------------------------------------------*/
.blog-posts article {
  box-shadow: 0px 2px 20px color-mix(in srgb, var(--default-color), transparent 90%);
  transition: 0.3s;
}

.blog-posts .post-img img {
  transition: 0.5s;
}

.blog-posts .post-date {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  position: absolute;
  right: 0;
  bottom: 0;
  text-transform: uppercase;
  font-size: 13px;
  padding: 6px 12px;
  font-weight: 500;
}

.blog-posts .post-content {
  padding: 30px;
}

.blog-posts .post-title {
  font-size: 20px;
  color: var(--heading-color);
  font-weight: 700;
  transition: 0.3s;
  margin-bottom: 15px;
}

.blog-posts .meta i {
  font-size: 16px;
  color: var(--accent-color);
}

.blog-posts .meta span {
  font-size: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.blog-posts p {
  margin-top: 20px;
}

.blog-posts hr {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
  margin-bottom: 15px;
}

.blog-posts .readmore {
  display: flex;
  align-items: center;
  font-weight: 600;
  line-height: 1;
  transition: 0.3s;
  color: color-mix(in srgb, var(--heading-color), transparent 20%);
}

.blog-posts .readmore i {
  line-height: 0;
  margin-left: 6px;
  font-size: 16px;
}

.blog-posts article:hover .post-title,
.blog-posts article:hover .readmore {
  color: var(--accent-color);
}

.blog-posts article:hover .post-img img {
  transform: scale(1.1);
}

/* -------------------------------------------------------------
Events
---------------------------------------------------------------- */
.gallery {
  position: relative;
  max-width: 700px;
  /* width: 100%; */
  text-align: center;
  border: 1px solid #ccc;
  background-color: #fff;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  margin: auto;
}

.gallery figure{
  margin-bottom: 0;
}

.photo {
  display: none;
  position: relative;
  cursor: pointer;
}

.photo.active {
  display: block;
}

.photo img {
  width: 700px;
  height: 400px;
}

.photo figcaption {
  padding: 20px;
  font-size: 1em;
  color: #333;
}

.navigation {
  position: absolute;
  top: 93.2%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
}

.navigation span {
  background-color: rgba(0, 0, 0, 0.2);
  color: black;
  padding: 14px;
  font-size: 24px;
  font-weight: 30px;
  cursor: pointer;
}

.navigation span:hover{
  background-color: #000000;
  color: #ffffff;
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  max-width: 90%;
  max-height: 90%;
}

.modal-content img {
  width: 100%;
  height: auto;
}

.close {
  position: absolute;
  top: 20px;
  right: 20px;
  background-color: #fff;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 18px;
  border: none;
  border-radius: 5px;
}

.tooltip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 5px 10px;
  border-radius: 3px;
  font-size: 12px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.photo:hover .tooltip {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# 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 p{
  font-size: 15px;
}

.blog-details .container .fct-intro{
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4);
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}

.blog-details .container .fct-info{
  background-color: #eeeeeea5;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}

.blog-details .fct-img {
  overflow: hidden;
}

.blog-details .fct-img img{
  width: 100%;
  height: auto;
}

/* Mobile view */
@media (max-width: 768px) {
  .features-cards{
    margin: 0 40px;;
  }
}

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

/* Mobile view */
@media (max-width: 768px) {
  .blog-details .row{
    flex-direction: column;
  }

  .blog-details .container .fct-intro{
    box-shadow: none;
  }
}

/*--------------------------------------------------------------
# FCT Bottom corousel
--------------------------------------------------------------*/
#fctCarousel .carousel-inner{
  height: 440px;
  background:#fff;
}

/* Center the image inside the slide */
#fctCarousel .carousel-item{
  height: 100%;
  display: flex;
  align-items: center;        /* vertical center */
  justify-content: center;    /* horizontal center */
  background:#fff;
}

/* Make the control hit-area small (only the round button) */
#fctCarousel .carousel-control-prev,
#fctCarousel .carousel-control-next{
  width: 44px;                   /* clickable area */
  height: 44px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  background: rgba(0,0,0,0.05);   /* optional circle background */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;                    /* keep visible */
}

#fctCarousel .carousel-control-prev { left: 12px; }
#fctCarousel .carousel-control-next { right: 12px; }

/* Size of the arrow glyph */
#fctCarousel .carousel-control-prev-icon,
#fctCarousel .carousel-control-next-icon{
  width: 20px;
  height: 20px;
  filter: invert(1) grayscale(100);  
}

.carousel-indicators [data-bs-target] {
  background-color: #333;   /* Dark dots */
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.carousel-indicators .active {
  background-color: #28a745; /* Highlight active dot (green for example) */
}

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

/*--------------------------------------------------------------
# Maintenance Section
--------------------------------------------------------------*/
  /* Warranty / Post-warranty cards */
  .maintenance-card{
    position: relative;
    display: flex;
    gap: 16px;
    background: #fff;
    border-radius: 14px;
    border: 1px solid #e6e6e6;
    box-shadow: 0 8px 24px rgba(0,0,0,.06);
    padding: 22px 22px 22px 90px;    /* room for icon column */
    min-height: 220px;
  }
  .maintenance-card:before{              /* left accent bar */
    content:"";
    position:absolute;
    left:0; top:0; bottom:0;
    width: 8px;
    background: var(--accent-color, #217b0f);
    border-top-left-radius: 14px;
    border-bottom-left-radius: 14px;
  }
  .maintenance-card .icon-wrap{
    position:absolute;
    left: 22px;
    top: 22px;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: rgba(33,123,15,.08);
    display:flex; align-items:center; justify-content:center;
    color: var(--accent-color, #217b0f);
    font-size: 28px;
  }
  .maintenance-card h4{
    margin: 0 0 8px 0;
    font-weight: 700;
    color: var(--heading-color, #525e54);
  }
  .maintenance-card p{ margin-bottom: 8px; }
  .maintenance-card .muted{ color: #6b7280; }

  /* bullets similar to your slide (subtle spacing + green bullets) */
  .green-list{
    list-style: none;
    padding-left: 0;
    margin: 0;
  }
  .green-list li{
    position: relative;
    padding-left: 18px;
    margin: 6px 0;
  }
  .green-list li::before{
    content: "•";
    position: absolute;
    left: 0; top: 0;
    line-height: 1;
    color: var(--accent-color, #217b0f);
    font-weight: 900;
  }
  
/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact-info img{
  max-width: 40px;
  height: auto;
}

.contact-info .row{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: start;
}

/* .contact-info{
  margin-left: 60px;
} */

.contact-info p{
  font-size: 15px;
}

/* Mobile view */
@media (max-width: 768px) {
  .contact .row{
    display: flex;
    flex-direction: column;
    width: 100%;
    /* gap: 30px; */
  }
}

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

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

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

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

.contact .php-email-form {
  height: 100%;
  padding: 30px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15);
  border-radius: 20px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

p {
    text-align: justify;
}