*{
margin: 0;
padding: 0;
}
:root {
--color-pink: #F21B42;
--color-DarkBlue: #0C3559;
--color-GreenBlue: #0C4459;
--color-Turquoise: #148BA6;
--color-Green: #43edbc;
--color-Red: #F21F1D;
--color-white: #fff;
--color-black: #000;
--color-light-Blue: #1F8BFF;
--color-black-main: #212529;
--color-black-alert: #c34922;
}
/*---Celphone media query----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 600px) {
body {
font-family: Arial, sans-serif;
box-sizing: border-box;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
color: #fff;
}
.Background-color-Pink {
background-color: var(--color-pink);
}
.Background-color-DarkBlue {
background-color: var(--color-DarkBlue);
}
.Background-color-GreenBlue {
background-color: var(--color-Turquoise);
}
.Background-color-Green {
background-color: var(--color-Green);
}
.Background-color-Red {
background-color: var(--color-Red);
}
.btn-lenguage {
background-color: var(--color-Turquoise);
color: var(--color-white);
}
.btn-lenguage:hover {
background-color: var(--color-Green);
color: var(--color-black);
}
.background-bg-main{
background-color: var(--color-black-main);
padding: 1rem 0 1rem 0;
}
a {
text-decoration: none;
}
.each-section-design {
padding-top: 2rem;
padding-bottom: 2rem;
}
.bg-light {
background-color: #f8f9fa;
}
.nav-design {
color: var(--color-Turquoise);
}
.leng-ico {
display: inline-block;
width: 2rem;
height: 2rem;
margin-right: 0.5rem;
background-size: contain;
background-repeat: no-repeat;
vertical-align: middle;   
}
.signin-ico {
display: inline-block;
width: 2rem;
height: 2rem;
margin-right: 0.5rem;
background-size: contain;
background-repeat: no-repeat;
vertical-align: middle;   
}
/*---Logo-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.Dool_logo_img {
width: 3rem;
padding-right: 1rem;
}
.Dool_logo_txt {
font-size: 1.5rem;
color: var(--color-white);
}
/*---Video-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.container-text-design{
margin-top: 10%;    
}
/*----Por qué------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.bg-image {
height: 65vh;
background-image: url('./img/images/SpaceB_3.jpg');
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.video-title{
font-size: 1.2rem;
font-weight: bold;
color: var(--color-black-main);
}
.video-subtitle{
font-size: 1rem;
color: var(--color-black-main);
}
/* Asegúrate de que la columna tenga una altura mínima para centrar verticalmente */
.col.d-flex {
min-height: 100%;
}
/*---Asistentes-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.tipo-title{
color: var(--color-Green);
font-size: 1.5rem;
}
.card-design {
padding: 1rem;
}
.card-type-color-bg {
background-color: var(--color-black);
}
.title-type-color {
color: var(--color-Turquoise);
font-size: 1.7rem;
}
.subtitle-type-color {
color: var(--color-white);
}
/*---Integration-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.integration_img {
width: 100%;
}
.title-integration {
color: var(--color-Turquoise);
font-size: 1.7rem;
}
.subtitle-integration {
color: var(--color-Turquoise);
font-size: 1rem;
}
.dataDriven-info-design {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/*--- Que es-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.card-img-top {
width: 50%;
}
/*---Testimonials----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.title-blue {
color: var(--color-Turquoise);
font-size: 1.5rem;
}
.testimonialContainer {
overflow: hidden;
white-space: nowrap;
position: relative;
width: 100%;
}  
.testimonialContainer2 {
display: flex;
animation: slide 60s linear infinite;
}  
.testimonialContainer2 img {
width: 150px;
height: auto;
padding: 10px;
margin-left: 5px;
margin-right: 5px;
}  
@keyframes slide {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-280%);
}
}
/*---footer------------------------------------------------------------------------------------------------------------------------*/
.footer-container{
background-color: var(--color-DarkBlue);
color: var(--color-white);
padding-top: 5rem;
}
.footer-row-container {
padding-top: 3rem;
padding-bottom: 6rem;
}
.footer-design{
padding: 1rem 0 1rem 0;
}
.footer-icon{
width: 3rem;
}
/*---Video-------------------------------------------------------------------------------------------------------------------------------*/
.video-container {
position: relative;
width: 100%;
height: 20vh;
overflow: hidden;
} 
video {
width: 100%;
height: auto;
} 
.overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white; /* Cambia el color del texto según tu preferencia */
text-align: center;
}
.video-txt{
font-size: 0.8rem;
color: white;
}
/*---Agentes Disenio-------------------------------------------------------------------------------------------------------------------------------------------*/
.custom-card{
    width: 75%;
}
.pdf_icons_img{
    padding-top: 1rem;
    width: 5rem;
}
/*--text animation-------------------------------------------------------------------------------------------------------------------------------------------*/
.cta-text-one {
font-size: 1rem;
}
.background-alert {
background-color: var(--color-DarkBlue);
position: relative;
overflow: hidden;      /* aquí ocultamos todo lo que rebasa */
padding: 0.5rem 0;
}
.marquee {
display: block;        /* ocupa todo el ancho del contenedor */
width: 100vw;
}
.marquee span {
display: inline-block; /* sólo el span se mueve */
white-space: nowrap;
animation: marquee 20s linear infinite;
}
@keyframes marquee {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
/*---Podcast media query----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.podcast-img {
width: 100%;
height: auto;
}
/*---Podcast media query----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.podcast-img {
width: 100%;
height: auto;
}
}
/*---Tablet media query----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 600px) and (max-width: 768px) {
body {
font-family: Arial, sans-serif;
box-sizing: border-box;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
color: #fff;
}
.Background-color-Pink {
background-color: var(--color-pink);
}
.Background-color-DarkBlue {
background-color: var(--color-DarkBlue);
}
.Background-color-GreenBlue {
background-color: var(--color-Turquoise);
}
.Background-color-Green {
background-color: var(--color-Green);
}
.Background-color-Red {
background-color: var(--color-Red);
}
.btn-lenguage {
background-color: var(--color-Turquoise);
color: var(--color-white);
}
.btn-lenguage:hover {
background-color: var(--color-Green);
color: var(--color-black);
}
.background-bg-main{
background-color: var(--color-black-main);
padding: 1rem 0 1rem 0;
}
a {
text-decoration: none;
}
.each-section-design {
padding-top: 2rem;
padding-bottom: 2rem;
}
.bg-light {
background-color: #f8f9fa;
}
.nav-design {
color: var(--color-Turquoise);
}
.leng-ico {
display: inline-block;
width: 2rem;
height: 2rem;
margin-right: 0.5rem;
background-image: url('./img/icons/language.svg');
background-size: contain;
background-repeat: no-repeat;
vertical-align: middle;   
}
.signin-ico {
display: inline-block;
width: 2rem;
height: 2rem;
margin-right: 0.5rem;
background-image: url('./img/icons/user.svg');
background-size: contain;
background-repeat: no-repeat;
vertical-align: middle;   
}
/*---Logo-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.Dool_logo_img {
  width: 5rem;
  padding-right: 1rem;
}
.Dool_logo_txt {
  font-size: 2rem;
  color: var(--color-white);
}
/*---Video-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.container-text-design{
margin-top: 10%;    
}
/*----Por qué------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.bg-image {
height: 65vh;
background-image: url('./img/images/SpaceB_3.jpg');
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.video-title{
font-size: 1.2rem;
font-weight: bold;
color: var(--color-black-main);
}
.video-subtitle{
font-size: 1rem;
color: var(--color-black-main);
}
/* Asegúrate de que la columna tenga una altura mínima para centrar verticalmente */
.col.d-flex {
min-height: 100%;
}
/*---Asistentes-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.tipo-title{
color: var(--color-Green);
font-size: 1.5rem;
}
.card-design {
padding: 1rem;
}
.card-type-color-bg {
background-color: var(--color-black);
}
.title-type-color {
color: var(--color-Turquoise);
font-size: 1.7rem;
}
.subtitle-type-color {
color: var(--color-white);
}
/*---Integration-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.integration_img {
width: 60%;
}
.title-integration {
color: var(--color-Turquoise);
font-size: 1.7rem;
}
.subtitle-integration {
color: var(--color-Turquoise);
font-size: 1rem;
}
.dataDriven-info-design {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/*--- Que es-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.card-img-top {
width: 50%;
}
/*---Testimonials----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.title-blue {
color: var(--color-Turquoise);
font-size: 1.5rem;
}
.testimonialContainer {
overflow: hidden;
white-space: nowrap;
position: relative;
width: 100%;
}  
.testimonialContainer2 {
display: flex;
animation: slide 60s linear infinite;
}  
.testimonialContainer2 img {
width: 150px;
height: auto;
padding: 10px;
margin-left: 5px;
margin-right: 5px;
}  
@keyframes slide {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-280%);
}
}
/*---footer------------------------------------------------------------------------------------------------------------------------*/
.footer-container{
background-color: var(--color-DarkBlue);
color: var(--color-white);
padding-top: 5rem;
}
.footer-row-container {
padding-top: 3rem;
padding-bottom: 6rem;
}
.footer-icon{
width: 3rem;
}
/*---Video-------------------------------------------------------------------------------------------------------------------------------*/
.video-container {
position: relative;
width: 100%;
height: 75vh;
overflow: hidden;
} 
video {
width: 100%;
height: auto;
} 
.overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white; /* Cambia el color del texto según tu preferencia */
text-align: center;
}
.video-txt{
font-size: 1.7rem;
color: white;
}
/*---Agentes Disenio-------------------------------------------------------------------------------------------------------------------------------------------*/
.custom-card{
    width: 75%;
}
.pdf_icons_img{
    padding-top: 1rem;
    width: 3rem;
}
/*--text animation-------------------------------------------------------------------------------------------------------------------------------------------*/
.cta-text-one {
font-size: 1rem;
}
.background-alert {
background-color: var(--color-DarkBlue);
position: relative;
overflow: hidden;      /* aquí ocultamos todo lo que rebasa */
padding: 0.5rem 0;
}
.marquee {
display: block;        /* ocupa todo el ancho del contenedor */
width: 100vw;
}
.marquee span {
display: inline-block; /* sólo el span se mueve */
white-space: nowrap;
animation: marquee 20s linear infinite;
}
@keyframes marquee {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
}

