/* Typogragphy */

/* import fonts */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');

body {
  font-family: "Geist", sans-serif;
  line-height: 170%;
  letter-spacing: -0.2px;
}

h1 {
  font-family: "Be Vietnam Pro", sans-serif;
  font-size: 40px;
  font-weight: bold;
}

h2 {
  font-family: "Be Vietnam Pro", sans-serif;
  line-height: 120%;
  letter-spacing: -1px;
  font-weight: bolder;
}

h3 {
  font-family: "Be Vietnam Pro", sans-serif;
  line-height: 130%;
  letter-spacing: -2px;
  font-weight: bold;
}

h4 {
  font-family: "Be Vietnam Pro", sans-serif;
  line-height: 135%;
  letter-spacing: -1.5px;
  font-weight: bold;
}

h5 {
  font-family: "Be Vietnam Pro", sans-serif;
  line-height: 150%;
  letter-spacing: -1px;
  font-weight: bold;
}

h6 {
  font-family: "Be Vietnam Pro", sans-serif;
  line-height: 180%;
  letter-spacing: -0.2px;
  font-weight: normal;
}

p,
.text {
  font-family: "Geist", sans-serif;
  line-height: 170%;
  letter-spacing: -0.2px;
}

.text-xl-normal {
  font-family: "Geist", sans-serif;
  line-height: 180%;
  letter-spacing: -0.2px;
}

.text-xl-bold {
  font-family: "Geist", sans-serif;
  line-height: 170%;
  letter-spacing: 0px;
  font-weight: bold;
}

.text-lg-normal {
  font-family: "Geist", sans-serif;
  line-height: 170%;
  letter-spacing: 0px;
}

@media (min-width: 992px) {
  h1 {
    font-size: 64px;
    line-height: 125%;
    letter-spacing: -3.5px;
  }

  h2 {
    font-size: 52px;
  }

  h3 {
    font-size: 48px;
  }

  h4 {
    font-size: 32px;
  }

  h5 {
    font-size: 24px;
  }

  h6 {
    font-size: 16px;
  }

  p,
  .text {
    font-size: 16px;
  }

  .text-xl-normal {
    font-size: 20px;
  }

  .text-xl-bold {
    font-size: 20px;
  }

  .text-lg-normal {
    font-size: 18px;
  }
}

/* Colors */

.color-gray-50 {
  color: #f5f8fb;
}

.bg-gray-50 {
  background-color: #f5f8fb;
}

.color-gray-100 {
  color: #f9f9fa;
}

.bg-gray-100 {
  background-color: #f9f9fa;
}
.color-gray-400 {
  color: #9d9d9d;
}

.bg-gray-400 {
  background-color: #9d9d9d;
}

.color-gray-600 {
  color: #4b4b56;
}

.bg-gray-600 {
  background-color: #4b4b56;
}

.color-gray-950 {
  color: #080808;
}

.bg-gray-950 {
  background-color: #080808;
}

.color-zinc {
  color: #52525a;
}

.bg-zinc {
  color: #52525a;
}

.color-teal {
  color: #081717;
}

.bg-teal {
  color: #081717;
}

.color-blue-50 {
  color: #ebf3ff;
}

.bg-blue-50 {
  background-color: #ebf3ff;
}

.color-blue-500 {
  color: #3575e1;
}

.bg-blue-500 {
  background-color: #3575e1;
}

.color-darkblue {
  color: #090a15;
}

.bg-darkblue {
  background-color: #090a15;
}
.color-darkbluedg {
  color: #0f1a2b;
}

.bg-darkbluedg {
  background-color: #0f1a2b;
}

.color-gradient {
  background: linear-gradient(to bottom, #3674e1, #ffffff);
  /*
    -webkit-background-clip: text; /* For Safari */
  -webkit-text-fill-color: transparent; /* For Safari */
  color: transparent; /* Fallback for other browsers */
}

.dg-bg-gradient {
  background: url(https://diginergy.info/wp-content/themes/diginergy/assets/congressdemo/img/bg-gradient.png)
    no-repeat center fixed;
  background-size: cover;
  background: linear-gradient(180deg, #9fc3ff 0%, #dbe8ff 30%, #ffffff 80%);
}

.color-indigo {
  color: #777eff;
}

.bg-indigo {
  background-color: #777eff;
}

.color-indigo-orange {
  color: #f89872;
}

.bg-indigo-orange {
  background-color: #f89872;
}

.color-white {
  color: #ffffff;
}

.bg-white {
  background-color: #ffffff;
}

.color-black {
  color: #000000;
}

.bg-black {
  background-color: #000000;
}

.color-green {
  color: #219653;
}

.bg-green {
  background-color: #219653;
}

/* Layout */

section {
  min-height: 100vh;
}

.navbar-toggler {
  border: 0;
}

.container-hero {
  height: calc(100vh - 69px);
}

.dg-bg-letstalk {
  background-image: url(https://diginergy.info/wp-content/themes/diginergy/assets/congressdemo/img/graph1.png);
  background-repeat: no-repeat;
  background-size: cover; /* Change this to cover */
  background-position: right bottom; /* You can combine both properties */
  width: 100%; /* Set the width to 30% of its original size */
  height: auto;
}

#letstalk {
  min-height: 100% !important;
}

.dg-bg-footerdg {
  background-repeat: no-repeat;
  background-size: cover; /* Change this to cover */
  background-position: right bottom; /* You can combine both properties */
  width: 30%; /* Set the width to 30% of its original size */
  height: auto;
}

#footerdg {
  min-height: 100% !important;
}

/*styles*/

.custom-margin1 {
  margin-left: 50px; /* Adjust the value as needed */
}

.bold-icon1 {
  filter: drop-shadow(
    3px 3px 6px rgba(0, 0, 0, 1.5)
  ); /* Adjust shadow as needed */
}

.nounderline {
  text-decoration: none; /* Removes the underline */
  color: 3575e1; /* Optional: Makes the link color inherit from its parent */
}

.nounderline:hover {
  text-decoration: underline; /* Optional: Adds underline on hover for better UX */
  color: #3575e1; /* Optional: Change color on hover (Bootstrap primary color) */
}

/*BGs*/

.dg-bg-ittransformation {
  background-image: url(https://diginergy.info/wp-content/themes/diginergy/assets/congressdemo/img/Heroit.png);
  background-size: cover; /* Cover the entire section */
  background-position: center; /* Center the image */
  height: 100%; /* Full viewport height */
  display: flex; /* Flexbox for centering content */
  align-items: center; /* Center vertically */
  justify-content: center; /* Center horizontally */
  border-radius: 20px; /* Adjust the value for more or less rounding */
  overflow: hidden; /* Ensures that any child elements that exceed the border radius are hidden */
  padding: 40px 20px;
}

#ittransformation {
  min-height: 80% !important;
}

.containerittrans {
  text-align: center; /* Center text */
  border-radius: 10px; /* Rounded corners for the container */
  padding: 20px; /* Padding inside the container */
}

.text-forresponsive {
  position: absolute;
  top: 10%; /* Adjust as needed */
  left: 10%; /* Adjust as needed */
  width: 80%; /* Adjust as needed */
  text-align: left; /* Align text to the left */
  color: white; /* Ensure text is visible */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Optional: add shadow for better visibility */
}

@media (max-width: 768px) {
  .text-forresponsive {
    top: 20%; /* Adjust for smaller screens */
    left: 5%; /* Adjust for smaller screens */
  }
}

@media (max-width: 480px) {
  /* Additional media query for very small screens */
  .text-forresponsive {
    top: 25%; /* Further adjust for smaller screens */
    left: 5%; /* Further adjust for smaller screens */
  }
}

.logodg {
  width: 100px; /* Set the desired width for the logo */
  height: auto; /* Maintain aspect ratio */
}

/*Styles for text and related ones*/

/*additional styles*/

.designservicesdg1 {
  position: relative;
  padding: 10px 16px;
  background-color: #212529;
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  overflow: hidden;
  z-index: 1;
}
 
.designservicesdg1::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  background: conic-gradient(
    from 0deg,
    #00bfff,
    #0044ff,
    #00bfff,
    #0044ff
  );
  border-radius: 12px;
  animation: rotateGlow 3s linear infinite;
  z-index: -2;
}
 
.designservicesdg1::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  background: #212529;
  border-radius: 8px;
  z-index: -1;
}
 
