.elementor-kit-9{--e-global-color-primary:#2E3336;--e-global-color-secondary:#B9CED6;--e-global-color-text:#111111;--e-global-color-accent:#ACE516;--e-global-color-f594f7c:#737A7E;--e-global-color-948d8a0:#FFFFFF;--e-global-color-eb08773:#000000;--e-global-color-803efaa:#CCCCCC;--e-global-typography-primary-font-family:"Outfit";--e-global-typography-primary-font-weight:500;--e-global-typography-secondary-font-family:"Outfit";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Outfit";--e-global-typography-text-font-weight:300;--e-global-typography-accent-font-family:"Outfit";--e-global-typography-accent-font-weight:500;color:var( --e-global-color-text );font-family:"Outfit", Sans-serif;font-weight:300;}.elementor-kit-9 e-page-transition{background-color:#FFBC7D;}.elementor-kit-9 p{margin-block-end:0px;}.elementor-kit-9 a{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-kit-9 h1{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-kit-9 h2{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-kit-9 h3{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-kit-9 h4{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-kit-9 h5{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-kit-9 h6{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-kit-9 button,.elementor-kit-9 input[type="button"],.elementor-kit-9 input[type="submit"],.elementor-kit-9 .elementor-button{font-family:"Outfit", Sans-serif;font-weight:500;color:var( --e-global-color-text );}.elementor-kit-9 img{border-radius:0px 0px 0px 0px;}.elementor-kit-9 input:not([type="button"]):not([type="submit"]),.elementor-kit-9 textarea,.elementor-kit-9 .elementor-field-textual{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-text );accent-color:var( --e-global-color-accent );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@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-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --Google-Font:Outfit; --Primary:#2E3336; --Secondary:#B9CED6; --Text:#111111; --Accent:#ace516; --Text-3:#CCCCCC; --White:#ffffff; --Black:#000000; --Text-2:#737A7E; }
/* Start custom CSS *//* alink . transition */
a {
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease; /* Safari & older WebKit */
}





/* button icon animation */
/* Button container */
.move-icon {
  position: relative;
  overflow: hidden;
  padding-right: 15px; /* space for the icon */
  cursor: pointer;
}

/* Icon default position (right-middle) */
.move-icon .elementor-button-icon {
  display: block;
  position: absolute;
  top: 57%;      /* vertical center */
  right: 5px;    /* initial right position */
  transform: translateY(-50%);  /* keep vertical centering */
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); /* slower, smoother */
}

/* Hover: move subtly top-right */
.move-icon:hover .elementor-button-icon {
  top: 45%;      /* slightly higher than default */
  right: 0px;    /* slightly more to the right */
  transform: translateY(-50%);
}









/* Gradient for text dark to light */
.gradient-text {
  background: linear-gradient(to bottom, #2E3336, #B9CED6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.2;      /* ensures space for descenders */
  display: inline-block;  /* prevents clipping from container */
}


/* Target the H2 specifically */
.gradient-text .elementor-heading-title {
    background: linear-gradient(to bottom, #2E3336, #B9CED6) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    display: inline-block;
    line-height: 1.2;
    
    /* The Curtain: We start with it covering the text from the right */
    clip-path: inset(0 100% 0 0);
    -webkit-clip-path: inset(0 100% 0 0);
    
    /* Performance boost */
    will-change: clip-path, -webkit-clip-path;
}


/* Gradient for text dark to light 2 */
.gradient-text-2 {
  background: linear-gradient(to bottom, #2E3336 0%, #B9CED6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: inline-block;
  line-height: 1.2;
}


/* Gradient for text Light to white */
.gradient-text-3 {
  background: linear-gradient(to bottom, #B9CED6 0%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: inline-block;
  line-height: 1.2;
}




















/* horizontal gradient line */
.horizontal-line {
  width: 350px;       /* The length of your line */
  max-width: 100%;    /* Ensures it doesn't overflow on mobile */
  height: 6px;        /* The thickness */
  border-radius: 3px;
  background: linear-gradient(to right, #637378, #D3E3EB);
  margin: 20px 0;     /* 20px top/bottom, 0 on the left (Aligns it Left) */
  display: block;     /* Ensures it respects the margin rules */
}






/* vertical gradient line  */
.vertical-line {
  width: 10px;
  height: 350px;
  border-radius: 3px;
  background: linear-gradient(to bottom, #637378, #D3E3EB);
  margin: 0 auto; /* center in column */
}

 @media (max-width: 1024px) {
   .vertical-line {}
  }

  @media (max-width: 767px) {
    .vertical-line {height: 150px;}
  }







/* Gradient Border Bottom  */
.gradient-border-bottom {
  position: relative;
}

.gradient-border-bottom::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px; /* border thickness */
  background: linear-gradient(to right, #F9FDFF, #B9CED6);
}


.gradient-border-bottom-dark {
  position: relative;
}

.gradient-border-bottom-dark::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px; /* border thickness */
  background: linear-gradient(to right, #0A0A0C, #B9CED6);
}











/* Video styles for video details page */
/* The Main Grid */
.portfolio-video-grid {
    display: flex;
    flex-direction: column; /* Stacks videos vertically */
    gap: 30px; 
    width: 100%;
    margin-bottom: 50px; /* Space before description */
}

/* Individual Video Item */
.video-wrapper {
    width: 100%;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    /* This is the magic line that creates height without 'absolute' */
    aspect-ratio: 16 / 9; 
}

/* Square video override */
.video-wrapper.ratio-1-1 {
    aspect-ratio: 1 / 1;
    max-width: 600px; /* Optional: keeps square videos from being too tall */
    margin: 0 auto;
}

/* The Iframe inside */
.video-wrapper iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}



.bg-flip {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Film container images */
.film-flip {
  --bg-1: url("https://xio.studio/wp-content/uploads/2026/04/Film-Frame1.jpg");
  --bg-2: url("https://xio.studio/wp-content/uploads/2026/04/Film-Frame2.jpg");
  --bg-3: url("https://xio.studio/wp-content/uploads/2026/04/Film-Frame3.jpg");
  --bg-4: url("https://xio.studio/wp-content/uploads/2026/04/Film-Frame4.jpg");
}

/* Photo container images */
.photo-flip {
  --bg-1: url("https://xio.studio/wp-content/uploads/2026/04/Photo-Frame1.jpg");
  --bg-2: url("https://xio.studio/wp-content/uploads/2026/04/Photo-Frame2.jpg");
  --bg-3: url("https://xio.studio/wp-content/uploads/2026/04/Photo-Frame3.jpg");
  --bg-4: url("https://xio.studio/wp-content/uploads/2026/04/Photo-Frame4.jpg");
  --bg-5: url("https://xio.studio/wp-content/uploads/2026/04/Photo-Frame5.jpg");
}

/* Keep content above background */
.bg-flip > * {
  position: relative;
  z-index: 2;
}



/* Single background layer */
.bg-flip::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--active-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  filter: blur(0px);
  will-change: filter;
}

/* Show only while hovered */
.bg-flip:hover::before {
  opacity: 1;
}

/* Blur only, no fade/zoom */
.bg-flip.is-flipping::before {
  animation: bgBlurOnly 180ms ease-out;
}

@keyframes bgBlurOnly {
  0% {
    filter: blur(12px);
  }
  100% {
    filter: blur(0px);
  }
}/* End custom CSS */