/* ===================================================================================

* Theme Name: Pixora Child
* Theme URI: https://wp.aqlova.com/pixora/
* Author: aqlova
* Author URI: https://themeforest.net/user/aqlova
* Description: Pixora - Digital Agency Wordpress Theme
* Version: 1.0.0
* Template: pixora
* License: GNU General Public License version 3.0
* License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: pixora-child
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
Tested up to: 6.7
Requires PHP: 7.4

* We encourage you to create Child theme for any modifications you will want to do.

* Why use Child theme?

* Because of future updates we may provide for this theme that will overwrite your
* modifications and all your custom work.

* If you are not familiar with Child Themes, you can read about it here:
* http://codex.wordpress.org/Child_Themes
* http://wp.tutsplus.com/tutorials/theme-development/child-themes-basics-and-creating-child-themes-in-wordpress/

====================================================================================== */

/* Adding Google Fonts Stargs*/
body {
     font-family: Open Sans;
    font-weight: 300;
    font-size: 16px;
}
body h1 {
    margin-bottom: 16px;
    font-family: Open Sans;
    font-weight: 300;
    font-size: 3.375em;
    line-height: 1.26;
}
body .h-lead p {
    margin-bottom: 16px;
    font-family: Open Sans;
    font-weight: 300;
    font-size: 1.25em;
    line-height: 1.2;
}
body .h-lead p {
    margin-bottom: 16px;
    font-family: Open Sans;
    font-weight: 300;
    font-size: 1.25em;
    line-height: 1.2;
}
body p {
    margin-bottom: 16px;
    font-family: Open Sans;
    font-weight: 350;
    font-size: 1.3em;
    line-height: 1.3;
}
body h2 {
    margin-bottom: 30px ;
    font-family: Open Sans;
    font-weight: 400;
    font-size: 2.7em;
    line-height: 1;
}
body h3 {
    margin-bottom: 16px;
    font-family: Open Sans;
    font-weight: 600;
    font-size: 2.5em;
    line-height: 1;
}
body h5 {
    margin-bottom: 16px;
    font-family: Open Sans;
    font-weight: 600;
    font-size: 1.125em;
    line-height: 1;
}
/* Adding Google Fonts Ends */

.highlight-red {
    color: #e11010;
}
/* Icon-box mods - remove anchor */
body.page-id-17601  div.horz-icon-box > div > div > div.px-service-5-content h4 > a,
body.page-id-17601 div.standard-icon-box > div > div > div.px-service-5-content h4 > a {
    pointer-events: none; /* Prevents clicks and hover states */
    cursor: default;       /* Removes the standard pointer/hand cursor */
}
body.page-id-17601 div.standard-icon-box > div > div > div {

}
body.page-id-17601 div.standard-icon-box > div > div > div.tp-el-img {
        text-align: center;
        margin-top: 30px;
        margin-bottom: 30px;
}
body.page-id-17601 div.standard-icon-box span.tp-service_box_icon-image-icon > img,
body.page-id-17601 div.standard-icon-box span.tp-service_box_icon-icon > svg {
  width: 55px;
  height: 55px;
}

/* Hero Area  */
body.page-id-17601 div.px-hero-area div.px-hero-bg-img {
        background-position: 70% !important;

}
body.page-id-17601 div.container.container-1550 > div.px-hero-title-wrap.pb-110 > div > div.col-xl-9 > div.px-hero-title-box  {
    background-color: rgba(0,0,0,0.5);
    padding: 40px;
}

body.page-id-17601 div.container.container-1550 > div.px-hero-service-wrap.d-flex.justify-content-between.align-items-center > div > span.tp-el-pre-title > div > a.button {
    display: inline-block;
    padding: 20px;
    border: solid 1px gray;
    border-radius: 10px;
    cursor: arrow;
    background-color: #363535;
}
body.page-id-17601 div.container.container-1550 > div.px-hero-service-wrap.d-flex.justify-content-between.align-items-center > div > span.tp-el-pre-title > div > a.button:hover {
    background-color: #888585;
    color: #363535;
}

.boost-header-3 {
    color: #f84f01;
    margin: 20px 0px 40px 0px !important;
}

.boost-header-4 {
    color: #f84f01;
    margin: 30px 0px 60px 0px !important;
}
/* Hero area finishes */