/*---Desktop media query----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 768px) {
body {
font-family: Arial, sans-serif;
box-sizing: border-box;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
color: #fff;
}
.Background-color-Pink {
background-color: var(--color-pink);
}
.Background-color-DarkBlue {
background-color: var(--color-DarkBlue);
}
.Background-color-GreenBlue {
background-color: var(--color-Turquoise);
}
.Background-color-Green {
background-color: var(--color-Green);
}
.Background-color-Red {
background-color: var(--color-Red);
}
.btn-lenguage {
background-color: var(--color-Turquoise);
color: var(--color-white);
}
.btn-lenguage:hover {
background-color: var(--color-Green);
color: var(--color-black);
}
.background-bg-main{
background-color: var(--color-black-main);
padding: 1rem 0 1rem 0;
}
a {
text-decoration: none;
}
.each-section-design {
padding-top: 2rem;
padding-bottom: 2rem;
}
.bg-light {
background-color: #f8f9fa;
}
.nav-design {
color: var(--color-Turquoise);
}
.leng-ico {
display: inline-block;
width: 2rem;
height: 2rem;
margin-right: 0.5rem;
background-size: contain;
background-repeat: no-repeat;
vertical-align: middle;   
}
.signin-ico {
display: inline-block;
width: 2rem;
height: 2rem;
margin-right: 0.5rem;
background-size: contain;
background-repeat: no-repeat;
vertical-align: middle;   
}
.footer-icon{
width: 3rem;
}
/*---Logo-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.Dool_logo_img {
  width: 5rem;
  padding-right: 1rem;
}
.Dool_logo_txt {
  font-size: 2rem;
  color: var(--color-white);
}
/*---Video-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.container-text-design{
margin-top: 10%;    
}
/*----Por qué------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.bg-image {
height: 65vh;
background-image: url('./img/images/SpaceB_3.jpg');
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.video-title{
font-size: 1.2rem;
font-weight: bold;
color: var(--color-black-main);
}
.video-subtitle{
font-size: 1rem;
color: var(--color-black-main);
}
/* Asegúrate de que la columna tenga una altura mínima para centrar verticalmente */
.col.d-flex {
min-height: 100%;
}
/*---Asistentes-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.tipo-title{
color: var(--color-Green);
font-size: 1.5rem;
}
.card-design {
padding: 1rem;
}
.card-type-color-bg {
background-color: var(--color-black);
}
.title-type-color {
color: var(--color-Turquoise);
font-size: 1.7rem;
}
.subtitle-type-color {
color: var(--color-white);
}
/*---Integration-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.integration_img {
width: 60%;
}
.title-integration {
color: var(--color-Turquoise);
font-size: 1.7rem;
}
.subtitle-integration {
color: var(--color-Turquoise);
font-size: 1rem;
}
.dataDriven-info-design {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/*--- Que es-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.card-img-top {
width: 50%;
}
/*---Testimonials----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.title-blue {
color: var(--color-Turquoise);
font-size: 1.5rem;
}
.testimonialContainer {
overflow: hidden;
white-space: nowrap;
position: relative;
width: 100%;
}  
.testimonialContainer2 {
display: flex;
animation: slide 60s linear infinite;
}  
.testimonialContainer2 img {
width: 150px;
height: auto;
padding: 10px;
margin-left: 5px;
margin-right: 5px;
}  
@keyframes slide {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-280%);
}
}
/*---footer------------------------------------------------------------------------------------------------------------------------*/
.footer-container{
background-color: var(--color-DarkBlue);
color: var(--color-white);
padding-top: 5rem;
}
.footer-row-container {
padding-top: 3rem;
padding-bottom: 6rem;
}
/*---Video-------------------------------------------------------------------------------------------------------------------------------*/
.video-container {
position: relative;
width: 100%;
height: 50vh;
overflow: hidden;
} 
video {
width: 100%;
height: auto;
} 
.overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white; /* Cambia el color del texto según tu preferencia */
text-align: center;
}
.video-txt{
font-size: 1.7rem;
color: white;
}
/*---Agentes Disenio-------------------------------------------------------------------------------------------------------------------------------------------*/
.custom-card{
    width: 75%;
}
.pdf_icons_img{
    padding-top: 1rem;
    width: 5rem;
}
/*--text animation-------------------------------------------------------------------------------------------------------------------------------------------*/
.cta-text-one {
font-size: 1rem;
}
.background-alert {
background-color: var(--color-DarkBlue);
position: relative;
overflow: hidden;      /* aquí ocultamos todo lo que rebasa */
padding: 0.5rem 0;
}
.marquee {
display: block;        /* ocupa todo el ancho del contenedor */
width: 100vw;
}
.marquee span {
display: inline-block; /* sólo el span se mueve */
white-space: nowrap;
animation: marquee 20s linear infinite;
}
@keyframes marquee {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
/*---Podcast media query----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.podcast-img {
width: 100%;
height: auto;
}
}