@import url("https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap");

/* MENU */

.menu-container {
  font-family: "Poppins", sans-serif;
  letter-spacing: 4px;
  font-size: 18px;
  background: linear-gradient(
    42deg,
     /* #e645f7,
    #9007a7,
    #4c048e,
    #25cae4,
    #56e6fd */
    #8644A3, 
    #4B0082, 
    #44064f
  );
  background-size: 1000% 1000%;

  -webkit-animation: AnimationName 26s ease infinite;
  -moz-animation: AnimationName 26s ease infinite;
  -o-animation: AnimationName 26s ease infinite;
  animation: AnimationName 26s ease infinite;
}
#navbarCenteredExample {
    display: flex;
    align-items: center; /* Ensures vertical alignment */
    gap: 15px; /* Adjust spacing between elements */
}

.navbar-nav .nav-item {
  margin: 0 15px;
    margin-top: -15px;
  color: white;
}

.navbar{
  background: linear-gradient(
    42deg,
    #8644A3, 
    #4B0082, 
    #44064f
    );
}
.navbar-nav .nav-link {
  display: flex;
  align-items: center;
  font-size: 0.9rem; /* Adjust as needed */
  padding: 0.5rem 1rem;
  justify-content: center;
  color: white;
}
.navbar-nav .nav-link:hover {
  color:#8644A3;
}

.get-started-btn {
  background:  #9c27b0;
  display: block;
  font-size: 0.9rem; /* Adjust as needed */
  padding: 10px;
  transition: 2s;
  width: 100%;
  text-decoration: none;
  color: #ffffff;
  border-radius: 10px;
  margin-bottom: 10px;
  text-align: center;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
  letter-spacing: 3px;
}

.get-started-btn:hover {
  color: rgb(91, 19, 102);
  background: #4B0082;
  -moz-box-shadow: 0 3px 5px #5a5959;
  -webkit-box-shadow: 0 3px 5px #5a5959;
  -o-box-shadow: 0 3px 5px #5a5959;
  -ms-box-shadow: 0 3px 5px #5a5959;
  box-shadow: 0 3px 5px #5a5959;
}

@media (max-width: 768px) {
  .navbar-nav .nav-item {
    margin: 10px 0; /* Stack items vertically */
  }
  .get-started-btn {
    width: 100%; /* Full width for buttons */
  }
  .menu-container {
    font-size: 14px; /* Smaller font size */
  }
}
.toggle-btns-container {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.toggle-btns {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;
  color: white;
  font-size: 18px;
}

.toggle-btn {
  padding: 12px 30px;
  background: #4a2c82;
  color: black;
  border: none;
  border-radius: 5px;
  font-weight: 600;
  transition: all 0.3s ease;
  width: 100%;
  max-width: 200px;
}

.toggle-btn:hover {
  background: #5d3a9b;
  transform: translateY(-2px);
}

@media (min-width: 768px) {
  .toggle-btns {
    flex-direction: row;
    gap: 30px;
  }
}

/********************************/

/* HEADER */

.custom-header {
  background-color: #4B0082;
  background-position: center;
  background-repeat: no-repeat;
  margin-top: 0px;
  height: 90vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.custom-header {
  background: linear-gradient(
    42deg,
     /* #e645f7,
    #9007a7,
    #4c048e,
    #25cae4,
    #56e6fd */
    #8644A3, 
    #4B0082, 
    #44064f
  );
  background-size: 1000% 1000%;

  -webkit-animation: AnimationName 26s ease infinite;
  -moz-animation: AnimationName 26s ease infinite;
  -o-animation: AnimationName 26s ease infinite;
  animation: AnimationName 26s ease infinite;
}

@-webkit-keyframes AnimationName {
  0% {
    background-position: 0% 68%;
  }
  50% {
    background-position: 100% 33%;
  }
  100% {
    background-position: 0% 68%;
  }
}
@-moz-keyframes AnimationName {
  0% {
    background-position: 0% 68%;
  }
  50% {
    background-position: 100% 33%;
  }
  100% {
    background-position: 0% 68%;
  }
}
@-o-keyframes AnimationName {
  0% {
    background-position: 0% 68%;
  }
  50% {
    background-position: 100% 33%;
  }
  100% {
    background-position: 0% 68%;
  }
}
@keyframes AnimationName {
  0% {
    background-position: 0% 68%;
  }
  50% {
    background-position: 100% 33%;
  }
  100% {
    background-position: 0% 68%;
  }
}

.text-img-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-left: 20px;
  padding-right: 20px;
}

.header-text-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding-right: 20px;
  width: 40%;
}

.title {
  padding-top: 10px;
  font-family: "Poppins", sans-serif;
  letter-spacing: 3px;
  font-size: 75px;
  font-weight: 500;
  text-align: center;
  margin: 0 auto;
  color: white;
}

.koskhol {
  font-family: "Poppins", sans-serif;
  letter-spacing: 3px;
  font-size: 35px;
  text-align: center;
  color: white;
  height: 20vh;
}

.subtitle {
  font-family: "Poppins", sans-serif;
  letter-spacing: 3px;
  font-weight: 600;
  text-align: center;
  margin: 0 auto;
  font-size: 40px;
  padding-top: 20px;
  color: white;
}

.tf-btn-header {
  text-align: center;
  margin: 0 auto;
  width: 15%;
  padding-top: 50px;
  padding-bottom: 20px;
  width: 40%;
  padding-top: 20px;
}

/* Style The Dropdown Button */
.dropbtn {
  color: rgb(43, 43, 43);
  padding: 20px;
  font-size: 20px;
  cursor: pointer;
  background-color: transparent;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
  transition: 2s;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 300px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  transition: 2s;
  border-radius: 20px;
  padding: 10px;
}

/* Links inside the dropdown */
.dropdown-content a {
  border-radius: 20px;
  color: black;
  margin: 2px;
  padding: 20px;
  text-decoration: none;
  display: block;
  transition: 2s;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
  background-color: #e2aff3;
}

.dropdown-item:active, .dropdown-item.active {
  background-color:    #7416c0; /* Purple background */
  color: white; /* White text */
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

#typing-text {
  width: 500px;
  height: 30px;
  font-size: 15px;
  border: solid 1px #c9c9c9;
  color: #000000;
  background-color: #ffffff;
  text-align: left;
  font-family: Arial;
  font-weight: bold;
  padding: 5px;
  resize: none;
  outline: none;
  box-sizing: border-box;
}

.custom-btn-tff {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: white;
  border-radius: 12px;
  margin-bottom: 10px;
  text-align: center;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
  font-size: 25px;
  transition: 2s;
}

.custom-btn-tff:hover {
  color: red;
  padding: 15px;
  font-size: 30px;
  background-color: #5005a5;
  -webkit-box-shadow: -1px -1px 42px -3px rgba(245, 245, 245, 1);
  -moz-box-shadow: -1px -1px 42px -3px rgba(245, 245, 245, 1);
  box-shadow: -1px -1px 42px -3px rgba(245, 245, 245, 1);
}

.custom-btn-tf {
  background: #b61277;
  display: block;
  padding: 10px;
  text-decoration: none;
  color: white;
  border-radius: 12px;
  margin-bottom: 10px;
  text-align: center;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
  letter-spacing: 3px;
  font-size: 25px;
  -moz-box-shadow: 0 3px 5px #d1caca;
  -webkit-box-shadow: 0 3px 5px #d1caca;
  -o-box-shadow: 0 3px 5px #d1caca;
  -ms-box-shadow: 0 3px 5px #d1caca;
  box-shadow: 0 3px 5px #d1caca;
}

.custom-btn-tf-header {
  font-size: 35px;
}

.free-trial-container {
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  color: #1a686b;
}

.ft-header {
  color: white;
}

.custom-linkk {
  text-decoration: none;
  color: white;
}

.custom-btn-tf:hover {
  background: #a934a1;
}

.custom-link {
  text-decoration: none;
  color: white;
}

.custom-btn-tf:hover {
  background: #a934a1;
}

.header-img {
  height: auto;
  width: 60%;
  border-radius: 8px;
}

@media (max-width: 2320px) {
  .subtitle-danish {
    font-size: 35px;
  }
}

@media (max-width: 2100px) {
  .title {
    font-size: 70px;
  }

  .subtitle {
    font-size: 35px;
  }
}

@media (max-width: 1930px) {
  .tf-btn-header {
    width: 50%;
  }
}

@media (max-width: 1820px) {
  .custom-header {
    height: 600px;
  }

  .title {
    font-size: 60px;
  }

  .subtitle {
    font-size: 30px;
  }

  .custom-btn-tf-header {
    font-size: 30px;
  }
}

@media (max-width: 1610px) {
  .title {
    font-size: 50px;
  }

  .subtitle {
    font-size: 25px;
  }

  .custom-btn-tf-header {
    font-size: 25px;
  }

  .free-trial-container {
    font-size: 18px;
  }
}

@media (max-width: 1510px) {
  .custom-header {
    height: 550px;
  }

  .title {
    font-size: 50px;
  }

  .subtitle {
    font-size: 25px;
  }

  .free-trial-container {
    font-size: 16px;
  }
}

@media (max-width: 1400px) {
  .custom-header {
    height: 500px;
  }

  .title {
    font-size: 45px;
  }

  .subtitle {
    font-size: 20px;
  }

  .custom-btn-tf-header {
    font-size: 20px;
  }

  .free-trial-container {
    font-size: 14px;
  }
}