.icon-box {
    max-width: 300px;
    min-width: 300px;
    
}


/* Transparency element behind the Hero text */
div.add-trans-background { /* add the class 'add-trans-background' to the element that you want to work with. */
    z-index: 3; /* psudo parent element must have z-index setting to set psudo elment z-index order */
}
div.add-trans-background::before
{
	content: '';
	position: absolute;
	height: 100%;
	width: 100%;
	bottom: 0;
	left: 0;
	background-color: #000000;
	opacity: 0.3;
    z-index: -1; 
} 

.parallax-video-host video:nth-child(2) {
    aspect-ratio: 16 / 9; /* Maintains 16:9 ratio automatically */
}

.parallax-video-host video:nth-child(2) {
    width: 100%;
    max-width: 720px; /* Your desired maximum width */
    aspect-ratio: 9 / 16; /* Maintains 16:9 ratio automatically */
    display: none;
}




/* Parallax Start */
.parallax-videox {
    position: fixed; /* Fixes video relative to viewport */
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1; /* Place behind content */
    transform: translate(-50%, -50%); /* Center the video */
}
.parallax-video-host {
    /* min-height: 1000px; */
    /* border: solid 1px red; */
}
/* Parallax End */

/* Marquee Start */
.marquee {
  display: flex;
  overflow: hidden;
  /* height: 15vh; */
  user-select: none;
  gap: 2rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
   /*transform: skewY(-3deg); */
   /*transform: rotate(-5deg) translateY(-30px) translateX(50px);*/
}
.marquee__group {
  flex-shrink: 0 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-width: 100%;
  animation: scroll 10s linear infinite; /* Scroll speed and direction */
}
.marquee__group_go_reverse {
    animation: scroll 10s linear infinite reverse; /* Scroll speed and direction */
}
@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - 2rem));
  }
}
@media only screen and (min-width: 360px) {
    .marquee__group span {
        /* font-size: 6.5vw; */
    }
}
/* Marquee End */

/* Grow and fade in */
    .arrow-fade-in {
        scale: .5; opacity: 0;
        /* animation: fade-in linear forwards; */
        animation: fadeIn 8s forwards;
        animation-timeline: view();
        /* animation-range: entry-crossing 20%; /* entry - starts as soon as the element enters the view + offset to delay animation */
        animation-range: entry 25% cover 100%;
    }

    @keyframes fadeIn {
        to { scale: 1; opacity: 1; }
    }
@media (prefers-reduced-motion: no-preference) {
}
/* End Grow and fade in */

/* Slide in from left-hand side */
.arrow-left-slide-in {
    position: absolute;      /* or absolute */
    right: 0px;
    scale: .5; opacity: 0;
    animation: leftSlideIn linear forwards;  /* forwards = don't revert to start. */
    animation-timeline: view();
    animation-range: entry-crossing 20%;   /* entry - starts as soon as the element enters the view + offset to delay animation */
    /* animation-range: entry 0% exit 100%;  */

}
@keyframes leftSlideIn {
    from {
        transform: translateX(-100%);
    }
    to {
        scale: 1; opacity: 1;
        transform: translateX(0);
    } 
}
.arrow-left-slide-in > div {
    text-align: right;
}

.arrow-right-slide-in {
    position: absolute;      /* or absolute */
    left: 0px;
    scale: .5; opacity: 0;
    animation: rightSlideIn linear forwards;  /* forwards = don't revert to start. */
    animation-timeline: view();
    animation-range: entry-crossing ;   /* entry - starts as soon as the element enters the view + offset to delay animation */
    /* animation-range: entry 0% exit 100%;  */
}
@keyframes rightSlideIn {
    from {
        transform: translateX(200%);
    }
    to {
        scale: 1; opacity: 1;
        transform: translateX(0);
    } 
}

