/**
 * CTA Section Styles
 * TubeWriter Homepage
 * Note: Using !important to override Elementor styles
 */

/* Main CTA Section Container */
.tw-cta {
  background: linear-gradient(180deg, #2d69f6 0%, #709aff 100%) !important;
  width: 1200px !important;
  max-width: calc(100% - 150px) !important;
  margin: 0 auto !important;
  padding: 75px 32px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 10px !important;
	margin-top: -150px!important;
	z-index: 2;
	top: 150px;
}

.page-template-template-product .tw-cta {
	top: 50px;
	@media (max-width: 768px) {
			top: 120px;
	}
}

/* Hide watermark background */
.tw-cta__watermark {
  display: none !important;
}

/* CTA Content Container */
.tw-cta__content {
  display: flex !important;
  flex-direction: column !important;
  gap: 40px !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 844px !important;
  position: relative !important;
  z-index: 1 !important;
}

/* CTA Text Container */
.tw-cta__text {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  align-items: center !important;
  text-align: center !important;
  width: 100% !important;
}

.tw-cta__heading {
  font-family: 'Instrument Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 50px !important;
  line-height: 50px !important;
  color: white !important;
  margin: 0 !important;
  width: 100% !important;
}

.tw-cta__description {
  font-family: 'Hind', sans-serif !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
  color: white !important;
  margin: 0 !important;
  width: 100% !important;
}

/* CTA Buttons Container */
.tw-cta__buttons {
  display: flex !important;
  gap: 20px !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  flex-wrap: wrap !important;
}

/* Primary Button (White Outlined) */
.tw-cta__button {
  border: 1px solid white !important;
  background: transparent !important;
  color: white !important;
  font-family: 'Instrument Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  line-height: normal !important;
  padding: 15px 20px !important;
  border-radius: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
}

.tw-cta__button:hover {
  background: white !important;
  color: #2d69f6 !important;
}

.tw-cta__button span {
  color: inherit !important;
}

.tw-cta__button--primary:hover span {
  color: #2d69f6 !important;
}

.tw-cta__button--secondary:hover span {
  color: #2d69f6 !important;
}

/* Responsive Styles */

/* Large Desktop */
@media (max-width: 1400px) {
  .tw-cta {
    width: 1000px !important;
    max-width: calc(100% - 120px) !important;
    padding: 60px 32px !important;
  }

  .tw-cta__heading {
    font-size: 45px !important;
    line-height: 45px !important;
  }
}

/* Tablet */
@media (max-width: 1024px) {
  .tw-cta {
    width: 800px !important;
    max-width: calc(100% - 80px) !important;
    padding: 50px 32px !important;
  }

  .tw-cta__content {
    gap: 30px !important;
  }

  .tw-cta__text {
    gap: 15px !important;
  }

  .tw-cta__heading {
    font-size: 40px !important;
    line-height: 40px !important;
  }

  .tw-cta__description {
    font-size: 15px !important;
  }

  .tw-cta__buttons {
    gap: 15px !important;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .tw-cta {
    width: 100% !important;
    max-width: calc(100% - 40px) !important;
    padding: 40px 20px !important;
  }

  .tw-cta__content {
    gap: 30px !important;
  }

  .tw-cta__text {
    gap: 15px !important;
  }

  .tw-cta__heading {
    font-size: 32px !important;
    line-height: 36px !important;
  }

  .tw-cta__description {
    font-size: 14px !important;
  }

  .tw-cta__buttons {
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
  }

  .tw-cta__button {
    width: 100% !important;
    font-size: 14px !important;
    padding: 12px 18px !important;
  }
}