/* 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: "Poppins",  sans-serif;
  --nav-font: "Raleway",  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 entihttps://prod.liveshare.vsengsaas.visualstudio.com/join?CF4BB7F8535D891F8B189BA2BB76649E7BB9re website, including individual sections */
  --default-color: #ffffff; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #f8f8f8; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #1b5e20; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
  --h-color: #56585e;
  --g-color: #323232;
  --lg-color:#b8c0cc;
}

/* 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: #2c4964;  /* The default color of the main navmenu links */
  --nav-hover-color: #1b5e20; /* Applied to main navmenu links when they are hovered over or active */
  --nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */
  --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #323232; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #1b5e20; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
  --nav-color-black: #323232;
}

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

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

.light-gray{
  color: var(--lg-color);
}

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

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

/* about neweest */
.bg-white {
  opacity: 1 !important;
  background-color: #F8F9FA !important;
}
.position-relative {
  position: relative !important;
}
.page-widget {
  animation: slideInOut 24s ease-in-out infinite; /* Total duration of 24 seconds */
}

@keyframes slideInOut {
  0% {
    transform: translateX(-100%); /* Start off-screen */
    opacity: 0;
  }
  16.67% {
    transform: translateX(0); /* Slide in (4s/24s = 16.67%) */
    opacity: 1;
  }
  66.67% {
    transform: translateX(0); /* Stay in place for 10s (14s/24s = 58.33%) */
    opacity: 1;
  }
  87.5% {
    transform: translateX(-100%); /* Start sliding out (5s/24s = 20.83%) */
    opacity: 0;
  }
  100% {
    transform: translateX(-100%); /* Stay out */
    opacity: 0;
  }
}
/* .white-angle-overlay
{
	clip-path: polygon(45% 0%, 100% 0%, 100% 100%, 50% 100%);
	background: #ffffff;
	position: absolute !important;
	width: 100% !important;
	height: 100% !important;
} */
.white-angle-overlay-reverse {
  clip-path: polygon(0% 0%, 55% 0%, 45% 100%, 0% 100%);
  opacity: 1 !important;
  background-color: #F8F9FA !important;
  position: absolute !important;
  width: 100% !important;
  height: 100% !important;
}
.justify-content-start {
  justify-content: flex-start !important;
}

.abotus {
  padding-top: 7rem !important;
  padding-right: 3rem !important;
  padding-bottom: 3rem !important;
}

@media (max-width: 768px) {

  .abotus {
    margin-left: 40px;
    width: 120vh;
  }
}

@media (max-width: 425px) {

  .abotus {
    margin-left: 50px;
    width: 90%;
  }
}

@media (max-width: 375px) {

  .abotus {
    margin-left: 30px;
    width: 90%;
  }
}

@media (max-width: 320px) {

  .abotus {
    margin-left: 30px;
    width: 90%;
  }
}

.bb {
  margin-bottom: 0px;
}

.display-4 {
  font-size: calc(1.475rem + 2.7vw);
  font-weight: 300;
  line-height: 1.2;
  color: var(--nav-color-black);
  font-family: Impact, sans-serif;
  letter-spacing: 3px;
}
p {
  margin-top: 0;
  margin-bottom: 1rem;
}

/* Mobile-first styles */
@media (max-width: 600px) {
  .display-4 {
    font-size: 35px;
    font-weight: 300;
    line-height: 1.2;
    color: var(--nav-color-black);
    font-family: Impact, sans-serif;
    letter-spacing: 3px;
    text-align: center;

  }

  .abotus{
    padding-top: 3rem !important;
    padding-right: 1rem !important;
    padding-bottom: 3rem !important;
    padding-left: 1rem !important;
  }

  .page-wdiget{
    display: flex;
  
  }
  .position-relative .abotus{
    align-items: center;
    justify-content: center;
   
  }

  
  
  .white-angle-overlay-reverse{
    clip-path: none;
  }

}
/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
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;
}

.hover {
  transition: transform .7s;
}

.hover:hover {
  transform: translateY(-20px);
}



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


.green {
  color: var(--h-color);
}

.gray {
  color: var(--g-color);
}

.banner-h{
  background-image: url(../img/banner.png);
  background-size:cover ;
  background-repeat: no-repeat;
  width: 100%;
  height: 75vh;
  padding: 60px 0px;
}

@media (max-width: 600px) {

  .banner-h{
    background-image: url(../img/banner.png);
    background-size:cover ;
    background-repeat: no-repeat;
    width: 100%;
    height: 75vh;
    padding: 0px 0px;
  }

    .banner-h h1 {

      font-size: 50px;
    }

    .banner-h h4, p {

      font-size: 15px;
    }

    
  }

  @media (max-width: 425px) {
    .sectionss {
      margin-left: 50px;
    }
}

@media (max-width: 375px) {
    .sectionss {
      margin-left: 25px;
    }
}

@media (max-width: 320px) {
  .sectionss {
    margin-left: 0px;
  }
}

.section-colors a {
  color: inherit; /* Inherit the text color */
  text-decoration: none; /* Remove underline */
}

.section-colors a.active {
  background-color: white; /* White background for active link */
  color: black; /* Change text color if needed */
  padding: 5px; /* Add some padding for better appearance */
  border-radius: 4px; /* Optional: rounded corners */
}
.section-colors {
  color: #fff; /* White color for the text to stand out against the dark background */
}

.poppins-medium {
  font-family: "Poppins", serif;
  font-weight: 400;
  font-style: normal;
  line-height: 30px;
}

.poppins-extrabold {
  font-family: "Poppins", serif;
  font-weight: 800;
  font-style: normal;
}
.poppins-extrabolds {
  font-family: "Poppins", serif;
  font-weight: 800;
  font-style: normal;
  font-size: 70px;
}

.section-color{
  color: #1b5e20;
}

.drak{
  color: #000000;
}
.color{
  color: #1b5e20;
}
.svp{
  color: #b4b4af;
}
.sv{
  color: #ebdddd;
}


 /* Home section */
  
 .home {
  display: flex;
  justify-content: center;
  align-items: center;
  /* flex-direction: column; */
  /* text-align: center; */
  /* border: 5px solid red; */
}

.hsection {
  min-height: 50vh;
  min-width: 100%;
  padding: 2rem 9% 2rem;
}


.home-img img {
  width: 20vw;
  height: 20vw;
  animation: floatImage 4s ease-in-out infinite;
  border-radius: 50%;
  box-shadow: 0 0 25px var(--heading-color),
  0 0 35px var(--heading-color),
  0 0 55px var(--h-color);
  cursor: pointer;
  transition: 0.4s ease-in-out;
  border: transparent;
}


.home-img img:hover {
  box-shadow: 0 0 25px var(--heading-color),
              0 0 35px var(--h-color),
              0 0 55px var(--h-color);
}

@keyframes floatImage {
  0% {
      transform: translateY(0);
  }

  50% {
      transform: translateY(-2.4rem);
  }

  100% {
      transform: translateY(0);
  }
}
.home-content {
  margin-left: 5rem;
}

.home-content h3 {
  font-size: 1.5rem;
  font-weight: 700;
}

.home-content h3:nth-of-type(2) {
  margin-bottom: 1rem;
}

/*.home-content span {*/
/*  color: var(--accent-color);*/
/*}*/

.home-content h1 {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.3;
}

.home-content p {
  font-size: 1.2rem;
}

.social-media a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 37px;
  height: 37px;
  background: transparent;
  border: .2rem solid var(--accent-color);
  border-radius: 50%;
  font-size: 1.3rem;
  color: var(--accent-color);
  margin: 1.5rem 1rem 1.5rem 0;
  transition: .3s ease-in-out;
}
.social-media a:hover {
  transform: scale(1.2)translateY(-10px);
  background-color: var(--accent-color);
  color: var(--heading-color);
  box-shadow: 0 0 25px var(--accent-color); 
}

.bx {
  font-family: boxicons !important;
  font-weight: 400;
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  text-rendering: auto;
  display: inline-block;
  text-transform: none;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Responsive Design */
@media (max-width: 768px) {
  .home-content h1 {
    font-size: 1.5rem;
  }

  .home-content h3 {
    font-size: 1.5rem;
  }

  .home-content p {
    font-size: 1.4rem;
  }

  .home-img img {
    margin-top: 3rem;
    width: 150px;
    height: 150px;
  }

  .home{
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
  }

  .home-content{
    margin-left: 0rem;
  }

}



/* Optional: Typed.js cursor styling, if needed */
.typed-cursor {
  opacity: 1;
}
.typed-cursor .type-cursor--blink {
  animation: typedjsBlink 0.7s infinite;
  -webkit-animation: typedjsBlink 0.7s infinite;
}
@keyframes typedjsBlink {
  50% { opacity: 0.0; }
}
@-webkit-keyframes typedjsBlink {
  0% { opacity: 1; }
  50% { opacity: 0.0; }
  100% { opacity: 1; }
}

  .btn {
    display: inline-block;
    padding: .5rem .8rem;
    background: var(--accent-color);
    border-radius: 0rem;
    box-shadow: none;
    font-size: 1rem;
    color: var(--heading-color);
    letter-spacing: .1rem;
    font-weight: 600;
    transition: .5s ease;
  }

  .btn:hover {
    box-shadow: 0 0 2rem var(--accent-color);
  }

/* ceo */


 /* Home section */
  
 .ceo {
  display: flex;
  justify-content: center;
  
  /* flex-direction: column; */
  /* text-align: center; */
  /* border: 5px solid red; */
}
.csection {
  text-align: center;
  min-height: 100vh;
  padding: 1rem 1% 1rem;
  margin-top: 3rem;
}


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

@media (max-width: 600px) {

  .ceo-img {
    width: 100px; /* Adjust as needed */
    height: 100px; /* Adjust as needed */
    overflow: hidden;
    display: contents;
    justify-content: center;
    align-items: center;
    border-radius: 10px; /* Optional for rounded corners */
}

.ceo-img img {
    width: 25%;
    height: 25%;
    object-fit: cover;
    position: absolute;
}
}

  

@keyframes floatImage {
  0% {
      transform: translateY(0);
  }

  50% {
      transform: translateY(-2.4rem);
  }

  100% {
      transform: translateY(0);
  }
}
.ceo-content {
  margin-left: 5rem;
  width: 70%;
}

@media (max-width: 600px) {

  .ceo-content {
    margin-top: 160px;
    margin-left: 0;
    width: 90%;
  }
}

.ceo-content h3 {
  font-size: 1.5rem;
  font-weight: 700;
}

.ceo-content h3:nth-of-type(2) {
  margin-bottom: 1rem;
}

.ceo-content span {
  color: var(--accent-color);
}

.ceo-content h1 {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.3;
}

.ceo-content p {
  font-size: 1.2rem;
}

.social-media a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 37px;
  height: 37px;
  background: transparent;
  border: .2rem solid var(--accent-color);
  border-radius: 50%;
  font-size: 1.3rem;
  color: var(--accent-color);
  margin: 1.5rem 1rem 1.5rem 0;
  transition: .3s ease-in-out;
}
.social-media a:hover {
  transform: scale(1.2)translateY(-10px);
  background-color: var(--accent-color);
  color: var(--heading-color);
  box-shadow: 0 0 25px var(--accent-color); 
}