@keyframes rotateGlow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
 
.designservicesdg1:hover {
  box-shadow: 0 0 12px rgba(0, 136, 255, 0.5);
  transition: 0.3s;
}


/*pendaftaran middle pic*/
.middlepicturepend{
  margin-bottom: 200px;
}

/*custom 





dimensions v1*/
.custom-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(16, 30, 54, 0.10);
    padding: 24px 24px;
    min-width: 320px;
    max-width: 350px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0 auto;
  }
  .icon-box {
    background: #f4f6fb;
    border-radius: 10px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
  }
  .custom-card-title {
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 8px;
    color: #222;
    text-align: left;
  }
  .custom-card-text {
    color: #6c757d;
    font-size: 1rem;
    text-align: left;
  }
  .row-gap {
    row-gap: 32px;
  }

  /*End of custom card v1*/


  /*Requirement section*/
  .requirement-section {
    background: #fff;
    padding: 60px 0;
  }
  .requirement-title {
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 12px;
  }
  .requirement-subtitle {
    text-align: center;
    color: #555;
    margin-bottom: 40px;
    font-size: 1.1rem;
  }
 .requirement-item {
  background: #fff;
  border-radius: 12px;      /* Adjust for more or less roundness */
  padding: 24px 20px;
  min-width: 260px;
  min-height: 160px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 32px;
}
.requirement-icon {
  min-width: 32px;
  min-height: 32px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
  .requirement-item-title {
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 4px;
    color: #222;
  }
  .requirement-item-desc {
    color: #555;
    font-size: 1rem;
    margin-bottom: 0;
  }


/*CV spacing*/
.spacev1 {
  margin-left: 20%;
  margin-top: 5px;
}

/* Medium screens (tablets) */
@media (max-width: 1024px) and (min-width: 768px) {
  .spacev1 {
    margin-left: 10%; /* or whatever looks better */
  }
}

/* Small screens (mobile) */
@media (max-width: 768px) {
  .spacev1 {
    margin-left: 5%; /* or 0 for full width */
  }

#imageoflap {
    height: 280px;
    object-fit: cover;
    object-position: center;
  }
	#odooimg{
		height: 180px;
    object-fit: cover;
    object-position: center;
	}
}

/*faq for application section*/
.faq-section {
    max-width: 80%;
    margin: 24px auto;
    padding: 0 10%;   /* replaces your padding-left/right and removes vertical */
    margin-bottom: 0; /* removes bottom margin */
}
  .faq-title {
 font-family: 'Roboto', Arial, Helvetica, sans-serif;
  font-size: 40px;
  font-weight: 500;
  line-height: 100%;
  letter-spacing: -0.1px;
  text-align: center;
  color: #1E1A1C;
  padding: 24px 32px 16px 32px;
  margin: 0;
  }
  .faq-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .faq-question {
    cursor: pointer;
    font-size: 1.15rem;
    font-weight: 500;
    padding: 20px 32px;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    outline: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e9ecef; /* subtle line */
  }
  
  .faq-answer {
    padding: 32px 32px 20px 32px;
    color: #444;
    font-size: 1rem;
    display: none;
  }
  .faq-item.open .faq-answer {
    display: block;
  }
  .faq-arrow {
    font-size: 1.2rem;
    transition: transform 0.2s;
  }
  .faq-item.open .faq-arrow {
    transform: rotate(180deg);
  }
 .faq-small {
    color: #444;
    font-size: 0.7rem;
    padding: auto;
  }
.email-blue1 {
    color: blue;
}
  /**/

.linkedindgicon {
    color: white; /* LinkedIn blue */
    background: transparent; /* ensure no bg from container */
    border: 2px;
    border-color: black;
  }
  
.iconeffect1 {
  width: 50px; /* Set a specific width */
  height: 50px; /* Set a specific height to make it square */
  border-radius: 50%; /* Make it fully rounded */
  margin-right: 10px; /* Add some space between the image and the Bootstrap icon */
  vertical-align: middle; /* Align the image vertically with the text */
}

.text-left-margindg {
  margin-left: 20px; /* Adjust this value as needed */
}

.emailformdg {
  display: flex; /* Use flexbox to align items */
  align-items: stretch; /* Ensure input and button are the same height */
  justify-content: flex-start; /* Align items to the start */
  margin-left: 50px; /* Adjust this value to move the form more to the right */
}

.emailformdg .form-control {
  flex: 2; /* Allow the input to take up more space */
  margin-right: 5px; /* Add some space between input and button */
  padding: 10px; /* Add padding to the input box */
  min-width: 200px; /* Set a minimum width for the input box */
}

.emailformdg .btn {
  height: 38px; /* Adjust the height of the button */
}

/* Optional: Add some hover effect for the button */
.emailformdg .btn:hover {
  background-color: #0056b3; /* Darker shade on hover */
}

/* Responsive styles */
@media (max-width: 576px) {
  .emailformdg {
    flex-direction: column; /* Stack input and button vertically */
    margin-left: 0; /* Remove left margin on smaller screens */
    align-items: center; /* Center items */
  }

  .emailformdg .form-control {
    margin-right: 0; /* Remove right margin */
    width: 100%; /* Make input full width */
    min-width: unset; /* Remove minimum width constraint */
    padding: 8px; /* Adjust padding for smaller screens */
  }

  .emailformdg .btn {
    width: 100%; /* Make button full width */
    margin-top: 10px; /* Add space between input and button */
  }
}

.customnavbar4 {
  display: flex;
  align-items: center; /* Vertically centers the content */
  background-image: url("https://diginergy.info/wp-content/themes/diginergy/assets/congressdemo/img/Backgroundpattern.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 150px; /* Set a fixed height or adjust padding */
}

.nocodepic {
  width: 60%;
  margin-left: 30px;
}

.custom-imglanding4 {
  width: 150px; /* Set your desired width */
  height: auto; /* Maintain aspect ratio */
  margin: 0;
}

.position-relative {
  position: relative;
}

.overlay-text {
  position: absolute;
  top: 20%; /* Adjust this value to move the text higher */
  left: 15%; /* Increase this value to move the text further from the left */
  transform: translate(
    0,
    0
  ); /* Remove the translate to keep it in the new position */
  color: white; /* Change text color as needed */
  text-align: left; /* Align text to the left */
  padding: 10px; /* Optional: padding around the text */
  border-radius: 5px; /* Optional: rounded corners */
}

.form-overlay {
  position: absolute; /* Position the form absolutely */
  bottom: 20px; /* Adjust this value to move the form higher or lower */
  left: 10%; /* Decrease this value to move the form closer to the left */
  transform: translateX(0); /* No need to center the form */
  z-index: 10; /* Ensure the form is above the image */
}

#smallsection {
  padding: 200px 0; /* Adjust top and bottom padding */
}

h1 {
  margin-top: 20px; /* Adjust top margin */
  margin-bottom: 20px; /* Adjust bottom margin */
}

.column-content p {
  margin: 10px 0; /* Adjust margin for paragraphs */
}

.bg-colorpinki {
  background-color: #ff7f6e;
}

.morerounddg {
  border-radius: 3.125rem; /* Adjust the value as needed */
}

.small-carddg {
  width: 300px; /* Set a fixed width */
  padding: 10px; /* Reduced padding */
}

.small-carddg img {
  max-width: 70%; /* Adjusted max-width for the image */
}

.small-carddg .card-body {
  padding: 5px; /* Reduced padding for the card body */
}

.small-carddg .card-title {
  font-size: 1.2rem; /* Adjusted font size for the title */
}

.small-carddg .card-text {
  font-size: 0.9rem; /* Adjusted font size for the text */
}

.dgrequestbuttom {
  border: 6px solid white;
  max-width: 500px;
}

.no-borderemail {
  border: none; /* Remove the border */
  outline: none; /* Remove the outline on focus */
  box-shadow: none; /* Remove any shadow */
}

.logokleindg {
  max-height: 42px;
}

