.elementor-kit-6{--e-global-color-primary:#DD298A;--e-global-color-secondary:#101820;--e-global-color-text:#F5F5F5;--e-global-color-accent:#FFB12E;--e-global-typography-primary-font-family:"Montserrat";--e-global-typography-primary-font-weight:400;--e-global-typography-secondary-font-family:"Montserrat";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Montserrat";--e-global-typography-accent-font-weight:500;font-family:"Montserrat", Sans-serif;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 a{color:var( --e-global-color-primary );}.elementor-kit-6 h1{font-family:"Montserrat", Sans-serif;}.elementor-kit-6 h2{color:var( --e-global-color-secondary );font-family:"Montserrat", Sans-serif;font-size:28px;font-weight:600;text-transform:uppercase;line-height:1em;}.elementor-kit-6 h3{color:var( --e-global-color-secondary );font-family:"Montserrat", Sans-serif;font-size:24px;}.elementor-kit-6 h4{font-family:"Montserrat", Sans-serif;font-size:16px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-6 h2{font-size:24px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;--container-default-padding-top:20px;--container-default-padding-right:20px;--container-default-padding-bottom:20px;--container-default-padding-left:20px;}}/* Start custom CSS */.hero-background{
  position: relative;
  overflow: hidden;
}

/* The injected video layer */
.hero-background .hero-bg-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  opacity: 1;
}