#certificates h2 {
  padding-bottom: 20px;
}

.bx {
  font-family: boxicons !important;
  font-weight: 400;
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  text-rendering: auto;
  display: inline-block;
  text-transform: none;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Responsive Design */
@media (max-width: 768px) {
  .home-content h1 {
    font-size: 2rem;
  }

  .home-content h3 {
    font-size: 1.5rem;
  }

  .home-content p {
    font-size: 1rem;
  }

  .home-img img {
    width: 150px;
    height: 150px;
  }
}

/* Optional: Typed.js cursor styling, if needed */
.typed-cursor {
  opacity: 1;
}
.typed-cursor .type-cursor--blink {
  animation: typedjsBlink 0.7s infinite;
  -webkit-animation: typedjsBlink 0.7s infinite;
}
@keyframes typedjsBlink {
  50% { opacity: 0.0; }
}
@-webkit-keyframes typedjsBlink {
  0% { opacity: 1; }
  50% { opacity: 0.0; }
  100% { opacity: 1; }
}

  .btn {
    display: inline-block;
    padding: .5rem .8rem;
    background: var(--accent-color);
    /* border-radius: 4rem; */
    box-shadow: none;
    font-size: 1rem;
    color: var(--heading-color);
    letter-spacing: .1rem;
    font-weight: 600;
    transition: .5s ease;
  }

  .btn:hover {
    box-shadow: 0 0 2rem var(--accent-color);
  }






 

/* svppsection */

.svpp {
display: flex;
align-items: center;
justify-content: center;
gap: 2rem;
background: var(--accent-color);
padding: 50px 50px 50px 50px;
}
.svppsection{
min-height: 50vh;
  padding: 2rem 9% 2rem;
}

.svpp-img img {
width: 29vw;
height: 17vw;
box-shadow: 0 0 25px var(--heading-color);
cursor: pointer;
transition: 0.4s ease-in-out;
border: transparent;
}

.svpp-img img:hover {
box-shadow: 0 0 25px var(--heading-color),
            /* 0 0 35px var(--heading-color), */
            0 0 55px var(--heading-color);
}

.svpp-heading {
font-size: 6rem;
}

.svpp-content {
padding: 0 4rem;
}

.svpp-content h3 {
font-size: 1.5rem;
font-weight: 700;
}


.svpp-content h3:nth-of-type(2) {
text-align: left;
line-height: 1.2;
font-weight: 700;
}

.svpp-content h1 {
font-size: 3rem;
font-weight: 700;
line-height: 1.3;
}

.svpp-content p {
font-size: 1.2rem;
/*margin: 2rem 0 3rem;*/
}

.svport{
display: inline-block;
padding: .5rem .8rem;
background: var(--heading-color);
border-radius: 4rem;
box-shadow: none;
font-size: 1rem;
color: var(--accent-color);
letter-spacing: .1rem;
font-weight: 600;
transition: .5s ease;
}

.svport:hover {
box-shadow: 0 0 2rem var(--heading-color);
}

/* svpo section */

.svpo {
display: flex;
justify-content: center;
align-items: center;
/* flex-direction: column; */
/* text-align: center; */
/* border: 5px solid red; */
}
/* .hsection {
min-height: 100vh;
padding: 2rem 9% 2rem;
} */

.svpo-img img {
width: 29vw;
height: 17vw;
box-shadow: 0 0 25px var(--heading-color),
0 0 35px var(--heading-color),
0 0 55px var(--h-color);
cursor: pointer;
transition: 0.4s ease-in-out;
border: transparent;
}

.photo {
  width: 70%; /* Adjust width as needed */
  height: auto; /* Keeps the aspect ratio intact */
}

@media (max-width: 425px) {

  .photo {
    width: 90%; /* Adjust width as needed */
    height: auto; /* Keeps the aspect ratio intact */
  }

  .photo2 {
    order: 1;
    width: 80%; /* Adjust width as needed */
    height: auto; /* Keeps the aspect ratio intact */
    zoom: 50%;
  }
}

@media (max-width: 375px) {

  .photo {
    width: 90%; /* Adjust width as needed */
    height: auto; /* Keeps the aspect ratio intact */
  }

  .photo2 {
    width: 80%; /* Adjust width as needed */
    height: auto; /* Keeps the aspect ratio intact */
    zoom: 50%;
  }
}


.svpo-img img:hover {
box-shadow: 0 0 25px var(--heading-color),
            0 0 35px var(--h-color),
            0 0 55px var(--h-color);
}

@keyframes floatImage {
0% {
    transform: translateY(0);
}

50% {
    transform: translateY(-2.4rem);
}

100% {
    transform: translateY(0);
}
}
.svpo-content {
margin-left: 5rem;
}

.svpo-content h3 {
font-size: 1.5rem;
font-weight: 700;
}

.svpo-content h3:nth-of-type(2) {
margin-bottom: 1rem;
}

.svpo-content h1 {
font-size: 3rem;
font-weight: 700;
line-height: 1.3;
}

.svpo-content p {
font-size: 1.2rem;
}

/* Responsive Design */
@media (max-width: 768px) {
.svpo-content h1 {
  font-size: 1.87rem;
}

.svpo-content h3 {
  font-size: 2rem;
}

.svpo-content p {
  font-size: 1rem;
}

.svpo-img img {
  width: 150px;
  height: 150px;
}
.svpp{
  flex-direction:column-reverse;
  text-align: center;
  justify-content: center;
  align-items: center;
}

.svpp-content{
  margin-left: 0rem;
}

.svpp-img img {
  width: 50vw;
  height: 50vw;
}

@media (max-width: 768px) {

  .svpp-img img {
    width: 60vw;
    height: 35vw;
  }
}

@media (max-width: 425px) {

  .svpp-img img {
    width: 75vw;
    height: 50vw;
  }
}

@media (max-width: 375px) {

  .svpp-img img {
    width: 80vw;
    height: 50vw;
  }
}

.svpp-content{
padding: 0px;

}

.svpp-content h1{
  font-size: 1.7rem;
  margin-top: 1.5rem;
}

.svpp-content h3:nth-of-type(2){

  text-align: center;
  margin-top: 1rem;
}

.svpp-content h3
{
  font-size: 1.5rem;
}

@media (max-width: 768px) {
  p.sv {
          font-size: 1rem;
  }
  }
/*svpo section  */

.svpo{
  flex-direction:column;
  text-align: center;
  justify-content: center;
  align-items: center;
}

.svpo-content{
  margin-left: 0rem;
}

.svpo-img img {
  width: 50vw;
  height: 50vw;
}

@media (max-width: 768px) {

  .svpo-img img {
    width: 60vw;
    height: 35vw;
  }
}

@media (max-width: 425px) {

  .svpo-img img {
    width: 75vw;
    height: 50vw;
  }
}

@media (max-width: 375px) {

  .svpo-img img {
    width: 80vw;
    height: 50vw;
  }
}

.svpo-content{
padding: 0px;

}

.svpo-content h1{
  font-size: 1.5rem;
  margin-top: 1.5rem;
}

.svpo-content h3:nth-of-type(2){

  text-align: center;
  margin-top: 1rem;
  font-size: 1.5rem;
}

.svpo-content h3
{
  margin-top: 1.8rem;
  font-size: 1.5rem;
}

}



#green{
  color: var(--g-color);
}

.card{
  /* background-color: #1b5e20; */
  width: 100%;
  height: 300px;
  box-shadow: 0px 5.75px 5.9px rgba(24, 24, 24, 0.066), 
  0px 5px 5.3px rgba(24, 24, 24, 0.077), 
  0px 5.5px 5.9px rgba(24, 24, 24, 0.079), 
  0px 5.1px 5.4px rgba(24, 24, 24, 0.086), 
  0px 5.7px 5.6px rgba(24, 24, 24, 0.104), 
  0px 4px 8px rgba(24, 24, 24, 0.14);
  border-radius: 0px;

}

.divider .card-body{
  padding: 12px;
  border: 1px solid rgb(255, 255, 255, 0.75);
}

#core .card-body{
  padding-top: 50px;
  border: 1px solid rgb(255, 255, 255, 0.75);
}

.cards{
  background-color: #1b5e20;
  padding: 25px 25px 25px 25px;
  width: 100%;
  height: 100%;

}

@media (max-width: 768px) {
  .card-body{
    padding-top: 50px ;
    border: 1px solid rgb(255, 255, 255, 0.75);
  }  
}


.core-value-card{
  /* background-color: #ffffff;
  border: 1px solid var(--heading-color); */
  transition: border 0.1s, transform 0.3s;
  box-shadow: 0px 5.75px 5.9px rgba(24,24,24, 0.046),
  0px 5px 5.3px rgba(24,24,24, 0.057),
  0px 5.5px 5.9px rgba(24,24,24, 0.059),
  0px 5.1px 5.4px rgba(24,24,24, 0.066),
  0px 5.7px 5.6px rgba(24,24,24, 0.084),
  0px 4px 8px rgba(24,24,24, 0.12);
}