@media (max-width: 1200px) {
  .custom-header {
    height: 450px;
  }

  .header-text-container {
    padding: 0;
  }

  .text-img-container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .tf-btn-header {
    width: 50%;
  }
}

@media (max-width: 1110px) {
  .tf-btn-header {
    width: 60%;
  }

  .title {
    font-size: 40px;
  }

  .subtitle {
    font-size: 18px;
  }
}

@media (max-width: 1000px) {
  .text-img-container {
    flex-direction: column;
    justify-content: space-around;
  }

  .header-text-container {
    width: 70%;
    padding-right: auto;
  }

  .custom-header {
    height: auto;
    padding-top: 40px;
  }

  .header-img {
    width: 100%;
  }

  .title {
    font-size: 50px;
  }

  .subtitle {
    font-size: 25px;
  }

  .tf-btn-header {
    width: 40%;
  }

  .free-trial-container {
    font-size: 18px;
  }
}

@media (max-width: 950px) {
  .tf-btn-header {
    width: 50%;
  }
}

@media (max-width: 780px) {
  .custom-btn-tf {
    font-size: 20px;
  }
}

@media (max-width: 660px) {
  .header-text-container {
    width: 100%;
  }

  .text-img-container {
    padding-left: 5px;
    padding-right: 5px;
  }

  .title {
    font-size: 45px;
  }

  .subtitle {
    font-size: 20px;
  }

  .custom-btn-tf-header {
    font-size: 20px;
  }

  .tf-btn-header {
    width: 40%;
  }
}

@media (max-width: 510px) {
  .title {
    font-size: 40px;
  }

  .subtitle {
    font-size: 18px;
  }

  .custom-btn-tf-header {
    font-size: 18px;
  }

  .free-trial-container {
    font-size: 16px;
  }

  .tf-btn-header {
    width: 50%;
  }
}

@media (max-width: 400px) {
  .header-text-container {
    width: 100%;
  }

  .subtitle {
    font-size: 16px;
  }

  .tf-btn-header {
    width: 60%;
  }
}

/**********************************/

/* BODY-1 */

.body-1 {
  background: rgb(0, 198, 252);
  background: linear-gradient(
    90deg,
    rgba(0, 198, 252, 1) 35%,
    rgba(55, 125, 125, 1) 100%
  );
  display: flex;
  justify-content: space-around;
}

.text-container {
  width: 50%;
}

.title-2 {
  font-size: 60px;
  width: 80%;
  font-family: "Poppins", sans-serif;
  letter-spacing: 3px;
  font-weight: 600;
  text-align: center;
  margin: 0 auto;
  color: white;
  padding-top: 50px;
}

.custom-text {
  padding-top: 15px;
  font-size: 40px;
  font-weight: 300;
  width: 55%;
  margin-bottom: 20px;
  width: 80%;
}

@media (max-width: 2100px) {
  .text-container {
    width: 70%;
  }

  .title-2 {
    font-size: 45px;
  }

  .custom-text {
    font-size: 28px;
    width: 70%;
  }
}

@media (max-width: 1810px) {
  .text-container {
    width: 100%;
  }

  .title-2 {
    font-size: 42px;
  }

  .custom-text {
    font-size: 26px;
  }
}

@media (max-width: 1620px) {
  .title-2 {
    font-size: 35px;
    width: 70%;
  }

  .custom-text {
    font-size: 24px;
    width: 70%;
  }
}

@media (max-width: 1320px) {
  .text-container {
    width: 100%;
  }

  .title-2 {
    font-size: 30px;
  }

  .custom-text {
    font-size: 18px;
  }
}

@media (max-width: 1200px) {
  .title-2 {
    font-size: 30px;
    width: 80%;
  }

  .custom-text {
    font-size: 18px;
    width: 80%;
  }
}

/***************************/

/* BODY 1: IMAGES SLIDESSHOW */

.mySlides {
  display: none;
}

img {
  vertical-align: middle;
}

.slideshow-container {
  padding: 50px 100px 50px 10px;
  max-width: 1000px;
  position: relative;
  margin: auto;
  width: 100%;
}

.fade {
  animation-name: fade;
  animation-duration: 3s;
}

@keyframes fade {
  from {
    opacity: 0.4;
  }

  to {
    opacity: 1;
  }
}

@media (max-width: 970px) {
  .body-1 {
    flex-wrap: wrap;
  }

  .slideshow-container {
    padding: 50px 20px;
    max-width: 700px;
  }
}

@media (max-width: 850px) {
  .title-2 {
    width: 70%;
  }
}

@media (max-width: 600px) {
  .title-2 {
    width: 90%;
    font-size: 25px;
  }

  .custom-text {
    width: 90%;
    font-size: 14px;
  }
}

/************************/

/* PRICING */

.pricing-title {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  letter-spacing: 3px;
  color: #3b4747;
  font-size: 30px;
  text-align: center;
  color: #3a3a3b;
  padding-top: 30px;
  padding-bottom: 15px;
}

.pricing {
  font-family: "Poppins", sans-serif;
  color: #5d5d5f;
  margin: 30px 10px;
  display: flex;
  flex-wrap: wrap;
  font-size: 15px;
  font-weight: 300;
}

hr {
  height: 1px;
  background-color: #706f6f;
  border: none;
}

.column-1,
.column-2,
.column-3 {
  background: white;
  color: #2b3333;
  border: 1px solid white;
  padding: 10px;
  margin: 0 auto;
  border-radius: 10px;
  width: 30%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: start;
}

.column-1:hover,
.column-2:hover,
.column-3:hover {
  transform: translate3D(0, -1px, 0) scale(1.03);
}

.column-1 {
  box-shadow: 10px 10px 8px #f4d9e7;
}

.column-2 {
  box-shadow: 10px 10px 8px #bface2;
}

.column-3 {
  box-shadow: 10px 10px 8px #8d9eff;
}

.card-header {
  text-align: center;
  padding: 10px;
  height: 200px;
}

.plan-title {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  letter-spacing: 3px;
  color: #3b4747;
}

.custom-quote {
  font-size: 1.5rem;
  font-weight: bold;
}

.price {
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #3b4747;
}

.contact-us {
  font-size: 1.5rem;
  font-weight: bold;
}

.price-desc {
  font-family: "Poppins", sans-serif;
  color: #5d5d5f;
  font-size: 15px;
  font-weight: 300;
  margin-top: -7px;
  margin-bottom: 1vw;
}

p {
  margin-top: -7px;
  margin-bottom: 1vw;
}

.invisible {
  visibility: hidden;
  margin-bottom: 43px;
}

.btn-container {
  display: flex;
  justify-content: center;
}

.btn-price-1,
.btn-price-2,
.btn-price-3 {
  padding: 10px;
  width: 50%;
  text-decoration: none;
  color: white;
  font-weight: 400;
  border-radius: 12px;
  margin-bottom: 10px;
  text-align: center;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
  letter-spacing: 2px;
  -moz-box-shadow: 0 3px 5px #5a5959;
  -webkit-box-shadow: 0 3px 5px #5a5959;
  -o-box-shadow: 0 3px 5px #5a5959;
  -ms-box-shadow: 0 3px 5px #5a5959;
  box-shadow: 0 3px 5px #5a5959;
}

.btn-price-1:hover,
.btn-price-2:hover,
.btn-price-3:hover {
  background: #4B0082;
  color: white;
}

.btn-price-1 {
  background: #e384ff;
}

.btn-price-2 {
  background: #865dff;
}

.btn-price-3 {
  background: #3a1078;
}

.list-features {
  font-weight: 300;
  list-style: none;
  height: 400px;
}

.list-element {
  content: "✓";
}

.plus-ent-container {
  line-height: 1.3;
  text-align: center;
  color: #3b4747;
  font-size: 12px;
}

.ent-desc {
  color: #3b4747;
  font-size: 12px;
}

.ent-plan {
  color: white;
}

@media (max-width: 1100px) {
  .column-1 {
    width: 45%;
    margin-bottom: 20px;
  }

  .column-2 {
    width: 45%;
    margin-bottom: 20px;
  }

  .column-3 {
    width: 45%;
    margin-bottom: 20px;
  }
}

@media (max-width: 740px) {
  .price {
    font-size: 17px;
  }
}

@media (max-width: 650px) {
  .column-1 {
    width: 100%;
  }

  .column-2 {
    width: 100%;
  }

  .column-3 {
    width: 100%;
  }

  .price {
    font-size: 16px;
  }
}

/*Founder Quotes*/

.founder-free-trial-container > p:nth-child(1) {
  font-weight: bold;
  color: red;
  margin: 0;
  padding: 0;
}

.founder-free-trial-container > p:nth-child(2) {
  font-weight: 300;
  margin: 0;
  padding: 0;
}

/* Default styles for larger screens */
.founder-quotes-container {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding: 2rem;
  background-color: #4B0082; /* Adjust background color as needed */
  color: white;
}

.founder-quotes-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.founder-quotes-wrapper img {
  width: 300px; /* Adjust image size */
  height: auto;
  border-radius: 70%; /* Circular image */
  margin-left: 0rem; /* Add spacing between text and image */
}

