:root {
  --navbar: #304E0C;
  --primarycolor: #304E0C;
  --para-color: #424242;
  --service-bg:#ECF6DF;
  --card-backgrounds: linear-gradient(180deg, rgba(199,173,55,1) 0%, rgba(255,255,255,1) 22%);

  --cardhead-color: #1D1D1D;
  --cardpara-size: 18px;
  --cardfont-weight: 600;
}

body{
  font-family: Montserrat;
  font-weight: 500;
  font-size: 16px;
  line-height: 19.5px;
  letter-spacing: 0%;   
}

input[type="radio"]{
  filter: hue-rotate(220deg); 
}

/* navbar start */
.Navbar{
background-color: var(--navbar);
color: white;
margin: 0px 30px;
border-radius: 50px;
}


.nav-line {
position: relative;
}
.nav-line::after {
content: "";
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 2px;
background-color: #9AC339;
transition: width 0.3s;
}
.nav-line:hover::after {
width: 100%;
}
.active::after {
width: 100%;
}
.mobile-menu {
transform: translateX(-100%);
transition: transform 0.3s ease-in-out;
}
.mobile-menu.active {
transform: translateX(0);
}



@media screen and (max-width: 426px) {
.Navbar{
/* margin: 30px 0px; */
border-radius: 0px;
}
}
.bmi {
background: linear-gradient(45deg,#9AC339,#30530C);
position: fixed;
bottom: -40px;
right: 20px;
z-index: 40;
}


/* navbar end */

/* modal start */

@media (max-width: 640px) {
.bmi {
  bottom: 20px;
  right: 20px;
  padding: 10px 20px;
  font-size: 14px;
}
}


#closeModal {
outline: none;
}

#calculateBtn {
font-weight: 500;
}
/* modal end */

/* fitness and nutrition start */
.satellite-container {
position: relative;
width: 400px;
height: 400px;
}

.satellite1 {
position: absolute;
top: 55%;
left: 90%;
width: 128px;
height: 128px;
margin-top: -64px;
/* margin-left: -64px; */
/* animation: rotate1 20s linear infinite; */
z-index: 10;
}

.satellite2 {
position: absolute;
top: 11%;
left: 50%;
width: 128px;
height: 128px;
margin-top: -114px;
margin-left: -64px;
/* animation: rotate2 25s linear infinite; */
z-index: 10;
}

.satellite3 {
position: absolute;
top: 55%;
left: 55%;
width: 128px;
height: 128px;
margin-top: -64px;
margin-left: -314px;
animation: rotate3 30s linear infinite;
z-index: 10;
}

/* @keyframes rotate1 {
0% { transform: translate(200px, 0) rotate(0deg); }
100% { transform: translate(200px, 0) rotate(360deg); }
}

@keyframes rotate2 {
0% { transform: translate(0, -200px) rotate(0deg); }
100% { transform: translate(0, -200px) rotate(360deg); }
}

@keyframes rotate3 {
0% { transform: translate(-250px, 0) rotate(0deg); }
100% { transform: translate(-250px, 0) rotate(360deg); }
} */

.orbit-path-1 {
position: absolute;
width: 400px;
height: 400px;
top: 55%;
left: 50%;
transform: translate(-50%, -50%);
border: 3px dashed #FFA100;
border-radius: 50%;
z-index: 1;
}

.orbit-path-2 {
position: absolute;
width: 500px;
height: 500px;
top: 55%;
left: 50%;
transform: translate(-50%, -50%);
border: 3px dashed #304E0C;
border-radius: 50%;
z-index: 1;
}

.nav-line {
position: relative;
}
.nav-line::after {
content: "";
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 2px;
background-color: #9AC339;
transition: width 0.3s;
}
.nav-line:hover::after {
width: 100%;
}
.active::after {
width: 100%;
}
.mobile-menu {
transform: translateX(-100%);
transition: transform 0.3s ease-in-out;
}
.mobile-menu.active {
transform: translateX(0);
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
.satellite-container {
  width: 300px;
  height: 300px;
  margin: 0 auto;
}

.orbit-path-1 {
  width: 300px;
  height: 300px;
}

.orbit-path-2 {
  width: 380px;
  height: 380px;
}

.satellite1 {
  width: 96px;
  height: 96px;
  margin-top: -48px;
  margin-left: -12px;
}

.satellite2 {
  width: 96px;
  height: 96px;
  margin-top: -78px;
  margin-left: -48px;
}

.satellite3 {
  width: 96px;
  height: 96px;
  margin-top: -48px;
  margin-left: -218px;
}

/* @keyframes rotate1 {
  0% { transform: translate(150px, 0) rotate(0deg); }
  100% { transform: translate(150px, 0) rotate(360deg); }
}

@keyframes rotate2 {
  0% { transform: translate(0, -150px) rotate(0deg); }
  100% { transform: translate(0, -150px) rotate(360deg); }
}

@keyframes rotate3 {
  0% { transform: translate(-190px, 0) rotate(0deg); }
  100% { transform: translate(-190px, 0) rotate(360deg); }
} */

.Navbar{
  margin: 0px 10px;
  border-radius: 50px;
}
}

