/* Contra Creative Agency Business HTML-5 Template */

/************ TABLE OF CONTENTS ***************
1. Fonts
2. Reset
3. Global
4. Main Header
5. Banner One
6. Services One
7. Gallery One
8. Journel One
9. Testimonial One
10. Counter One
11. Awards One
12. Main Footer
13. Page Title
14. Team One
15. Journel Detail
16. Work One
17. Work Detail
18. Contact Info
19. Contact Form

====================================================================
	Root Code Variables
====================================================================

 ***/

.theme_color{
	color:var(--main-color);
}

/* Theme Color */

:root {

	/* #6f8dff in decimal RGB - electric blue accent, matches the favicon/logo mark */
	--main-color: rgb(111,141,255);
	--main-color-rgb:111,141,255;

	/* #3a4fa3 in decimal RGB - deeper indigo, gradient/secondary partner for the accent */
	--color-two: rgb(58,79,163);
	--color-two-rgb:58,79,163;

	/* #121629 in decimal RGB - navy panel background, matches the favicon badge */
	--color-three: rgb(18,22,41);
	--color-three-rgb:18,22,41;

	/* #0a0c14 in decimal RGB - deepest page background */
	--color-four: rgb(10,12,20);
	--color-four-rgb:10,12,20;



    /* #ffffff in decimal RGB */
	--white-color:rgb(255,255,255);
	--white-color-rgb:255,255,255;

	/* #000000 in decimal RGB */
	--black-color:rgb(0,0,0);
	--black-color-rgb:0,0,0;

	/* Typography */
	--font-display: 'Chakra Petch', var(--font-body);
	--font-body: 'Inter', -apple-system, "Segoe UI", sans-serif;
	--font-mono: 'IBM Plex Mono', ui-monospace, "SFMono-Regular", Consolas, monospace;

	/* Elevation */
	--ease-lift: cubic-bezier(0.22, 1, 0.36, 1);

	/* Motion — shared durations so every new hover/reveal effect reads as
	   one consistent system instead of each picking its own timing.
	   --ease-lift above is the one shared easing curve; reuse it, don't
	   add a second competing curve alongside these. */
	--motion-fast: 180ms;
	--motion-base: 280ms;

	--shadow-sm: 0 1px 3px rgba(0,0,0,0.35);
	--shadow-md: 0 10px 28px -6px rgba(0,0,0,0.45);
	--shadow-lg: 0 22px 48px -10px rgba(0,0,0,0.55), 0 0 0 1px rgba(var(--main-color-rgb),0.10);
	--shadow-glow: 0 22px 48px -10px rgba(0,0,0,0.55), 0 0 34px -6px rgba(var(--main-color-rgb),0.40);

}

/*** 

====================================================================
	Reset
====================================================================

 ***/
 
* {
	margin:0px;
	padding:0px;
	border:none;
	outline:none;
}

/* scroll-behavior: smooth was here and got removed deliberately — it, and
   jQuery's .animate(), both count elapsed FRAMES rather than elapsed time.
   When the Spline robot's rendering (see .robot below) drags the frame rate
   down, a frame-counted scroll animation stretches across many real seconds
   instead of finishing on schedule — confirmed live: a keyboard-triggered
   scroll took 3.6s to settle with the robot rendering vs 0.38s without it.
   Native keyboard/Tab-driven scrolling now jumps instantly (immune to frame
   rate entirely); deliberate nav-link "smooth scroll to section" is instead
   handled by bootstrapAnchorScroll() in main.ts, which drives its animation
   off performance.now() deltas so it always finishes on its real-time
   schedule regardless of how slowly frames arrive. */
html {
	scroll-padding-top: 110px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
.navbar-toggler:focus-visible {
	outline: 2px solid var(--main-color);
	outline-offset: 3px;
}

.wow:not(.animated) {
	visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.wow:not(.animated) {
		visibility: visible;
	}
}

/***

====================================================================
	Global Settings
====================================================================

***/


/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background-color: var(--main-color);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-three);
}