.core-value-card:hover {
  border: 1px solid var(--accent-color);
  -webkit-transform: translateY(-10px);
  transform: translateY(-10px);
  cursor: pointer;
}

@media (max-width: 768px) {

  .core-value-card p {
    font-size: 10px;
  }
}

.bordering
{
  border: 2px solid black;
}

.banner{
  width: 100%;

}
/* sd */


/* Add this to your existing CSS */
@keyframes slideIn {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 0.9;
  }
}

.headings {
  animation: slideIn 1s ease forwards; /* Adjust duration and easing as needed */
}
 
.headings::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* Cover the entire area */
  background-color: rgb(15, 68, 19); /* Green color with 50% opacity */
  clip-path: polygon(0 0, 40% 0, 60% 100%, 0% 100%);
  z-index: 0; /* Ensure the overlay stays behind the content */
  animation: slideIn 1s ease forwards; /* Same animation for the clip path */
  animation-delay: 0.5s; /* Delay for the clip path to start after the text */
}
@media (max-width: 600px) {

  .headings::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Cover the entire area */
    background-color: rgb(15, 68, 19); /* Green color with 50% opacity */
    clip-path: none;
    z-index: 0; /* Ensure the overlay stays behind the content */
  }

}


/* Add this to your existing CSS */
@keyframes slideIn {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 0.9;
  }
}

.headingsa {
  animation: slideIn 1s ease forwards; /* Adjust duration and easing as needed */
  position: relative;
  background-color: rgb(164, 163, 163); /* Fallback background color */
  background-image: url('../img/pages/about.png'); /* Background image */
  background-size: cover;
  background-position: center;
  width: 100%;
  padding: 50px 0; /* Adjust padding as needed */
}
 
.headingsa::before {
  animation: slideIn 1s ease forwards; /* Same animation for the clip path */
  animation-delay: 0.5s; /* Delay for the clip path to start after the text */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* Cover the entire area */
  background-color: rgb(15, 68, 19); /* Green color with 50% opacity */
  clip-path: polygon(0 0, 40% 0, 60% 100%, 0% 100%);
  z-index: 0; /* Ensure the overlay stays behind the content */
}

.headingp {
  animation: slideIn 1s ease forwards; /* Adjust duration and easing as needed */  position: relative;
  background-color: rgb(164, 163, 163); /* Fallback background color */
  background-image: url('../img/pages/projecta.JPG'); /* Background image */
  background-size: cover;
  background-position: center;
  width: 100%;
  padding: 50px 0; /* Adjust padding as needed */
}
 
.headingp::before {
  animation: slideIn 1s ease forwards; /* Same animation for the clip path */
  animation-delay: 0.5s; /* Delay for the clip path to start after the text */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* Cover the entire area */
  background-color: rgb(15, 68, 19); /* Green color with 50% opacity */
  clip-path: polygon(0 0, 40% 0, 60% 100%, 0% 100%);
  z-index: 0; /* Ensure the overlay stays behind the content */
}
@media (max-width: 600px) {

  .headingp::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Cover the entire area */
    background-color: rgb(15, 68, 19); /* Green color with 50% opacity */
    clip-path: none;
    z-index: 0; /* Ensure the overlay stays behind the content */
  }

}


/**/
.headingpl {
  animation: slideIn 1s ease forwards; /* Adjust duration and easing as needed */
  position: relative;
  background-color: rgb(164, 163, 163); /* Fallback background color */
  background-image: url('../img/pages/plant 12.png'); /* Background image */
  background-size: cover;
  background-position: center;
  width: 100%;
  padding: 50px 0; /* Adjust padding as needed */
}
 
.headingpl::before {
  animation: slideIn 1s ease forwards; /* Same animation for the clip path */
  animation-delay: 0.5s; /* Delay for the clip path to start after the text */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* Cover the entire area */
  background-color: rgb(15, 68, 19); /* Green color with 50% opacity */
  clip-path: polygon(0 0, 40% 0, 60% 100%, 0% 100%);
  z-index: 0; /* Ensure the overlay stays behind the content */
}
@media (max-width: 600px) {

  .headingpl::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Cover the entire area */
    background-color: rgb(15, 68, 19); /* Green color with 50% opacity */
    clip-path: none;
    z-index: 0; /* Ensure the overlay stays behind the content */
  }

}
/**/
.headingpi {
  animation: slideIn 1s ease forwards; /* Adjust duration and easing as needed */
  position: relative;
  background-color: rgb(164, 163, 163); /* Fallback background color */
  background-image: url('../img/pages/9.png'); /* Background image */
  background-size: cover;
  background-position: center;
  width: 100%;
  padding: 50px 0; /* Adjust padding as needed */

}
 
.headingpi::before {
  animation: slideIn 1s ease forwards; /* Same animation for the clip path */
  animation-delay: 0.5s; /* Delay for the clip path to start after the text */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* Cover the entire area */
  background-color: rgb(15, 68, 19); /* Green color with 50% opacity */
  clip-path: polygon(0 0, 40% 0, 60% 100%, 0% 100%);
  z-index: 0; /* Ensure the overlay stays behind the content */
}
@media (max-width: 600px) {

  .headingpi::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Cover the entire area */
    background-color: rgb(15, 68, 19); /* Green color with 50% opacity */
    clip-path: none;
    z-index: 0; /* Ensure the overlay stays behind the content */
  }

}

/**/
.headingpin {
  animation: slideIn 1s ease forwards; /* Adjust duration and easing as needed */
  position: relative;
  background-color: rgb(164, 163, 163); /* Fallback background color */
  background-image: url('../img/pages/10.png'); /* Background image */
  background-size: cover;
  background-position: center;
  width: 100%;
  padding: 50px 0; /* Adjust padding as needed */
}
 
.headingpin::before {
  animation: slideIn 1s ease forwards; /* Same animation for the clip path */
  animation-delay: 0.5s; /* Delay for the clip path to start after the text */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* Cover the entire area */
  background-color: rgb(15, 68, 19); /* Green color with 50% opacity */
  clip-path: polygon(0 0, 40% 0, 60% 100%, 0% 100%);
  z-index: 0; /* Ensure the overlay stays behind the content */
}
@media (max-width: 600px) {

  .headingpin::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Cover the entire area */
    background-color: rgb(15, 68, 19); /* Green color with 50% opacity */
    clip-path: none;
    z-index: 0; /* Ensure the overlay stays behind the content */
  }

}

/**/
.headingpc {
  animation: slideIn 1s ease forwards; /* Adjust duration and easing as needed */
  position: relative;
  background-color: rgb(164, 163, 163); /* Fallback background color */
  background-image: url('../img/pages/11.png'); /* Background image */
  background-size: cover;
  background-position: center;
  width: 100%;
  padding: 50px 0; /* Adjust padding as needed */
}
 
.headingpc::before {
  animation: slideIn 1s ease forwards; /* Same animation for the clip path */
  animation-delay: 0.5s; /* Delay for the clip path to start after the text */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* Cover the entire area */
  background-color: rgb(15, 68, 19); /* Green color with 50% opacity */
  clip-path: polygon(0 0, 40% 0, 60% 100%, 0% 100%);
  z-index: 0; /* Ensure the overlay stays behind the content */
}
@media (max-width: 600px) {

  .headingpc::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Cover the entire area */
    background-color: rgb(15, 68, 19); /* Green color with 50% opacity */
    clip-path: none;
    z-index: 0; /* Ensure the overlay stays behind the content */
  }

}

/**/
.headingpci {
  animation: slideIn 1s ease forwards; /* Adjust duration and easing as needed */
  position: relative;
  background-color: rgb(164, 163, 163); /* Fallback background color */
  background-image: url('../img/pages/12.png'); /* Background image */
  background-size: cover;
  background-position: center;
  width: 100%;
  padding: 50px 0; /* Adjust padding as needed */
}
 
.headingpci::before {
  animation: slideIn 1s ease forwards; /* Same animation for the clip path */
  animation-delay: 0.5s; /* Delay for the clip path to start after the text */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* Cover the entire area */
  background-color: rgb(15, 68, 19); /* Green color with 50% opacity */
  clip-path: polygon(0 0, 40% 0, 60% 100%, 0% 100%);
  z-index: 0; /* Ensure the overlay stays behind the content */
}

@media (max-width: 600px) {

  .headingpci::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Cover the entire area */
    background-color: rgb(15, 68, 19); /* Green color with 50% opacity */
    clip-path: none;
    z-index: 0; /* Ensure the overlay stays behind the content */
  }

}
/**/
.headingall {
  animation: slideIn 1s ease forwards; /* Adjust duration and easing as needed */
  position: relative;
  background-color: rgb(164, 163, 163); /* Fallback background color */
  background-image: url('../img/img/bg4.jpg'); /* Background image */
  background-size: cover;
  background-position: center;
  width: 100%;
  padding: 50px 0; /* Adjust padding as needed */
}
 
.headingall::before {
  animation: slideIn 1s ease forwards; /* Same animation for the clip path */
  animation-delay: 0.5s; /* Delay for the clip path to start after the text */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* Cover the entire area */
  background-color: rgb(15, 68, 19); /* Green color with 50% opacity */
  clip-path: polygon(0 0, 40% 0, 60% 100%, 0% 100%);
  z-index: 0; /* Ensure the overlay stays behind the content */
}

@media (max-width: 600px) {

  .headingall::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Cover the entire area */
    background-color: rgb(15, 68, 19); /* Green color with 50% opacity */
    clip-path: none;
    z-index: 0; /* Ensure the overlay stays behind the content */
  }

}

.headingh {
  animation: slideIn 1s ease forwards; /* Adjust duration and easing as needed */
  position: relative;
  background-color: rgb(164, 163, 163); /* Fallback background color */
  background-image: url('../img/pages/heavya.png'); /* Background image */
  background-size: cover;
  background-position: center;
  width: 100%;
  padding: 50px 0; /* Adjust padding as needed */
}
 
