.elementor-1390 .elementor-element.elementor-element-1243ed9{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--background-transition:0.3s;--padding-top:50px;--padding-bottom:30px;--padding-left:30px;--padding-right:30px;}.elementor-1390 .elementor-element.elementor-element-92d61c1{text-align:center;}.elementor-1390 .elementor-element.elementor-element-92d61c1 .elementor-heading-title{color:var( --e-global-color-80616aa );font-family:"Poppins", Sans-serif;font-size:18px;font-weight:500;text-transform:uppercase;}.elementor-1390 .elementor-element.elementor-element-9d517ea{text-align:center;}.elementor-1390 .elementor-element.elementor-element-9d517ea .elementor-heading-title{color:var( --e-global-color-78b2056 );font-family:"Poppins", Sans-serif;font-size:37px;font-weight:700;}.elementor-1390 .elementor-element.elementor-element-65048e0{text-align:center;}.elementor-1390 .elementor-element.elementor-element-65048e0 .elementor-heading-title{color:var( --e-global-color-text );font-family:"Poppins", Sans-serif;font-size:14px;font-weight:400;line-height:1.6em;}.elementor-1390 .elementor-element.elementor-element-66848ed{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--background-transition:0.3s;}@media(max-width:767px){.elementor-1390 .elementor-element.elementor-element-9d517ea .elementor-heading-title{font-size:33px;line-height:1.3em;}}/* Start custom CSS for html, class: .elementor-element-ad57f48 *//* Apply the Inter font family */
body {
  font-family: 'poppins', sans-serif;
}

/* Style for the hidden checkbox input */
input[type=checkbox] {
  height: 0;
  width: 0;
  visibility: hidden;
}

/* Style for the toggle switch labels */
label.switch-label {
  cursor: pointer;
  text-indent: -9999px;
  width: 60px; /* Small width for switch */
  height: 30px; /* Small height for switch */
  background: grey;
  display: block;
  border-radius: 50px;
  position: relative;
  transition: background 0.3s;
  margin: 0 10px; /* Space between switch and labels */
}

/* White circle on the toggle switch */
label.switch-label:after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  background: #fff;
  border-radius: 24px;
  transition: 0.3s;
}

/* Toggle switch when checked */
input:checked + label.switch-label {
  background: #bada55;
}

input:checked + label.switch-label:after {
  left: calc(100% - 3px);
  transform: translateX(-100%);
}

/* Style for the left and right labels of the toggle */
.toggle-label-left,
.toggle-label-right {
  font-size: 16px;
  line-height: 30px;
  color: #333;
}

.toggle-group {
  display: inline-flex;
  align-items: center;
  margin-right: 20px;
}

/* Flexbox styling for toggle-section */
.toggle-section {
  display: flex;
  justify-content: space-between; /* Add space between switches */
  align-items: center;
  margin-bottom: 20px; /* Add 20px margin below the toggle section */
  gap: 30px; /* Space between the two toggle switches */
}

/* Container visibility */
.content-container .container {
  display: none; /* Initially hide all containers */
}

.content-container .container.active {
  display: block; /* Show the active container */
}

/* Responsive styles for mobile devices */
@media screen and (max-width: 768px) {
  /* Adjust the toggle switches to stack on smaller screens */
  .toggle-section {
    flex-direction: column; /* Stack the toggle switches vertically */
    gap: 15px; /* Reduce gap between the stacked toggle switches */
    margin-bottom: 15px; /* Adjust bottom margin */
  }

  /* Reduce the size of the toggle switch on smaller screens */
  label.switch-label {
    width: 50px; /* Decrease switch width */
    height: 25px; /* Decrease switch height */
  }

  /* Reduce the size of the white circle inside the toggle */
  label.switch-label:after {
    width: 20px; /* Decrease width */
    height: 20px; /* Decrease height */
  }

  /* Adjust font size for the toggle labels on smaller screens */
  .toggle-label-left,
  .toggle-label-right {
    font-size: 14px; /* Smaller font size */
  }
}

@media screen and (max-width: 480px) {
  /* Further adjustments for very small screens */
  .toggle-section {
    gap: 10px; /* Further reduce gap between switches */
  }

  label.switch-label {
    width: 45px; /* Decrease switch width further */
    height: 24px; /* Decrease switch height further */
  }

  label.switch-label:after {
    width: 18px; /* Adjust width */
    height: 18px; /* Adjust height */
  }

  .toggle-label-left,
  .toggle-label-right {
    font-size: 12px; /* Even smaller font size for very small screens */
  }
}/* End custom CSS */