/* Make sure hero content sits above the video */
.hero-background > .e-con-inner,
.hero-background .elementor-container,
.hero-background .elementor-widget-wrap{
  position: relative;
  z-index: 2;
}
.gradient-word {
  background: linear-gradient(90deg, #DD298A, #FFB12E);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.hero-cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  position: relative;
  overflow: hidden;

  background: #000;
  color: #fff;

  padding: 14px 28px; /* perfectly centred text */
  transition: background 0.3s ease, color 0.3s ease, padding 0.3s ease;
  box-sizing: border-box;
}

/* Icon – absolutely positioned so it takes NO space initially */
.hero-cta a::after {
  content: "☀";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%) scale(0.8);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

/* Hover: button grows to make room */
.hero-cta a:hover {
  background: linear-gradient(90deg, #DD298A, #FFB12E);
  color: #000; /* or #fff depending on contrast */
  padding-right: 52px; /* creates space for the sun */
}

/* Icon appears at same time */
.hero-cta a:hover::after {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

.diagonal-corners {
  clip-path: polygon(
    0 0,
    90% 0,
    100% 10%,
    100% 100%,
    10% 100%,
    0 90%
  );
}

.hero-background {
  clip-path: polygon(
    0 0,
    90% 0,
    100% 10%,
    100% 100%,
    10% 100%,
    0 90%
  );
}
.diagonal-corners-child {
  clip-path: polygon(
    0 0,
    90% 0,
    100% 10%,
    100% 100%,
    10% 100%,
    0 90%
  );
}
/* Parent. keep your existing clip-path on this class */
.diagonal-corners{
  position: relative;
  overflow: hidden;
}

/* Animated gradient border layer (behind content) */
.diagonal-corners::before{
  content:"";
  position:absolute;
  inset:-0.25px;                 /* border thickness control */
  background: linear-gradient(90deg, #DD298A, #FFB12E, #DD298A);
  background-size: 300% 300%;
  opacity: 0;
  transition: opacity 0.3s ease;
  animation: borderMove 3s linear infinite;
  z-index: 0;
  clip-path: inherit;         /* respects diagonal corners */
}

/* Inner fill. acts like the "real" background so border shows */
.diagonal-corners::after{
  content:"";
  position:absolute;
  inset:1.5px;                  /* border thickness control */
  background: inherit;         /* shows the container background */
  z-index: 1;
  clip-path: inherit;
}

/* Ensure actual container content is above the pseudo-elements */
.diagonal-corners > *{
  position: relative;
  z-index: 2;
}

/* Show border only on hover */
.diagonal-corners:hover::before{
  opacity: 1;
}

/* Child overlay. uses a pseudo-element so it always displays */
.diagonal-corners-child{
  position: relative;
}

/* Put child content above its overlay */
.diagonal-corners-child > *{
  position: relative;
  z-index: 2;
}

/* The overlay itself */
.diagonal-corners-child::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(135deg, #DD298A, #FFB12E);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
  pointer-events: none;
  clip-path: inherit;         /* if the child also has diagonal corners */
}

/* Reveal overlay on parent hover */
.diagonal-corners:hover .diagonal-corners-child::before{
  opacity: 0.5;
}

@keyframes borderMove{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 300% 50%; }
}
.video-wrapper {
  position: relative;
  width: 100%;
  max-width: 100%;
}

.custom-video {
  width: 100%;
  display: block;
}

.video-play-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, #DD298A, #FFB12E);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  z-index: 5;
}

.video-play-btn::before {
  content: "";
  position: absolute;
  left: 52%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-left: 22px solid #fff;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
}
.diagonal-corners-video {
  clip-path: polygon(
    0 0,
    90% 0,
    100% 10%,
    100% 100%,
    10% 100%,
    0 90%
  );
}

.diagonal-corners-video video {
  clip-path: inherit;
}
.diagonal-corners-video {
  height: 700px;
}

.diagonal-corners-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: inherit;
}
h2.white-heading {
  color: #fff !important;
}
.corners-container {
  clip-path: polygon(
    0 0,
    90% 0,
    100% 10%,
    100% 100%,
    10% 100%,
    0 90%
  );
}
.white-heading-2 {
  text-align: center;
}
h2.white-heading-2 {
  color: #fff !important;
}
@media (max-width: 767px) {
  .video-wrapper.diagonal-corners-video {
    height: 500px;
  }
}
.service-h1 {
  background: linear-gradient(135deg, #DD298A, #FFB12E); /* replace with your gradient */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
.hero-background {
  position: relative;
  overflow: hidden;
}

.hero-background::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(16, 24, 32, 0) 0%,
    rgba(16, 24, 32, 0.80) 100%
  );
  z-index: 1;
  pointer-events: none;
}

.hero-background > * {
  position: relative;
  z-index: 2;
}

.stc-btn{
  margin-top: 14px;
  padding: 14px 18px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  background: linear-gradient(135deg, #DD298A, #FFB12E);
  color: #ffffff;
  font-weight: 700;
  transition: background 0.2s ease, transform 0.2s ease;
}

.stc-btn:hover{
  background: #101820;
}

.stc-btn:active{
  transform: translateY(1px);
}
.stc-hidden{
  display: none;
}
/* 1) Make the dropdown "panel" animate open/closed */
.e-n-menu .e-n-menu-content > .elementor-element{
  transform-origin: top;
  transform: scaleY(0);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  pointer-events: none;
  transition: transform 1000ms cubic-bezier(.2,.8,.2,1), opacity 200ms ease, max-height 1000ms ease;
  will-change: transform, opacity, max-height;
}

/* 2) When Elementor sets the dropdown active, expand it */
.e-n-menu .e-n-menu-content.e-active > .elementor-element{
  transform: scaleY(1);
  opacity: 1;
  max-height: 2000px; /* must be bigger than your dropdown height */
  pointer-events: auto;
}

/* Optional. If you want the outer container to stay visible while inner animates */
.e-n-menu .e-n-menu-content{
  overflow: visible;
}
/* Smooth shrink */
#logo-header {
  transform-origin: left center;
  transition: transform 220ms ease;
  will-change: transform;
}

/* When header is scrolled */
#sticky-header.is-scrolled #logo-header {
  transform: scale(0.5);
}
html, body {
  width: 100%;
  overflow-x: hidden;
}
/* Fix Elementor nested carousel stacking vertically */
.elementor .e-n-carousel .swiper-wrapper{
    display: flex !important;
}

.elementor .e-n-carousel .swiper-slide{
    flex: 0 0 auto !important;
}/* End custom CSS */