.imagesmalldg {
  max-height: 42px; /* Set the maximum height */
  max-width: 100%; /* Ensure it doesn't exceed the width of its container */
  height: auto; /* Maintain aspect ratio */
  width: auto; /* Maintain aspect ratio */
}

.breadcrumbdghome {
  margin: 0; /* Remove default margin */
  padding: 0; /* Remove default padding */
}

.sectionhomedg {
  margin: 0; /* Remove margin from sections */
  padding: 0; /* Remove padding from sections */
}

ul.navbar-nav .nav-link.custom-nav-linkdg {
  background: #212529 !important;
  color: #fff !important;
  margin: 0 8px !important;
  padding: 8px 22px !important;
  font-weight: 500;
  transition: background 0.2s, color 0.2s !important;
  z-index: 1000 !important;
  position: relative !important;
}

ul.navbar-nav .nav-link.custom-nav-linkdg.active,
ul.navbar-nav .nav-link.custom-nav-linkdg:focus,
ul.navbar-nav .nav-link.custom-nav-linkdg:hover {
  background: #3575e1 !important;
  color: #fff !important;
}

.small-icondg {
  width: 300px; /* Set a fixed width */
  padding: 10px; /* Reduced padding */
}

.carousel-control-prev-icondg,
.carousel-control-next-icondg {
  background-color: #3575e1; /* Bootstrap blue-500 */
  border-radius: 50%;
  background-size: 60% 60%;
  background-position: center;
  background-repeat: no-repeat;
  width: 3rem;
  height: 3rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
/*processpicturescrolling*/
.scroller-containerdg {
  position: relative;
  width: 1200px; /* or 100% for full container width */
  height: 400px;
  overflow: hidden;
  margin: 40px auto;
  border: 1px solid #ccc;
  background: #f9f9f9;
  border: none;
}
.scroller-imagedg {
  position: absolute;
  top: 0;
  left: 0;
  transition: left 0.3s;
  height: 100%;
  user-select: none;
  pointer-events: none;
}
.arrowdg {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background: #3575e1;
  border: none;
  border-radius: 24px;
  font-size: 2rem;
  cursor: pointer;
  z-index: 2;
  user-select: none;
  pointer-events: auto;
}

.arrowdg:hover {
  background-color: #005fa3; /* Slightly darker on hover */
}
.arrowdg.leftdg {
  left: 10px;
}
.arrowdg.rightdg {
  right: 10px;
}
.arrowdg:active {
  background: #eeeeee;
}

/*custom carousel*/
/*custom carousel*/
.carousel-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 1400px;
  margin: 0 auto;
      padding: 0;
}

.carousel-scroll {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 20px;
  padding-bottom: 1rem;
  scrollbar-width: none;
  scroll-behavior: smooth;
}

.carousel-scroll::-webkit-scrollbar {
  display: none;
}

.carousel-card {
  flex: 0 0 300px;
  min-width: 300px;
  max-width: 300px;
  margin-right: 20px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
  scroll-snap-align: start;
  display: flex;
  align-items: stretch;
}
.slider-container {
  width: 100%;
  display: flex;
  justify-content: center;
}
input[type="range"].carousel-slider {
  width: 60%;
  margin-top: 1rem;
  accent-color: #ebf3ff; /*topun rengi*/
}

/* custom carousel v2 - improved responsive version */
.carousel-containerv1 {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 0 80px; /* space for arrows */
  margin: 0 auto;
}

.carousel-scrollv1 {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding: 10px 0;

  /* Hide scrollbar for Chrome, Safari and Opera */
  scrollbar-width: none;     /* Firefox */
  -ms-overflow-style: none;  /* IE and Edge */
}
.carousel-scrollv1::-webkit-scrollbar {
  display: none; /* Chrome, Safari and Opera */
}

.carousel-cardv1 {
  flex: 0 0 28%;
  min-width: 260px;
  max-width: 90vw;
  box-sizing: border-box;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  scroll-snap-align: start;
  margin-right: 0;
  transition: box-shadow 0.2s;
}

.carousel-cardv1:last-child {
  margin-right: 0;
}

.carousel-control-prevv1,
.carousel-control-nextv1 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  background: #2563eb;
  border: none;
  font-size: 2rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-control-prevv1 {
  left: 16px;
}

.carousel-control-nextv1 {
  right: 16px;
}

.blue-buttondg1 {
  background: #2563eb !important;
}

.arrowwhite1 {
  color: #fff !important;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
  .carousel-cardv1 {
    flex: 0 0 40%;
    min-width: 220px;
  }
  .carousel-containerv1 {
    padding: 0 40px;
  }
}

@media (max-width: 900px) {
  .carousel-cardv1 {
    flex: 0 0 60%;
    min-width: 180px;
  }
  .carousel-containerv1 {
    padding: 0 24px;
  }
}

@media (max-width: 600px) {
  .carousel-cardv1 {
    flex: 0 0 85%;
    min-width: 140px;
    max-width: 95vw;
  }
  .carousel-containerv1 {
    padding: 0 8px;
  }
  .carousel-control-prevv1,
  .carousel-control-nextv1 {
    width: 36px;
    height: 36px;
    font-size: 1.3rem;
  }
}

/*custom slider*/
.custom-slider-wrapper {
  background: #ebf3ff; /*sliderin arkasinin rengi*/
  border-radius: 8px;
  padding: 4px 12px;
  width: 90%;
  margin: 0 auto;
}
.custom-slider {
  width: 100%;
  accent-color: #220355; /*??*/
  background: transparent;
  height: 8px;
  border-radius: 8px;
}
.slider-arrow-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  background: #fff;
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #aaa;
  font-size: 18px;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
}

.slider-arrow-btn:hover {
  color: #fff;
  background: #1976d2; /* Optional: highlight on hover */
}

.leftbtnwhy {
  left: -22px; /* Adjust as needed */
}

.rightbtnwhy {
  right: -22px; /* Adjust as needed */
}


.cardhoverdg {
  transition: all 0.3s ease;
}

.cardhoverdg:hover {
  transform: translateY(-8px);
  background-color: #e5effc !important;
  box-shadow: 0 6px 20px #fcfae5(0, 0, 0, 0.12);
}

.ourservicecardcolor {
  background-color: #eef1f9;
}

.ourservicessize1 {
min-height: 100vh;
}

section.dg-bg-gradient {
  margin: 0;
  padding: 0;
  border: none;
}


.custom-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  background: #3575e1;
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: background 0.2s;
}

.custom-arrow:hover {
  background: #3575e1; /* Slightly darker blue on hover */
}

.carousel-control-prev.custom-arrow {
  left: -60px; /* Adjust as needed */
}

.carousel-control-next.custom-arrow {
  right: -60px; /* Adjust as needed */
}

/* Make the default Bootstrap arrow icon white and bigger */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-image: none !important; /* Remove default icon */
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
}

/* Custom arrow using CSS */
.carousel-control-prev-icon::after,
.carousel-control-next-icon::after {
  content: "";
  display: block;
  width: 0.7em;
  height: 0.7em;
  border: solid white;
  border-width: 0 0.2em 0.2em 0;
  padding: 0.2em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-60%, -50%) rotate(135deg);
}

.carousel-control-next-icon::after {
  transform: translate(-40%, -50%) rotate(-45deg);
}

/* Optional: Reduce card margin if needed */
.card {
  margin-left: 0.5rem !important;
  margin-right: 0.5rem !important;
  border: none !important;
  box-shadow: none !important;
}



.left-btn {
  left: 0;
}

.right-btn {
  right: 0;
}

.carousel-scroll {
  overflow: hidden;
  width: 100%;
}

.carousel-card {
  min-width: 300px; /* Adjust as needed */
  margin: 0 10px;
  flex-shrink: 0;
  transition: transform 0.4s;
}


