/*=============== GOOGLE FONTS ===============*/
/* @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'); */

/*=============== VARIABLES CSS ===============*/
:root {
  --header-height: 3.5rem;

  /*========== Colors ==========*/
  /*Color mode HSL(hue, saturation, lightness)*/
  --primary-color: hsl(118, 53%, 27%); /* #246921 */
  --primary-color-light: hsl(119, 60%, 35%);
  --primary-color-lighten: hsl(119, 80%, 50%);
  --primary-bgcolor: hsl(0, 0%, 92%);
  --primary-bgcolor-submenu: rgba(255, 255, 255, 0.8);
  --secondary-bgcolor-submenu: rgba(255,255,255, 0.7);
  --primary-bgcolor-opacity-light: rgba(255,255,255, 0.2);
  --primary-bgcolor-opacity-dark: rgba(0,0,0, 0.7);
  --black-color: #222;
  --gray-color: #3b3b3b;
  --white-color: #fff;
  --body-color: hsl(220, 100%, 97%);
  --section1-color: #f9f6f6;
  --section2-color: #bcd0bb;
  --section3-color: linear-gradient(90deg, rgba(255,228,79,1) 0%, rgba(255,233,111,1) 45%, rgba(255,237,134,1) 100%); /* rgb(255,228,79) */
  --section4-color: #f9f6f6;
  --section5-color: #eeb9d7;
  --section6-color: linear-gradient(90deg, rgba(31,36,45,1) 0%, rgba(31,36,60, 1) 45%, rgba(31,36,75, 1) 100%); /* rgb(31,36,45) */
  --section7-color: linear-gradient(90deg, rgba(255,228,79,1) 0%, rgba(255,233,111,1) 45%, rgba(255,237,134,1) 100%); /* rgb(255,228,79) */;
  --section8-color: #ff9a91;
  --section9-color: rgb(255, 175, 84);

  /*========== Font and typography ==========*/
  /*.5rem = 8px | 1rem = 16px ...*/
  --body-font: "Montserrat", sans-serif;
  --normal-font-size: .938rem;

  /*========== Font weight ==========*/
  --font-regular: 400;
  --font-semi-bold: 600;

  /*========== z index ==========*/
  --z-tooltip: 10;
  --z-fixed: 999;
}

/*========== Responsive typography ==========*/
@media screen and (min-width: 1024px) {
  :root {
    --normal-font-size: 1rem;
  }
}

/*=============== BASE ===============*/
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  background-color: var(--body-color);
  overflow-x: hidden;
  font-display: swap;
}

h2 {
  color: var(--primary-color);
  font-size: 1.8rem;
  font-weight: 600;
}
h2 span { color: var(--black-color); }

h3 {
  color: var(--gray-color);
  font-size: 1.5rem;
  font-weight: 500;
}
h3 span {
  color: rgb(197, 197, 197);
}

ul {
  list-style: none;
  /* Color highlighting when pressed on mobile devices */
  /*-webkit-tap-highlight-color: transparent;*/
}

p {
  font-size: 1.3rem;
  line-height: 1.6rem;
  font-weight: 400;
  color: var(--black-color);
}
p span { color: var(--primary-color); }

a {
  text-decoration: none;
}

.our-services-title { 
  color: var(--gray-color);
  font-size: 1.5rem;
  font-weight: 500; 
}

/* SCROLLBAR */
/* width */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  margin-bottom: 10px !important;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--primary-color);
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #a7a7a7;
}
/* END SCROLLBAR */


/*=============== REUSABLE CSS CLASSES ===============*/
/* SECTIONS COMMON */

section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow-x: hidden;
    padding: 30px 0px;
}

.first-section { padding-top: 90px !important; }

section h2, section h3, .our-services-title { position: relative; }