/* Even smaller screens */
@media (max-width: 480px) {

.Navbar{
  margin: 0px 0px;
  border-radius: 0px;
}
.satellite-container {
  width: 280px;
  height: 280px;
}

.orbit-path-1 {
  width: 250px;
  height: 250px;
}

.orbit-path-2 {
  width: 320px;
  height: 320px;
}

.satellite1 {
  width: 80px;
  height: 80px;
  margin-top: -40px;
  margin-left: -10px;
}

.satellite2 {
  width: 80px;
  height: 80px;
  margin-top: -60px;
  margin-left: -40px;
}

.satellite3 {
  width: 80px;
  height: 80px;
  margin-top: -40px;
  margin-left: -200px;
}

/* @keyframes rotate1 {
  0% { transform: translate(125px, 0) rotate(0deg); }
  100% { transform: translate(125px, 0) rotate(360deg); }
}

@keyframes rotate2 {
  0% { transform: translate(0, -125px) rotate(0deg); }
  100% { transform: translate(0, -125px) rotate(360deg); }
}

@keyframes rotate3 {
  0% { transform: translate(-160px, 0) rotate(0deg); }
  100% { transform: translate(-160px, 0) rotate(360deg); }
} */
}

/* fitness and nutrition end */




/* font styles start*/
.font1{
font-family: "Montserrat", serif;
}
.font2{
font-family: "Open Sans", serif;
}

.heading{
font-size: 48px;
font-weight: 700;
}
.sub-title{
font-size: 20px;
font-weight: 600;
}
.content-Heading{
font-size: 28px;
font-weight: 600;
}
.body-text{
font-size: 18px;
font-weight: 500;
}

@media (max-width: 480px) {
.heading{
  font-size: 20px;
}
.sub-title{
  font-size: 16px;
}
.content-Heading{
  font-size: 20px;
}
.body-text{
  font-size: 16px;
}
}
/* font styles end*/

.span-color{
color: #304E0C;
}



.service-header-line {
  width: 56px;
  height: 2px;
  background-color: #8cb929;
  margin-right: 12px;
  display: inline-block;
  vertical-align: middle;
}
.service-header {
  color: #3a5a0c;
  display: inline-flex;
  align-items: center;
  margin-bottom: 16px;
  font-weight: 600;
}
.slick-slide {
  padding: 0 10px;
}
.service-card {
  border-radius: 30px;
  /* overflow: hidden; */
  position: relative;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  height: 340px;
}
.service-card img {
  height: 100%;
  border-radius: 30px;
  width: 100%;
  /* object-fit: cover; */
  /* object-position: center; */
}
.service-overlay {
  position: absolute;

  border-radius: 0 0 30px 30px;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px 20px;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.7),
    rgba(0, 0, 0, 0.2),
    transparent
  );
  color: white;
}
.service-title {
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.4;
}
.custom-arrow {
  position: absolute;
  top: -25%;
  /* left: 10%; */
  /* transform: translateY(-50%); */
  width: 56px;
  height: 56px;
  background-color: #9ac339;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  z-index: 10;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.custom-arrow:hover {
  background-color: #8cb929;
}
.custom-arrow.prev {
  right: 150px;
}
.custom-arrow.next {
  right: 50px;
}
.custom-arrow.slick-disabled {
  opacity: 0.5;
  pointer-events: none;
}
/* Fix any Slick overrides causing button issues */
.custom-arrow:focus {
  background-color: #9ac339;
  color: white;
  outline: none;
}
.custom-arrow:active {
  background-color: #9ac339;
  color: white;
}

.gallery-slick-prev.inactive,
.gallery-slick-next.inactive {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
/* Adjust container padding for arrow visibility */
/* .carousel-container {
  padding: 0 40px;
} */
@media (max-width: 640px) {
  .custom-arrow {
    width: 56px;
    height: 56px;
    top: 110%;
  }
  .custom-arrow.prev {
    left: 30px;
  }
  .custom-arrow.next {
    right: 30px;
  }
  /* .carousel-container {
    padding: 0 25px;
  } */
}

/* gallery section start */
.gallery-section {
  background-color: #355e20;
  padding: 50px 0px;
  position: relative;
}

.gallery-title {
  font-size: 2rem;
  font-weight: bold;
  color: white;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
}

.gallery-title::after {
  content: "";
  display: inline-block;
  height: 2px;
  width: 2rem;
  background-color: #a3e635;
  margin-left: 0.5rem;
}

.gallery-subtitle {
  font-size: 1.2rem;
  color: white;
  margin-bottom: 2rem;
}

.gallery-slick-prev,
.gallery-slick-next {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #9bc148;
  border-radius: 50%;
  width: 56px;
  height: 56px;
  z-index: 10;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 18px;
  color: #fff;
  border: none;
}

.gallery-slick-prev {
  left: 10px;
}

.gallery-slick-next {
  right: 10px;
}

.slick-slide {
  padding: 0 10px;
}

.gallery-item img {
  width: 100%;
  height: 280px;
  border-radius:15px;
  object-fit: cover;
}

/* Add padding to the carousel container to ensure arrows don't overlay content */
.gallery-carousel {
  padding: 0 40px;
}
/* gallery section end */