/* Use these for WPForms styling */
.wpforms-form {
  max-width: 500px;
  margin: 0 auto;
}
.wpforms-field {
  margin-bottom: 1.5rem;
}
.wpforms-field-label {
  font-weight: 600;
  margin-bottom: 0.5rem;
  display: block;
}
.wpforms-field input,
.wpforms-field textarea {
  width: 100%;
  padding: 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid #d1d5db;
  background: #f8fafc;
}
.wpforms-submit {
  background: #2563eb;
  color: #fff;
  border: none;
  padding: 0.75rem 2rem;
  border-radius: 0.5rem;
  font-weight: 600;
  cursor: pointer;
}
.wpforms-submit:hover {
  background: #1e40af;
}
/* Make first and last name fields appear side by side */
.wpforms-field.wpforms-field-name .wpforms-field-row {
  display: flex;
  gap: 1rem;
}

.wpforms-field.wpforms-field-name .wpforms-field-row .wpforms-one-half {
  width: 50%;
}

/*Style names*/
/* Hide the main Name* label */
.wpforms-field.wpforms-field-name .wpforms-field-label {
  display: none;
}

/* Stack sublabels above each input */
.wpforms-field.wpforms-field-name .wpforms-field-row > div {
  display: flex;
  flex-direction: column;
}

/* Style the First/Last sublabels */
.wpforms-field.wpforms-field-name .wpforms-field-sublabel {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 500;
}
/* Force sublabels above the input fields */
.wpforms-field.wpforms-field-name .wpforms-field-row > div {
  display: flex;
  flex-direction: column;
}

.wpforms-field.wpforms-field-name
  .wpforms-field-row
  > div
  .wpforms-field-sublabel {
  order: -1; /* Move sublabel to the top */
  margin-bottom: 0.25rem;
  font-weight: 500;
}

/* Hide the original sublabels */
.wpforms-field.wpforms-field-name .wpforms-field-sublabel {
  color: transparent;
  position: relative;
}

/* Add custom text for First Name */
.wpforms-field.wpforms-field-name
  .wpforms-field-row
  > div:first-child
  .wpforms-field-sublabel:after {
  content: "First Name";
  color: #222;
  position: absolute;
  left: 0;
  top: 0;
}

/* Add custom text for Last Name */
.wpforms-field.wpforms-field-name
  .wpforms-field-row
  > div:last-child
  .wpforms-field-sublabel:after {
  content: "Last Name";
  color: #222;
  position: absolute;
  left: 0;
  top: 0;
}


/* Responsive: stack on mobile */
@media (max-width: 600px) {
  .wpforms-field.wpforms-field-name .wpforms-field-row {
    flex-direction: column;
    gap: 0.5rem;
  }
  .wpforms-field.wpforms-field-name .wpforms-field-row .wpforms-one-half {
    width: 100%;
  }
}

/* trusted section*/
.logo-slider {
  overflow: hidden;
  width: 100%;
  max-width: 100vw;
  white-space: nowrap;
  height: 60px;
  display: flex;
  align-items: center;
}

.logo-track {
  display: flex;
  width: max-content;
  animation: scroll-logos 30s linear infinite;
  white-space: nowrap;
  align-items: center;
  gap: 2rem;
}

.logo-img {
  height: 60px;
  width: 120px;
  object-fit: contain;
  /* Removed margin-bottom: 1rem; */
}

@keyframes scroll-logos {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.logo-category {
  font-size: 1.5rem;
  font-weight: bold;
  color: #222;
  white-space: nowrap;
  display: flex;
  align-items: center;
  height: 60px;
  padding: 0 1rem;
  letter-spacing: 1px;
}

/* Combined mobile styles */
@media (max-width: 768px) {
  .logo-slider {
    height: 40px;
  }
  .logo-img {
    height: 40px;
    width: 80px;
  }
  .logo-track {
    gap: 1rem;
    animation-duration: 18s;
  }
  .logo-category {
    font-size: 1.2rem;
    height: 40px;
    padding: 0 0.5rem;
  }
}

.trustedsectiondg {
  min-height: 300px;
}
/*dropdownmenu*/
@media (min-width: 992px) {
  .navbar .dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
  }
}

/*why work with us section*/
.whyworkwithussectioncarouselrow {
  width: 100%;
  max-width: 900px;
  margin: auto;
}

.whyworkwithussectioncarouselcard {
  width: 80px;
  padding: 10px;
}

.whyworkwithusbuttonleft {
  position: absolute;
  left: -50px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  background-color: #3575e1;
}

.whyworkwithusbuttonright {
  position: absolute;
  right: -50px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  background-color: #3575e1;
}
/*our services section*/
.ourservicesimgsize {
  width: 120px;
  height: 120px;
  object-fit: contain; /* or 'cover' if you want to crop */
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  
}

#ourservices {
  padding-bottom: 3rem;
  margin-bottom: 2rem;
}
#portfolio {
  padding-top: 3rem;
  margin-top: 2rem;
}
@media (max-width: 768px) {
  #ourservices {
    padding-bottom: 2rem;
  }
  #portfolio {
    padding-top: 2rem;
  }
}
/*Industry Solutions*/

.carouselcontainerv1 {
  max-width: 1400px;
  margin: 0 auto;
}

.arrowwhite1
{color: white;}

/*Testiomanls section*/

.testimonalssectionheight{
min-height: 300px;

}

.stillthinkingsectionheight{
min-height: 400px;

}




.doctor-hero-img {
  max-width: 200%;
}

.oeffnungszeiten-table {
  border-collapse: collapse;
  font-size: 1.1rem;
}
#oeffnungszeiten {
  min-height: unset;
  padding-top: 40px;
  padding-bottom: 40px;
}

.nowrap {
  white-space: nowrap;
}

.smallbold-textdg {
  font-size: 0.6rem;
  font-weight: bold; /* Adjust this value as needed */
}

.smallbold-textdg2 {
  font-size: 1rem;
  font-weight: bold; /* Adjust this value as needed */
}


.card-img-fixed {
  width: 100%;
  height: 180px; /* or whatever height fits your design */
  object-fit: cover; /* or 'contain' if you want the whole image visible */
  object-position: center;
  display: block;
}

.mycookiedg {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #222;
  color: #fff;
  padding: 20px;
  z-index: 9999;
  display: block;
}

/*wp cookie*/
/* Ensure the cookie banner is responsive */
.cc-window {
  max-width: 100%;
  width: auto;
  padding: 15px;
  box-sizing: border-box;
  z-index: 9999; /* Ensure it appears above other elements */
}

/* Fix positioning */
.cc-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #f8f9fa; /* Adjust to match your design */
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
}

/* Complianz cookie banner responsive styles */
.cmplz-cookiebanner {
  max-width: 100%;
  width: auto;
  padding: 15px;
  box-sizing: border-box;
  z-index: 9999;
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #f8f9fa;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
}

.cmplz-btn {
  display: inline-block;
  padding: 10px 20px;
  font-size: 14px;
  margin: 5px;
  text-align: center;
  border-radius: 5px;
  cursor: pointer;
}

@media (max-width: 768px) {
  .cmplz-cookiebanner {
    padding: 10px;
    font-size: 14px;
  }
  .cmplz-btn {
    width: 100%;
    margin-bottom: 10px;
  }
}

/* CSS for reveal animation */
.reveal-animation {
  opacity: 0;
  transform: translateY(30px) scale(0.95); /* Start slightly smaller */
  transition: opacity 0.6s 0.2s ease-out,
    /* 0.6 seconds duration, 0.2 seconds delay */ transform 0.6s 0.2s ease-out; /* 0.6 seconds duration, 0.2 seconds delay */
}

.reveal-animation.revealed {
  opacity: 1;
  transform: translateY(0) scale(1); /* End at normal size */
}

.blue-arrowdg1 {
  background-color: #0056b3; /* Set a darker blue as the default */
  color: white; /* White arrow color */
  border: none; /* Remove border */
  border-radius: 50%; /* Make it circular */
  width: 50px; /* Set width */
  height: 50px; /* Set height */
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Optional shadow */
  cursor: pointer;
  transition: background-color 0.3s ease; /* Smooth transition for hover */
}

.blue-arrowdg1:hover {
  background-color: #003d80; /* Slightly darker blue on hover */
}



/*banners*/



/*hero section*/

.herosection1p {
  font-size: 24px;
}
.herosectionbg1 {
  background-color: #eef1f9;
  margin-top: -3rem;
}

