/* Arrow Container */
.arrow-container {
  text-align: center; /* Center align the arrows */
  margin: 0; /* No margin to prevent cuts in the layout */
  position: relative; /* Ensure arrows are placed correctly */
}

/* Arrow Button Styling */
.arrow-button {
  background-color: #009D4F; /* Green circular background */
  border: none;
  font-size: 30px !important;
  color: white; /* Arrow color */
  cursor: pointer;
  transition: transform 0.3s ease;
  width: 40px !important; /* Circular button width */
  height: 40px !important; /* Circular button height */
  /*display: flex;*/
  justify-content: center; /* Center align the arrow */
  align-items: center; /* Center align the arrow */
  border-radius: 100%; /* Make it circular */
  margin: 20px 0 20px 0; /* Ensure a gap below the arrows */
}



/* Up Arrow */
.arrow-button-up {
  /*content: '+2303'; /* Up arrow character */
  font-size: 20px; /* Arrowhead size */
  
}

/* Down Arrow */
.arrow-button-down {
  /*content: '\2304'; /* Down arrow character */
  font-size: 20px; /* Arrowhead size */
}

/* Hover effect */
.arrow-button:hover {
  transform: scale(1.2); /* Slight zoom effect on hover */
}


/* Main container for the Integration module */
.integrations-wrapper {
  display: flex;
  max-width: 1222px; /* Max width set to 1222px */
  margin: auto;
  font-family: 'Poppins', sans-serif !important; /* Ensure Poppins is applied */
}

/* Left container for the tabs */
.integrations-left {
  display: flex;
  flex-direction: column;
  width: 250px;
  background-color: #ffffff;
  padding: 0 20px; /* Removed extra space before the 1st tab */
  gap: 20px;
  height: 515px; /* Set height to match the right container */
}

/* Integration tab button styling */
.integration-tab {
  background-color: #ffffff; /* White background for tabs */
  color: #3D4544; /* Text color */
  border: 1px solid #D9D9D9; /* Stroke color */
  padding: 16px 40px; /* Padding */
  font-size: 18px !important;
  font-weight: 600 !important; /* Poppins Semi-bold */
  border-radius: 15px; /* Rounded corners */
  text-align: center; /* Center align text */
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease; /* Smooth transition */
  height: calc(515px / 6); /* Set height for each tab (85.83px) */
  display: flex;
  justify-content: center;
  align-items: center; /* Center the text */
  font-family: 'Poppins', sans-serif !important; /* Apply Poppins font */
}

/* Active tab styling */
.integration-tab.active {
  background-color: #009D4F; /* Active background color */
  color: #ffffff; /* Active text color */
  font-weight: 600 !important; /* Poppins Semi-bold */
  padding: 16px 40px; /* Padding */
  text-align: center; /* Center align text */
}

/* Right container for the slide content */
.integrations-right {
  flex: 1;
  background-color: rgba(61, 69, 68, 0.05); /* BG color with 5% transparency */
  border: 1px solid #D9D9D9; /* Stroke color */
  border-radius: 15px; /* Rounded corners */
  padding: 40px 40px 40px 40px;
  position: relative;
  height: 515px !important; /* Set height to 515px */
  font-family: 'Poppins', sans-serif !important; /* Apply Poppins font */
  overflow: hidden; /* Prevents image from overflowing the container */
}

/* Content layout inside the slide, using CSS Grid */
.integration-content {
  display: grid;
  grid-template-columns: 30% 70%; /* Set left column (text) to 20% and right column (image) to 80% */
  gap: 40px; /* Add space between columns */
  width: 100%;
  height: 100%;
  /*max-height: 100%;/* Make sure it fills the container height */
  
}
.integration-content:not(:last-child) {
  gap: 40px; /* Increased space between containers */
}

.integration-image {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-right: 40px;
  width: 100%; /* Make sure the container uses the full width */
  height: 100%; /* Ensure the image container fills the parent slide */
  /*max-width: 80%; /* Set a max-width for the image */
  overflow: hidden; /* Prevents overflow of the image */
  margin: 0 0px 0 0;/* Added 50px margin as requested */
}

.integration-image img {
  width: 100% !important; /* Ensures the image fills the container's width */
  height: auto; /* Maintain the aspect ratio */
  max-height: 100%; /* Constrain the height to prevent overflow */
  max-width: 100%; 
  object-fit: contain; /* Ensures the image fits inside the container without distortion */
  border-radius: 12px;
  /*margin-right: 50px;/* Rounded corners */
}

/* Slide styling */
.integration-slide {
  display: none;
  animation: fadeIn 0.3s ease;
}

