/*COLOR PALETTE

#353535
#3c6e71
#ffffff
#d9d9d9
#284b63

*/

/*
TESTING CLASSES

*/



.BRD{
	border: 1px solid greenyellow;
}
.BRD2{
	border: 1px solid rgb(175, 47, 255);
}

/*
TESTING CLASSES ENDS
*/

body{
	margin: 0;
	padding: 0;
	background-color: rgb(0, 98, 255);
}

* {
	box-sizing: border-box;
	scrollbar-color: transparent transparent; /* thumb and track color */
	scrollbar-width: 0px;
  }
  
  *::-webkit-scrollbar {
	width: 0;
  }
  
  *::-webkit-scrollbar-track {
	background: transparent;
  }
  
  *::-webkit-scrollbar-thumb {
	background: transparent;
	border: none;
  }
  
  * {
	-ms-overflow-style: none;
  }
  
  ol, li {
	list-style: none;
	margin: 0;
	padding: 0;
  }

/*SPECIAL CLASES*/
.titl_hm_a{
	letter-spacing: 12px;
	font-size: 5em;}
.hm_hr_bnr_sm{display: none;}
/*SPECIAL CLASES END*/

/*Backgrounds*/
.bg-cstm-a{
	background-color: #353535;
}
.bg-cstm-b{
	background-color: #3c6e71;
}
.bg-cstm-c{
	background-color: #d9d9d9;
}
.bg-cstm-d{
	background-color: #284b63;
}

.video-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1; /* Asegura que esté detrás del contenido */
}

/* Video como fondo */
.video-background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover; /* Hace que el video cubra toda la pantalla */
}

/* Capa de gradiente */
.gradient-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: radial-gradient(circle, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 128, 0.8) 100%);
	z-index: 0; /* Se coloca sobre el video pero debajo del contenido */
}

.hm_hr_logo{
	width: 100px;
	height: 100px;
}

/*##CARROUSEL BACKGROUNDS*/
.CarSecMkt-bg{
	background-image: url("../img/home/Carrousel_Mrkt/backgroundImage.png");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: left;
}
.CarSecSop-bg{
	background-image: linear-gradient(to left, #ffffff, #f0f5ff,  #f6f6f6);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
.CarSecIt-bg{
	background-image: linear-gradient(to left, #83c3ff, #5d76a8,  #f6f6f6);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
.CarSecContact-bg{
	background-image: url("../img/home/Carrousel_Contact/backgroundImage.png");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

/*Backgrounds ENDS*/

/*SIZING*/
.vh_100{
	height: 100vh;
}
/*SIZING ENDS*/



/*CONTAINERS*/
 .cstm-sep{
	width: 100%;
	height: 40vh;
 }



 .img_secb_cont img{
	width: 80%;
	margin-left: 10%;
 }
/*CONTAINERS END*/

/*CARROUSEL*/  
  .carousel {
	position: relative;
	padding-top: 75%;
	filter: drop-shadow(0 0 10px #0003);
	perspective: 100px;
  }
  
  .carousel__viewport {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	overflow-x: scroll;
	counter-reset: item;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
  }
  
  .carousel__slide {
	position: relative;
	flex: 0 0 100%;
	width: 100%;
  }
  
  .carousel__slide:nth-child(even) {
	padding-top: 20%;
  }
  
  .carousel__slide:before {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate3d(-50%,-40%,70px);
	color: #fff;
	font-size: 2em;
  }
  
  .carousel__snapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	scroll-snap-align: center;
  }
  /*
  @media (hover: hover) {
	.carousel__snapper {
	  animation-name: tonext, snap;
	  animation-timing-function: ease;
	  animation-duration: 9s;
	  animation-iteration-count: infinite;
	}
  
	.carousel__slide:last-child .carousel__snapper {
	  animation-name: tostart, snap;
	}
  }
	*/
  
  @media (prefers-reduced-motion: reduce) {
	.carousel__snapper {
	  animation-name: none;
	}
  }
  
  .carousel:hover .carousel__snapper,
  .carousel:focus-within .carousel__snapper {
	animation-name: none;
  }
  
  .carousel__navigation {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	text-align: center;
  }
  
  .carousel__navigation-list,
  .carousel__navigation-item {
	display: inline-block;
  }
  
  .carousel__navigation-button {
	display: inline-block;
	width: 1.5rem;
	height: 1.5rem;
	background-color: #333;
	background-clip: content-box;
	border: 0.25rem solid transparent;
	border-radius: 50%;
	font-size: 0;
	transition: transform 0.1s;
  }
  /*
  .carousel::before,
  .carousel::after,
  .carousel__prev,
  .carousel__next {
	position: absolute;
	top: 0;
	margin-top: 67.5%;
	width: 3rem;
	height: 3rem;
	transform: translateY(-50%);
	border-radius: 50%;
	font-size: 0;
	outline: 0;
  }
  
  .carousel::before,
  .carousel__prev {
	left: 1rem;
  }
  
  .carousel::after,
  .carousel__next {
	right: 1rem;
  }
  
  .carousel::before,
  .carousel::after {
	content: '';
	z-index: 1;
	background-color: #333;
	background-size: 1.5rem 1.5rem;
	background-repeat: no-repeat;
	background-position: center center;
	color: #fff;
	font-size: 2.5rem;
	line-height: 4rem;
	text-align: center;
	pointer-events: none;
  }
  
  .carousel::before {
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='0,50 80,100 80,0' fill='%23fff'/%3E%3C/svg%3E");
  }
  
  .carousel::after {
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='100,50 20,100 20,0' fill='%23fff'/%3E%3C/svg%3E");
  }
  */
  
  /*CARROUSEL ENDS*/

  /*CONTACT FORM*/
.form_input_cstm{
	width: 100%;
	border: none;
    border-bottom-width: medium;
    border-bottom-style: none;
    border-bottom-color: currentcolor;
  border-bottom: 1px solid #ccc;
  padding-left: 0;
  padding-right: 0;
  border-radius: 0;
  background: none;
  transition: border-color 0.15s ease-in-out, 
  box-shadow 0.15s ease-in-out, 
  -webkit-box-shadow 0.15s ease-in-out;
}

.form_input_cstm:focus {
    outline: none;
    box-shadow: 1px 1px 1px #333;
    border: none;
    transition: none;
}

.contact-info{
	background-color: #317dff;
}
  
  /*CONTACT FORM ENDS*/

  /*TITLES*/
  :root {
	--color-primary: hsl(210, 100%, 41%);
	--color-secondary: hsl(160, 100%, 65%);
	--background: hsl(230, 30%, 15%);
	--text: hsl(310, 100%, 95%);
  }
  ::selection {
	background-color: var(--color-primary);
	color: var(--background);
	-webkit-text-fill-color: var(--background);
  }
  .blockquote-b {
	border-right: 5px solid;
	margin-left: 0;
	padding: 1rem 0 1rem 2rem;
	font-size: 2rem;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-image: linear-gradient(
	  35deg,
	  var(--color-primary),
	  var(--color-secondary)
	);
  }
  .blockquote-a {
	border-left: 5px solid;
	margin-left: 0;
	padding: 1rem 0 1rem 2rem;
	font-size: 2rem;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-image: linear-gradient(
	  35deg,
	  var(--color-primary),
	  var(--color-secondary)
	);
  }
  code{
	font-size: 2.5rem;
	color: rgb(0, 105, 209);
  }


  /*HERO*/

  
  .contents_ {
	max-width: 100%;
	text-align: center;
	margin: 0 auto;
	padding: 0 20px;
  }