.headingh::before {
  animation: slideIn 1s ease forwards; /* Same animation for the clip path */
  animation-delay: 0.5s; /* Delay for the clip path to start after the text */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* Cover the entire area */
  background-color: rgb(15, 68, 19); /* Green color with 50% opacity */
  clip-path: polygon(0 0, 40% 0, 60% 100%, 0% 100%);
  z-index: 0; /* Ensure the overlay stays behind the content */
}


@media (max-width: 600px) {

  .headingh::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Cover the entire area */
    background-color: rgb(15, 68, 19); /* Green color with 50% opacity */
    clip-path: none;
    z-index: 0; /* Ensure the overlay stays behind the content */
  }
}

.headingr {
  animation: slideIn 1s ease forwards; /* Adjust duration and easing as needed */
  position: relative;
  background-color: rgb(164, 163, 163); /* Fallback background color */
  background-image: url('../img/pages/riggingB.png'); /* Background image */
  background-size: cover;
  background-position: center;
  width: 100%;
  padding: 50px 0; /* Adjust padding as needed */
}
 
.headingr::before {
  animation: slideIn 1s ease forwards; /* Same animation for the clip path */
  animation-delay: 0.5s; /* Delay for the clip path to start after the text */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* Cover the entire area */
  background-color: rgb(15, 68, 19); /* Green color with 50% opacity */
  clip-path: polygon(0 0, 40% 0, 60% 100%, 0% 100%);
  z-index: 0; /* Ensure the overlay stays behind the content */
}

@media (max-width: 600px) {

  .headingr::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Cover the entire area */
    background-color: rgb(15, 68, 19); /* Green color with 50% opacity */
    clip-path: none;
    z-index: 0; /* Ensure the overlay stays behind the content */
  }
}



.headingt {
  animation: slideIn 1s ease forwards; /* Adjust duration and easing as needed */
  position: relative;
  background-color: rgb(164, 163, 163); /* Fallback background color */
  background-image: url('../img/pages/rentala.jpg'); /* Background image */
  background-size: cover;
  background-position: center;
  width: 100%;
  padding: 50px 0; /* Adjust padding as needed */
}
 
.headingt::before {
  animation: slideIn 1s ease forwards; /* Same animation for the clip path */
  animation-delay: 0.5s; /* Delay for the clip path to start after the text */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* Cover the entire area */
  background-color: rgb(15, 68, 19); /* Green color with 50% opacity */
  clip-path: polygon(0 0, 40% 0, 60% 100%, 0% 100%);
  z-index: 0; /* Ensure the overlay stays behind the content */
}
@media (max-width: 600px) {

  .headingt::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Cover the entire area */
    background-color: rgb(15, 68, 19); /* Green color with 50% opacity */
    clip-path: none;
    z-index: 0; /* Ensure the overlay stays behind the content */
  }
}

.headingstf {
  animation: slideIn 1s ease forwards; /* Adjust duration and easing as needed */
  position: relative;
  background-color: rgb(164, 163, 163); /* Fallback background color */
  background-image: url('../img/pages/stuffa.png'); /* Background image */
  background-size: cover;
  background-position: center;
  width: 100%;
  padding: 50px 0; /* Adjust padding as needed */
}
 
.headingstf::before {
  animation: slideIn 1s ease forwards; /* Same animation for the clip path */
  animation-delay: 0.5s; /* Delay for the clip path to start after the text */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* Cover the entire area */
  background-color: rgb(15, 68, 19); /* Green color with 50% opacity */
  clip-path: polygon(0 0, 40% 0, 60% 100%, 0% 100%);
  z-index: 0; /* Ensure the overlay stays behind the content */
}
@media (max-width: 600px) {

  .headingstf::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Cover the entire area */
    background-color: rgb(15, 68, 19); /* Green color with 50% opacity */
    clip-path: none;
    z-index: 0; /* Ensure the overlay stays behind the content */
  }
}


.page-title .headings {
  padding: 190px 0;
  border-top: 1px solid color-mix(in srgb, var(--accent-color), transparent 80%);
}
.page-title .headingsa {
  padding: 190px 0;
  border-top: 1px solid color-mix(in srgb, var(--accent-color), transparent 80%);
}

.page-title .headingp {
  padding: 190px 0;
  border-top: 1px solid color-mix(in srgb, var(--accent-color), transparent 80%);
}

/**/
.page-title .headingpl {
  padding: 190px 0;
  border-top: 1px solid color-mix(in srgb, var(--accent-color), transparent 80%);
}

/**/
.page-title .headingpi {
  padding: 190px 0;
  border-top: 1px solid color-mix(in srgb, var(--accent-color), transparent 80%);
}

/**/
.page-title .headingpin {
  padding: 190px 0;
  border-top: 1px solid color-mix(in srgb, var(--accent-color), transparent 80%);
}

/**/
.page-title .headingpc {
  padding: 190px 0;
  border-top: 1px solid color-mix(in srgb, var(--accent-color), transparent 80%);
}

/**/
.page-title .headingpci {
  padding: 190px 0;
  border-top: 1px solid color-mix(in srgb, var(--accent-color), transparent 80%);
}
.page-title .headingall {
  padding: 190px 0;
  border-top: 1px solid color-mix(in srgb, var(--accent-color), transparent 80%);
}
.page-title .headingh {
  padding: 190px 0;
  border-top: 1px solid color-mix(in srgb, var(--accent-color), transparent 80%);
}

.page-title .headingr {
  padding: 190px 0;
  border-top: 1px solid color-mix(in srgb, var(--accent-color), transparent 80%);
}

.page-title .headingt {
  padding: 190px 0;
  border-top: 1px solid color-mix(in srgb, var(--accent-color), transparent 80%);
}

.page-title .headingstf {
  padding: 190px 0;
  border-top: 1px solid color-mix(in srgb, var(--accent-color), transparent 80%);
}

.containers {
  position: relative;
  z-index: 1; /* Ensure the content is above the overlay */
}

.page-titless .headingsss {
  padding: 30px 0;
  border-top: 1px solid color-mix(in srgb, var(--accent-color), transparent 80%);
}

.page-titless .headingsss h1 {
  font-size: 55px;
  font-weight: 700;
}

.page-titless .headingsss {
  padding: 80px 0;
  border-top: 1px solid color-mix(in srgb, var(--accent-color), transparent 80%);
}

.page-titless .headingsss h1 {
  font-size: 55px;
  font-weight: 700;
}




/*  */

.page-titlesss .headingssss {
  padding: 30px 0;
  border-top: 1px solid color-mix(in srgb, var(--accent-color), transparent 100%);
}

.page-titlesss .headingssss h1 {
  font-size: 55px;
  font-weight: 700;
}

.page-titlesss .headingssss {
  padding: 10px 0;
}

.page-titlesss .headingssss h1 {
  font-size: 55px;
  font-weight: 700;
}


.breadcrumbs li{
 padding-top: 32px;
}
.breadcrumbs ol{
  padding-right: 32px;
}


/* Pulsating Play Button
------------------------------*/
.pulsating-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: relative;
  overflow: hidden;
}

.pulsating-play-btn:before {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  animation-delay: 0s;
  animation: pulsate-play-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);
}

.pulsating-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);
}
.home-img img
.pulsating-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;
}

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

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

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

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

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


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

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


.cform select:checked option:hover{

background-color: red;
}

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

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


/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  color: var(--default-color);
  transition: all .5s ease;
  z-index: 997;
  background-color: var(--background-color);
  margin-top: 5px;
  margin-bottom: 5px;
}


.header .topbar {
  background-color: var(--accent-color);
  height: 0;
  padding: 0;
  font-size: 14px;
  transition: all 0.5s ease;
  
  
}

.header .topbar .contact-info i {
  font-style: normal;
  color: var(--contrast-color);
}

.header .topbar .contact-info p {
  padding-top: 15px;
  padding-left: 5px;
  color: var(--contrast-color);
}

.header .topbar .contact-info i a,
.header .topbar .contact-info p {
  padding-left: 5px;
  color: var(--contrast-color);
}

@media (max-width: 768px) {

  .header .topbar .contact-info i a,
  .header .topbar .contact-info p {
    font-size: 8px;
  }
}

@media (max-width: 575px) {
  .header .topbar .contact-info i a,
  .header .topbar .contact-info p {
      font-size: 9px;             /* readable but compact */
      white-space: normal;        /* allow wrapping */
      word-break: break-word;     /* wrap long text if needed */
      display: inline-block;      /* help text flow in tight spaces */
  }
}

@media (max-width: 375px) {

  .header .topbar .contact-info i a,
  .header .topbar .contact-info p {
    font-size: 9px;
    white-space: normal;        /* allow wrapping */
    word-break: break-word;     /* wrap long text if needed */
    display: inline-block;      /* help text flow in tight spaces */
  }
}

@media (max-width: 320px) {

  .header .topbar .contact-info i a,
  .header .topbar .contact-info p {
    font-size: 8px;
    white-space: normal;        /* allow wrapping */
    word-break: break-word;     /* wrap long text if needed */
    display: inline-block;      /* help text flow in tight spaces */
  }
}

.header .topbar .contact-info i a {
  line-height: 0;
  transition: 0.3s;
}

.header .topbar .contact-info i a:hover {
  color: var(--contrast-color);
  text-decoration: underline;
}

.header .topbar .social-links a {
  color: color-mix(in srgb, var(--contrast-color), transparent 40%);
  line-height: 0;
  transition: 0.3s;
  margin-left: 20px;
}

.header .topbar .social-links a:hover {
  color: var(--contrast-color);
}

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

@media (max-width: 1024px) {
  
  .header .logo {
    max-width: 80%;
  }

  .header .logo img {
    max-width: 70%;
    max-height: 50px;
    margin-left: 280px;
  }
}

@media (max-width: 768px) {
  
  .header .logo {
    max-width: 80%;
  }

  .header .logo img {
    max-width: 70%;
    max-height: 50px;
    margin-left: 170px;
  }
}