.founder-quotes {
  font-size: 1.5rem;
  font-style: italic;
  text-align: center;
  margin-bottom: 1rem;
  line-height: 1.8; /* Increase line height for more vertical spacing */
  letter-spacing: 1px; /* Increase letter spacing for more horizontal spacing */
  word-spacing: 4px; /* Increase word spacing for more space between words */
}

.founder-quotes i {
  color: #9c27b0; /* Quote icon color */
}

.founder-quotes-container b {
  font-size: 1.2rem;
  display: block;
  text-align: center;
  margin-top: 1rem;
  letter-spacing: 1px; /* Increase letter spacing for more horizontal spacing */
  word-spacing: 4px; /* Increase word spacing for more space between words */
}

.tf-btn {
  text-align: center;
}

/* Mobile styles */
@media (max-width: 768px) {
  .founder-quotes-container {
    flex-direction: row; /* Keep side-by-side layout */
    padding: 1rem; /* Reduce padding */
    align-items: center; /* Center align items */
  }

  .founder-quotes-wrapper img {
    width: 150px; /* Smaller image for mobile */
    margin-left: 0rem; /* Add spacing between text and image */
  }

  .founder-quotes {
    font-size: 1.2rem; /* Smaller font size */
    margin-bottom: 0.5rem; /* Reduce spacing */
    text-align: left; /* Align text to the left */
    line-height: 1.8; /* Increase line height for more vertical spacing */
    letter-spacing: 1px; /* Increase letter spacing for more horizontal spacing */
    word-spacing: 4px; /* Increase word spacing for more space between words */
  }

  .founder-quotes-container b {
    font-size: 1rem; /* Smaller font size */
    text-align: left; /* Align text to the left */
    letter-spacing: 1px; /* Increase letter spacing for more horizontal spacing */
    word-spacing: 4px; /* Increase word spacing for more space between words */
  }

}
/*******************************/

/* BODY-2 */

.body-2 {
  background: rgb(138, 98, 222);
  background: linear-gradient(
    180deg,
    rgba(138, 98, 222, 1) 34%,
    rgba(255, 255, 255, 1) 100%
  );
}

.tf-btn {
  text-align: center;
  margin: 0 auto;
  width: 15%;
  padding-top: 50px;
  padding-bottom: 20px;
}

.title-3 {
  font-size: 30px;
  width: 70%;
  padding-top: 50px;
}

@media (max-width: 1500px) {
  .tf-btn {
    width: 20%;
  }
}

@media (max-width: 1100px) {
  .tf-btn {
    width: 25%;
  }
}

@media (max-width: 870px) {
  .tf-btn {
    width: 30%;
  }
}

@media (max-width: 700px) {
  .title-3 {
    width: 90%;
    font-size: 25px;
  }
}

@media (max-width: 630px) {
  .tf-btn {
    width: 50%;
  }
}

@media (max-width: 380px) {
  .tf-btn {
    width: 70%;
  }
}

/*******************************/

/* INFO SLIDESSHOW */

.slides-features-container {
  background-color: white;
  padding: 30px 0;
}

.slideshow-container-2 {
  position: relative;
  height: 400px;
  width: 100%;
  margin: auto;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  overflow: auto;
  /* background: linear-gradient(315deg, rgba(101, 0, 94, 1) 3%, rgba(60, 132, 206, 1) 38%, rgba(48, 238, 226, 1) 68%, rgb(202, 24, 158) 98%); */
  background: linear-gradient(
    315deg,
    #5a94eb 3%,
    #6610f2 38%,
    #6f42c1 68%,
    #d63384 98%
  );
  animation: gradient 15s ease infinite;
  background-size: 400% 400%;
  background-attachment: fixed;
}

/* Slides */
.mySlides-2 {
  /* display: none; */
  padding: 80px;
  text-align: center;
}

.out-Team {
  margin-top: 5px;
  font-weight: bolder;
  font-size: 60px;
}

.mainy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.contact-container {
  width: 100vw;
  min-height: 100vh;

  font-family: "Poppins", sans-serif;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.container .box {
  background-color: #4b0865;
  position: relative;
  width: 20rem;
  height: 20rem;
  margin: 4rem;
}

.container .box:hover .imgBox {
  transform: translate(-3.5rem, -3.5rem);
}

.container .box:hover .content {
  transform: translate(3.5rem, 3.5rem);
}

.imgBox {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  transition: all 0.5s ease-in-out;
}

.imgBox img {
  width: 20rem;
  height: 20rem;
  object-fit: cover;
  resize: both;
}

.content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 1.5rem;
  display: flex;
  justify-content: center;
  background-color: #96e2f0;
  z-index: 1;
  align-items: flex-end;
  text-align: center;
  transition: 0.5s ease-in-out;
}

.content h2 {
  display: block;
  font-size: 1.5rem;
  color: #111;
  font-weight: 500;
  line-height: 2rem;
  letter-spacing: 1px;
}

.content span {
  color: #555;
  font-size: 1.4rem;
  font-weight: 300;
  letter-spacing: 2px;
}
@media (max-width: 768px) {
  .container .box {
    width: calc(50% - 4rem); /* 50% width with margin on smaller screens */
    flex-basis: 50%;
  }
}

@media (max-width: 480px) {
  .container .box {
    width: calc(
      100% - 2rem
    ); /* 100% width with margin on even smaller screens */
    flex-basis: 100%;
  }
}

/*# sourceMappingURL=main.css.map */

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -30px;
  padding: 16px;
  color: #8bf5fa;
  font-weight: bold;
  font-size: 50px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  text-decoration: none;
}

/* Position the "next button" to the right */
.next {
  position: absolute;
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
}