body {
	font-family: var(--font-body);
	line-height:1.6em;
	font-weight:400;
	font-size:14px;
	background-color:#000 !important;
	/* Only background-color was forced here before — no default text color,
	   so anything without a more specific color rule of its own inherited
	   the browser/Bootstrap default (near-black), which is invisible against
	   this forced-black background. Never a problem on our own pages (every
	   custom view sets its own text color explicitly), but Power Pages' own
	   native pages (sign-in, register — outside our control, no Style
	   workspace for SPA sites) inherit this body rule with nothing to
	   override it, which is exactly what made their labels unreadable. This
	   is still just the *default* — anything with its own color rule
	   (all of our own components) continues to win via specificity. */
	color: var(--white-color, #fff);

	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
}

/* Preloader */

.handle-preloader{
  background-color:var(--main-color);
}

.handle-preloader {
  align-items: center;
  -webkit-align-items: center;
  display: flex;
  display: -ms-flexbox;
  height: 100%;
  justify-content: center;
  -webkit-justify-content: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 9999999;
}

.preloader-close{
  position: fixed;
  z-index: 9999999999999;
  font-size: 18px;
  background: #ffffff;
  width: 30px;
  height: 30px;
  line-height: 26px;
  text-align: center;
  cursor: pointer;
  right: 15px;
  top: 15px;
  border-radius: 0%;
}

.handle-preloader .animation-preloader {
  position: absolute;
  z-index: 100;
}

.handle-preloader .animation-preloader .spinner{
  animation: spinner 1s infinite linear;
  border-radius: 50%;
  height: 150px;
  margin: 0 auto 45px auto;
  width: 150px;
}

.handle-preloader .animation-preloader .txt-loading {
  text-align: center;
  user-select: none;
  font-family: var(--font-display);
}

.handle-preloader .animation-preloader .txt-loading .letters-loading:before{
  animation: letters-loading 4s infinite;
  content: attr(data-text-preloader);
  text-transform:capitalize;
  left: 0;
  opacity: 0;
  top:0;
  position: absolute;
  font-family: var(--font-display);
}

.handle-preloader .animation-preloader .txt-loading .letters-loading{
  font-weight: 500;
  letter-spacing: 15px;
  display: inline-block;
  position: relative;
  font-size: 70px;
  line-height: 70px;
  font-family: var(--font-display);
  /* color: transparent;
  -webkit-text-stroke-width: 1px;
  
  -webkit-text-stroke-color: rgba(255, 255, 255, 0.30);*/
}

.handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(2):before {animation-delay: 0.2s;}
.handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(3):before {animation-delay: 0.4s;}
.handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(4):before {animation-delay: 0.6s;}
.handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(5):before {animation-delay: 0.8s;}
.handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(6):before { animation-delay: 1s;}
.handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(7):before { animation-delay: 1.2s;}
.handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(8):before { animation-delay: 1.4s;}
.handle-preloader .loader-section {
  background-color: #fff;
  height: 100%;
  position: fixed;
  top: 0;
  width: calc(50% + 1px);
}

.preloader .loaded .animation-preloader {
  opacity: 0;
  transition: 0.3s ease-out;
}

.handle-preloader .animation-preloader .txt-loading .letters-loading{
  
}

.handle-preloader .animation-preloader .txt-loading .letters-loading:before{
  color: #fff;
}

.handle-preloader .animation-preloader .spinner{
  border: 3px solid #fff;
  border-top-color: rgba(255, 255, 255, 0.5); 
}

/* Animación del preloader */
@keyframes spinner {
  to {
    transform: rotateZ(360deg);
  }
}
@keyframes letters-loading {
  0%,
  75%,
  100% {
    opacity: 0;
    transform: rotateY(-90deg);
  }

  25%,
  50% {
    opacity: 1;
    transform: rotateY(0deg);
  }
}

@media screen and (max-width: 767px) {
  .handle-preloader .animation-preloader .spinner {
    height: 8em;
    width: 8em;
  }
}
@media screen and (max-width: 500px) {
  .handle-preloader .animation-preloader .spinner {
    height: 7em;
    width: 7em;
  }
  .handle-preloader .animation-preloader .txt-loading .letters-loading {font-size: 30px; letter-spacing: 10px;}
}

i{
    font-style: normal;
}

.bordered-layout .page-wrapper{
	padding:0px 50px 0px;
}

.page-wrapper.image-layer{
	position:relative;
}

.page-wrapper.image-layer:before{
	position:absolute;
	content:'';
	left:0px;
	top:0px;
	right:0px;
	bottom:0px;
	opacity:0.90;
	background-color:var(--color-four);
}

a{
	text-decoration:none;
	cursor:pointer;
	transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
	-ms-transition:all 0.3s ease;
	-o-transition:all 0.3s ease;
	color:var(--main-color);
}

button,
a:hover,a:focus,a:visited{
	text-decoration:none;
	outline:none !important;
}

h1,h2,h3,h4,h5,h6 {
	position:relative;
	margin:0px;
	background:none;
	color:var(--color-four);
	font-family: var(--font-display);
}

input,button,select,textarea{
	
}

textarea{
	overflow:hidden;
}

.text,
p{
	position:relative;
	line-height:1.7em;
	color:var(--color-four);
	font-size:16px;
}

/* Typography */

h1{
	line-height:180px;
	font-size:200px;
	font-weight: 700;
}

h2{
	font-weight: 700;
	line-height:43px;
	font-size:33px;
}

h3{
	line-height:42px;
	font-size:32px;
}

h4{
	line-height:36px;
	font-size:26px;
}

h5{
	line-height:32px;
	font-size:22px;
}

h6{
	line-height:28px;
	font-size:18px;
}

.auto-container{
	position:static;
	max-width:1530px;
	padding:0px 15px;
	margin:0 auto;
}

.page-wrapper{
	position:relative;
	margin:0 auto;
	width:100%;
	min-width:300px;
    overflow: hidden;
}

ul,li{
	list-style:none;
	padding:0px;
	margin:0px;	
}

img{
	display:inline-block;
	max-width:100%;
}

.template-btn{
	cursor:pointer;
	display:inline-block;
	transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
	-ms-transition:all 0.3s ease;
	-o-transition:all 0.3s ease;
}

.centered{
	text-align:center;	
}

::-webkit-input-placeholder{color: inherit;}
::-moz-input-placeholder{color: inherit;}
::-ms-input-placeholder{color: inherit;}



/* List Style One */

.list-style-one{
	position:relative;
}

.list-style-one li{
	position:relative;
	color:var(--white-color);
	font-size:16px;
	font-weight:400;
	line-height:1.8em;
	margin-bottom:10px;
	padding-left:30px;
}

.list-style-one li a{
	position:relative;
	color:var(--white-color);
	-webkit-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	transition:all 300ms ease;
}

.list-style-one li a:hover{
	color:var(--main-color);
}

.list-style-one li .icon{
	position:absolute;
	left:0px;
	top:5px;
	color:var(--main-color);
	font-size:18px;
	line-height:1em;
	font-weight:300;
	-webkit-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	transition:all 300ms ease;
}

/* Btn Style One */

.btn-style-one{ 
	position: relative;
	font-weight:600;
    font-size: 16px;
	overflow: hidden;
	text-align:center;
	border-radius:5px;
	padding:18px 34px;
	display:inline-block;
    color: var(--white-color);
	background-color: var(--main-color);
}

.btn-style-one:before{
	-webkit-transition-duration: 800ms;
	transition-duration: 800ms;
	position: absolute;
	width: 200%;
	height: 200%;
	content: "";
	top: -200%;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	border-radius: 50%;
	z-index: 1;
	background-color: var(--white-color);
}

.btn-style-one:hover:before{
	top: 0%;
}

.btn-style-one .btn-wrap{
	position:relative;
	z-index:1;
	float:left;
    overflow: hidden;
    display: inline-block;
}

.btn-style-one .btn-wrap .text-one{
	position: relative;
	display: block;
	color: var(--white-color);
	transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
}

.btn-style-one:hover .btn-wrap  .text-one:first-child{
	-webkit-transform: translateY(-150%);
    -ms-transform: translateY(-150%);
    transform: translateY(-150%);
}

.btn-style-one .btn-wrap .text-two{
	position: absolute;
    top: 100%;
    display: block;
	color: var(--main-color);
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.btn-style-one:hover .btn-wrap .text-two{
	top: 50%;
    -webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.btn-style-one:hover .btn-wrap .text-two{
	
}

.btn-style-one:hover{
	
}

.btn-style-one:hover:before{
	top: -40%;
}

/* Btn Style Two */

.btn-style-two{
	position: relative;
	font-weight:600;
    font-size: 16px;
	overflow: hidden;
	text-align:center;
	border-radius:5px;
	padding:18px 34px;
	display:inline-block;
    color: var(--white-color);
	border: 1px solid var(--main-color);
}

.btn-style-two:before{
	-webkit-transition-duration: 800ms;
	transition-duration: 800ms;
	position: absolute;
	width: 200%;
	height: 200%;
	content: "";
	top: -200%;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	border-radius: 50%;
	z-index: 1;
	background-color: var(--main-color);
}

.btn-style-two:hover:before{
	top: 0%;
}

.btn-style-two .btn-wrap{
	position:relative;
	z-index:1;
	float:left;
    overflow: hidden;
    display: inline-block;
}

.btn-style-two .btn-wrap .text-one{
	position: relative;
	display: block;
	color: var(--white-color);
	transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
}

.btn-style-two:hover .btn-wrap  .text-one:first-child{
	-webkit-transform: translateY(-150%);
    -ms-transform: translateY(-150%);
    transform: translateY(-150%);
}

.btn-style-two .btn-wrap .text-two{
	position: absolute;
    top: 100%;
    display: block;
	color: var(--white-color);
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.btn-style-two:hover .btn-wrap .text-two{
	top: 50%;
    -webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.btn-style-two:hover .btn-wrap .text-two{
	
}

.btn-style-two:hover{
	
}

.btn-style-two:hover:before{
	top: -40%;
}

img{
	display:inline-block;
	max-width:100%;
	height:auto;	
}

/*** 

====================================================================
	Section Title
====================================================================

***/

.sec-title{
	position:relative;
    z-index: 2;
	margin-bottom:40px;
	pointer-events:none;
}

.sec-title_icon{
	position:relative;
	margin-top: 10px;
	line-height:1em;
}

.sec-title_heading{
	text-transform:uppercase;
    color: var(--white-color);
}

.sec-title_text{
	line-height:30px; 
	font-size:17px;
	margin-top:20px;
    color:var(--color-three);
}

.sec-title.light .sec-title_text{
	opacity: 0.60;
	 color: var(--white-color);
}

.sec-title.light .sec-title_heading{
	color:var(--white-color);
}

.sec-title.centered{
	text-align: center !important;
}

/* Custom Select */

.form-group .ui-selectmenu-button.ui-button{
	top:-2px;
	width:100%;
	border:0px;
	padding: 19px 25px;
	padding-left: 65px;
	font-weight:600;
	line-height:28px;
	font-size:18px;
	border-radius: 6px;
	color:var(--white-color);
	background: none;
	border:1px solid rgba(var(--white-color-rgb), 0.08);
}

.form-group .ui-button .ui-icon{
	background:none;
	position:relative;
	top:3px;
	text-indent:0px;
	color:#a5a5a5;	
}

.form-group .ui-button .ui-icon:before{
	font-family: 'FontAwesome';
	content: "\f107";
	position:absolute;
	right:0px;
	top:2px !important;
	top:10px;
	height:22px;
	display:block;
	line-height:20px;
	font-size:14px;
	font-weight:normal;
	text-align:center;
	z-index:5;
	color:var(--color-three);
}

.ui-menu .ui-menu-item{
	font-size:14px;
}

.ui-menu .ui-menu-item:last-child{
	border:none;	
}

.ui-state-active, .ui-widget-content .ui-state-active{
	background-color:var(--main-color) !important;
	border-color:var(--main-color) !important;
}

.ui-menu .ui-menu-item-wrapper{
	position:relative;
	display:block;
	padding:8px 20px;
	line-height:24px;
	font-size:14px;
}

.ui-menu-item:hover{
	background-color:var(--color-two);
}

/* Cursor */

.cursor {
    position: fixed;
    background-color: var(--main-color);
    width: 10px;
    height: 10px;
    border-radius: 100%;
    z-index: 1;
    -webkit-transition: 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity, 0.3s cubic-bezier(0.75, -1.27, 0.3, 2.33) -webkit-transform;
    transition: 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity, 0.3s cubic-bezier(0.75, -1.27, 0.3, 2.33) -webkit-transform;
    transition: 0.3s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity;
    transition: 0.3s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity, 0.3s cubic-bezier(0.75, -1.27, 0.3, 2.33) -webkit-transform;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	z-index: 10000;
	-webkit-transform: scale(1);
	transform: scale(1);
}
  
.cursor.active {
	opacity: 1;
	-webkit-transform: scale(0);
	transform: scale(0);
}
  
.cursor.menu-active {
	opacity: 1;
	-webkit-transform: scale(0);
	transform: scale(0);
}
  
.cursor.hovered {
	opacity: 1;
}
  
.cursor-follower {
	position: fixed;
	border: 0.5px solid var(--main-color);
	width: 30px;
	height: 30px;
	border-radius: 100%;
	z-index: 1;
	-webkit-transition: 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) background, 0.6s cubic-bezier(0.75, -1.27, 0.3, 2.33) -webkit-transform;
	transition: 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) background, 0.6s cubic-bezier(0.75, -1.27, 0.3, 2.33) -webkit-transform;
	transition: 0.6s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) background;
	transition: 0.6s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) background, 0.6s cubic-bezier(0.75, -1.27, 0.3, 2.33) -webkit-transform;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	z-index: 10000;
	-webkit-transform: translate(2px, 2px);
	transform: translate(2px, 2px);
}

.cursor-follower.active {
	opacity: 1;
	-webkit-transform: scale(2);
	transform: scale(2);
}

.cursor-follower.menu-active {
	opacity: 1;
	-webkit-transform: scale(2);
	transform: scale(2);
}

.cursor-follower.hovered {
	opacity: 1;
}
  
/* Cursor End */

.xs-sidebar-group .close-button{
	font-family: "Flaticon";
}

.newsletter-popup-area-section{
	display: none;
}

.ui-datepicker td span, .ui-datepicker td a{
	text-align: center !important;
}