@media (max-width: 450px) {
  
  .header .logo {
    max-width: 80%;
  }

  .header .logo img {
    max-width: 70%;
    max-height: 50px;
    margin-left: 45px;
  }
}

@media (max-width: 375px) {

  .header .logo {
    max-width: 80%;
  }

  .header .logo img {
    max-width: 70%;
    max-height: 50px;
    margin-left: 30px;
  }
}

@media (max-width: 375px) {

  .swiper-slide img {
    zoom: 85%;
  }
}



.image-slider .swiper-slide {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-slider .swiper-slide img {
  max-width: 100%;
  max-height: 500px;
  object-fit: cover;
}

.image-slider .swiper-button-next,
.image-slider .swiper-button-prev {
  color: #1b591b; /* Adjust color as needed */
}

.hero .swiper-button-next,
.hero .swiper-button-prev {
    color: #ffffff; /* Adjust color as needed */
    width: 35px; /* Adjust size */
    height:35px; /* Adjust size */
    /* border-radius: 50%; Optional: make them circular */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 25px;
    z-index: 10; /* Ensure they are above other elements */
    border-radius: 0px;
    background-color: var(--default-color);
    
}
@media (max-width: 600px) {
  .hero .swiper-button-next,
  .hero .swiper-button-prev {
    padding: 0px;
}
}


.swiper-pagination-bullet-active {
  /* opacity: 1; */
  background: green; /* Set the background color to green */
}
/* Change the next button icon */
.swiper-button-next::after {
  content: '\f054'; /* Unicode for Font Awesome right arrow */
  font-family: 'Font Awesome 5 Free'; /* Font Awesome 5 */
  font-weight: 900; /* Make sure the icon is bold */
  font-size: 24px; /* Adjust size as needed */
  color: var(--h-color); /* Icon color */
}

/* Change the previous button icon */
.swiper-button-prev::after {
  content: '\f053'; /* Unicode for Font Awesome left arrow */
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 24px;
  color: var(--h-color);
}



.image-slider .swiper-pagination-bullet-active {
  background-color: #1b591b; /* Adjust color as needed */
  color: #1b5e20;
}

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


.image-container {
  position: relative; /* Position relative to contain the overlay */
  overflow: hidden; /* Hide overflow to ensure the overlay doesn't exceed the image */
}

.image-container img {
  display: block; /* Ensures the image is treated as a block element */
  width: 100%; /* Make sure the image takes the full width */
  height: auto; /* Maintain aspect ratio */
}

.overlay {
  position: absolute; /* Position the overlay absolutely within the container */
  bottom: 0; /* Align to the bottom */
  left: 0; /* Align to the left */
  width: 100%; /* Full width */
  height: 80px; /* Set a specific height for the overlay */
  background-color: rgba(0, 0, 0, 0.7); /* White background with 50% opacity */
  opacity: 1; /* Make overlay visible by default */
  transition: opacity 0.3s ease; /* Smooth transition for hover effect */
}

.gallery-item:hover .overlay {
  opacity: 0; /* Hide overlay on hover */
}

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

.header .cta-btn,
.header .cta-btn:focus {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-size: 14px;
  padding: 8px 25px;
  margin: 0 0 0 30px;
  border-radius: 50px;
  transition: 0.3s;
}

.header .cta-btn:hover,
.header .cta-btn:focus:hover {
  color: var(--contrast-color);
  background: color-mix(in srgb, var(--accent-color), transparent 15%);
}



@media (max-width: 1200px) {
  .header .logo {
    order: 1;
    }
  }
  
  @media (max-width: 420px) {
    .header .logo img {
            max-height: 45px;
            margin-right: 8px;
        }
  }

  .header .cta-btn {
    order: 2;
    margin: 0 15px 0 0;
    padding: 6px 15px;
  }

  .header .navmenu {
    order: 3;
  }

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

.scrolled .header .topbar {
  height: 30px;
  visibility: visible;
  overflow: hidden;
}

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

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

  .navmenu li {
    position: relative;
  }

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

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

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-color-black);
    font-size: 20px;
    padding: 0 2px;
    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: var(--nav-hover-color);
  }

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

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

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

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

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

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

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

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

/* 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;
    list-style: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-mobile-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
  }

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

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

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

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

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

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

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

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

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

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

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

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

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/

.footer {
  color: #000000;
  /* background-color: var(--accent-color); */
  border-top: 1px solid color-mix(in srgb, #000000, transparent 75%);
  font-size: 14px;
  position: relative;
}

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

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

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

.footer .footer-about .logo span {
  color: #000000;
  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: 35px;
  height: 35px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, #000000, transparent 50%);
  font-size: 16px;
  color: color-mix(in srgb, #000000, transparent 20%);
  margin-right: 10px;
  transition: 0.3s;
}

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

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

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

@media (max-width: 426px) {

  .footer .footer-links .img-fluid{
    max-width: 50%;
    height: auto;
  }
}

@media (max-width: 376px) {

  .footer .footer-links .img-fluid{
    max-width: 50%;
    height: auto;
  }
}

.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, #000000, transparent 30%);
  display: inline-block;
  line-height: 1;
}

.footer .footer-links ul a:hover {
  color: #000000;
}

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

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

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

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


.office-container {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  gap: 20px;
}

@media (max-width: 378px) {
  .office-container {
    flex-direction: column;
  }

  .office-cavite {
    order: 1;
  }

  .office-cebu {
    order: 2;
    
  }
  .parvo {
    order: 3;
    gap: 20px;  
  }
}

.office {
  flex: 1; /* Allow each office to take equal space */
  margin-right: 20px; /* Add some space between columns */
}

.office:last-child {
  margin-right: 0; /* Remove margin from the last column */
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  background: var(--background-color);
  transition: all 1s ease-out;
  display: flex; /* Use flexbox to center the content */ 
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
}

.preloader-logo {
  width: 100px; /* Adjust the width as needed */
  height: auto; /* Maintain aspect ratio */
}

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

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

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

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

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

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

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

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

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/

.history
{
  /* background-color: #1b5e20; */
  padding: 0px;
}

.ceo-message
{
  background-color: #7b7c7b;
  padding: 0px;
}


.banner{
  width: 100%;

}
.headings {
  position: relative;
  background-color: rgb(164, 163, 163); /* Fallback background color */
  background-image: url('../img/pages/serviceb.png'); /* Background image */
  background-size: cover;
  background-position: center;
  width: 100%;
  padding: 50px 0; /* Adjust padding as needed */
}





























.page-title {
  color: var(--default-color);
  background-color: #7b7c7b ;
  position: relative;
}

.page-titlex {
  opacity: 1 !important;
  background-color: #F8F9FA !important;
  position: relative;
}
.page-titles {
  background-color: #f8f8f8;
  position: relative;
}


.page-titless {
  color: var(--default-color);
  background-color: #7b7c7b ;
  position: relative;
}


.page-titlesss {
  color: var(--default-color);
  background-color: white ;
  position: relative;
}

.page-title .heading {
  padding: 80px 0;
  border-top: 1px solid color-mix(in srgb, var(--accent-color), transparent 80%);
}

.page-title .heading h1 {
  font-size: 38px;
  font-weight: 700;
}
.page-titlex .headingsc h1 {
  font-size:55px;
  font-weight: 700;
  color: #ffffff;
  position: relative;
}

.page-titles .headingss {
  padding: 40px 0;
}

.page-titles .headingss h1 {
  font-size: 55px;
  font-weight: 700;
}

@media (max-width: 600px) {
  
  .page-titles .headingss h1 {
  font-weight: 700;
  font-size: 40px;
  
}

}
.page-titles .headingsss {
  padding: 80px 0;
  border-top: 1px solid color-mix(in srgb, var(--accent-color), transparent 80%);
}

.page-titles .headingsss h1 {
  font-size: 55px;
  font-weight: 700;
}

/* sd */

.page-titlex .headings {
  padding: 190px 0;
  border-top: 1px solid color-mix(in srgb, var(--accent-color), transparent 80%);
}

.poppins-medium {
  font-family: "Poppins", serif;
  font-weight: 400;
  font-style: normal;
  line-height: 30px;
}

@media (max-width: 468px) {
  .poppins-medium {
    font-family: "Poppins", serif;
    font-size: 15px;
    font-weight: 400;
    font-style: normal;
    line-height: 30px;
  }
}

.poppins-extrabold {
  font-family: "Poppins", serif;
  font-weight: 800;
  font-style: normal;
}
.poppins-extrabolds {
  font-family: "Poppins", serif;
  font-weight: 800;
  font-style: normal;
  font-size: 70px;
}


.page-titless .headingsss {
  padding: 30px 0;
  border-top: 1px solid color-mix(in srgb, var(--accent-color), transparent 80%);
}

.page-titless .headingsss h1 {
  font-size: 55px;
  font-weight: 700;
}

.page-titless .headingsss {
  padding: 80px 0;
  border-top: 1px solid color-mix(in srgb, var(--accent-color), transparent 80%);
}

.page-titless .headingsss h1 {
  font-size: 55px;
  font-weight: 700;
}

.headingsc {
  animation: slideIn 1s ease forwards; /* Adjust duration and easing as needed */
  position: relative;
  background-color: rgb(164, 163, 163); /* Fallback background color */
  background-image: url('../img/pages/stuffa_1.png'); /* Background image */
  background-size: cover;
  background-position: center;
  width: 100vw;
  padding: 50px 0; /* Adjust padding as needed */
}

@media (max-width: 425px) {

  .headingsc {
    animation: slideIn 1s ease forwards; /* Adjust duration and easing as needed */
    position: relative;
    background-color: rgb(164, 163, 163); /* Fallback background color */
    background-image: url('../img/pages/stuffa_1.png'); /* Background image */
    background-size: cover;
    background-position: center;
    width: 100%;
    zoom: 75%;
    padding: 50px 0; /* Adjust padding as needed */
  }
}