/* The dot/bullet/indicator container */
.dot-container {
  text-align: center;
  padding: 20px;
  background: rgba(227, 248, 248, 0.9);
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #8bf5fa;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

/* Add a background color to the active dot/circle */
.active-dot,
.dot:hover {
  background-color: #3f979b;
}

.slide-title {
  font-family: "Poppins", sans-serif;
  color: white;
  font-size: 45px;
  letter-spacing: 3px;
  font-weight: 600;
  text-align: center;
}

.slide-description {
  font-family: "Poppins", sans-serif;
  color: white;
  font-weight: 400;
  font-size: 35px;
  letter-spacing: 2px;
}

@keyframes gradient {
  0% {
    background-position: 0% 0%;
  }

  50% {
    background-position: 100% 100%;
  }

  100% {
    background-position: 0% 0%;
  }
}

.wave {
  background: rgb(255 255 255 / 25%);
  border-radius: 1000% 1000% 0 0;
  position: fixed;
  width: 200%;
  height: 12em;
  animation: wave 10s -3s linear infinite;
  transform: translate3d(0, 0, 0);
  opacity: 0.8;
  bottom: 0;
  left: 0;
  z-index: -1;
}

.wave:nth-of-type(2) {
  bottom: -1.25em;
  animation: wave 18s linear reverse infinite;
  opacity: 0.8;
}

.wave:nth-of-type(3) {
  bottom: -2.5em;
  animation: wave 20s -1s reverse infinite;
  opacity: 0.9;
}

@keyframes wave {
  2% {
    transform: translateX(1);
  }

  25% {
    transform: translateX(-25%);
  }

  50% {
    transform: translateX(-50%);
  }

  75% {
    transform: translateX(-25%);
  }

  100% {
    transform: translateX(1);
  }
}

@media (max-width: 2400px) {
  .slide-title {
    font-size: 40px;
  }

  .slide-description {
    font-size: 30px;
  }
}

@media (max-width: 1750px) {
  .slide-title {
    font-size: 35px;
  }

  .slide-description {
    font-size: 25px;
  }
}

@media (max-width: 1200px) {
  .slide-title {
    font-size: 32px;
  }

  .slide-description {
    font-size: 22px;
  }
}

@media (max-width: 930px) {
  .slide-title {
    font-size: 30px;
  }

  .slide-description {
    font-size: 20px;
  }
}

@media (max-width: 760px) {
  .slideshow-container-2 {
    height: 500px;
  }
}

@media (max-width: 600px) {
  .slideshow-container-2 {
    height: 600px;
  }
}

@media (max-width: 500px) {
  .slideshow-container-2 {
    height: 700px;
  }
}

@media (max-width: 450px) {
  .slideshow-container-2 {
    height: 600px;
  }

  .slide-title {
    font-size: 28px;
    letter-spacing: 2px;
  }

  .slide-description {
    font-size: 18px;
    letter-spacing: 1px;
  }

  .prev,
  .next {
    padding: 2px;
  }
}

@media (max-width: 430px) {
  .slide-title {
    font-size: 25px;
  }

  .slide-description {
    font-size: 14px;
  }
}

/**********************************/

/* FOOTER */

.custom-footer {
background-color: #4B0082;
  text-align: center;
  font-family: "Poppins", sans-serif;
 /* color: rgb(92, 89, 89);*/
 color: white;
  font-weight: 400;
  font-size: 30px;
  line-height: 2;
  letter-spacing: 2px;
  margin-top: 0px;
  margin-bottom: 0px;
  position: relative;
}

.icons-container {
  display: flex;
  justify-content: space-around;
  padding: 20px 0;
  margin-bottom: 10px;
}

.footer-social-media-icons-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

.fa-square-youtube {
  color: red;
}

.fa-square-facebook {
  color: #3b5998;
}

.fa-square-twitter {
  color: #55acee;
}

.fa-square-instagram {
  color: #e1306c;
}

.fa-linkedin {
  color: #007bb5;
}

.fa-square-whatsapp {
  color: green;
}

.fa-square-phone {
  color: #2b3333;
}

.fa-square-envelope {
  color: red;
}

.footer-text {
  padding: 10px 0;
}

.copyright {
  font-size: 20px;
}

.different-policies-link {
  padding: 20px 0;
}

.footer-link {
  text-decoration: none;
  /*color: rgb(92, 89, 89)*/
  color: white; 
}

.footer-link:hover {
  color: #858383;
}

.fa {
  font-size: 50px;
}

.popup-phone {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* The actual popup */
.popup-phone .popup-phone-text {
  visibility: hidden;
  width: 200px;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

/* Popup arrow */
.popup-phone .popup-phone-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup-phone .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (max-width: 1700px) {
  .custom-footer {
    font-size: 25px;
  }

  .fa {
    font-size: 45px;
  }

  .copyright {
    font-size: 18px;
  }
}

@media (max-width: 1300px) {
  .custom-footer {
    font-size: 20px;
  }

  .fa {
    font-size: 40px;
  }

  .copyright {
    font-size: 16px;
  }
}

@media (max-width: 1000px) {
  .custom-footer {
    font-size: 18px;
  }

  .fa {
    font-size: 35px;
  }

  .copyright {
    font-size: 14px;
  }
}

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

@media (max-width: 500px) {
  .custom-footer {
    padding-left: 20px;
    padding-right: 20px;
    font-size: 18px;
  }

  .copyright {
    font-size: 12px;
  }
}

@media (max-width: 340px) {
  .custom-footer {
    padding-left: 10px;
    padding-right: 10px;
    font-size: 16px;
  }
}

/**********************************/

/* GET STARTED */

.get-started-container {
  margin-top: 0px;
  display: flex;
  padding-left: 30px;
  padding-right: 30px;
  background: #4B0082
  
}
.get-started-container {
  background: linear-gradient(
    42deg,
     /* #e645f7,
    #9007a7,
    #4c048e,
    #25cae4,
    #56e6fd */
    #8644A3, 
    #4B0082, 
    #44064f
  );
  background-size: 1000% 1000%;

  -webkit-animation: AnimationName 26s ease infinite;
  -moz-animation: AnimationName 26s ease infinite;
  -o-animation: AnimationName 26s ease infinite;
  animation: AnimationName 26s ease infinite;
}

/* .get-started-container {
  background: linear-gradient(
    42deg,
    hsl(276, 80%, 16%), /* Deep purple 
    #44064f, /* Medium purple 
    rgb(43, 3, 81) 
  );
  background-size: 1000% 1000%;
  -webkit-animation: AnimationName 26s ease infinite;
  -moz-animation: AnimationName 26s ease infinite;
  -o-animation: AnimationName 26s ease infinite;
  animation: AnimationName 26s ease infinite;
} */

.get-started-description {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  width: 50%;
}

.get-started-title {
  font-family: "Poppins", sans-serif;
  color: #e4e4e8;
  font-size: 50px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 5px;
  margin-top: 20px;
  width: 50%;
}

.get-started-form {
  width: 50%;
  margin: 50px 20px;
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  align-items: center;
}

.get-started-text {
  font-family: "Poppins", sans-serif;
  font-size: 25px;
  color: #ffffff;
  font-weight: 300;
  letter-spacing: 4px;
  text-align: center;
  width: 60%;
  margin: 0 auto;
}

.toggle-btn {
  background-color: #de7fc0;
  border-radius: 10px;
  width: 140px;
}

.toggle-btn:hover {
  background-color: #d65ab3;
}

.text-already {
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  color: #3c3c3d;
  font-weight: 300;
  letter-spacing: 4px;
  text-align: center;
}

.text-try-free {
  font-size: 25px;
  color: rgb(217, 217, 217);
  font-weight: 500;
  width: 40%;
}

.log-in-link {
  color: #964985;
  text-decoration: none;
}

.log-in-link:hover {
  color: #ca86bc;
}

@media (max-width: 2140px) {
  .get-started-form {
    width: 100%;
  }

  .get-started-description {
    width: 100%;
  }
}

@media (max-width: 1800px) {
  .get-started-form {
    margin-right: 40px;
  }

  .get-started-title {
    width: 80%;
  }

  .text-try-free {
    width: 60%;
  }

  .get-started-text {
    width: 60%;
  }
}

@media (max-width: 1620px) {
  .get-started-title {
    font-size: 45px;
    line-height: 1.2;
  }

  .get-started-text,
  .text-try-free {
    font-size: 22px;
  }
}

@media (max-width: 1320px) {
  .get-started-title {
    font-size: 40px;
    width: 100%;
  }

  .get-started-text,
  .text-try-free {
    font-size: 18px;
    width: 70%;
  }
}

@media (max-width: 1030px) {
  .get-started-title {
    font-size: 35px;
    width: 80%;
    margin: 0 auto;
  }

  .get-started-text,
  .text-try-free {
    font-size: 18px;
    width: 80%;
    margin: 0 auto;
  }

  .text-already {
    font-size: 16px;
  }

  .get-started-container {
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (max-width: 620px) {
  .get-started-title {
    font-size: 30px;
  }

  .get-started-text,
  .text-try-free {
    font-size: 16px;
  }

  .text-already {
    font-size: 14px;
  }
}

@media (max-width: 560px) {
  .get-started-title {
    font-size: 28px;
    width: 90%;
  }

  .get-started-text,
  .text-try-free {
    font-size: 16px;
    width: 90%;
  }
}

@media (max-width: 400px) {
  .get-started-title {
    font-size: 25px;
    width: 100%;
  }

  .get-started-text,
  .text-try-free {
    font-size: 14px;
    width: 100%;
  }
}

/**********************************/

/* Product Page */

.product-page {
  background-color: #d6c3de;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 30px 5px;
  margin-top: 0px;
  font-family: "Poppins", sans-serif;
  font-size: 60px;
  font-weight: 400;
  letter-spacing: 4px;
}

.product-features-container {
  display: flex;
  margin-bottom: 50px;
  justify-content: center;
  align-items: stretch;
  gap: 30px;
  flex-wrap: wrap;
}

.product-page h1,
.product-page h2 {
  margin: 0;
  padding: 0;
  text-align: center;
}

.product-page h2 {
  margin-bottom: 20px;
}

.product-page video {
  margin: 50px 0;
}

.product-features {
  width: 28%;
  border-radius: 30px;
  text-align: center;
  transition: 2s;
  box-shadow: rgba(114, 114, 114, 0.2) 0px 2px 8px 0px;
}
.product-features:hover {
  font-weight: 150px;
  -webkit-box-shadow: 3px 1px 46px -6px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 3px 1px 46px -6px rgba(0, 0, 0, 0.75);
  box-shadow: 3px 1px 46px -6px rgba(0, 0, 0, 0.75);
}

.product-features img {
  width: 50px;
  height: auto;
}

.product-features p {
  font-size: 18px;
  padding: 5px;
}

@media (max-width: 920px) {
  .product-page video {
    width: 90vw;
    height: auto;
    margin: 30px 0;
  }

  .product-features {
    width: 44%;
  }
}

@media (max-width: 500px) {
  .product-features p {
    font-size: 14px;
  }
}

@media (max-width: 400px) {
  .product-features {
    width: 100%;
    margin: 0 20px;
  }
}

/**********************************/

/* CONTACT */

.contact-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 30px 0;
}

.contact-us-title {
  font-family: "Poppins", sans-serif;
  font-size: 60px;
  text-align: center;
  margin: 0 auto;
  color: white;
  letter-spacing: 4px;
  font-weight: 400;
}

.my-img {
  width: 250px;
  height: 270px;
  border: 1px solid rgb(134, 134, 134);
  border-radius: 6px;
}

.contact-name {
  padding-top: 20px;
}

.contact-desc {
  padding: 10px 0;
  font-weight: 300;
  font-size: 16px;
}

.contact-links-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

.contact-links {
  text-decoration: none;
  color: #3c3c3d;
  font-size: 20px;
}

.info-contact-form-container {
  display: flex;
  justify-content: space-around;
  margin-top: 100px;
}

.info-container {
  font-family: "Poppins", sans-serif;
  font-size: 25px;
  text-align: center;
  margin: auto;
  margin-top: 0;
  padding: 20px;
  color: rgb(80, 79, 79);
  letter-spacing: 4px;
  font-weight: 400;
  line-height: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid rgb(255, 255, 255);
  border-radius: 6px;

  background-color: #f1d4f0;
}

.contact-info-link {
  text-decoration: none;
  color: rgb(80, 79, 79);
}

.contact-info-link:hover {
  color: #8e8e8f;
}

.contact-message-container {
  margin: 20px auto;
  border-radius: 5px;
  padding: 20px;
  width: 50%;
  background-color: #f1d4f0;
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  letter-spacing: 3px;
  font-weight: 500;
  color: #3c3c3d;
}

.contact-form-container {
  display: flex;
  margin: auto;
  justify-content: center;
  border-radius: 5px;
  padding: 20px;
  width: 50%;
  background-color: #f1d4f0;
}

.contact-form {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  letter-spacing: 3px;
  font-weight: 500;
  color: #3c3c3d;
}

input[type="text"],
textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

.terms-privacy-checkbox {
  font-size: 14px;
}

.terms-privacy-links {
  text-decoration: none;
  color: #694a83;
}

.terms-privacy-links:hover {
  color: #e28ddb;
}

.contact-btn-container {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  width: 100%;
  padding: 20px auto;
}

.contact-btn {
  background: #8644A3;
  display: block;
  padding: 10px;
  text-decoration: none;
  color: white;
  border: none;
  border-radius: 12px;
  margin-bottom: 10px;
  text-align: center;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
  letter-spacing: 3px;
  font-size: 18px;
  -moz-box-shadow: 0 3px 5px #807b7b;
  -webkit-box-shadow: 0 3px 5px #807b7b;
  -o-box-shadow: 0 3px 5px #807b7b;
  -ms-box-shadow: 0 3px 5px #807b7b;
  box-shadow: 0 3px 5px #807b7b;
}

.contact-btn:hover {
  background: #bd78bd;
}

@media (max-width: 2150px) {
  .info-container {
    font-size: 20px;
  }
}

@media (max-width: 1800px) {
  .info-container {
    font-size: 18px;
  }
}

@media (max-width: 1700px) {
  .info-container {
    font-size: 15px;
  }
}

@media (max-width: 1500px) {
  .info-container {
    font-size: 14px;
  }
}

@media (max-width: 1440px) {
  .info-container {
    width: 35%;
  }
}

@media (max-width: 1300px) {
  .info-container {
    width: 40%;
  }
}

@media (max-width: 1110px) {
  .info-container {
    font-size: 12px;
  }
}

@media (max-width: 1000px) {
  .info-contact-form-container {
    flex-direction: column;
  }

  .info-container {
    margin-top: 30px;
    width: 50%;
  }
}

@media (max-width: 920px) {
  .my-img-container {
    width: 45%;
    margin-bottom: 30px;
  }

  .contact-form-container,
  .info-container {
    width: 70%;
  }
}

@media (max-width: 620px) {
  .my-img-container {
    width: 100%;
  }

  .contact-form-container,
  .info-container {
    width: 80%;
  }
}

@media (max-width: 500px) {
  .contact-us-title {
    font-size: 40px;
  }

  .contact-form-container {
    width: 90%;
  }

  .info-container {
    width: 90%;
    font-size: 9px;
  }
}

/**********************************/

/* LOG IN */

.login-container {
  background-size: cover;
  margin-top: 0px;
  display: flex;
  justify-content: space-around;
  padding-top: 100px;
  padding-bottom: 20px;
  height: 500px;
}

.login-container {
  background: linear-gradient(
    42deg,
     /* #e645f7,
    #9007a7,
    #4c048e,
    #25cae4,
    #56e6fd */
    #8644A3, 
    #4B0082, 
    #44064f
  );
  background-size: 1000% 1000%;

  -webkit-animation: AnimationName 26s ease infinite;
  -moz-animation: AnimationName 26s ease infinite;
  -o-animation: AnimationName 26s ease infinite;
  animation: AnimationName 26s ease infinite;
}

@-webkit-keyframes AnimationName {
  0% {
    background-position: 0% 68%;
  }
  50% {
    background-position: 100% 33%;
  }
  100% {
    background-position: 0% 68%;
  }
}
@-moz-keyframes AnimationName {
  0% {
    background-position: 0% 68%;
  }
  50% {
    background-position: 100% 33%;
  }
  100% {
    background-position: 0% 68%;
  }
}
@-o-keyframes AnimationName {
  0% {
    background-position: 0% 68%;
  }
  50% {
    background-position: 100% 33%;
  }
  100% {
    background-position: 0% 68%;
  }
}
@keyframes AnimationName {
  0% {
    background-position: 0% 68%;
  }
  50% {
    background-position: 100% 33%;
  }
  100% {
    background-position: 0% 68%;
  }
}

.login-title-text {
  width: 40%;
}

.login-title {
  letter-spacing: 3px;
  font-weight: 600;
  text-align: center;
  margin: 0 auto;
  font-family: "Poppins", sans-serif;
  font-size: 50px;
  text-align: center;
  color: white;
}

.login-form-container {
  padding-bottom: 20px;
  font-size: 16px;
  font-weight: 300;
  font-family: "Poppins", sans-serif;
  letter-spacing: 4px;
  color: white;
  text-align: center;
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.login-btn {
  margin-top: 10px;
  padding: 10px;
}
.login-btn a {

  text-decoration: none;
  color: white;
  font-weight: 300;
}

.dont-have-account {
  font-size: 25px;
  font-weight: 300;
  font-family: "Poppins", sans-serif;
  letter-spacing: 4px;
  color: white;
  text-align: center;
  text-align: center;
  padding-bottom: 30px;
}

.get-started-link {
  text-decoration: none;
  color:  #c582e1;
}

.get-started-link:hover {
  color: #8d7199
}

@media (max-width: 1620px) {
  .login-title-text {
    width: 50%;
  }

  .login-title {
    font-size: 35px;
  }

  .dont-have-account {
    font-size: 20px;
  }

  .login-form-container {
    padding-right: 80px;
    font-size: 16px;
  }
}

@media (max-width: 1500px) {
  .login-title-text {
    width: 30%;
  }
}

@media (max-width: 1030px) {
  .login-container {
    flex-wrap: wrap;
    height: 600px;
  }

  .login-title {
    font-size: 30px;
    margin: 0 auto;
  }

  .login-form-container {
    padding-right: 20px;
  }
}

@media (max-width: 900px) {
  .login-container {
    height: 700px;
  }

  .login-title-text {
    width: 90%;
  }

  .login-title {
    margin: 0 auto;
    padding-right: 0;
  }

  .login-form-container {
    width: 100%;
  }
}

@media (max-width: 650px) {
  .login-container {
    height: 750px;
  }
}

@media (max-width: 560px) {
  .login-container {
    height: 800px;
  }

  .login-title {
    font-size: 25px;
  }

  .dont-have-account {
    font-size: 18px;
  }
}

/**************************************/

/* LANGUAGE TOGGLE BUTTON */

/** OLD language button 

.lan-button-container {
    display: flex;
    justify-content: end;
    margin-top: 5px;
    margin-right: 5px;
}

.lan-button {
    border: none;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 600;
    border-radius: 40px;
    padding: 5px;
    letter-spacing: 2px;
    background-color: white;
    color: #28acb1;
    text-decoration: none;
    text-align: center;
}

.lan-icon {
    border: none;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 600;
    border-radius: 40px;
    padding: 5px;
    letter-spacing: 4px;
    background-color: white;
    color: #5a5a5c;
    text-decoration: none;
    text-align: center;
}

.lan-button-selected {
    background-color: #44e2e7;
    color: white;
}

.lan-button:hover {
    color: rgb(253, 144, 253);
}

*/

.lan-custom-btn {
  background:#9c27b0!important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 10px !important;
  transition: 2s;
  -moz-box-shadow: 0 3px 5px #5a5959;
  -webkit-box-shadow: 0 3px 5px #5a5959;
  -o-box-shadow: 0 3px 5px #5a5959;
  -ms-box-shadow: 0 3px 5px #5a5959;
  box-shadow: 0 3px 5px #5a5959;
  border: none;
}

.lan-custom-btn::before {
  color: white !important;
}

.lan-custom-btn::after {
  color: white !important;
}

.lan-custom-btn:hover {
  border: white !important;
}

.lan-custom-btn:active {
  border: white !important;
}

.fa-globe {
  color: white;
}

.lan-item {
  font-family: "Poppins", sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 3px !important;
  font-weight: 600 !important;
}

.lan-item:active {
  background: white !important;
}

.lan-active {
  color: white !important;
  background: #b67fcc !important;
}

@media (max-width: 1700px) {
  .lan-custom-btn {
    font-size: 12px !important;
  }
}

@media (max-width: 1200px) {
  .lan-custom-btn,
  .lan-item {
    font-size: 10px !important;
  }
}

@media (max-width: 991px) {
  .lan-dropdown {
    width: 15% !important;
  }
}

/*************************************/

/* BOOK DEMO SECTION */

.book-demo-header {
  background-color: #4B0082;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 20px;
  margin: 30px auto;
  margin-top: 0px;
  margin-bottom: 0px;
}

.book-demo-title {
  font-family: "Poppins", sans-serif;
  letter-spacing: 4px;
  font-size: 40px;
  font-weight: 600;
  text-align: center;
  margin: 0 auto;
  color: white;
}

.book-demo-text {
  font-size: 30px;
  font-weight: 400;
  margin-top: 20px;
}

.book-demo-btn-container {
  text-align: center;
  margin: 0 auto;
  width: 10%;
  margin-top: 30px;
}

.book-demo-btn {
  transition: 2s;
  background: #9c27b0;
  display: block;
  padding: 15px;
  text-decoration: none;
  color: white;
  border-radius: 10px;
  margin-bottom: 10px;
  text-align: center;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
  letter-spacing: 3px;
  font-size: 25px;
  -moz-box-shadow: 0 3px 5px #5a5959;
  -webkit-box-shadow: 0 3px 5px #5a5959;
  -o-box-shadow: 0 3px 5px #5a5959;
  -ms-box-shadow: 0 3px 5px #5a5959;
  box-shadow: 0 3px 5px #5a5959;
}

.book-demo-btn:hover {
  background: #7c2f8b;
}

@media (max-width: 1650px) {
  .book-demo-btn-container {
    width: 15%;
  }
}

@media (max-width: 1350px) {
  .book-demo-title {
    font-size: 30px;
  }

  .book-demo-text {
    font-size: 20px;
  }

  .book-demo-btn {
    font-size: 20px;
  }
}

@media (max-width: 1100px) {
  .book-demo-btn-container {
    width: 20%;
  }
}

@media (max-width: 640px) {
  .book-demo-btn-container {
    width: 25%;
  }
}

@media (max-width: 520px) {
  .book-demo-btn-container {
    width: 35%;
  }
}

@media (max-width: 380px) {
  .book-demo-btn-container {
    width: 50%;
  }
}
.my-img-container {
  margin-bottom: 10px;
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  letter-spacing: 3px;
  font-weight: 600;
  color: #3c3c3d;
  text-align: center;
  padding: 30px;
  width: 30%;
}

/*********************************/

/* PRICING */

.features-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.feature-container {
  display: flex;
  justify-content: space-between;
  text-align: center;
  align-items: center;
  font-family: "Poppins", sans-serif;
  letter-spacing: 3px;
  padding: 20px;
  margin: 30px 70px;
  border-radius: 12px;
  box-shadow: 8px 8px 8px rgb(196, 194, 194);
}

.container-green {
  background: rgb(190, 190, 190);
  background: linear-gradient(
    242deg,
    rgba(255, 255, 255, 1) 50%,
    rgba(60, 241, 221, 1) 100%
  );
}

.container-green-2 {
  background: rgb(255, 255, 255);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 1) 44%,
    rgba(67, 237, 255, 0.883251404494382) 100%
  );
}

.container-pink {
  background: rgb(255, 255, 255);
  background: linear-gradient(
    79deg,
    rgba(255, 255, 255, 1) 40%,
    rgba(158, 60, 241, 1) 100%
  );
}

.container-pink-2 {
  background: rgb(255, 255, 255);
  background: linear-gradient(
    -90deg,
    rgba(255, 255, 255, 1) 44%,
    rgba(233, 112, 255, 0.883251404494382) 100%
  );
}

.container-pink-light {
  background: rgb(255, 255, 255);
  background: linear-gradient(
    80deg,
    rgba(255, 255, 255, 1) 44%,
    rgba(242, 97, 240, 0.883251404494382) 100%
  );
}

.container-green-dark {
  background: rgb(255, 255, 255);
  background: linear-gradient(
    282deg,
    rgba(255, 255, 255, 1) 44%,
    rgba(0, 110, 117, 0.883251404494382) 100%
  );
}

.container-violet-light {
  background: rgb(255, 255, 255);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 1) 44%,
    rgba(126, 104, 184, 0.883251404494382) 78%
  );
}

.container-blue {
  background: rgb(255, 255, 255);
  background: linear-gradient(
    -90deg,
    rgba(255, 255, 255, 1) 44%,
    rgba(112, 140, 255, 0.883251404494382) 84%
  );
}

.container-green-dark-2 {
  background: rgb(255, 255, 255);
  background: linear-gradient(
    -90deg,
    rgba(255, 255, 255, 1) 44%,
    rgba(0, 107, 74, 0.883251404494382) 100%
  );
}

.img-title-container {
  width: 40%;
  padding: 20px;
}

.feature-title {
  font-size: 35px;
  font-weight: 600;
  text-align: center;
  margin: 0 auto;
  color: white;
}

.feature-desc {
  font-size: 25px;
  text-align: center;
  margin: 0 auto;
  width: 40%;
  padding: 20px;
}

.feature-img {
  width: 18%;
  padding: 20px;
}

@media (max-width: 2000px) {
  .feature-img {
    width: 25%;
  }
}

@media (max-width: 1600px) {
  .feature-container {
    margin: 30px;
  }
}

@media (max-width: 1400px) {
  .img-title-container {
    width: 40%;
  }

  .feature-title {
    font-size: 25px;
  }

  .feature-desc {
    font-size: 18px;
    width: 40%;
  }

  .feature-img {
    width: 30%;
  }
}

@media (max-width: 1200px) {
  .feature-img {
    width: 35%;
  }

  .feature-desc {
    width: 50%;
  }
}

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

  .img-title-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  .feature-img {
    width: 20%;
    height: auto;
  }

  .feature-title {
    padding: 20px;
    font-size: 30px;
  }

  .feature-desc {
    font-size: 22px;
    width: 100%;
  }

  .container-green {
    background: rgb(190, 190, 190);
    background: linear-gradient(
      0deg,
      rgba(255, 255, 255, 1) 35%,
      rgba(60, 241, 221, 1) 100%
    );
  }

  .container-pink {
    background: rgb(255, 255, 255);
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 1) 35%,
      rgba(158, 60, 241, 1) 100%
    );
  }

  .container-blue {
    background: rgb(255, 255, 255);
    background: linear-gradient(
      0deg,
      rgba(255, 255, 255, 1) 44%,
      rgba(112, 140, 255, 0.883251404494382) 84%
    );
  }

  .container-pink-light {
    background: rgb(255, 255, 255);
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 1) 35%,
      rgba(242, 97, 240, 0.883251404494382) 100%
    );
  }

  .container-green-dark {
    background: rgb(255, 255, 255);
    background: linear-gradient(
      0deg,
      rgba(255, 255, 255, 1) 35%,
      rgba(0, 110, 117, 0.883251404494382) 100%
    );
  }

  .container-violet-light {
    background: rgb(255, 255, 255);
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 1) 35%,
      rgba(126, 104, 184, 0.883251404494382) 78%
    );
  }

  .container-green-dark-2 {
    background: rgb(255, 255, 255);
    background: linear-gradient(
      0deg,
      rgba(255, 255, 255, 1) 35%,
      rgba(0, 107, 74, 0.883251404494382) 100%
    );
  }

  .container-green-2 {
    background: rgb(255, 255, 255);
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 1) 35%,
      rgba(67, 237, 255, 0.883251404494382) 100%
    );
  }

  .container-pink-2 {
    background: rgb(255, 255, 255);
    background: linear-gradient(
      0deg,
      rgba(255, 255, 255, 1) 35%,
      rgba(233, 112, 255, 0.883251404494382) 100%
    );
  }
}

