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

:root{
  --padding-container: 100px 0;
  --color-title: #001a49;
  
}

body{
  font-family: 'Open Sans', sans-serif;
}

.container{
width: 100%;
max-width: 1200px;
margin: 0 auto;
overflow: hidden;
padding: var(--padding-container);
}

.hero{
width: 100%;
height: 100vh;
min-height: 600px;
max-height: 800px;
position: relative;
display: grid;
grid-template-rows: 100px 1fr;  
color: white;
}

.hero::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 80%;
background-image: linear-gradient(180deg, #483f998c 0%, #0000008c 100%), url('../images/transporteurbano.jpg');
background-size: cover;
z-index: -1

}

/* Nav */

.nav{
--padding-container:0;
height: 100%;
display: flex;
align-items: center;
}

.nav nav-pills{
align-items: center;
}

.nav__title{
font-weight: 300;
}

.nav__items{
  list-style: none; 

}


.nav__link{
margin-left: auto;
padding: 0;
display: grid;
grid-auto-flow: column;
grid-auto-columns: max-content;
gap: 2em;
}

.nav__links{
color: #fff;
text-decoration: none;
}

.nav__menu {
margin-left: auto;
cursor: pointer;
display: none;
}

.nav__img {
display: block;
width: 30px;
}

.nav__close {
display: var(--show, none);
}


.nav__logo {
margin: auto;
margin-top: auto;
padding-top: 0; 
width: 190px;
cursor: pointer;

}


/* Hero container */



.hero__container {
max-width: 600px;
--padding-container:0;
display: grid;
grid-auto-rows: max-content;
align-content: center;
gap: 1em;
padding-bottom: 300px;
text-align: center;
}

.hero__title {
font-size: 3rem;
}

.hero__paragraph {
margin-bottom: 20px;
}

.cta {
display: inline-block;
background-color: #992472;
justify-self: center;
color: #fff;
text-decoration: none;
padding: 15px 30px;
border-radius: 32px;
}

/* Alert Banner */ 

.alert-warning {
color: #856404;
background-color: #e4a91f;
border-color: #4e7c9b;
}

.alert-dismissible {
padding-right: 4rem 1rem;
}

.alert-dismissible {
position: absolute;
top: 0;
right: 0;
padding: 0.75rem 1.25rem;
color: inherit;
}


.alert {
position: relative;
padding: 0.75rem 1.25rem;
margin-bottom: 1rem;
border: 1px solid transparent;
border-radius: 50px;

}

.btn-close{  
right: 14px;
font-size: 10px;  
border-radius: 50%;

}

/* 
.btn-close {  
border: none;
font-size: 15px;
cursor: pointer;
border-radius: 60%;
transition: all 0.2s ease-in;  
}
*/ 


/* Tabs container */ 

.tabs {
align-content: center;
justify-self: center;
margin: 0 auto;

}

.hero_container{
flex-wrap:wrap;
width: 100%;
justify-items: center;
}

.main {
width: 620px;
padding: 62px 100px;
border-radius: 10px;
box-shadow: 0 0 10px #00000070;
justify-content: center;
height: auto;
background-color: aliceblue;

}

.container {
padding: var(--padding-container);
margin: auto;
justify-content: center;
align-items: center;

}

.nav-item {
text-decoration: none;
color: #4e7c9b;
list-style: none;
font-weight: 600;
margin: auto;
justify-content: center;
align-items: center;
align-items: center;  
}

.container .nav-item {
border-radius: 10px;
border: 10px;  
background-color: rgb(209, 231, 247);
margin-bottom: 2rem;
}



.subtitulo {
font-size: medium;
text-align: center;
height: 20%;
margin-bottom: 20px;
color: #992472;

}

.station  {  
font-size: 45px;
text-align: center;
margin-bottom: 50px;

}
.tab-content{
flex-wrap: wrap;
width: 100%;
justify-items: left;
}

.tab-content {
text-align: center;
height: 10%;
margin-bottom: 120px;  

}

.tab__img {
margin: 0 auto;
width: 70px;
height: 70px;
color: #992472;

}

/* Inside Tab*/

.container .loader p {
margin: 20px 0;
width: 100%;
display: flex;
justify-content: space-between;
}

.container .loader .progress {
position: relative;
width: 100%;
height: 10px;
background: #e4a91f;
border-radius: 6px;
overflow: hidden;
margin: 5px 0px;
}

.container .loader .progress::before {
content: '';
position: absolute;
width: var(--wth);
height: 100%;
background-color: #992472;

}