@media (max-width: 375px) {

  .headingsc {
    animation: slideIn 1s ease forwards; /* Adjust duration and easing as needed */
    position: relative;
    background-color: rgb(164, 163, 163); /* Fallback background color */
    background-image: url('../img/pages/stuffa_1.png'); /* Background image */
    background-size: cover;
    background-position: center;
    width: 100%;
    zoom: 50%;
    padding: 50px 0; /* Adjust padding as needed */
  }

  .headingsc::before {
    animation: slideIn 1s ease forwards; /* Same animation for the clip path */
    animation-delay: 0.5s; /* Delay for the clip path to start after the text */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Cover the entire area */
    /* background-color: rgb(15, 68, 19); /* Green color with 50% opacity 
    clip-path: polygon(0 0, 40% 0, 60% 100%, 0% 100%); */
    z-index: 0; /* Ensure the overlay stays behind the content */
  }
}
 
.headingsc::before {
  animation: slideIn 1s ease forwards; /* Same animation for the clip path */
  animation-delay: 0.5s; /* Delay for the clip path to start after the text */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* Cover the entire area */
  /* background-color: rgb(15, 68, 19); /* Green color with 50% opacity 
  clip-path: polygon(0 0, 40% 0, 60% 100%, 0% 100%); */
  z-index: 0; /* Ensure the overlay stays behind the content */
}

.page-titlex .headingsc {
padding: 190px 0;
border-top: 1px solid color-mix(in srgb, var(--accent-color), transparent 80%);
}




/*  */

.page-titlesss .headingssss {
  padding: 30px 0;
  border-top: 1px solid color-mix(in srgb, var(--accent-color), transparent 100%);
}

.page-titlesss .headingssss h1 {
  font-size: 55px;
  font-weight: 700;
}

.page-titlesss .headingssss {
  padding: 10px 0;
}

.page-titlesss .headingssss h1 {
  font-size: 55px;
  font-weight: 700;
}
@media (max-width: 600px) {
  .page-titlesss .headingssss h1 {
      text-align: center;
      font-size: 25px;
      font-weight: 700;
  }
}

.page-titlex .headings h1 {
  font-size: 62px;
  font-weight: 700;
  padding-top: 30px;
  padding-bottom: 0px;
  padding-left: 20px;
  padding-right: 20px;
}
.page-titlex .headings p {
  font-size: 20px;
  font-weight: 700;
  padding-left: 20px;
  padding-right: 20px;
}
/* .breadcrums ol{
  padding-right: 32px;
}
.breadcrums li {
  padding-top: 32px;
} */

@media (max-width: 600px) {

  .page-titlex .headings h1 {
    text-align: center;
    font-size: 42px;
    font-weight: 700;
    padding: 20% 20% 0 0;
  }
  .page-titlex .headings p {
    text-align: center;
    font-size: 22px;
    font-weight: 600;
    padding: 20% 20% 0 0;
  }
  .page-titlex .headings {
    padding: 40px 0;
    
  }

}

.page-title nav {
  background-color: #1b5e20;
}
.page-titlex nav {
  background-color: #F8F9FA;
  color: #000000;
}
.page-titlex nav ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}
.page-titlex nav ol li+li {
  padding-left: 10px;
}

.page-titlex nav ol li+li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--h-color), transparent 70%);
}

.page-title nav ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

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

.page-title nav ol li+li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}
/* Add this to your existing CSS */
@keyframes slideIn {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 0.9;
  }
}


/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/


section {
  /* Common styles for all sections */
  color: var(--default-color);
  background-color: var(--background-color);
  scroll-margin-top: 72px;
}

.sectionz {
  /* Specific styles for .sectionz */
  padding-top: 45px;
  padding-bottom: 60px;
  overflow: clip;
}
.sectionzx {
  /* Specific styles for .sectionz */
  padding-top: 45px;
  padding-bottom: 60px;
  overflow: clip;
}
@media (max-width: 600px) {

  .sectionzx{
    padding-top: 0px;
  }
  
}
.section {
  /* Specific styles for .section */
  padding: 60px 0;
  overflow: clip;
}





@media (max-width: 1199px) {

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

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.info-section
{
  padding: 0px;

}

.section-title {
  text-align: center;
  padding-bottom: 60px;
  position: relative;
}

.section-titles2 {
  text-align: center;
  padding-bottom: 30px;
  position: relative;
}



.section-title h2 {
  font-size: 32px;
  font-weight: 500;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
}

.section-gallery {
  text-align: center;
  padding-bottom: 60px;
  position: relative;
}

.section-gallery h2 {
  font-size: 30px;
  font-weight: 500;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
}

@media (max-width: 375px) {
  .section-gallery h2 {
    font-size: 25px;
    font-weight: 500;
    margin-bottom: 20px;
    padding-bottom: 20px;
    position: relative;
  }
}

.section-logo {
  text-align: center;
  position: relative;
}

.section-logo h2 {
  font-size: 32px;
  font-weight: 500;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
}

.section-title h2:before {
  content: "";
  position: absolute;
  display: block;
  width: 160px;
  height: 1px;
  background: color-mix(in srgb, var(--default-color), transparent 60%);
  left: 0;
  right: 0;
  bottom: 1px;
  margin: auto;
}

.section-title h2::after {
  content: "";
  position: absolute;
  display: block;
  width: 60px;
  height: 3px;
  background: var(--heading-color);
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.section-gallery h2:before {
  content: "";
  position: absolute;
  display: block;
  width: 160px;
  height: 1px;
  background: color-mix(in srgb, var(--default-color), transparent 60%);
  left: 0;
  right: 0;
  bottom: 1px;
  margin: auto;
}

.section-gallery h2::after {
  content: "";
  position: absolute;
  display: block;
  width: 60px;
  height: 3px;
  background:var(--g-color);
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.section-logo h2:before {
  content: "";
  position: absolute;
  display: block;
  width: 160px;
  height: 1px;
  background: color-mix(in srgb, var(--default-color), transparent 60%);
  left: 0;
  right: 0;
  bottom: 1px;
  margin: auto;
}

.section-logo h2::after {
  content: "";
  position: absolute;
  display: block;
  width: 60px;
  height: 3px;
  background: var(--g-color);
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}


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

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

@media (max-width: 375px) {
  #section .gallery h2 {
    font-size: 15px;
  }
}


/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  /* width: 100%;
  min-height: 100vh; */
  /* padding: 80px 0; */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  /* overflow: hidden; */

}

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

.hero .container {
  z-index: 3;
}

.hero .welcome {
  position: absolute;
  top: 20%;
  right: 40%; /* Adjust this value to control horizontal positioning */
  max-width: 50%; /* Limit width to prevent overflow */
  color: #ffffff; /* White text color for visibility */
  z-index: 2; /* Ensure it's above the image */
}

.hero .welcome h2 {
  margin: 0;
  font-size: 50px;
  font-weight: 700;
}

.hero .welcome p {
  font-size: 24px;
  margin: 0;
}

.hero .content {
  margin-top: 40px;
}

.hero .content .why-box {
  color: var(--contrast-color);
  background: var(--accent-color);
  padding: 30px;
  border-radius: 4px;
}

.hero .content .why-box h3 {
  color: var(--contrast-color);
  font-weight: 700;
  font-size: 34px;
  margin-bottom: 30px;
}

.hero .content .why-box p {
  margin-bottom: 30px;
}




.hero .content .why-box .more-btn {
  color: var(--contrast-color);
  background: color-mix(in srgb, var(--contrast-color), transparent 80%);
  display: inline-block;
  padding: 6px 30px 8px 30px;
  border-radius: 50px;
  transition: all ease-in-out 0.4s;
}

.hero .content .why-box .more-btn i {
  font-size: 14px;
}

.hero .content .why-box .more-btn:hover {
  background: var(--surface-color);
  color: var(--accent-color);
}

.hero .content .icon-box {
  text-align: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-color), transparent 20%);
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
  padding: 40px 30px;
  width: 100%;
}

.hero .content .icon-box i {
  font-size: 40px;
  color: var(--accent-color);
}

.hero .content .icon-box h4 {
  font-size: 20px;
  font-weight: 700;
  margin: 10px 0 20px 0;
}

.hero .content .icon-box p {
  font-size: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}
 */

.heros {
  width: 100%;
  min-height: calc(70vh - 70px);
  padding: 80px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

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

.heros .container {
  z-index: 3;
}

.heros .welcome h2 {
  margin: 0;
  font-size: 48px;
  font-weight: 700;
}

.heros .welcome p {
  font-size: 24px;
  margin: 0;
}

.heros .content {
  margin-top: 40px;
}

.heros .content .why-box {
  color: var(--contrast-color);
  background: var(--accent-color);
  padding: 30px;
  border-radius: 4px;
}

.heros .content .why-box h3 {
  color: var(--contrast-color);
  font-weight: 700;
  font-size: 34px;
  margin-bottom: 30px;
}

.heros .content .why-box p {
  margin-bottom: 30px;
}

.heros .content .why-box .more-btn {
  color: var(--contrast-color);
  background: color-mix(in srgb, var(--contrast-color), transparent 80%);
  display: inline-block;
  padding: 6px 30px 8px 30px;
  border-radius: 50px;
  transition: all ease-in-out 0.4s;
}

.heros .content .why-box .more-btn i {
  font-size: 14px;
}

.heros .content .why-box .more-btn:hover {
  background: var(--surface-color);
  color: var(--accent-color);
}

.heros .content .icon-box {
  text-align: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-color), transparent 20%);
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
  padding: 40px 30px;
  width: 100%;
}

.heros .content .icon-box i {
  font-size: 40px;
  color: var(--accent-color);
}

.heros .content .icon-box h4 {
  font-size: 20px;
  font-weight: 700;
  margin: 10px 0 20px 0;
}

.heros .content .icon-box p {
  font-size: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}
/* Mobile-first styles */
@media (max-width: 600px) {
  /* Styles for mobile devices */
  .hero .welcome h2 {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
  }
  
  .hero .welcome p {
    font-size: 14px;
    margin: 0;
  }

  .hero .welcome {
    position: absolute;
    top: 20%;
    right: 10%; /* Adjust this value to control horizontal positioning */
    max-width: 70%; /* Limit width to prevent overflow */
    color: #ffffff; /* White text color for visibility */
    z-index: 2; /* Ensure it's above the image */
  }
}

