@import url('https://fonts.googleapis.com/css2?family=Hind+Vadodara:wght@300;600&display=swap');

*{ margin: 0; padding: 0; box-sizing:border-box; transition: all 1s;}


html {scroll-behavior: smooth; min-height: 100%; position: relative;}
a {transition-duration: 0s;}
body {position: relative; background-color: #000000 !important; padding-top: 2rem;}


.mt-6 {margin-top: 4rem !important;}
.mt-7 {margin-top: 5rem !important;}
.mt-8 {margin-top: 6rem !important;}
.mt-9 {margin-top: 7rem !important;}
.mt-10 {margin-top: 8rem !important;}

.mb-6 {margin-bottom: 4rem !important;}
.mb-7 {margin-bottom: 5rem !important;}
.mb-8 {margin-bottom: 6rem !important;}
.mb-9 {margin-bottom: 7rem !important;}
.mb-10 {margin-bottom: 8rem !important;}

.ps-6 {padding-left: 4rem !important;}
.ps-7 {padding-left: 5rem !important;}
.ps-8 {padding-left: 6rem !important;}
.ps-9 {padding-left: 7rem !important;}
.ps-10 {padding-left: 8rem !important;}

.pe-6 {padding-right: 4rem !important;}
.pe-7 {padding-right: 5rem !important;}
.pe-8 {padding-right: 6rem !important;}
.pe-9 {padding-right: 7rem !important;}
.pe-10 {padding-right: 8rem !important;}



/* HOME ---------------------------------------------------------------------------------------------------------------------------------*/

main {position: relative}

.body-index {background-color: #ffffff !important;} 


/*NAV*/
header {position: sticky; top: 0; background-color: #ffffffed; z-index:100}
.barra {font-family: "Hind Vadodara", sans-serif; font-weight: 300; font-size: 1.1rem;}
.navbar-brand img {margin-top: 0.1rem;}
.navbar {height: 6rem;}
.navbar-nav {align-items: end;}
.navbar-collapse {flex-grow: unset !important;}
.nav-link {margin: 0rem 0.25rem; padding-bottom: 0rem !important;}
.nav-link:hover {color: #e3660f !important;}
.nav-link.active {font-weight: 600; color: #e3660f !important;}

/* banner */
.banner {position: relative; overflow: hidden; border-radius: 0px 50px 15px 0px;}
.banner p {font-family: "Hind Vadodara", sans-serif; font-weight: 600; font-style: normal; position: absolute; font-size: 5rem; line-height: 98%; padding-bottom: 12.5rem; letter-spacing: -1px; word-spacing: -1px; color: #ffffff; z-index: 1; width: 65%; text-shadow: 2px 1px 4px #18538b; text-align: right;}


/*intro*/
.intro {margin-top: 3rem;}
.intro h1 {font-family: "Hind Vadodara", sans-serif; font-weight: 600; color: #1772ac; font-size: 3rem; line-height: 105%; letter-spacing: -1px; word-spacing: -1px;}
.intro .volanta {font-family: "Hind Vadodara", sans-serif; font-weight: 600; color: #e3660f; font-size: 1rem; letter-spacing: 3px; word-spacing: 3px;}
.intro p {font-family: "Hind Vadodara", sans-serif; font-weight: 300; color: #757575; font-size: 1.4rem;}


/*texto home*/
.texto-home h2 {font-family: "Hind Vadodara", sans-serif; font-weight: 600; color: #369832; font-size: 3.25rem; line-height: 90%; letter-spacing: -1px; word-spacing: -1px;}
.texto-home h2 span {font-weight: 300; color: #1772ac; font-size: 2.125rem; letter-spacing: 4px;}
.texto-home div div div {position: relative; background-color: #ffffff; box-shadow: 3px 8px 30px 0 #2e851882;  border-radius: 0px 40px; padding: 2rem; background: linear-gradient(135deg, rgb(116 201 101) 0%, rgb(27 131 28) 50%, rgb(42 97 14) 100%); /*linear-gradient(135deg,rgba(242, 73, 73, 1) 0%, rgba(225, 38, 38, 1) 50%, rgba(199, 34, 34, 1) 100%);*/}
.texto-home div div div img {position: absolute; top: -0.7rem; right: 3rem;}
.texto-home h3 {font-family: "Hind Vadodara", sans-serif; font-weight: 600; font-size: 1.75rem; color: #ffffff; margin-top: 2rem;}
.texto-home p {font-family: "Hind Vadodara", sans-serif; font-weight: 300; color: #ffffff; font-size: 1.1rem;}

/*whatsapp*/
.wap {display: flex; justify-content: center; align-items: center; position: fixed; right: 0rem; bottom: 2rem; width: 3.75rem; height: 3.75rem; z-index: 10000; background-color: #25d366; border-radius: 100% 0% 0% 100%; transform: scale(1); box-shadow: none; transition: transform 0.7s, box-shadow 0.7s;}
.wap:hover {transform: scale(1.10); box-shadow: 0px 0px 18px 6px #25d36673;}
.wap img {width: 2.25rem; margin-left: 0.25rem; filter: drop-shadow(1px 1px 1px #1ca14d);}


/* Footer */

.redes-pie .icono {width: 30px; height: 30px; -webkit-mask-size: cover; mask-size: cover; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; transition: 0.5s;}
.redes-pie .icono.instagram {-webkit-mask-image: url(../img-redes-sociales/icon-instagram.svg); mask-image: url(../img-redes-sociales/icon-instagram.svg); background-color: #E4405F; margin-right: 1rem;}
.redes-pie .icono.twitter {-webkit-mask-image: url(../img-redes-sociales/icon-x-twitter.svg); mask-image: url(../img-redes-sociales/icon-x-twitter.svg); background-color: #000000; margin-right: 1rem;}
.redes-pie .icono.linkedin {-webkit-mask-image: url(../img-redes-sociales/icon-linkedin.svg); mask-image: url(../img-redes-sociales/icon-linkedin.svg); background-color: #0A66C2;}
.redes-pie .icono:hover {background-color: #e3660f;}

.nav2 nav a {font-family: "Hind Vadodara", sans-serif; font-weight: 300; font-optical-sizing: auto; font-size: 1.1rem; color: #757575; padding: 0 0.5rem;}
.nav2 nav a:hover {color: #e3660f; text-decoration: none;}
.line-home {border-style: inset; border-width: 1px; margin: 1rem 0rem 1.5rem;}
.footer {position: relative; bottom: 0; width: 100%; padding-bottom: 3rem; margin-top: 1rem; text-align: center;}
.footer p {font-family: "Hind Vadodara", sans-serif; font-weight: 300; font-size: 0.95rem; color: #757575; margin-bottom: 0.20rem;}
.footer a {color: #1772ac; text-decoration: none;}
.footer a:hover {color: #e3660f; text-decoration: underline;}
.footer .creditos {margin-top: 0.85rem; text-align: center;}
.footer .creditos p {font-size: 0.8rem; color: #757575; margin-top: 0.3rem;} 
.footer .creditos img:last-child {display: none;}
.footer .creditos:hover img:last-child {display: unset;}
.footer .creditos:hover img:first-child {display: none;}


/* SECCIONES ---------------------------------------------------------------------------------------------------------------------------------*/

.banner-secc {position: relative; overflow: hidden; border-radius: 0px 50px 15px 0px;}
.banner-secc h1 {font-family: "Hind Vadodara", sans-serif; font-weight: 600; font-style: normal; position: absolute; font-size: 4rem; letter-spacing: -1px; word-spacing: -1px; color: #ffffff; z-index: 1; width: 65%; text-shadow: 2px 1px 12px #000000;}

.seccion h2 {font-family: "Hind Vadodara", sans-serif; font-weight: 600; color: #1772ac; font-size: 2rem; line-height: 105%; letter-spacing: -1px; word-spacing: -1px;}
.seccion p {font-family: "Hind Vadodara", sans-serif; font-weight: 300; color: #757575; font-size: 1.4rem;}


/* QUIENES SOMOS */

.equipo {padding: 2.5rem 5rem !important; border-radius: 0px 40px 0px 0px; box-shadow: 4px 6px 17px 2px #13557769; background: url('../quienes-somos/devroots-isotipo-fondo.webp') center no-repeat, linear-gradient(135deg, #1772ac 0%, #defbeb 48%, #defbeb 52%, #1772ac 100%);}
.equipo h2 {font-family: "Hind Vadodara", sans-serif; font-weight: 600; color: #e3660f; font-size: 2.5rem; line-height: 105%; letter-spacing: -1px; word-spacing: -1px;}
.equipo p {font-family: "Hind Vadodara", sans-serif; font-weight: 300; color: #757575; font-size: 1.4rem;}
.equipo .nombre {font-weight: 600; color: #1772ac; font-size: 1.6rem; line-height: 105%; word-spacing: -1px;}
.equipo .cargo {font-weight: 300; color: #454444; font-size: 1.1rem; line-height: 115%;}
.equipo .fundador {font-weight: 300; color: #454444; font-size: 1rem;}


/* SERVICIOS */

.serv-banner {position: absolute;}
.serv-banner h1 {padding-bottom: 15rem; font-size: 5rem;}
.servicios {margin-top: 20rem !important;}
.servicios .numero {position: absolute; top: -4rem; right: 1.5rem; font-family: "Hind Vadodara", sans-serif; font-weight: 600; font-size: 14.5rem; margin-top: 0rem; margin-bottom: 0rem; color: #f17027;}
.servicios h2 {font-family: "Hind Vadodara", sans-serif; font-weight: 600; color: #056395; font-size: 1.5rem; line-height: 105%; letter-spacing: -1px; word-spacing: -1px; z-index: 10; position: relative;}
.servicios p {font-family: "Hind Vadodara", sans-serif; font-weight: 300; color: #ffffff; font-size: 1rem; z-index: 10; position: relative;}
.servicios div div div div div {position: relative; box-shadow: 4px 6px 17px 2px #6b220652; border-radius: 0px 40px; padding: 1.5rem; padding-top: 2.5rem; background: linear-gradient(135deg, rgb(251 162 108) 0%, rgb(251 162 108) 20%, rgb(255 94 2) 100%);}
.servicios .consulta {font-family: "Hind Vadodara", sans-serif; font-weight: 300; color: #056395; font-size: 1.5rem;}
.servicios .consulta a {color: #056395;}
.servicios .consulta a:hover {color: #e3660f;}




/* CONTACTO */

.form-tit {font-family: "Hind Vadodara", sans-serif; font-size: 1.2rem; margin-top: 1.5rem; margin-bottom: 0.2rem; color: #1772ac;}
.form-control {color: #484848 !important; background-color: #e7e7e7 !important; box-shadow: 2px 3px 6px 1px #00000014; border-color: #cbcbcb !important; border-radius: 5px !important;}
.btn-primary {color: #ffffff !important; background-color: #e3660f !important; border-color: #e3660f !important; margin-top: 1.5rem; box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.4);}
.btn-primary:hover {color: #ffffff !important; background-color: #e3660f !important; border-color: #e3660f !important;}
.btn-primary:active {color: #e3660f !important; background-color: #ffffff !important; border-color: #ffffff !important;}

.contenedor-data h2 {font-family: "Hind Vadodara", sans-serif; font-weight: 600; font-size: 1.45rem; margin-top: 0.5rem; color: #e3660f;}
.contenedor-data div p {font-family: "Hind Vadodara", sans-serif; font-size: 1.2rem; color: #757575; line-height: 125%;}
.contenedor-data div p span {font-weight: 600;}
.contenedor-data div a {color: #757575; font-size: 1.2rem;}
.contenedor-data div a:hover {color: #e3660f;}
.contenedor-data .redes-pie a {text-decoration: none;}

.gracias {margin-top: 6rem; margin-bottom: 0rem;}
.gracias p {font-family: "Hind Vadodara", sans-serif; font-size: 2.5rem; line-height: 130%; color: #757575;}
.gracias .volver {margin-top: 0rem; margin-bottom: 4rem;}
.gracias .volver a {font-size: 1.25rem !important; color: #757575; text-decoration: none;}
.gracias .volver a:hover {color: #e3660f;} 
.gracias.error p {font-size: 2.5rem; color: #df0000;}
.gracias.error a {color: #df0000;}
.gracias.error a:hover {color: #1772ac;}
.gracias.error .volver a {color: #757575;}
.gracias.error .volver a:hover {color: #e3660f;} 
















/* 1920  ------------------------------------------------------- */
@media (max-width: 1920px){

.banner p {font-size: 5rem; padding-bottom: 12.5rem; width: 60%;}

/*secciones*/
.banner-secc h1 {font-size: 4.25rem; margin-bottom: 0rem;}

/*servicios*/
.serv-banner h1 {font-size: 4.25rem; padding-bottom: 13rem;}
.servicios {margin-top: 27rem !important;}



}







/* 1366  ------------------------------------------------------- */
@media (max-width: 1366px){

/* HOME */

.nav-item {margin: 0rem 0.3rem;}
.banner p {font-size: 4.25rem; padding-bottom: 11rem; width: 70%;}

/*secciones*/
.banner-secc h1 {font-size: 3.8rem; margin-bottom: 0rem;}

/*servicios*/
.serv-banner h1 {padding-bottom: 9rem;}
.servicios {margin-top: 19rem !important;}


}






/* 1180  ------------------------------------------------------- */
@media (max-width: 1180px){

/* servicios */
.servicios div div div div div {min-height: 13rem;}
.serv-banner h1 {font-size: 4rem; padding-bottom: 5rem;}


}








/* IPAD PRO  --------------------------------------------------- */
@media (max-width: 1024px){

/*Home*/
.navbar {height: 7rem;}
.navbar-brand img {width: 17rem; height: auto; margin-top: 0rem;}
.nav-item {margin: 0rem 0.25rem;}
.banner p {font-size: 3.5rem; padding-bottom: 8rem; width: 70%; padding-left: 0rem; text-align: center !important;}
.texto-home p {font-size: 0.95rem;}
.texto-home div div div {padding: 2rem 1.5rem;}

/*secciones*/
.banner-secc h1 {font-size: 3.25rem; margin-bottom: 0rem;}

/* servicios */
.servicios {margin-top: 16rem !important;}
.serv-banner h1 {font-size: 4rem; padding-bottom: 6rem;}

}







/* SURFACE PRO 7 --------------------------------------------------- */
@media (max-width: 912px){


}




/* ASUS ZENBOOK FOLD  --------------------------------------------------- */
@media (max-width: 853px){



}




/* IPAD PRO  --------------------------------------------------- */
@media (max-width: 820px){

/*Home*/
.navbar {height: 6rem;}
.navbar-brand img {width: 14rem; margin-top: 0.4rem;}
.nav-item {font-size: 1rem; margin: 0.4rem 0.125rem;}
.banner p {font-size: 3rem;}
.intro h1 {font-size: 2.75rem;}
.texto-home h1 {font-size: 2.75rem;}
.texto-home h1 span {font-size: 1.75rem;}
.texto-home div div div {padding: 3.5rem 1.5rem 2rem;}

/* secciones */
.banner-secc h1 {font-size: 3rem; margin-bottom: 0rem;}

/* servicios */
.servicios {margin-top: 11.5rem !important;}
.serv-banner h1 {font-size: 3.25rem; padding-bottom: 6rem;}


}






/* IPAD  ------------------------------------------------------- */
@media (max-width: 768px){

/* Home */
.banner p {font-size: 2.75rem;}
.intro h1 {font-size: 2.25rem;}

/* secciones */
.banner-secc h1 {font-size: 2.75rem; margin-bottom: 0rem;}

/* servicios */
.serv-banner h1 {font-size: 3rem; padding-bottom: 5rem;}


}








/* CELULARES --------------------------------------------------- */
@media (max-width: 500px){


/* HOME */

body {padding-top: 0rem;}
.texto-home p {font-size: 1.25rem;}

/* banner */
.banner {border-radius: 0px 50px 35px 0px;}
.banner p {font-size: 3rem; line-height: 105%; letter-spacing: -1px; word-spacing: -1px; padding-top: 3.5rem; padding-bottom: 11rem; padding-left: 2rem; padding-right: 2rem; width: 100%; text-shadow: 2px 1px 4px #18538b; text-align: center !important;}

.navbar-brand img {width: 15rem; height: auto; padding-top: 0.35rem; padding-left: 1.5rem;}
.navbar .navbar-toggler {border: solid 2px #e3660f !important; height: 2.5rem; width: 3rem; margin: 1rem 1.75rem 0.75rem; padding-right: 2.5rem; z-index: 20 !important; border-radius: 10px 0px 10px 0px;}
.navbar .navbar-toggler:hover {background-color: #e3660f !important; border: solid 2px #e3660f !important;}
.navbar .navbar-toggler:focus {box-shadow: none !important;}
.navbar .navbar-toggler.collapsed {background-color: #ffffff !important;}
.navbar-collapse {position: absolute !important; top: 0rem; right: 0rem; left: 0rem; background-color: #f3e126f5; padding: 4rem 1.5rem 1.75rem 0rem; border-radius: 0px 0px 0px 50px;}
.navbar-nav {padding-top: 0.25rem; padding-bottom: 0.75rem;}
.nav-item {font-size: 1.5rem; margin-bottom: 0.25rem}

/* FOOTER */
.line-home {margin: 1rem 1rem 1.5rem;}
.nav2 nav a {font-size: 1rem; color: #999;}

/* SECCIONES */

.header-secciones {margin-top: 8rem;}
.header-secciones h1 {font-size: 2.5rem;}
.header-secciones img {display: none;}
.header-secciones .navbar-brand img {display: block;}
.banner-secc h1 {font-size: 3.75rem; margin-bottom: 0rem;}

/* QUIENES SOMOS*/
.banner-secc h1 {line-height: 110%; margin-bottom: 0rem;}
.equipo {padding: 2.5rem 0rem !important;}
.equipo h2 {color: #af4e0a}

/* servicios */
.servicios {margin-top: 16rem !important;}
.serv-banner h1 {padding-bottom: 3.5rem;}
.servicios p {font-size: 1.125rem;}
.servicios .numero {font-size: 12.8rem;}

/* contacto */
.gracias.error a {font-size: 1.75rem;}







}