section h3, .our-services-title { font-weight: 400; font-size: 50px; color: #333; text-shadow: 3px 3px 5px black; }

section h2 { font-weight: 600; font-size: 45px; color: #246921; margin-bottom: 15px; /* text-shadow: 2px 2px 3px black; */ }

section p {
    position: relative;
    font-weight: 500;
    color: #707070;
}
section p span {
  color: var(--primary-color);
}

section p.section-caption {
    position: relative;
    font-size: 1.7rem;
    font-weight: 400 !important;
    color: #ffe02d;
    font-weight: bold;
    text-shadow: 2px 2px 3px #333;
    /* color: rgb(94, 51, 214); */
}

.section-container {
    display: flex;
    width: 100%;
    max-width: 1200px;
    justify-content: center;
    align-items: center;
    gap: 30px;
    padding: 30px 20px;
    overflow: hidden;
}

/* .not-hp-top-section { padding-top: 50px; } */

.section-content, .section-img {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    position: relative;
    /* width: 100%; */
}
.section-content { gap: 20px; }

.section-title-icon { 
  border-radius: 50%; 
  font-size: 2rem; 
  font-weight: 400;
  padding: 15px; 
  background-color: var(--primary-color); 
  color: var(--white-color); 
  text-shadow: 2px 2px 3px var(--black-color);
}

.service-details-title-icon { 
  border-radius: 50%; 
  font-size: 2rem; 
  padding: 15px; 
  font-weight: 400;
  text-shadow: 1px 1px 3px var(--white-color);
}

.service-details-caption { 
  line-height: 2rem !important;
}

section .btn-more {
    text-decoration: none;
    padding: 8px 15px;
    color: #246921;
    border: 1px solid #246921;
    background-color: transparent;
    margin-top: 1.5rem;
    border-radius: 5px;
    transition: .5s ease-in-out;
}
section .btn-more:hover {
    background-color: #246921;
    color: white;
}

section .animate { 
    filter: blur(5px);
    opacity: 0;
    transition: 1s; 
}
section.show-animate .animate { 
    filter: blur(0);
    opacity: 1;
}

/* section.show-animate .btn-more { opacity: 1; transform: scale(1); filter: blur(0); transition: opacity, transform filter; transition-delay: 1.5s; } */
/* END SECTIONS COMMON */

.container {
  max-width: 1200px;
  margin-inline: 1.5rem;
  padding: 0 20px;
}

.page-content-container {
  min-height: 335px;
}

.main-title { text-align: center; }
.page-title { 
  text-align: center;
  color: transparent; 
  position: absolute;
  top: 0;
}
.title-divider {
  width: 100px;
  height: 4px;
  border-radius: 2px;
  background-color: var(--primary-color);
  box-shadow: 2px 2px 5px var(--black-color);
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  margin-bottom: 50px;
}

.pages-section .title-divider { margin-bottom: 25px !important; margin-top: 10px !important; }

.img-50-50 {
  max-width: 400px;
}

/* MOBILE */
@media screen and (max-width: 800px) {

  .main-title { margin-top: 30px; }

  /* SECTIONS COMMON */
  .first-section { padding-top: 75px !important; }

  .section-container {
      flex-direction: column;
      padding: 30px 20px;
  }

  .section-title-icon { 
    font-size: 1.8rem; 
    font-weight: 400;
    padding: 10px; 
    text-shadow: 1px 1px 2px var(--black-color);
  }

  .service-details-title-icon { 
    border-radius: 50%; 
    font-size: 1.8rem; 
    padding: 10px; 
  }

  .not-hp-top-section {
    padding: 40px 20px;
  }

  section h3, .our-services-title { font-size: 40px; line-height: 40px; }

  section h2 { font-size: 40px; }

  .section-img > img {
      max-width: 90%;
      height: auto;
  }
}

/* MOBILE */
@media screen and (max-width: 600px) {
  .not-hp-top-section {
    padding: 20px;
  }
}

.not-found {
  position: relative;
  width: 100%;
  padding: 20px;
  min-height: 70vh;
  display: flex;
  gap: 15px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  background: var(--section7-color);
}

.not-found p {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  font-size: 16px;
  line-height: 22px;
}

.not-found p a {
  color: #246921;
  font-weight: normal;
  transition: .6s all ease-in-out;
}

.not-found p a:hover {
  font-weight: bold;
}