@media (max-width: 1024px) {
  /* Styles for tablets and small desktops */
  
}

@media (max-width: 1280px) {
  /* Styles for larger screens */
}
.welcome .btns {
  display: inline-block;
  padding: .5rem .8rem;
  background: var(--background-color);
  /* border-radius: 4rem; */
  box-shadow: none;
  border: 1px solid var(--default-color);
  font-size: 1rem;
  color: #000000;
  letter-spacing: .1rem;
  font-weight: 600;
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
}

.welcome .btns:hover {
  transform: scale(1.1); /* Zoom in by 10% */
  /* Optional: box-shadow for a glowing effect */
  box-shadow: 0 0 10px var(--h-color); /* Change this to your desired color */
}

@media (max-width: 600px) {
  .welcome .btns {
    display: inline-block;
    padding: .1rem .4rem;
    background: var(--background-color);
    /* border-radius: 4rem; */
    box-shadow: none;
    border: 1px solid var(--default-color);
    font-size: 1rem;
    color: #000000;
    letter-spacing: .1rem;
    font-weight: 600;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
  }
  
  .welcome .btns:hover {
    transform: scale(1.1); /* Zoom in by 10% */
    /* Optional: box-shadow for a glowing effect */
    box-shadow: 0 0 10px var(--h-color); /* Change this to your desired color */
  }
}
/*--------------------------------------------------------------
# Team Section 
--------------------------------------------------------------*/
/* .team{
  border: 5px solid red;
} */
.teamsection {
  min-height: 100vh;
  padding: 2rem 9% 2rem;
  border-top: 1px solid;
  position: relative;
}

.teamsection::before {
  content: '';
  position: absolute;
  top: 0; /* Position at the top of the section */
  left: 50%;
  transform: translateX(-50%);
  width: 80%; /* Adjust the width as needed (e.g., 50% of the container or fixed like 300px) */
  border-top: 1px solid var(--h-color);
}

.team .container{
  .container {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
  }
}

/*=============== CARD ===============*/
/* .team .container {
  height: 100vh;
  display: grid;
  place-items: center;
  margin-inline: 1.5rem;
  padding-block: 7rem;
} */

.card__article {
  position: relative;
  align-self: flex-end;
  display: flex;
  justify-content: center;
  margin-top: 20px;
 
}

.card__profile {
  width: 200px;
  height: 200px;
  background-color: var(--h-color);
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.card__mask {
  width: 100px;
  height: 100px;
  background-color: var(--h-color);
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.card__profile img, 
.card__mask img {
   width: 100%; /* Ensures the image fills the container's width */
  height: 100%; /* Ensures the image fills the container's height */
  object-fit: cover; /* Crops the image to fill the container */
  display: block; /* Prevents unwanted gaps below images */
}

.card__profile {
  /* border: 4px solid var(--accent-color); */
  box-shadow: 0 0 25px var(--h-color),
  /* 0 0 35px var(--heading-color), */
  0 0 55px var(--g-color);
  /* z-index: 5;
  transition: opacity .4s, transform .4s; */
}

.card__tooltip {
  position: absolute;
  bottom: -2rem;
  padding-bottom: 5rem;
  transition: opacity .4s, bottom .4s cubic-bezier(.6, -.5, .3, 1.5);
  pointer-events: none;
  opacity: 0;
}

.card__content {
  position: relative;
  width: calc(30vw - 5rem);
  /* height: calc(22.5vw - 3rem); */
  background-color: var(--accent-color);
  box-shadow: 0 16px 32px hsla(230, 50%, 20%, .1);
  padding: 1rem .5rem;
  border-radius: .5rem;
  margin-bottom: 25px;
}

.card__content::after {
  content: "";
  width: 32px;
  height: 32px;
  background-color: var(--accent-color);
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.75rem;
  margin-inline: auto;
  border-radius: .25rem;
  rotate: 45deg;
}

@media (max-width: 600px) {
  .card__tooltip .card__content {
    width: 100%;
  }
}

.card__header {
  display: flex;
  /* justify-content: space-between; */
  justify-content: center;
  align-items: center;
  /* border-bottom: 1px solid var(--background-color); */
  padding-bottom: .5rem;
  margin-bottom: .5rem;
}

.card__header span {
  color: var(--heading-color);
  font-weight: 500;
  font-size: large;
}

.card__social {
  display: flex;
  column-gap: .75rem;
}

.card__social a {
  font-size: 1.25rem;
  color: var(--g-color);
}

.card__image {
  width: 100px;
  height: 100px;
  position: relative;
  margin: 0 auto 1rem;
}

/* .card__status {
  width: 12px;
  height: 12px;
  background-color: var(--heading-color);
  position: absolute;
  top: .5rem;
  right: .75rem;
  border-radius: 50%;
  border: 2px solid var(--accent-color);
} */

.card__data {
  text-align: center;
}

.card__name {
  font-size: 21px;
  color: #f0dfcc;
  font-weight: 600;
  margin-bottom: .25rem;
}

.card__profession {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 2rem;
  color: #b8c0cc;
}

.card__button {
  display: inline-flex;
  align-items: center;
  column-gap: .5rem;
  color: var(--accent-color);
  font-weight: 500;
}

.card__button i {
  font-size: 1.25rem;
}

/* Scale profile image */
.card__article:hover .card__profile {
  transform: scale(.8);
  opacity: .7;
}

/* Show tooltip card */
.card__article:hover .card__tooltip {
  opacity: 1;
  pointer-events: initial;
  bottom: 4rem;
}




/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about .content h3 {
  font-size: 2rem;
  font-weight: 700;
}

@media (max-width: 768px) {

  .zooms {
    zoom: 50%;
  }
}

@media (max-width: 425px) {

  .zooms {
    zoom: 50%;
  }
}

@media (max-width: 375px) {

  .zooms {
    zoom: 50%;
  }
}

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

.about .content ul li {
  display: flex;
  align-items: flex-start;
  margin-top: 1px;
}

.about .content ul i {
  flex-shrink: 0;
  font-size: 48px;
  color: var(--accent-color);
  margin-right: 20px;
}

.about .content ul h5 {
  font-size: 18px;
  font-weight: 700;
}

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

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

.about .pulsating-play-btn {
  position: absolute;
  left: calc(50% - 47px);
  top: calc(50% - 47px);
}


/*--------------------------------------------------------------
# card after about Section
--------------------------------------------------------------*/

.card-container {
  display: flex;
  justify-content: center;
  position: relative;
  margin-top: -80px; /* Adjust this value to control how much the cards overlap */
  z-index: 1; /* Ensure cards are above the background */
}
@media (max-width: 600px) {
   .card-container{
    margin-top: 0px;
    display: contents;
   }
   
}

.custom-card {
  background-color: #ffffff; /* Card background color */
  color: var(--accent-color); /* Text color */
  padding: 15px 15px 15px 15px;
  margin: 0 15px; /* Space between cards */
  width: 350px; /* Fixed width for cards */
  height: auto; /* Fixed height for cards */
  box-shadow: 0px 5.75px 5.9px rgba(24, 24, 24, 0.066), 
              0px 5px 5.3px rgba(24, 24, 24, 0.077), 
              0px 5.5px 5.9px rgba(24, 24, 24, 0.079), 
              0px 5.1px 5.4px rgba(24, 24, 24, 0.086), 
              0px 5.7px 5.6px rgba(24, 24, 24, 0.104), 
              0px 4px 8px rgba(24, 24, 24, 0.14);
  transition: color 1s; /* Smooth transition for text color */
}
@media (max-width: 600px) {
  .custom-card{
    width: 290px;
    margin-top: 40px;
    justify-content: center;
   }
}
.custom-card svg {
  transition: fill 0.5s ease; /* Smooth transition for fill color */
  fill: #1b5e20; /* Default SVG color */
}

.custom-card:hover {
  background-color: var(--accent-color); /* Background color on hover */
  color: #ffffff; /* Text color on hover */
}

.custom-card:hover svg {
fill: #ffffff;
}

.custom-card:hover button{
  background-color: white;
  color: #1b5e20;
}

/*--------------------------------------------------------------
# Stats Section
--------------------------------------------------------------*/
.stats i {
  color: var(--contrast-color);
  background-color: var(--accent-color);
  box-shadow: 0px 2px 25px rgba(0, 0, 0, 0.1);
  width: 54px;
  height: 54px;
  font-size: 24px;
  border-radius: 50px;
  border: 2px solid var(--background-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.stats .stats-item {
  background-color: var(--surface-color);
  margin-top: -27px;
  padding: 30px 30px 25px 30px;
  width: 100%;
  position: relative;
  text-align: center;
  box-shadow: 0px 2px 35px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  z-index: 0;
}

.stats .stats-item span {
  font-size: 32px;
  display: block;
  margin: 10px 0;
  font-weight: 700;
  color: var(--heading-color);
}

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

/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.banner-b{
  background-image: url(../img/pages/servicea.png);
  background-repeat: no-repeat;
  background-size: cover;

}
.banner-c {
  background-image: url(../img/img/services_bg.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.services .service-item {
  background-color: var(--surface-color);
  text-align: center;
  /* border: 2px solid color-mix(in srgb, var(--accent-color), transparent 75%); */
  padding: 40px 20px;
  transition: all ease-in-out 0.3s;
  height: 100%;
 box-shadow:  0px 5.75px 5.9px rgba(24,24,24, 0.046),
  0px 5px 5.3px rgba(24,24,24, 0.057),
  0px 5.5px 5.9px rgba(24,24,24, 0.059),
  0px 5.1px 5.4px rgba(24,24,24, 0.066),
  0px 5.7px 5.6px rgba(24,24,24, 0.084),
  0px 4px 8px rgba(24,24,24, 0.12);
  /* border: 1px solid var(--accent-color); */
}

.services .service-item .icon {
  margin: 0 auto;
  width: 64px;
  height: 64px;
  background: var(--accent-color);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: 0.3s;
  transform-style: preserve-3d;
}

.services .service-item .icon i {
  color: var(--contrast-color);
  font-size: 28px;
  transition: ease-in-out 0.3s;
}

.services .service-item .icon::before {
  position: absolute;
  content: "";
  left: -8px;
  top: -8px;
  height: 100%;
  width: 100%;
  background: color-mix(in srgb, var(--accent-color), transparent 80%);
  border-radius: 5px;
  transition: all 0.3s ease-out 0s;
  transform: translateZ(-1px);
}

.services .service-item h3 {
  font-weight: 700;
  margin: 10px 0 15px 0;
  font-size: 22px;
}

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

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

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

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

.services .service-item:hover .icon::before {
  background: color-mix(in srgb, var(--background-color), transparent 70%);
}

.services .service-item:hover h3,
.services .service-item:hover p {
  color: var(--contrast-color);
}

/*--------------------------------------------------------------
# Appointment Section
--------------------------------------------------------------*/
.appointment .cform {
  width: 100%;
}

.appointment .cform .form-group {
  padding-bottom: 8px;
}

.appointment .cform input,
.appointment .cform textarea,
.appointment .cform select {
  color: var(--default-color);
  background-color: transparent;
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
  border-radius: 0;
  box-shadow: none;
  font-size: 14px;
  padding: 10px !important;
}

.appointment .cform input:focus,
.appointment .cform textarea:focus,
.appointment .cform select:focus {
  border-color: var(--accent-color);
}

.appointment .cform input::placeholder,
.appointment .cform textarea::placeholder,
.appointment .cform select::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.appointment .cform input,
.appointment .cform select {
  height: 44px;
}

.appointment .cform textarea {
  padding: 10px 12px;
}

.appointment .cform button[type=submit] {
  background: var(--accent-color);
  border: 0;
  padding: 10px 35px;
  color: #fff;
  transition: 0.4s;
  /* border-radius: 50px; */
}

.appointment .cform button[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color) 90%, white 15%);
}

/*--------------------------------------------------------------
# Departments Section
--------------------------------------------------------------*/
.departments {
  overflow: hidden;
  background-color: #1b5e20;
}

.departments .nav-tabs {
  border: 0;
}

.departments .nav-link {
  border: 0;
  padding: 12px 15px 12px 0;
  transition: 0.3s;
  color: var(--heading-color);
  border-radius: 0;
  border-right: 2px solid color-mix(in srgb, var(--default-color), transparent 90%);
  font-weight: 600;
  font-size: 15.5px;
  padding-left: 10px;
}

.departments .nav-link:hover {
  color: var(--accent-color);
  text-shadow: 0 0 10px rgb(253, 254, 253), 0 0 5px rgb(252, 255, 252), 0 0 10px rgb(254, 255, 254);
}


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

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

.departments .details h3 {
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 20px;
}

.departments .details p {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.departments .details p:last-child {
  margin-bottom: 0;
}

@media (max-width: 992px) {
  .departments .nav-link {
    border: 0;
    padding: 15px;
  }

  /* .departments .nav-link.active {

  } */
}

/*--------------------------------------------------------------
# Faq Section
--------------------------------------------------------------*/
.faq .faq-container .faq-item {
  background-color: var(--surface-color);
  position: relative;
  padding: 20px;
  margin-bottom: 15px;
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 75%);
  /* border-radius: 5px; */
  overflow: hidden;
}

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

.faq .faq-container .faq-item h3 {
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  margin: 0 30px 0 0;
  transition: 0.3s;
  cursor: pointer;
  display: flex;
  align-items: center;
}

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

.faq .faq-container .faq-item h3:hover {
  font-size: 1.3rem;
  /* font-weight: bold; */
  /* color: #1b5e20; Green text color */
  -webkit-text-stroke: .5px white; /* White border around text */
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.8); /* Glow effect */
  animation: animate-border 2s infinite; 
}


.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-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(--contrast-color);
}

.faq .faq-container .faq-active {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--contrast-color);
}

.faq .faq-container .faq-active h3,
.faq .faq-container .faq-active h3:hover {
  color: var(--contrast-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);
}

/*--------------------------------------------------------------
# s Section
--------------------------------------------------------------*/


/*--------------------------------------------------------------
# Gallery Section
--------------------------------------------------------------*/
/* Gallery Item Styling */
.gallery .gallery-item {
  overflow: hidden;
  border-right: 3px solid var(--background-color);
  border-bottom: 3px solid var(--background-color);
  position: relative; /* Needed for absolute positioning of overlays or effects */
}

/* Image Styling */
.gallery .gallery-item img {
  transition: all ease-in-out 0.8s; /* Slow down the transition to make it feel smoother */
  height: 350px; /* Fixed height */
  object-fit: cover; /* Ensure aspect ratio is maintained and images are cropped */
}

/* Slow-Motion Hover Effect */
.gallery .gallery-item:hover img {
  animation: slow-motion 3s ease-in-out infinite; /* Apply the keyframe animation on hover */
  transform: scale(1.1); /* Slight zoom effect on hover */
}

/* Keyframe for Slow-Mo Effect */
@keyframes slow-motion {
  0% {
    transform: scale(1); /* Start at normal size */
  }
  25% {
    transform: scale(1.05); /* Slightly zoom in */
  }
  50% {
    transform: scale(1.1); /* Zoom in more */
  }
  75% {
    transform: scale(1.05); /* Slightly zoom out */
  }
  100% {
    transform: scale(1); /* Return to original size */
  }
}


/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact{
  overflow: hidden;
  /* background-color: #1b5e20; */
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 50%);
}
.contact .info-item+.info-item {
  margin-top: 40px;
}