.herosectioncard1 {
  overflow: hidden;
  margin-top: -3rem;
}

.herosectionimg1 {
  object-fit: cover;
  height: 300px;
  border-radius: 0.75rem;
}

.marginbt5px {
  margin-bottom: 5px;
}

.hero-title1 {
  font-size: 48px;
  line-height: 1.1;
}

@media (max-width: 991.98px) {
  .hero-title {
    font-size: 36px;
  }
}

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


/*sections for responsivity*/
.hero-section1st {
    display: flex;
    flex-direction: column;
    width: 100%;
   
    margin: 0 auto;
    gap: 80px;
    /* No fixed height, let content define it */
    /* Add padding if needed for spacing inside the section */
}
@media (max-width: 768px) {
    .hero-section1st {
        gap: 32px;
        padding: 20px;
    }
}

.movinglogossection1 {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 46px 35px;
    gap: 10px;
    background: #fff;
    /* No fixed height, let content define it */
}
@media (max-width: 768px) {
    .movinglogossection1 {
        padding: 20px 10px;
        gap: 6px;
    }
}




.whyworkwithussection1 {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 950px;
    margin: 0 auto;
    padding: 60px 120px;
    gap: 50px;
    background: #EEF1F9;
}
@media (max-width: 768px) {
    .whyworkwithussection1 {
        padding: 24px 12px;
        gap: 20px;
        height: auto; /* Let content define height on small screens */
    }
}

.oursservicessectiondg1 {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 1343px;
    margin: 0 auto;
    gap: 72px;
    background: #fff;

  max-height: 50vh;

}
@media (max-width: 768px) {
    .oursservicessectiondg1 {
        gap: 24px;
        height: auto; /* Let content define height on small screens */
        padding: 20px 10px; /* Add padding if needed */
    }
}

.ourprocesssection1 {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 70px 120px;
    gap: 100px;
    background: #fff;
    /* No fixed height, let content define it */
}
@media (max-width: 768px) {
    .ourprocesssection1 {
        padding: 24px 12px;
        gap: 32px;
    }
}

.testimonalssection1 {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 80px 120px;
    gap: 32px;
    background: #fff;
    /* No fixed height, let content define it */
}
@media (max-width: 768px) {
    .testimonalssection1 {
        padding: 24px 12px;
        gap: 16px;
    }
}

.formsection1 {
    width: 100%;
    max-width: 1440px;
    height: 805px;
    margin: 0 auto;
    background: #E1EBFB;
}
@media (max-width: 768px) {
    .formsection1 {
        height: auto; /* Let content define height on small screens */
        padding: 24px 12px; /* Add padding if needed */
    }
}



/*Mobile Responsivity Versuch 1*/
html, body {
  overflow-x: hidden; /* Prevent horizontal scrolling */
}


/*blue button*/
.blue-buttondg1 {
    background-color: #3575e1 !important;
    border: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
    opacity: 1 !important;
    transition: background-color 0.2s;
}

.blue-buttondg1:hover,
.blue-buttondg1:focus,
.blue-buttondg1:active {
    background-color: #3575e1 !important; /* a darker blue for hover/focus/active */
    box-shadow: none !important;
    background-image: none !important;
    opacity: 1 !important;
}