@media (max-width: 700px) {
  .feature-img {
    width: 25%;
    height: auto;
  }

  .feature-title {
    padding: 20px;
    font-size: 25px;
  }

  .feature-desc {
    font-size: 18px;
    width: 100%;
  }
}

@media (max-width: 600px) {
  .feature-img {
    width: 35%;
  }
}

@media (max-width: 450px) {
  .feature-container {
    margin: 5px;
  }

  .feature-img {
    width: 40%;
    margin: 2px;
  }

  .feature-title {
    font-size: 20px;
  }

  .feature-desc {
    font-size: 16px;
  }
}

/***************************************/

/* INTEGRATIONS */

.integrations-container {
  display: flex;
  justify-content: space-around;
  margin: auto 50px;
  padding: 50px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.integrations-text {
  font-family: "Poppins", sans-serif;
  letter-spacing: 4px;
  text-align: center;
  width: 40%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.integrations-title {
  color: rgb(159, 32, 198);
  font-size: 70px;
  font-weight: 600;
  margin-bottom: 20px;
}

.integrations-desc {
  font-size: 45px;
  font-weight: 400;
  color: #3a3a3b;
}

/* CURRENT INTEGRATION-ICON STYLES */
.integrations-img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.integrations-img:hover {
  transform: scale(1.1);
  box-shadow: 0 0 10px rgba(52, 50, 50, 0.5);
}

@media (max-width: 2100px) {
  .integrations-title {
    font-size: 60px;
  }

  .integrations-desc {
    font-size: 40px;
  }
}

@media (max-width: 1900px) {
  .integrations-img,
  .integrations-text {
    width: 30%;
  }

  .integrations-title {
    font-size: 60px;
  }

  .integrations-desc {
    font-size: 35px;
  }
}

@media (max-width: 1800px) {
  .integrations-img {
    width: 35%;
  }

  .integrations-title {
    font-size: 55px;
  }

  .integrations-desc {
    font-size: 30px;
  }
}

@media (max-width: 1680px) {
  .integrations-text {
    width: 35%;
  }
}

@media (max-width: 1400px) {
  .integrations-title {
    font-size: 50px;
  }

  .integrations-desc {
    font-size: 25px;
  }
}

@media (max-width: 1200px) {
  .integrations-text {
    width: 40%;
  }

  .integrations-title {
    font-size: 40px;
  }

  .integrations-desc {
    font-size: 18px;
  }
}

@media (max-width: 900px) {
  .integrations-container {
    flex-direction: column;
    align-items: center;
  }

  .integrations-text {
    margin-bottom: 50px;
    width: 70%;
  }

  .integrations-img {
    width: 70%;
  }

  .integrations-title {
    font-size: 45px;
  }

  .integrations-desc {
    font-size: 24px;
  }
}

@media (max-width: 730px) {
  .integrations-text,
  .integrations-img {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .integrations-container {
    padding-left: 5px;
    padding-right: 5px;
  }

  .integrations-title {
    font-size: 35px;
  }

  .integrations-desc {
    font-size: 18px;
  }
}

/* TESTIMONIALS */

.testimonials-container {
  height: 30vh;
  margin: 100px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.slideshow-testimonials-container {
  position: relative;
  width: 100%;
  margin: 0 auto;
  background: white;
}

/* Slides */
.myTestimonial {
  display: none;
  padding: 30px 60px;
  text-align: center;
}

/* Next & previous buttons */
.prev-testimonial,
.next-testimonial {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -30px;
  padding: 16px;
  color: #bc68e2;
  font-weight: bold;
  font-size: 60px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  text-decoration: none;
}

/* Position the "next button" to the right */
.next-testimonial {
  position: absolute;
  right: 0;
  border-radius: 3px 0 0 3px;
}

.founder-quotes-container {
  background-color: #4B0082;
  color: white;
  height: 70vh;
}

.prev-testimonial:hover,
.next-testimonial:hover {
  color: rgb(232, 166, 245);
}

/* The dot/bullet/indicator container */
.dot-container-testimonial {
  text-align: center;
  background: rgba(255, 255, 255, 0.9);
}

/* The dots/bullets/indicators */
.dot-testimonial {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #c29efc;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

/* Add a background color to the active dot/circle */
.active-dot-testimonial,
.dot-testimonial:hover {
  background-color: #9b00ca;
}

.testimonial-stars {
  color: rgb(247, 213, 20);
  font-size: 30px;
  letter-spacing: 10px;
  font-weight: 600;
  text-align: center;
}

.testimonials-title {
  font-family: "Poppins", sans-serif;
  background-color: #0eb8af;
  background-image: linear-gradient(90deg, #0eb8af, #b446b8);
  background-size: 100%;
  background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
  font-weight: 600;
  font-size: 40px;
  letter-spacing: 3px;
  text-align: center;
  margin: 0 auto;
}

.testimonial {
  font-family: "Poppins", sans-serif;
  color: rgb(54, 53, 53);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 2px;
  font-style: italic;
}

.testimonial-name {
  margin-top: 20px;
  font-family: "Poppins", sans-serif;
  color: rgb(54, 53, 53);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 2px;
}

@media (max-width: 2150px) {
  .testimonial-stars {
    font-size: 28px;
  }

  .testimonial {
    font-size: 18px;
  }

  .testimonials-title {
    font-size: 35px;
  }

  .testimonial-name {
    font-size: 16px;
  }
}

@media (max-width: 1450px) {
  .prev-testimonial,
  .next-testimonial {
    font-size: 55px;
  }

  .testimonial {
    font-size: 16px;
  }

  .testimonials-title {
    font-size: 30px;
  }

  .testimonial-name {
    font-size: 14px;
  }
}

@media (max-width: 1100px) {
  .testimonials-title {
    font-size: 28px;
  }
}

@media (max-width: 950px) {
  .prev-testimonial,
  .next-testimonial {
    font-size: 50px;
  }

  .testimonials-title {
    width: 80%;
  }
}

@media (max-width: 650px) {
  .testimonial {
    font-size: 14px;
  }

  .testimonial-name {
    font-size: 12px;
  }

  .testimonials-title {
    font-size: 25px;
    width: 90%;
  }
}

@media (max-width: 550px) {
  .testimonial-stars {
    font-size: 18px;
  }

  .testimonials-title {
    font-size: 22px;
    width: 100%;
  }
}

/*******************************/

/* RECOVER PASSWORD */

.recover-password-text {
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  color: white;
  font-weight: 600;
  letter-spacing: 4px;
}

.recover-password-link {
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  color:  #c582e1;
  text-decoration: none;
}

.recover-password-link:hover {
  color: #8d7199;
}

.recover-password-container {
  background-image: url(../img/Background-img-3.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 0px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 30px;
}

.recover-password-title {
  letter-spacing: 3px;
  font-weight: 600;
  text-align: center;
  margin: 0 auto;
  font-family: "Poppins", sans-serif;
  font-size: 50px;
  color: white;
  margin-bottom: 50px;
}

.recover-form-container {
  text-align: center;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

@media (max-width: 1300px) {
  .recover-password-title {
    font-size: 40px;
  }
}

@media (max-width: 1000px) {
  .recover-password-title {
    font-size: 30px;
  }
}

/******************************/

/* REVIEW LOGOS */

.reviews-logos-section {
  margin: 30px auto;
  font-family: "Poppins", sans-serif;
  color: #373738;
  font-size: 35px;
  font-weight: 600;
  letter-spacing: 4px;
  text-align: center;
}

.reviews-logos-title {
  margin-bottom: 20px;
}

.reviews-logos-container {
  padding: 20px auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.trustpilot {
  padding-top: 10px;
  padding-bottom: 10px;
  border: 2px solid #52daa4;
  border-radius: 12px;
  box-shadow: 0px 0px 60px 13px rgba(136, 136, 136, 0.23),
    25px 0px 20px -20px rgba(136, 136, 136, 0.23),
    0px 25px 20px -20px rgba(136, 136, 136, 0.23),
    -25px 0px 20px -20px rgba(136, 136, 136, 0.23);
  width: 250px;
}

.logo-img {
  width: 300px;
}

.capterra {
  width: 200px;
}

.getapp {
  width: 150px;
}

@media (max-width: 1300px) {
  .logo-img {
    width: 250px;
  }

  .trustpilot {
    width: 220px;
  }

  .capterra {
    width: 150px;
  }

  .getapp {
    width: 100px;
  }
}

@media (max-width: 950px) {
  .logo-img {
    width: 200px;
  }

  .capterra {
    width: 120px;
  }

  .getapp {
    width: 80px;
  }
}

@media (max-width: 820px) {
  .capterra {
    width: 110px;
  }

  .getapp {
    width: 70px;
  }
}

@media (max-width: 700px) {
  .reviews-logos-container {
    flex-direction: column;
  }

  .logo-container {
    margin: 20px auto;
  }

  .logo-img {
    width: 250px;
  }

  .capterra {
    width: 150px;
  }

  .getapp {
    width: 100px;
  }
}

@media (max-width: 450px) {
  .reviews-logos-title {
    font-size: 25px;
  }
}

/**************************/

/* INDUSTRIES SECTION */

.industries-container {
  margin: 30px auto;
  font-family: "Poppins", sans-serif;
  letter-spacing: 4px;
  background: rgb(255, 255, 255);
}

.industries-title {
  font-size: 50px;
  color: rgb(56, 3, 84);
  /* color:white; */
  text-align: center;
  padding-top: 30px;
  margin-bottom: 10px;
  font-weight: 600;
}

.industries-subtitle {
  font-size: 30px;
  color: rgb(149, 38, 163);
  /* color:white; */
  text-align: center;
  margin-bottom: 30px;
  font-weight: 600;
}

.industries-tabs {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  /* width:60%; */
  padding: 30px;
}

.industry {
  /* margin: 20px;
    padding:10px; */
  margin: 10px;
  font-size: 22px;
  /* color:white; 
    background: #74477a; */
  color: rgb(55, 51, 55);
  border-radius: 6px;
  font-weight: 600;
  border: 1px solid white;
  padding: 15px 5px;
  /* background:#e7e7e7; */
  background: white;
  transition: 1s;
}

.industry:hover {
  transform: scale(1.1);
  box-shadow: -7px 1px 31px 0px rgba(182, 120, 211, 0.42);
}

.industry-icon {
  /* color:#298682; */
  font-size: 30px;
}

.fa-tree-city {
  color: rgb(94, 204, 94);
}

.fa-dna {
  color: red;
}

.fa-city {
  color: #187dac;
}

.fa-sign-hanging {
  color: rgb(199, 105, 178);
}

.fa-computer {
  color: rgb(255, 136, 0);
}

.fa-hand-holding-heart {
  color: rgb(230, 184, 33);
}

.fa-desktop {
  color: #27c9bb;
}

.fa-chart-simple {
  color: rgb(30, 133, 56);
}

.fa-hands-holding-circle {
  color: rgb(117, 60, 110);
}

@media (max-width: 1700px) {
  .industry {
    font-size: 18px;
  }

  .industry-icon {
    font-size: 25px;
  }

  .industries-title {
    font-size: 45px;
  }
}

@media (max-width: 1300px) {
  .industries-title {
    font-size: 40px;
  }

  .industries-subtitle {
    font-size: 25px;
  }
}

@media (max-width: 950px) {
  .industries-tabs {
    flex-direction: column;
  }
}

/***********************************/

/* FAQs */

.faq-title {
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 3px;
  margin: 30px auto;
  text-align: center;
}

.accordion {
  font-family: "Poppins", sans-serif;
}

.accordion-body {
  font-size: 16px !important;
}

.accordion-button {
  letter-spacing: 1px !important;
  font-weight: 600 !important;
}

.app-name {
  font-weight: 600;
  color:#9c27b0;
}

.feature-title {
  font-weight: 600;
  color: #2b3333;
  font-size: 16px;
}

.faq-link {
  text-decoration: none;
  color: #8e0cb6;
  font-weight: 600;
}

.faq-link:hover {
  color: #ad89b8;
}

.accordion-button {
  color:#9c27b0 !important;
}

.accordion-button:hover,
.accordion-button:not(.collapsed) {
  background:  #4B0082  !important;
}

/*User registration datapage*/

.hide {
  display: none;
}

.iti__country {
  padding: 5px 10px !important;
  outline: none !important;
}

ul#iti-0__country-listbox {
  list-style-type: none !important;
}

/*toggle switch for pricing */



.container {
  width: 100%;
}

h3,
h4 {
  font-size: 0.375em;
}
.text1,
.text2 {
  color: #000000;
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 600;
}

.package-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.packages {
  margin: 20px;
  width: 300px;
  padding-bottom: 1.5em;
  height: 100%;
  background-color: #1e2321;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-radius: 20px;
  box-shadow: 0 19px 38px rgba(30, 35, 33, 1), 0 15px 12px rgba(30, 35, 33, 0.2);
  flex-wrap: wrap;
  color: #f4f4f4;
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 24px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #84dfd2;
  -webkit-transition: 0.4s;

  box-shadow: 0px 0px 6px #1e2321;
  transform: translate(0px, 0px);
  transition: 0.6s ease transform, 0.6s box-shadow;
}

.slider:before {
  position: absolute;
  content: "";
  height: 17px;
  width: 21px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: #50068b;
}

input:focus + .slider {
  box-shadow: 0 0 1px #50bfe6;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.package-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

/* Real-time Communication Section*/
#jitsi-meet-container {
  width: 800px;
  height: 600px;
  margin: 0 auto;
  border: 1px solid #ccc;
}
#custom-chat-button {
  display: flex;
  background-color: #9c26b0;
  color: white;
  margin: 20px auto;
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 25px;
}
#chat-icon-container {
  position: fixed;
  right: 70px; /* Adjust based on the icon's width or your desired position */
  bottom: -20px; /* Adjust based on the AI bot icon's position */
  top: 85%;
  z-index: 1000;
}
#chat-icon-container .tooltip {
  visibility: hidden;
  background-color: #7416c0;
  color: white;
  text-align: center;
  padding: 5px 10px;
  border-radius: 5px;
  position: absolute;
  bottom: 95%; /* Position above the icon */
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

#chat-icon-container:hover .tooltip {
  visibility: visible;
  opacity: 1;
}
.chat-icon-link {
  display: inline-block;
  padding: 8px;
  border-radius: 50%;
  transition: all 0.3s ease;
 
}

.chat-icon-link:hover {
  transform: translateY(-2px);
 
}

.chat-icon-link svg {
  width: 90px;
  height: 90px;
  display: block;
}
.chat-icon {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tooltip {
  visibility: hidden;
  background-color: #7416c0;
  color: white;
  text-align: center;
  padding: 5px 10px;
  border-radius: 5px;
  position: absolute;
  bottom: 100%; /* Position above the icon */
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.3s;
}
.tooltip::after {
  content: "";
  position: absolute;
  top: 100%; /* Position below the tooltip */
  left: 50%;
  transform: translateX(-50%);
  border-width: 8px;
  border-style: solid;
  border-color: #7416c0 transparent transparent transparent;
}

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


/*Why Choose Fendous */
.feature-panel {
  display: flex;
  min-height: 600px;
  font-family: Arial, sans-serif;
  margin-top: 0%;
}

.features-list {
  width: 35%;
  padding: 2rem;
  background: #f8f0fc;
}

.details-panel {
  width: 65%;
  padding: 3rem;
 /* background: linear-gradient(135deg, #9b4dca 0%, #6200ea 100%); */
 background: linear-gradient(
    42deg,
    #8644A3, 
    #4B0082, 
    #44064f
    );
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.feature-item {
  padding: 1rem;
  margin-bottom: 1rem;
  background: white;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.feature-item:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transform: translateX(10px);
  background: #9c26b0;
  color: white;
}

.feature-item:hover .feature-title {
  color: white;
}

.feature-icon {
  font-size: 1.5rem;
  margin-right: 1rem;
  width: 40px;
  text-align: center;
}

.feature-title {
  color: #9c26b0;
  font-weight: bold;
  font-size: 1.1rem;
  transition: color 0.3s ease;
}

.detail-content {
  position: absolute;
  max-width: 80%;
  opacity: 0;
  transform: translateX(50px);
  transition: all 0.5s ease;
  visibility: hidden;
  padding: 2rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.detail-content.active {
  opacity: 1;
  transform: translateX(0);
  visibility: visible;
}

.detail-title {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  font-weight: bold;
  position: relative;
  padding-bottom: 1rem;
  color: #f8f0fc;
}

.detail-title:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 4px;
  background: white;
}

.detail-description {
  line-height: 1.8;
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
  color: white;
}

.detail-features {
  margin-top: 2rem;
}

.detail-feature-item {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  background: rgba(255, 255, 255, 0.1);
  padding: 0.8rem;
  border-radius: 8px;
}

 /* Chatbot container styles 
 .chat-bot-container {
  position: fixed;
  bottom: 50px;
  right: 20px;
  width: 400px;
  height: 600px;
  background: transparent;
  box-shadow: 0 ;
  border-radius: 10px;
  overflow: hidden;
  transform: translateY(20px);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 1000;
}

.chat-bot-container.show {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

/* Toggle button styles 
.chat-bot-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  background: transparent; /* Purple color 
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0;
  z-index: 1000;
  transition: all 0.3s ease;
}
 /* Tooltip 
 .chat-bot-toggle::after {
  content: "Project Pilot";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #9c27b0;
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-in-out;
 }

.chat-bot-toggle:hover {
  background: #8e44ad; /* Darker purple on hover 
}
/* Show tooltip on hover 
.chat-bot-toggle:hover::after {
  opacity: 1;
  visibility: visible;
}

/* Wrapper to hold button and chatbot together */
.chatbot-wrapper {
  position: fixed;
  bottom: -5px;
  right: 20px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 15px;
}

/* The "Projects Pilot" toggle button */
.chatbot-toggle {
  background-color: #7d32a8;
  color: white;
  border: none;
  border-radius: 30px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 2;
}

.chatbot-toggle:hover {
  background-color: #6a1b9a;
  transform: translateY(-2px);
  box-shadow: 0;
}

/* Arrow indicator */
.chatbot-toggle::after {
  content: '▼';
  font-size: 12px;
  transition: transform 0.3s ease;
}

/* The chatbot window */
.chatbot-container {
  position: absolute;
  bottom: calc(100% + 0px);
  right: 0;
  width: 380px;
  max-width: 90vw;
  height: 0;
  background-color: transparent;
  border-radius: 12px 12px 0 0;
  overflow: visible;
  box-shadow: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 1001; 
}
/* Iframe Adjustment */
.chatbot-container iframe {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  display: block;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1002;
}
.chatbot-container iframe {
  padding-top: 15px !important; /* Add space at top */
}

/* When chatbot is active */
.chatbot-container.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  height: 600px;
  border: none !important; /* Force no border */
  box-shadow: none !important;
  outline: none !important;
  overflow: hidden; /* Keep hidden when shown to prevent scrollbars */
}

/* Rotate arrow when open */
.chatbot-container.show ~ .chatbot-toggle::after {
  transform: rotate(180deg);
}

/* Mobile responsiveness */
@media (max-width: 480px) {
  .chatbot-wrapper {
    bottom: 10px;
    right: 10px;
  }
  
  .chatbot-container {
    width: calc(100vw - 20px);
    right: 10px;
  }
}

/* Pulse animation for attention */
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(125, 50, 168, 0.4); }
  70% { box-shadow: 0 0 0 12px rgba(125, 50, 168, 0); }
  100% { box-shadow: 0 0 0 0 rgba(125, 50, 168, 0); }
}

/* Add this class via JavaScript when you want to attract attention */
.chatbot-pulse {
  animation: pulse 1.5s infinite;
}

.placeholder-text {
  color: rgba(255,255,255,0.7);
  font-size: 1.2rem;
  text-align: center;
}
@media (max-width: 1024px) {
  .feature-panel {
    flex-direction: row; /* Keep side-by-side */
    flex-wrap: wrap; /* Allow wrapping if needed */
  }

  .features-list {
    width: 40%; /* Reduce width slightly */
    padding: 1.5rem;
  }

  .details-panel {
    width: 60%;
    padding: 2rem;
  }

  .detail-title {
    font-size: 1.8rem;
  }

  .detail-description {
    font-size: 1.1rem;
  }
}

@media (max-width: 768px) {
  .feature-panel {
    flex-wrap: nowrap; /* Prevent full wrapping */
  }

  .features-list {
    width: 45%;
    padding: 1rem;
  }

  .details-panel {
    width: 55%;
    padding: 1.5rem;
  }

  .feature-item {
    padding: 0.7rem;
    font-size: 0.9rem;
  }

  .feature-icon {
    font-size: 1.2rem;
  }

  .detail-content {
    max-width: 90%;
  }
}

@media (max-width: 600px) {
  .feature-panel {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .features-list {
    width: 50%;
    padding: 1rem;
  }

  .details-panel {
    width: 50%;
    padding: 1rem;
  }

  .feature-item {
    font-size: 0.85rem;
    padding: 0.6rem;
  }

  .detail-title {
    font-size: 1.5rem;
  }

  .detail-description {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .features-list {
    width: 100%;
    padding: 1rem;
  }

  .details-panel {
    width: 100%;
    padding: 1rem;
  }

  .feature-item {
    font-size: 0.8rem;
    padding: 0.5rem;
  }

  .detail-title {
    font-size: 1.3rem;
  }

  .detail-description {
    font-size: 0.9rem;
  }
}