.contact .info-item i {
  color: var(--g-color);
  background: var(--g-color);
  font-size: 20px;
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  transition: all 0.3s ease-in-out;
  margin-right: 15px;
}

.contact .cform select {
  font-size: 14px; /* Match the font size of the input fields */
  padding: 10px 15px; /* Match the padding of the input fields */
  box-shadow: none; /* Remove any default shadow */
  border-radius: 0; /* Match the border radius of the input fields */
  color: var(--g-color); /* Text color */
  /* background-color: color-mix(in srgb, var(--accent-color), transparent 50%); /* Background color *
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 100%); Border color */
  /* border: 3px solid var(--g-color); */
  
  height: 44px; /* Match the height of the input fields */
}


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

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

.contact .cform {
  height: 100%;
}

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

.contact .cform input[type=text]:focus,
.contact .cform input[type=email]:focus,
.contact .cform input[type=number]:focus,
.contact .cform textarea:focus {
  border-color: var(--g-color);
}

.contact .cform input[type=text]::placeholder,
.contact .cform input[type=email]::placeholder,
.contact .cform input[type=number]::placeholder,
.contact .cform textarea::placeholder {
  color:var(--g-color);  
 


}

.contact .cform button[type=submit] {
  color: var(--g-color);
  background: var(--background-color);
  border: 0px solid var(--g-color);
  padding: 5px 15px;
  transition: 0.4s;
  width: 100%;

  /* border-radius: 50px; */
}

.contact .cform button[type=submit]:hover {
  background:var(--accent-color);
  color: var(--accent-color-color);
  border: 0;
}

/* .contact .form-check-label {
  color: var(--nav-color-black);
} */

/* General checkbox style */
input[type="checkbox"] {
  border: 2px solid var(--default-color);
  box-shadow: inset 0 0 2px var(--default-color); /* Inner shadow */
  transition: all 0.3s ease; /* Smooth transitions */
  cursor: pointer; /* Change cursor on hover to indicate interactivity */
  appearance: none; /* Remove default styling */
  width: 20px; /* Adjust width */
  height: 20px; /* Adjust height */
  position: relative; /* Position for the box-shadow */
  outline: none; /* Remove default focus outline */
}

/* Hover effect */
/* input[type="checkbox"]:hover {
  border-color: var(--default-color); /* Change border color on hover *
  box-shadow: inset 0 0 3px var(--h-color); Lighter shadow on hover
} */

/* Focus state */
input[type="checkbox"]:focus {
  box-shadow: 0 0 0 3px var(--default-color);
  /* inset 0 0 3px var(--default-color); Outer shadow with inner shadow */
}

/* Remove lingering focus styles when not needed */
input[type="checkbox"]:not(:focus) {
  box-shadow: inset 0 0 3px var(--h-color); /* Keep only the inner shadow */
}

/* Checked state */
input[type="checkbox"]:checked {
  background-color: #000000; /* Dark background when checked */
  border-color: var(--default-color); /* Dark border when checked */
}

/* Focus state when checked */
input[type="checkbox"]:checked:focus {
  box-shadow: 0 0 0 3px var(--default-color); 
  /* inset 0 0 3px var(--default-color); Maintain inner shadow */
}


/*--------------------------------------------------------------
# Starter Section Section

/* Logo Slider Section */
.logo-slider {
  padding: 10px 0;
}

.logo-container {
  width: 200px;  /* Fixed width */
  height: 100px; /* Fixed height */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  border-radius: 10px;
  margin: 10px;
  padding: 10px;
}

.logo-img {
  max-width: 100%; /* Ensure image doesn't exceed container width */
  max-height: 100%; /* Ensure image doesn't exceed container height */
  object-fit: contain; /* Maintain aspect ratio while fitting in container */
}

.logo-slider-wrapper {
  overflow: hidden;
}

.swiper-slide.gap-slide {
  height: 1px; /* Adjust this value to set the gap height */
  background-color: transparent; /* Optional: Set a background color if needed */
}

.tooltip-icon {
  position: relative;
  display: inline-block;
  /* margin-left: 5px; */
}

.tooltip-icon .tooltip-text {
  visibility: hidden;
  background-color: #000; /* background for contrast */
  color: #fff;             /* white text */
  text-align: center;
  padding: 6px 10px;
  border-radius: 4px;

  position: absolute;
  top: 120%;               /* shows tooltip *below* the icon */
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;

  opacity: 0;
  transition: opacity 0.3s ease;
  font-size: 12px;
  white-space: nowrap;
}

@media (max-width: 375px) {
    .tooltip-icon .tooltip-text {
  visibility: hidden;
    }
}

.tooltip-icon:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}