.tab_estacion {
margin: 10px;
font-size: 30px;
}

.tab_autobuses {
margin: 30px;
margin-right: 600px;
font-size: 25px;
font-weight: 600;
}

.camion {
margin-top: 5px;
margin-right: 550px;
}

.camiones {
margin-top: 50px;
margin-right: 550px;
}

.reloj__img {
margin-bottom: .5rem;

}



/* Footer */

.footer{
background-color: #4e7c9b;
}

.footer_title{
font-weight: 400;
font-size: 2rem;
margin-bottom: 30px;  
}

.footer_title, .footer_newsletter{
color: #fff;
}

.footer_container{
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #fff;
padding-bottom: 60px;
}

.nav--footer{
padding-bottom: 20px;
display: grid;
gap: 1em;
grid-auto-flow: row;
height: 100%;
}

.nav__link--footer{
display: flex;
margin: 0;
margin-right: 20px;
flex-wrap: wrap;
}

.footer_inputs{
margin-top: 10px;
display: flex;
overflow: hidden;
}

.footer_input{
background-color: #fff;
height: 50px;
display: block;
padding-left: 10px;
border-radius: 6px;
font-size: 1rem;
outline: none;
border: none;
margin-right: 16px;
}

.footer_Tel{
font-size: 1.5rem;
color: #fff;
text-align: right;
font-weight: 400;
padding-left: .5rem;
text-decoration: none;
}

.footer_icon {
padding-left: auto;
}

.footer_submit{
margin-left: auto;
display: inline-block;
height: 50px;
padding: 0 20px;
background-color: #992472;
border: none;
font-size: 1rem;
color: #fff;
border-radius: 6px;
}

.footer_copy{
--pading-container: 30px 0;
text-align: left;
color: #fff
}

.footer_copyright{
font-weight: 50;
}

.footer_icons{
display: inline-flex;
margin-bottom: 10px;

}

.footer_img{
width: 35px;
margin-top: 2px;
}

/*Media quieries */

@media (max-width:900px){

.container .loader p {
  margin: 10px 0px;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.tab-content{
flex-wrap: wrap;
width: 100%;
justify-items: left;
}

.footer_container{
flex-wrap:wrap;
}

.nav--footer{
width: 100%;
justify-items: center;
}

.hero__title {
  font-size: 2.2rem;
}

.station {
  font-size: 35px;
 
}

.hero_container{
flex-wrap: wrap;
width: 100%;
justify-items: center;
}

.nav__logo {
  margin: auto;
  margin-top: auto;
  padding-top: 0; 
  width: 150px;
  cursor: pointer;  
}

.tab_autobuses{
  margin-top: 30px;
  margin-right: 10px;   
}

.camion {
  margin-top: 30px;
  margin-right: -10px;
}

.camiones {
margin-top: 35px;
margin-right: -10px;
}

.reloj__img {
margin-bottom: .6rem;

}

.tab_estacion {
align-items: center;
}

.tab-content>.tab-pane {
display: none;
width: 100%;
}

.main {
width: auto;
padding: 50px 20px;
border-radius: 10px;
box-shadow: 0 0 10px #00000070;
justify-content: center;
height: auto;
background-color: aliceblue;
}

}

@media (min-width:800px){

.container .loader p {
  margin: 10px 0px;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.tab-content{
flex-wrap: wrap;
width: 100%;
justify-items: left;
}

.footer_container{
flex-wrap:wrap;
}

.nav--footer{
width: 100%;
justify-items: center;
}

.hero__title {
  font-size: 2.2rem;
}

.station {
  font-size: 35px;
 
}

.hero_container{
flex-wrap: wrap;
width: 100%;
justify-items: center;
}

.nav__logo {
  margin: auto;
  margin-top: auto;
  padding-top: 0; 
  width: 150px;
  cursor: pointer;  
}

.tab_autobuses{
  margin-top: 30px;
  margin-right: 10px;   
}

.camion {
  margin-top: 30px;
  margin-right: -10px;
}

.camiones {
margin-top: 35px;
margin-right: -10px;
}

.reloj__img {
margin-bottom: .6rem;

}

.tab_estacion {
align-items: center;
}

.tab-content>.tab-pane {
display: none;
width: 100%;
}

.main {
width: auto;
padding: 50px 20px;
border-radius: 10px;
box-shadow: 0 0 10px #00000070;
justify-content: center;
height: auto;
background-color: aliceblue;
}

}