/*Style alternatives for the cards with images*/
.card-img-container {
  /* Ensures all images have the same aspect ratio and are centered */
  overflow: hidden;
}
.object-fit-cover {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.card-content-above-tagsdg1 {
  min-height: 120px; /* Adjust as needed for your design */
}


/* Styles for Doctors */
.bodycolordgd {
  background-color: #fff;
}



/* custom Navbar */


/* Hero Section */
.bodycolordgd .herosectiondgd {
  width: 100vw;
  height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f9fa;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
}

.bodycolordgd .hero-imgdgd {
  max-width: 90vw;
  max-height: 90%;
  border-radius: 32px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  object-fit: cover;
}

/*Image sizes*/

.rectangledg1 {
  width: 410px;
  height: 465px;
  width: 410;
opacity: 1;
border-radius: 40px;

  object-fit: cover; /* Keeps the image nicely cropped */
  border-radius: 12px; /* Optional: rounded corners */
  box-shadow: 0 2px 12px rgba(0,0,0,0.08); /* Optional: subtle shadow */
}

.squaredg1 {
  width: 200px;
  height: 300px;
  object-fit: cover; /* Keeps the image nicely cropped */
  border-radius: 12px; /* Optional: rounded corners */
  box-shadow: 0 2px 12px rgba(0,0,0,0.08); /* Optional: subtle shadow */
}


.dgcard1 {
  background: #F6FAFB;
  border-radius: 32px;
  border: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  padding: 32px 24px 24px 24px;
  text-align: left;
}
.dgcard1 .card-body {
  padding: 0 0 24px 0;
}
.dgcard1 img {
  border-radius: 24px;
  margin-top: 8px;
  width: 100%;
  object-fit: cover;
}



/*cardsizes for docs*/


.dgdcardgroup1 {
  width: 531px;
  height: 655px;
  opacity: 1;
  border-radius: 40px;
  background-color:#F0F5F6;
;
}

.dgdcardgroup2 {
  width: 725px;
  height: 655px;
  opacity: 1;
  border-radius: 40px;
    background-color:#F0F5F6;

}

/* for images inside */
.dgdcardimagegroup1 {
  width: 451px;
  height: 466px;
  object-fit: cover; /* keeps ratio while cropping */
  border-radius: 32px;
}

.dgdcardimagegroup2 {
  width: 645px;
  height: 466px;
  object-fit: cover;
  border-radius: 40px;
}





/*sizes for docs*/
.docsection1{
  width: 1630;
height: 1087;
opacity: 1;
top: -130px;
left: -33px;

}

.custom-rectanglecard1 {

  background-color:  #F0F5F6;

  border-radius: 8px;        /* small rounded corners */
  width: 100%;               /* take available column width */
  max-width: 410;          /* limit width on big screens */
  max-height: 465px;         /* make it taller so height > width */
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: left;
}
/*pricing cards*/
.custom-plan-card {
  background: #F0F5F6;   /* default background */
  border-radius: 16px;
  border: none;
  min-height: 460px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Popular card gets gradient */
.custom-plan-card.plan-popular {
  background: linear-gradient(
    180deg,
    rgba(201, 238, 254, 0) 0%,
    rgba(202, 239, 255, 0.5) 99.99%,
    #CBEFFF 100%
  );
}

.custom-plan-card .card-body {
  flex: 1;
  padding: 2rem;
}

.price-footer {
  border-top: 1px solid rgba(0,0,0,0.05);
}


/*button styles docs*/
/* Button overlay */
.buttonpositiondocs1 {
  position: absolute;
  top: 40%;     
  left:25%;    
  transform: translate(-50%, -50%);
  z-index: 10;
  background-color: white;
  border-color: white;

}

/* Mobile tweak */
@media (max-width: 768px) {
  .buttonpositiondocs1 {
    min-width: 180px;
    height: 50px;
    font-size: 14px;
  }
}


.col-12.p-0 {
  display: flex;
  justify-content: center;
}

/* Footer for docs */
.footerdoc1 {
  width: 100%;
  min-height: 300px;         /* UX spec height */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.footerdoc1 a {
  text-decoration: none;
  font-size: 0.95rem;
}

.footerdoc1 a:hover {
  color: #0d6efd; /* Bootstrap primary */
}
/*docs fonts*/
.docsfonturbanist1{
  font-family: Urbanist;
font-weight: 600;
font-style: SemiBold;
font-size: 48px;
line-height: 120%;
letter-spacing: -1px;

}


.docsfonturbanist2{

font-family: Urbanist;
font-weight: 400;
font-style: Regular;
font-size: 18px;
line-height: 170%;
letter-spacing: 0px;

}
.docsfonturbanist3{
font-family: Urbanist;
font-weight: 500;
font-style: Medium;
font-size: 16px;
line-height: 160%;
letter-spacing: 0px;
color: #0A0A0A;
}


/* CSS for Odoo*/

/*tipography*/
.odoop1{
 
  width: 44px;  /* Added 'px' */
  height: 24px; /* Added 'px' */
  opacity: 1;
  top: 54px;
  left: 637px;
  color: #000000;
  font-family: Inter  !important;
  font-weight: 400;
  font-style: normal; /* Changed from 'Regular' */
  font-size: 16px;
  line-height: 130%;
  letter-spacing: 0.5%; /* Note: this might not work as expected */
  opacity: 1; /* Duplicate removed below */
  margin-left: 40px;
}
/*trusted tip*/
.odoop2{
 width: 592;
height: 21;
top: 832px;
left: 424px;
opacity: 1;

  font-family: DM Sans !important;
font-weight: 400;
font-style: Regular;
font-size: 16px;
line-height: 130%;
letter-spacing: 0.5%;
text-align: center;

}

.odoop3 {

font-family: Inter  !important;
font-weight: 400;
font-style: Regular;
font-size: 16px;
line-height: 130%;
letter-spacing: 0.5%;
color: #777777;
padding-left: 20px;
padding-right: 20px;
}
.odoop4 {

font-family: DM Sans !important;
font-weight: 400;
font-style: Regular;
font-size: 16px;
line-height: 130%;
letter-spacing: 0.5%;
color: #111827;
margin-left: 30px;
text-align: left;
} 

.odootipfancy{
  font-family: Caveat  !important;
font-weight: 700;
font-style: Bold;
font-size: 78px;
line-height: 130%;
letter-spacing: 0.5%;

}

.odootipfancy2{
 
font-family: Caveat  !important;
font-weight: 700;
font-style: Bold;
font-size: 48px;
line-height: 130%;
letter-spacing: 0.5%;

}

.odootipfancy3{
font-family: Caveat  !important;
font-weight: 700;
font-style: Bold;
font-size: 48px;
line-height: 130%;
letter-spacing: 0.5%;
text-align: center;
}

.odootipfancy4{

font-family: Caveat !important;
font-weight: 700;
font-style: Bold;
font-size: 50px;
line-height: 130%;
letter-spacing: 0.5%;
}


.buttonodop1
{
  width: 92px;
height: 24px;
opacity: 1;
top: 590px;
left: 117px;
font-family: DM Sans  !important;
font-weight: 700;
font-style: Bold;
font-size: 16px;
line-height: 24px;
letter-spacing: 0%;
vertical-align: middle;
color:  #FFFFFF;


}

.buttonodop2
{
width: 107px;
height: 24px;
opacity: 1;
top: 590px;
left: 316px;
color:  #714B67;
font-family: DM Sans  !important;
font-weight: 400;
font-style: Regular;
font-size: 16px;
line-height: 24px;
letter-spacing: 0%;
vertical-align: middle;

;


}


.buttonodopfreeconsultion {
  background-color: #714B67; /* purple background */
  color: #ffffff; /* white text */
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  padding: 8px 20px;
  border: none;
  border-radius: 8px; /* rounded corners */
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
width: 192;
height: 58;
top: 37px;
left: 1064px;
opacity: 1;
border-radius: 10px;

}

.buttonodopfreeconsultion:hover {
  background-color: #5a3853; /* darker purple on hover */
  color: #fff;
}

/* Gold Partner Section Styles */
.goldpartner-section {
  position: relative;
  overflow: visible;
  background-color: #F3F4F6; /* Light gray background */
  min-height: 500px; /* Adjust as needed */
}

/* Left half circle */
.goldpartner-section::before {
  content: '';
  position: absolute;
  width: 600px;
  height: 600px;
  top: 50%;
  transform: translateY(-50%);
  left: -300px; /* this aligns it to the screen edge */
  background-color: #F3F4F6;
  border-radius: 50%;
  opacity: 1;
  z-index: 0;
  clip-path: inset(0 0 0 50%);
}

/* Right half circle */
.goldpartner-section::after {
  content: '';
  position: absolute;
  width: 600px;
  height: 600px;
  top: 50%;
  transform: translateY(-50%);
  right: -300px; /* Half of the circle is hidden on the right */
  background-color: #F3F4F6;
; /* Teal/dark blue color */
  border-radius: 50%;
  opacity: 1;
  z-index: 0;
}

/* Ensure content is above decorative elements */
.goldpartner-section .container-odoo {
  position: relative;
  z-index: 1;
}

/* Responsive styles for tablets */
@media (max-width: 768px) {
	#imagefordifficulty{
		display: none;
	}
  .goldpartner-section::before,
  .goldpartner-section::after {
    display: none;
  }
	.hero-section-odoo.has-top-circle::before {
		display: none;
	}
  .goldpartner-section::before {
    left: -150px;
  }
  
  .goldpartner-section::after {
    right: -150px;
  }
}

/* Responsive styles for phones */
@media (max-width: 576px) {
  .goldpartner-section {
    min-height: 400px;
  }
  
  .goldpartner-section::before,
  .goldpartner-section::after {
    width: 200px;
    height: 200px;
  }
  
  .goldpartner-section::before {
    left: -100px;
  }
  
  .goldpartner-section::after {
    right: -100px;
  }
}

/* Extra small phones */
@media (max-width: 375px) {
  .goldpartner-section::before,
  .goldpartner-section::after {
    width: 150px;
    height: 150px;
  }
  
  .goldpartner-section::before {
    left: -75px;
  }
  
  .goldpartner-section::after {
    right: -75px;
  }
}



/* Top-left quarter circle - only for sections with this additional class */
.hero-section-odoo.has-top-circle {
  position: relative;
  overflow: hidden;
}

.hero-section-odoo.has-top-circle::before {
  content: '';
  position: absolute;
  width: 663px;
  height: 663px;
  top: -261px;
  left: -282px;
  background-color: #F3F4F6;
  border-radius: 50%;
  opacity: 1;
  z-index: 0;
}

/* Ensure content is above decorative element */
.hero-section-odoo.has-top-circle .container-odoo {
  position: relative;
  z-index: 1;
}

/* Responsive styles for tablets */
@media (max-width: 768px) {
  .hero-section-odoo.has-top-circle::before {
    width: 450px;
    height: 450px;
    top: -180px;
    left: -190px;
  }
}

/* Responsive styles for phones */
@media (max-width: 576px) {
  .hero-section-odoo.has-top-circle::before {
    width: 300px;
    height: 300px;
    top: -120px;
    left: -130px;
  }
}

/* Extra small phones */
@media (max-width: 375px) {
  .hero-section-odoo.has-top-circle::before {
    width: 200px;
    height: 200px;
    top: -80px;
    left: -85px;
  }
}

.footerodoo {
  background-color: #000;        /* or whatever color you want */
  color: #fff;                   /* default text color */
  width: 100vw;                  /* span full viewport width */
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;            /* cancel centering from parent container */
  margin-right: -50vw;
  overflow-x: hidden;            /* avoid tiny scrollbars */
  padding: 0;
}

.footerodoo .container-fluid {
  max-width: 100vw !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/*defined in figma*/  

.hero-section-odoo {
	margin-top: 140px;
    width: 100%;
    padding-top: 40px;
    position: relative;
}

.hero-section-odoo2 {
/*   background-color: #F3F4F6; */
  width: 100%;
  position: relative;
  margin: 0 auto;
  overflow: visible;
  padding: 40px 0;
  margin-top: 180px;

  /* Center children horizontally + vertically if desired */
  display: flex;
  flex-direction: column; /* stack items vertically */
  align-items: center;    /* center horizontally */
  justify-content: center; /* center vertically (optional) */
  text-align: center;     /* center text alignment */
}

.container-odoo {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  padding-left: 0px;
  padding-right: 0px;
}

.content-wrapper-odoo {
  position: relative;
  width: 100%;
  min-height: 800px;
}
/* On small screens, reduce it */
@media (max-width: 576px) {
  .content-wrapper-odoo {
    min-height: auto;
    padding: 40px 0;
  }
}

.text-content-odoo {
    position: absolute;
    top: 0;
    left: 0;
}

.navbarodoo {	
  width: auto;
  /*  height: 127px;*/ /*removed it because of responsivity*/
  background: #FFFFFF;
  opacity: 1;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1050;
}


/* Optional: If you want a different height on desktop, use a media query */
@media (min-width: 992px) {
  .navbarodoo {
    height: 127px;
  }
	
	.hero-section-odoo2 {
    position: relative;
  }

  .hero-section-odoo2 {
    position: relative;
  }

  /* --- Top Gold Bars --- */
  .hero-section-odoo2::before,
  .hero-section-odoo2::after {
    content: "";
    position: absolute;
    height: 6px;
    background-color: #e4b24c;
    border-radius: 10px;
  }

  /* Instead of right: 440px, anchor it to the container edge */
  .hero-section-odoo2::before {
    top: 10px;
    right: 2%;
    width: 20%;
  }

  .hero-section-odoo2::after {
    top: 50px;
    right: 4%;
    width: 10%;
  }

  /* --- Bottom Gold Bars --- */
  .hero-section-odoo2 .container-odoo {
    position: relative;
    padding-bottom: 30px;
	  overflow: visible;
  position: relative;
  }

  .hero-section-odoo2 .container-odoo::before,
  .hero-section-odoo2 .container-odoo::after {
    content: "";
    position: absolute;
    background-color: #e4b24c;
    border-radius: 10px;
  }

  .hero-section-odoo2 .container-odoo::before {
    bottom: 0;
    left: 0%;
    width: 20%;
    height: 6px;
  }

  .hero-section-odoo2 .container-odoo::after {
    bottom: 60px;
    left: -5%;
    width: 10%;
    height: 10px;
  }

}
/* Keep your desktop (large screen) style as is */
.heading-odoo {
  position: relative;

  font-family: 'Brush Script MT', cursive;
  font-size: 72px !important;
  font-weight: 400;
  line-height: 1.4;
  color: #1a1a1a;
  opacity: 1;
margin-left: 40px;
}

.heading-odoo3 {
  position: relative;

  font-family: 'Brush Script MT', cursive;
  font-size: 48px !important;
  font-weight: 400;
  line-height: 1.4;
  color: #1a1a1a;
  opacity: 1;
	
}

.heading-odoo4 {
  position: relative;
	margin-left: 40px;
  font-family: Caveat  !important;
  font-size: 48px !important;
  font-weight: 400;
  line-height: 1.4;
  color: #1a1a1a;
  opacity: 1;
	 letter-spacing: 3px;
}


/* Add responsive adjustments for smaller screens */
@media (max-width: 992px) {
  .heading-odoo {
    position: relative;   /* allow Bootstrap column alignment */
    width: 100%;          /* full width */
    height: auto;
    top: 0;
    left: 0;
    font-size: 48px;      /* reduce the font size */
    text-align: center;
  }
}

@media (max-width: 576px) {
  .heading-odoo {
    font-size: 36px;      /* smaller on mobile */
    line-height: 1.2;
    padding: 0 10px;
  }
}

.layoutodoo1 {
  opacity: 1;
  /* Desktop styles */
  @media (min-width: 1200px) {
    width: 549px;
    height: 124px;
    position: absolute;
    top: 1125px;
    left: 80px;
  }
}

.layoutodoo2 {
  opacity: 1;
  /* Desktop styles */
  @media (min-width: 1200px) {
    width: 576px;
    height: 105px;
    position: absolute;
    top: 1136px;
    left: 783px;
  }
}

/* On smaller screens, let Bootstrap handle stacking and sizing */
@media (max-width: 1199.98px) {
  .layoutodoo1,
  .layoutodoo2 {
    position: static;
    width: 100%;
    height: auto;
    top: auto;
    left: auto;
    margin-bottom: 16px;
  }
}


@media (max-width: 992px) {
  .heading-odoo {
    position: relative;   /* allow Bootstrap column alignment */
    width: 100%;          /* full width */
    height: auto;
    top: 0;
    left: 0;
    font-size: 48px;      /* reduce the font size */
    text-align: center;
  }
}

@media (max-width: 576px) {
  .heading-odoo {
    font-size: 36px;      /* smaller on mobile */
    line-height: 1.2;
    padding: 0 10px;
  }
}

@media (max-width: 767px) {
	.logokleindg {
		height: 35px !important;
	  }

	.hero-section-odoo .container-odoo .row.align-items-center .col-lg-6.col-md-12 {
		margin-top: 40px;
	}
	
}


/* Keep your desktop style as is */
.description-odoo {
    position: relative;
    font-size: 16px;
    line-height: 1.5;
    color: #333333;
    opacity: 1;
}

/* Tablet and below: let it flow naturally, full width, and center text */
@media (max-width: 992px) {
  .description-odoo {
    position: relative;
    width: 100%;
    height: auto;
    top: 0;
    left: 0;
    font-size: 15px;
    text-align: center;
    margin: 10px 0 20px 0;
    padding: 0 10px;
  }
}

/* Mobile: slightly smaller font, more padding */
@media (max-width: 576px) {
  .description-odoo {
    font-size: 14px;
    line-height: 1.4;
    padding: 0 8px;
  }
}

/* Keep your desktop style as is */
.button-group-odoo {
    position: absolute;
    top: 590px;
    left: 117px;
    display: flex;
    gap: 20px;
	margin-left: 40px;
}

/* Tablet and below: let buttons flow naturally, stack vertically, and center */
@media (max-width: 992px) {
  .button-group-odoo {
    position: relative;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
  }
}

/* Mobile: slightly smaller gap */
@media (max-width: 576px) {
  .button-group-odoo {
    gap: 8px;
    margin: 16px 0;
  }
}

.btn-primary-odoo {
    width: 157px;
    height: 48px;
    background-color: #6b4c6f;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s ease;
    opacity: 1;
}

.btn-primary-odoo:hover {
    background-color: #5a3d5e;
}

.btn-secondary-odoo {
 width: 157px;
    height: 48px;
    background-color: #F3F4F6;
;
    color:  #714B67;
;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s ease;
    opacity: 1;

}

.btn-secondary-odoo:hover {
    background-color: #5a3d5e;
}
@media (max-width: 576px) {
  .btn-primary-odoo,
  .btn-secondary-odoo {
    width: 100%;
    min-width: 120px;
    max-width: 300px;
    height: 44px;
    font-size: 15px;
  }
}

.hero-image-odoo {
    position: absolute;
    width: auto;
    height: auto;
    top: 0;
    left: 0;
    object-fit: contain;
    opacity: 1;
    z-index: 2;
    transform: rotate(0deg);
}


/* Tablet and below: let the image flow naturally and scale */
@media (max-width: 992px) {
  .hero-image-odoo {
    position: relative;
    width: 100%;
    height: auto;
    max-width: 400px; /* or whatever looks best for your design */
    top: 0;
    left: 0;
    display: block;
    margin: 0 auto;
    object-fit: contain;
    z-index: 2;
    transform: rotate(0deg);
  }
}

/* Mobile: even more flexible */
@media (max-width: 576px) {
  .hero-image-odoo {
    max-width: 90vw;
    height: auto;
  }
}

    
    .heading-odoo2 {
        position: relative;
        width: 100%;
        height: auto;
        top: 0;
        left: 0;
        font-size: 48px;
        margin-bottom: 20px;
		text-align: left;
    }
    
    .description-odoo {
        position: relative;
        width: 100%;
        height: auto;
        top: 0;
        left: 0;
        margin-bottom: 30px;
    }
    
    .button-group-odoo {
        position: relative;
        top: 0;
        left: 0;
        margin-bottom: 0px;
    }
    
    .image-wrapper-odoo {
        position: relative;
        width: 50%;
		height: auto;
		min-height: 500px;
    }
    
    
.hero-section-odoo img.img-fluid.rounded {
        width: 120%;
        height: auto;
    	margin-top: 50px;
}



/*trusted seciton*/
.trustedsectionodoo {
  width: 100vw;               /* full viewport width */
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow-x: hidden;
  padding: 20px 0;            /* vertical spacing */
}

/* Maintain your inner content style & responsiveness */
.trustedsectionodoo .container {
  max-width: 1400px;          /* consistent with .container-odoo */
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}
@media (max-width: 992px) {
  .heading-odoo {
    position: relative;   /* allow Bootstrap column alignment */
    width: 100%;          /* full width */
    height: auto;
    top: 0;
    left: 0;
    font-size: 48px;      /* reduce the font size */
    text-align: center;
  }
}

@media (max-width: 576px) {
  .heading-odoo {
    font-size: 36px;      /* smaller on mobile */
    line-height: 1.2;
    padding: 0 10px;
  }
}



.logoodoo1 {
    width: 100%;
    max-width: 80px;
    height: auto;
    object-fit: contain;
}

/* Responsive adjustments */
@media (max-width: 576px) {
    .logoodoo1 {
        max-width: 60px;
    }
}

@media (min-width: 577px) and (max-width: 768px) {
    .logoodoo1 {
        max-width: 70px;
    }
}

@media (min-width: 769px) and (max-width: 992px) {
    .logoodoo1 {
        max-width: 75px;
    }
}

@media (min-width: 993px) {
    .logoodoo1 {
        max-width: 80px;
    }
}

/*background for ellipse*/
.ellipse-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 400px;   /* Adjust as needed */
  height: 400px;  /* Adjust as needed */
background: url("https://diginergy.info/wp-content/themes/diginergy/assets/images/odoo/Ellipse23.png") no-repeat top left;
  background-size: cover;
padding: 80px 30px 20px 30px; /* adjust as needed */
}

/* Responsive: shrink on mobile */
@media (max-width: 992px) {
  .ellipse-bg {
    width: 200px;
    height: 200px;
  }
}
@media (max-width: 576px) {
  .ellipse-bg {
    width: 120px;
    height: 120px;
  }
}


/*additional odoo*/

.highlightodoo1 {
background-color: #ffb6c1; /* soft pink highlight */
  padding: 0 4px;
  border-radius: 4px;
  display: inline-block;
  transform: rotate(-2deg);

}


.highlightodoo2 {
  background: linear-gradient(transparent 60%, #ffadc0 60%);
  padding: 0 4px;
}

.underlineblueodoo1 {
  position: relative;
  display: inline-block;
}

.underlineblueodoo1::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -5px; /* adjust spacing below text */
  width: 100%;
  height: 12px; /* adjust thickness */
  background-image: url('https://diginergy.info/wp-content/themes/diginergy/assets/images/odoo/bluelineodoo1.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.odoo-feature-card {
  background: linear-gradient(135deg, #6b4c6e 0%, #8b6b8e 100%);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.odoo-feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.feature-iconodoo1 {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}


.why-odoo-section {
/*   background-color: #f8f9fa; */
}

.odoo-feature-card {
  background-color: #714B67;
  width: 307px;
  height: 254px;
  border-radius: 10px;
  margin: 0 auto;
  transition: all 0.3s ease;
  opacity: 1;
}

.odoo-feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.feature-iconodoo1 img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.card-title-odoo {
  color: #FFFFFF;
  font-family: "Inter", sans-serif important;
  font-weight: 500;
  font-size: 20px;
  line-height: 130%;
  letter-spacing: 0.5%;
}

.card-text-odoo {
  color: #FFFFFF;
  font-family: "Inter", sans-serif !important;
  font-weight: 400;
  font-size: 16px;
  line-height: 130%;
  letter-spacing: 0.5%;
}

/*complicated odoo section*/

.process-image {
  border-radius: 10px;
}

.process-steps-container {
  position: relative;
  padding-left: 20px;
}

.process-step {
  position: relative;
  margin-bottom: 5rem;
}

.process-step:last-child {
  margin-bottom: 0;
}

.step-circle {
  width: 60px;
  height: 60px;
  background-color: #714B67;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}
.step-circle span {
  color: #FFFFFF;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 26px;
}

/* Connector line between circles */
.step-circle::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 120px;
  background-color: #714B67;
  z-index: 1;
}

.step-circle2 {
  width: 60px;
  height: 60px;
  background-color: #714B67;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.step-circle2 span {
  color: #FFFFFF;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 26px;
}

/* Connector line between circles */
.step-circle2::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 200px;
  background-color: #714B67;
  z-index: 1;
}

/* Remove line after last step */
.process-step:last-child .step-circle::after {
  display: none;
}

.step-content {
  flex: 1;
}

.step-title {
  color: #714B67;
  font-family: Caveat  !important;
  font-weight: 400;
  font-style: normal;
  font-size: 34px;
  line-height: 130%;
  letter-spacing: 0.5%;
  margin-bottom: 0.5rem;
  padding-left: 10px;
	padding-right: 10px;
}

.step-description {
  color: #714B67;
  font-family: Inter  !important;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 130%;
  letter-spacing: 0.5%;
  margin-bottom: 0;
	padding-left: 10px;
	padding-right: 10px;
}

@media (max-width: 991px) {
  .process-steps-container {
    margin-top: 40px;
  }
}

/* CONTACT US ODOO SECTION */
.contactus-odoo {
/*   background-color: #ffffff; */
  padding: 80px 0;
  text-align: center;
  margin-top: 50px;
  margin-bottom: 50px;
}

.contactus-wrapper {
  position: relative;
  display: inline-block;
}

.contactus-banner {
  border-radius: 10px;
  width: 120%;
  height: auto;
}

.contactus-btn-wrapper {
  margin-top: 30px;
}

.btn-contactus {
  background-color: #6d3b6d;
  color: #ffffff;
  padding: 12px 30px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  transition: background-color 0.3s ease;
}

.btn-contactus:hover {
  background-color: #532a53;
}

/* purple heading text */
.contactus-heading {
  font-family: "Caveat", cursive;
  color: #714B67;
  font-size: 38px;
  font-weight: 500;
  margin-bottom: 1.5rem; /* keep it slightly above the subtext */
}

/* wrapper for paragraph + button */
.contactus-subtext {
  margin-top: 20px; /* pushes the text further down below the heading image area */
}

.contactus-text {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  color: #4B4B4B;
  line-height: 1.6;
  margin-bottom: 25px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 8px;
  padding: 15px 20px;
}

.btn-contactus {
  background-color: #714B67;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  padding: 12px 30px;
  border-radius: 8px;
  text-decoration: none;
  display: inline-block;
  transition: background 0.3s ease, transform 0.2s ease;
}

.btn-contactus:hover {
  background-color: #8d6282;
  transform: translateY(-2px);
}
/* Default (desktop/tablet) */
.contactus-banner {
  border-radius: 10px;
  width: 80%;
  height: auto;
}

/* Mobile view – make the image bigger */
@media (max-width: 768px) {
  .contactus-banner {
    max-width: 100%;
    width: 100%; /* slightly enlarge beyond container if desired */

  }

  /* Optionally increase spacing below */
  .contactus-btn-wrapper {
    margin-top: 40px;
  }
	.heading-odoo{
		margin-left: 0px;
		font-size: 50px !important;
	}
.image-wrapper-odoo {
        position: relative;
        width: 100%;
		height: auto;
		min-height: 500px;
    }
	
	.description-odoo{
		padding: 30px;
	}
	.hero-section-odoo img.img-fluid.rounded {
        width: 90%;
        height: auto;
    	margin-top: 50px;
}
	.heading-odoo4{
		margin-left: 0px;
		font-size: 38px !important;
		letter-spacing: 2px !important;
	}
	
	.odoop4 {
		text-align: center;
	}
	.heading-odoo3{
		margin-left: 0px;
		font-size: 38px !important;
	}
	.heading-odoo2{
		
	}
	.odoop3 {
	 	padding: 30px;
	}
	.hero-section-odoo{
		margin-top: 90px;
	}
	.hero-section-odoo2{
		margin-top: 90px;
	}
	
	.heading-odoo2{
		text-align: center;
		font-size: 38px !important;
	}
}




/* Responsive adjustments */
@media (max-width: 767px) {
	
	.heading-odoo.odootipfancy2,
  .odoop3 {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .heading-odoo.odootipfancy2 {
    margin-top: 20px;
  }


.odoop3 {
    margin-top: 10px;
  }

  .contactus-heading {
    font-size: 28px;
  }

  .contactus-text {
    font-size: 14px;
    padding: 12px 15px;
  }

  .btn-contactus {
    padding: 10px 24px;
    font-size: 15px;
  }
}