/* Show active slide */
.integration-slide.active {
  display: block;
}



/* Left Column: Text section styling */
.integration-text {
  font-family: 'Poppins', sans-serif !important;
  font-size: 16px; /* Text size */
  line-height: 1.5; /* Make sure text spans multiple lines */
  color: #3D4544;
  margin-right: 20px; /* Space to the right */
  word-wrap: break-word; /* Ensure text wraps properly */
  overflow: hidden; /* Prevent overflow */
  width: 100%; /* Ensure it takes the full width of its grid column */
}

/* Title styling */
.integration-title {
  font-size: 32px !important;
  font-weight: 700 !important; /* Poppins Bold */
  color: #3D4544; /* Text color */
  font-family: 'Poppins', sans-serif !important; /* Apply Poppins font */
}

/* Subtitle styling */
.integration-subtitle {
  font-size: 16px !important;
  font-weight: 600 !important; /* Poppins Semi-bold */
  color: #009D4E;
  margin: 8px 0 24px;
  font-family: 'Poppins', sans-serif !important;
}

/* Description styling */
.integration-description {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #3D4544;
  height : 225px;
  max-width: 90%;
  
  font-family: 'Poppins', sans-serif !important;
}

/* CTA Button styling */
.integration-cta {
  display: inline-block;
  margin-top: 20px;
  /*position: absolute;*/
  bottom: 50px;
  background: linear-gradient(90deg, #EB6712 0%, #FEDF30 100%);
  color: white;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  font-family: 'Poppins', sans-serif !important;
}

/* Hover effect for CTA */
.integration-cta:hover {
  background: linear-gradient(90deg, #EB6712 0%, #FEDF30 100%);
  color: white;
  font-family: 'Poppins', sans-serif !important;
}


/* Mobile responsiveness */


@media screen and (max-width: 768px) {
  .integrations-wrapper {
    flex-direction: column;
    gap:10px;
    padding: 10px; /* Adjust padding for mobile */
  }

  /* Left container (integrations-left) should not scroll */
  .integrations-left {
    flex-direction: row;
    max-width: 100%-16;
    padding: 0 10px; /* Reduce padding */
    gap: 0px; /* Reduce gap between tabs */
    overflow: visible; /* Allow all tabs to be visible without scrolling */
    margin-bottom: 0;
    max-height: 25px;
  }

  /* Integration tab styling for smaller mobile screens */
.integration-tab {
  /*white-space: nowrap;*/
  flex: 0 0 auto;
  font-size: 10px !important; /* Smaller font size for mobile */
  padding: 4px 8px; /* Reduce padding for better fitting */
  margin: 0 3px; /* Ensure a small margin between tabs */
  max-width: 80px; /* Limit maximum width to ensure tabs fit */
  max-height: 25px !important; /* Limit maximum height */
  text-align: center; /* Ensure text is centered */
  display: flex;
  justify-content: center;
  align-items: center; /* Center the text in the tab */
  overflow: hidden; /* Ensure no overflow */
  margin-bottom:5px;
}
.integration-tab.active {
  /*white-space: nowrap;*/
  flex: 0 0 auto;
  font-size: 10px !important; /* Smaller font size for mobile */
  padding: 4px 8px; /* Reduce padding for better fitting */
  margin: 0 0px; /* Ensure a small margin between tabs */
  max-width: 80px; /* Limit maximum width to ensure tabs fit */
  max-height: 25px !important; /* Limit maximum height */
  text-align: center; /* Ensure text is centered */
  display: flex;
  justify-content: center;
  align-items: center; /* Center the text in the tab */
  overflow: hidden; /* Ensure no overflow */
}

  .integration-title {
    font-size: 16px !important; /* Adjust title font size */
  }

  .integration-cta {
    font-size: 12px !important;
    max-width: 50%;
    /* Adjust font size for description and CTA */
  }
   .integration-description {
    font-size: 12px !important;
     height:80px;
    /* Adjust font size for description and CTA */
  }


  .integration-subtitle {
    font-size: 16px !important; /* Adjust subtitle font size */
  }

  /* Move heading, subheading, and CTA to top in small mobiles */
  .integrations-right {
    margin-top: 0px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start; /* Move items to the top */
  }
  
 .integration-content {
 grid-template-columns: 1fr; /* Stack text and image vertically */
    gap: 8px; /* Ensure space between text and image */
  /*max-height: 100%;/* Make sure it fills the container height */
  
}


  .integration-text {
    order: 1; /* Move the text to the top */
  }

  .integration-image {
    order: 2; /* Move the image below the text */
    max-width: 100%; /* Ensure image fits */
    margin-top: 20px; /* Adjust space between text and image */
  }
}