/* Slide accross from left-hand side */
.arrow-left-slide-across {
    position: absolute;      /* or absolute */
    left: 0px;
    scale: .5; opacity: 0;
    animation: leftSlideAcross linear forwards;  /* forwards = don't revert to start. */
    animation-timeline: view();
    /*animation-range: entry-crossing ; */  /* entry - starts as soon as the element enters the view + offset to delay animation */
    animation-range: entry 0% exit 100%; 
}
@keyframes leftSlideAcross {
    0% {
        transform: translateX(-100%);
        opacity: 0;
        scale: .5;
    }

    50% {
        transform: translateX(0);
        opacity: 1;
        scale: 1;
    }

    100% {
        transform: translateX(100%);
        opacity: 0;
        scale: .5;
    }
}

/* Slide accross to right-hand side */
.arrow-right-slide-across {
    position: absolute;      /* or absolute */
    right: 0px;
    scale: .5; opacity: 0;
    animation: rightSlideAcross linear forwards;  /* forwards = don't revert to start. */
    animation-timeline: view();
    /* animation-range: entry-crossing ; */ /* exit - starts as soon as the element enters the view + offset to delay animation */
    animation-range: entry 0% exit 100%; 
}

@keyframes rightSlideAcross {
    0% {
        transform: translateX(200%);
        opacity: 0;
        scale: .5;
    }
    50% {
        transform: translateX(0);
        opacity: 1;
        scale: 1;
    }
    100% {
        transform: translateX(-100%);
        opacity: 0;
        scale: .5;
    }

}




.parallax-video-hostxxxxx video:nth-child(2) {
    --element-position: relative;
    position: relative;
     /* scale: .3;  */
    animation: set-Parallax-on-view forwards;
    animation-timeline: view();
    animation-range: entry;


    top: 0;
}  
@keyframes set-Parallax-on-view {
      position: fixed; /* Fixes video relative to viewport */
      
     top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto; */
    
    /* transform: translate(-50%, -50%); */  /*Center the video */
    to {
    --element-position: fixed;
        position: fixed;
    }
  /* 0% {
        z-index: 0; 
        --element-position: fixed;
         scale: 1; 
  }
  50% {   }
  100% {   } */
}




@media (max-width: 993px) {
    .block-under-993 {
    	display: block !important;
        width: 100%;
	}

}
@media (min-width: 575px) and (max-width: 770px) {
        .elementor-17601 .elementor-element.elementor-element-f683367:not(.elementor-motion-effects-element-type-background),
        body > div.elementor.elementor-17601 > div.elementor-element.elementor-element-f683367.e-con-full.e-flex.e-con.e-parent.e-lazyloaded.animated.zoomIn {
    	background-position: -650px 100px;
	}
}

/* Narrow windows */
@media (max-width: 499px) {
    body.page-id-17601 tp-el-logo {
        padding-left: 5px;
    }
    /* Position the Card image */
    body.page-id-17601 div.px-hero-area div.px-hero-bg-img {
        background-position: 75% !important;

    }
    body.page-id-17601 .hero-be-card {

    }
    div.px-hero-title-wrap.pb-110 > div > div.col-xl-9 > div > h2,
    body.page-id-17601 .elementor-element.elementor-element-1da3f59 h2.tp-el-title {
        letter-spacing: 0px;
        font-size: 135px;
    }

    .parallax-video-host video:nth-child(1) {
        display: none;
    }
    .parallax-video-host video:nth-child(2) {
        display: block;
    }
    /* Parallax Start */
    .parallax-videox {
        position: fixed; /* Fixes video relative to viewport */
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        max-width: 100%;
        height: auto;
        z-index: -0; /* Place behind content */
        transform: translate(-50%, -50%); /* Center the video */
    }
    .mobile-padding {
        padding-left: 15px;
        padding-right: 15px;
    }

}



/* Don't do these on narrow windows */
@media (min-width: 575px) {
    .icon-align-right {
    	padding-left: calc(25% - 57px) !important;
	}

    /* Making vertical icon-boxes horizontal - Pre-built Icon boxes */
    body.page-id-17601  div.horz-icon-box > div > div > div.px-service-5-icon.tp-el-img,
    body.page-id-17601  div.horz-icon-box > div > div > div.px-service-5-content {
        width: 100px;
        display: inline-block;
        vertical-align:top;
        margin-bottom: 0px;
    }
    body.page-id-17601  div.horz-icon-box > div > div > div.px-service-5-content {
        width: calc(100% - 105px);
    }
    /* End Making vertical icon-boxes horizontal - Pre-built Icon boxes */

}