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

/*
	font-family: 'Poppins', sans-serif;
*/

@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap');

/*
    font-family: 'Roboto Slab', serif;
*/

.station_op._with{
  width: 90.6%;
}

a{
  color: #000;
}

.station_op._with:hover{
  background-color: transparent;
}

body{
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;

  overflow-x: hidden; /* Hide vertical scrollbar */
  background-color: rgb(0, 0, 0);
  color: rgba(0, 0, 0, 0.81);
}


@import url('https://fonts.googleapis.com/css2?family=Angkor&family=Inter:wght@100..900&family=Protest+Riot&display=swap');
/*
  font-family: "Protest Riot", sans-serif;
  font-weight: 1000;
  font-style: normal;
*/


#background-video {
  position: fixed; /* Fixed position so it covers the entire viewport */
  top: 0;
  left: 0;
  min-width: 100%; /* Cover entire viewport */
  min-height: 100%; /* Cover entire viewport */
  z-index: -1; 
  opacity: 0.7;
}






/* nav_bar */
/* menu *//* menu *//* menu *//* menu *//* menu *//* menu *//* menu */
/* menu *//* menu *//* menu *//* menu *//* menu *//* menu *//* menu */
.booking_card.active .memu_full_seting{
  right: 0;
  top: 50px;
}

.memu_full_seting{
  position: absolute;
  display: flex;
  justify-content:end;
  right: 40px;
  top: 40px;
  width: 100%;
  margin: 2.5vh ;
  max-height: 0;
  /* margin: 2vh 2vw; */
  background-color: green;
}

.booking_card.active .menu {
  --c: white;

}

.booking_card .menu{
  --c:black;
}


@media (max-width: 767px) {
.memu_full_seting{transform: scale(0.9);margin: 17px -3vw;}
.img2{transform: scale(0.7);margin:0 -6%;}}



.menu_text{
  position: absolute;
  
  font-size: 20px;
  border-radius: 200px;
  height: 50px;
  width: 135px;
  z-index: 2;
  transition: ease-in-out 0.1s;
}

/* edit */
/* .menu_text:hover { 
  background-color: black;
  color: white;
} */



.menu_wap{
  position: absolute;
  right: 0;
  top: 55%;
  transform: translate(0,-50%);
  padding-right: 10px;
}

.menu_text{
  background-color: transparent;
}
/* edit */




.menu {
  --s: 30px; 
  height: var(--s);
  aspect-ratio: 1;
  border: none;
  padding: 0;
  border-inline: calc(var(--s)/2) solid #0000; 
  box-sizing: content-box;
  --_g1: linear-gradient(var(--c) 20%,#0000 0 80%,var(--c) 0) 
         no-repeat content-box border-box;
  --_g2: radial-gradient(circle closest-side at 50% 12.5%,var(--c) 95%,#0000) 
         repeat-y content-box border-box;
  background: 
    var(--_g2) left  var(--_p,0px) top,
    var(--_g1) left  calc(var(--s)/10 + var(--_p,0px)) top,
    var(--_g2) right var(--_p,0px) top,
    var(--_g1) right calc(var(--s)/10 + var(--_p,0px)) top;
  background-size: 
    20% 80%,
    40% 100%;
  position: relative;
  clip-path: inset(0 25%);
  /* -webkit-mask: linear-gradient(90deg,#0000,#000 25% 75%,#0000); */
  cursor: pointer;
  transition: 
    background-position .3s var(--_s,.3s), 
    clip-path 0s var(--_s,.6s);
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;

}
.menu:before,
.menu:after {
  content:"";
  position: absolute;
  /* border-radius: var(--s); */
  inset: 40% 0;
  background: var(--c);
  transition: transform .3s calc(.3s - var(--_s,.3s));
}




.menu:checked {
  clip-path: inset(0);
  --_p: calc(-1*var(--s));
  --_s: 0s;
}
.menu:checked:before {
  transform: rotate(45deg);
}
.menu:checked:after {
  transform: rotate(-45deg);
}
.menu:focus-visible {
  clip-path: none;
/* -webkit-mask: none; */
  border: none;
  outline: 2px solid var(--c);
  outline-offset: 5px;
}


:root {
  --link-size: 50px;
	--MENU-size: 50px;
	--MENU_trans-property: all 0.3s ease-in-out ;
  --menu_icon_so_color:rgba(0, 0, 0, 0.736);
}

.loginId{
  position: relative;
  top: 60px;
  display: none; 

  font-size: 30px;
  width: 300px;
  height: 70px;
  border-radius: 15px;
  background-color: white;
  z-index: 11;
}

.login_icon{
  position: absolute;
  top: 50%;
  left: 3%;
  transform: translate(0,-50%);
  
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background-color: #1769ff;
}

.login_name{
  position: absolute;
  top: 50%;
  left: 21%;
  transform: translate(0,-50%);
}



.menucontanerbox{
  position: absolute;
  top: 55px;
  display: none; 

  transition: 0.3s ease-in-out;

  font-size: 30px;
  width: 300px;
  /* height: 400px; */
  border-radius: 15px;
  background-color: rgb(19, 28, 34);
  z-index: 10;

}

.booking_card.active .menucontanerbox{
  top: 100px;
}

.HOME,.ABOUT_US,.CONTACT,.EVENT {
  top:-15px;  
	display: flex;
	position: relative;
	overflow: hidden;
  width: 280px;

	height: var(--MENU-size);
	margin: 8px;
	border-radius: 20px;


	text-decoration: none;
	transition: var(--MENU_trans-property);
}

.HOME .MENU_BAR,.ABOUT_US .MENU_BAR,.EVENT .MENU_BAR,.CONTACT .MENU_BAR {
  position: absolute;
  top:5px ;
  font-size: 26px;
  font-weight: 555;
  text-align: left;
	width: 100%;
  padding-left:20px ;
  color: var(--menu_icon_so_color);
	transition: var(--MENU_trans-property);
  color: white;

}

/*** Animations ***/
.HOME:hover,.ABOUT_US:hover,.EVENT:hover,.CONTACT:hover {	background-color:#d1e6f2;
	transition: var(--MENU_trans-property);
}

.HOME:hover .MENU_BAR,.ABOUT_US:hover .MENU_BAR,.EVENT:hover .MENU_BAR,.CONTACT:hover .MENU_BAR {
	color: #fff;
  top:-30px;
	transition: var(--MENU_trans-property);
}

.HOME:hover:after,.ABOUT_US:hover:after,.EVENT:hover:after,.CONTACT:hover:after {
	transform: translate(0) scale(1);
}

.HOME:after{
content: "HOME";
}

.ABOUT_US:after{
content: "ABOUT US";
} 
.CONTACT:after{
content: "CONTACT";
} 
.EVENT:after{
content: "EVENT";
} 

.HOME:after,.ABOUT_US:after,.EVENT:after,.CONTACT:after {
	width: 100%;
  padding-top:6px ;
  padding-left:20px ;
	height: var(--MENU-size);
	position: absolute;
	transform: translate(0, var(--MENU-size));
	border-radius: 20px;
	transition: var(--MENU_trans-property);
  /* background-color: #1769ff; */
  font-size: 26px;
  font-weight: 555;
  text-align: left;
  color: black;

  font-weight: bolder;
}

.mainname{
  z-index: 1;
  position: fixed;
  width: 100%;
  height: 110px;
  /* background-color: rgb(0, 0, 0); */

}






.center-con {
  position: absolute;
  left: -30px;
  top: 35px;
  display: flex;
  height: 50px;
  /* background-color: #1769ff; */
  width:100%;
  align-items: right;
  justify-content: right;
}



body:hover .arrow{
  animation-name: bounceAlpha;
  animation-duration:1.4s;
  animation-iteration-count:infinite;
  animation-timing-function:linear;
}
body:hover .arrow.primera{
  animation-name: bounceAlpha;
  animation-duration:1.4s;
  animation-delay:0.2s;
  animation-iteration-count:infinite;
  animation-timing-function:linear;
}

.round {
  position: absolute;
  /* border: 2px solid #fff; */
  width: 40px;
  height: 40px;
  border-radius: 100%;
  /* display: none; */
transition: 1s ease-in-out;
  
}

#cta{
  width:100%; cursor: pointer; position: absolute;
}

#cta .arrow{left: 30%;}
.arrow {position: absolute; bottom: 0;  margin-left:0px; width: 12px; height: 12px; background-size: contain; top:15px;}
.segunda{margin-left: 8px;}
.next {
background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHN0eWxlPi5zdDB7ZmlsbDojZmZmfTwvc3R5bGU+PHBhdGggY2xhc3M9InN0MCIgZD0iTTMxOS4xIDIxN2MyMC4yIDIwLjIgMTkuOSA1My4yLS42IDczLjdzLTUzLjUgMjAuOC03My43LjZsLTE5MC0xOTBjLTIwLjEtMjAuMi0xOS44LTUzLjIuNy03My43UzEwOSA2LjggMTI5LjEgMjdsMTkwIDE5MHoiLz48cGF0aCBjbGFzcz0ic3QwIiBkPSJNMzE5LjEgMjkwLjVjMjAuMi0yMC4yIDE5LjktNTMuMi0uNi03My43cy01My41LTIwLjgtNzMuNy0uNmwtMTkwIDE5MGMtMjAuMiAyMC4yLTE5LjkgNTMuMi42IDczLjdzNTMuNSAyMC44IDczLjcuNmwxOTAtMTkweiIvPjwvc3ZnPg==);
}

@keyframes bounceAlpha {
0% {opacity: 1; transform: translateX(0px) scale(1);}
25%{opacity: 0; transform:translateX(10px) scale(0.9);}
26%{opacity: 0; transform:translateX(-10px) scale(0.9);}
55% {opacity: 1; transform: translateX(0px) scale(1);}
}

.bounceAlpha {
  animation-name: bounceAlpha;
  animation-duration:1.4s;
  animation-iteration-count:infinite;
  animation-timing-function:linear;
}

.arrow.primera.bounceAlpha {
  animation-name: bounceAlpha;
  animation-duration:1.4s;
  animation-delay:0.2s;
  animation-iteration-count:infinite;
  animation-timing-function:linear;
}

@media (max-width: 767px) {
  
  .mainname{
    height: 90px;
    background-color:rgb(28, 28, 28);
  }
  
  }








/* box1 *//* box1 *//* box1 *//* box1 *//* box1 *//* box1 */
/* box1 *//* box1 *//* box1 *//* box1 *//* box1 *//* box1 */
.box1{
position: relative;
  min-height: 350px;
display: flex;
justify-content: center;
padding: 20px 0;
/* padding-bottom: 30px ; */
}

.booking_card{
  position: relative;
  /* height: 300px; */
  border-radius: 15px;
  padding-top:40px  ;
  padding-bottom:40px  ;
  width: 90%;


  /* margin-bottom: 20px; */
  background-color: white;
  transition: 0.3s ease-in-out;

}

.RailX_card_heading_cu{
  margin-top:-10px ;
  position: relative;
  margin: auto;
  width: 90.2%;
}

.RailX_card_heading{
  font-size: 55px;
  font-weight: bolder;
  line-height: 1;
  color: black;
  text-shadow:1px 1px 0px black,1px 1px 20px rgba(0, 0, 0, 0.163);
}

.RailX_card_heading_text{
  position: absolute;
  top: 20px;
  right: 58px;
  text-align: right;
}

.ridio_bar{
position: relative;
  margin-left:5% ;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
  color: rgba(0, 0, 0, 0.464); 
}

.ridio_bar label {
  cursor: pointer; 
  border-radius: 5px;
  padding: 5px;
}

.ridio_bar label:hover{
  color: black; 
  
  background-color: #0076b52e;

}

.ridio_bar input[type="radio"]{
  display: none;
}

.ridio_bar input[type="radio"]:checked + label:hover {
  background-color: #0076b586;
}

.ridio_bar input[type="radio"]:checked + label {
  color: black; 
  transition: 0.2s ease-in-out;
  
  background-color: #0076b558;

}

.booking_card_option{
  display: flex;
  justify-content: center;
  
  flex-wrap: wrap;
  gap: 20px; 
  transition: 0.3s ease-in-out;
  
}
.booking_card_option.remove{
  display: none;
}



.from_text,.to_text,.station_text,.class_text{
  position: absolute;
  z-index: 1;
  margin: 20px;
  margin-left: 25px;
  font-family: "Protest Riot", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 25px;
}

.from_start,.to_start,.class{
  /* margin-left: 40px; */
  position: relative;
  width: 340px;
  height:135px ;
}


.cities {
  position: relative;
  width: 340px;
  padding: 30px;
  border:1px solid rgba(0, 0, 0, 0.187);

  background-color:white;
  border-radius: 10px;
  padding-left: 20px;
  padding-bottom: 29px;
  font-size: 52px;
  font-family: "Protest Riot", sans-serif;
  font-weight: 1000;
  font-style: normal;

}
option{font-size: 26px;}


.station_op {
  position: absolute;
  bottom: -1px;

  left:0; 
  width: 340px;
  padding: 5px;
  border:1px solid rgba(0, 0, 0, 0.187);


  background-color:rgb(255, 255, 255);
  border-radius: 10px;
  font-size: 22px;
  font-family: "Protest Riot", sans-serif;
  font-weight: 300;
  font-style: normal;
  padding-left: 25px;

}

.date_option_cu{

  position: relative;
  min-width: 280px;
  border:1px solid rgba(0, 0, 0, 0.187);

  background-color:white;
  border-radius: 10px;
  font-family: "Protest Riot", sans-serif;
  font-weight: 1000;
  font-style: normal;

}

.date_option_text{
  position: relative;
  margin-top: 35px;
  width: 100%;
  text-align: center;
  font-size: 22px;

}

#date_option{
  border:transparent;
  position: relative;
  margin-left: 45px;
  background-color: transparent;

  font-size: 23px;
}

.class_op{
  position: relative;
  width: 340px;
  padding: 30px;
  border:1px solid rgba(0, 0, 0, 0.187);

  background-color:white;
  border-radius: 10px;
  padding-left: 20px;
  padding-bottom: 29px;
  font-size: 52px;
  font-family: "Protest Riot", sans-serif;
  font-weight: 1000;
  font-style: normal;
}
.cities:hover,.class_op:hover,.class_text:hover ~ .class_op,.station_op:hover ,.to_text:hover ~ .cities ,.from_text:hover ~ .cities,.date_option_cu:hover{
  background-color: #0076b52e;

}



.but_option_CU{
  position: relative;
  width: 150px;
  height: 135px;

  background-color:rgba(0, 0, 0, 0.888);
  color: white;

  border-radius: 10px;
  font-size: 32px;
  text-align: center;
  font-weight: 900;
  overflow: hidden;
}
.but_option_CU_box{
position: absolute;
  width: 100%;
  height: 100%;
  padding-top: 40px;
  transition: 0.2s ease-in-out;
}

.but_option_CU_box::after{
  content:"let's go";
  top: 135px;
  left: 0;

  background-color: green;
  position: absolute;
  width: 100%;
  height: 100%;
  padding-top: 40px;
  animation: background_color_change 2s infinite;
}

@keyframes background_color_change {
  0% {background-color: green;}
  50%{background-color: rgba(3, 218, 3, 0.76);}
  0% {background-color: green;}
}


.but_option_CU:hover .but_option_CU_box{
  transform: translateY(-135px);
}






















/* nav_change */
.booking_card.active{
  margin-top:20px;
  position:fixed;
  padding-bottom: 0px  ;
  width: 100%;
  top: -60px;
  padding-bottom: 20px;

  background-color: rgb(19, 28, 34);
  border-radius: 0;
  z-index: 1;
}

.booking_card.active .booking_card_option{
  transform: scale(0.7);
  transition: 0.3s ease-in-out;
}

.booking_card.active .ridio_bar{
  transition: 0.3s ease-in-out;
  opacity: 0;}

.booking_card.active .RailX_card_heading_cu{
  transition: 0.3s ease-in-out;
  position: relative;
  margin: auto;
  width: 96%;

}

.booking_card.active .RailX_card_heading{
  transition: 0.3s ease-in-out;
  padding-top: 20px;
  font-size: 65px;
  font-weight: bolder;
  line-height: 1;
  color: white;
  text-shadow:1px 1px 0px black,1px 1px 20px rgba(0, 0, 0, 0.163);
}

.booking_card.active .RailX_card_heading_text{
  transition: 0.3s ease-in-out;
  opacity: 0;
}



.booking_card.active .booking_card_option{
  transition: 0.3s ease-in-out;
  margin-top:-130px ;
  margin-bottom:-30px ;
  /* margin-left:-400px ; */
}

.booking_card.active .but_option_CU{
  transition: 0.3s ease-in-out;
  /* transform: scaleY(0.8); */
  width: 300px;
  font-size: 44px;
  border: 2px solid rgba(255, 255, 255, 0.262);
  
  border-radius:30px ;
}

.booking_card.active .but_option_CU_box{
  padding-top: 33px;
  background-color: #102c3d;
  color:white;
}

.booking_card.active .but_option_CU_box::after{
  padding-top: 33px;
  color:white;
}

.booking_card.active .cities:hover,.booking_card.active .class_op:hover,.booking_card.active .class_text:hover ~ .class_op,.booking_card.active .station_op:hover ,.booking_card.active .to_text:hover ~ .cities ,.booking_card.active .from_text:hover ~ .cities,.booking_card.active .date_option_cu:hover{
  background-color: rgb(209, 230, 242);

}






/* BOX2 *//* BOX2 *//* BOX2 *//* BOX2 *//* BOX2 *//* BOX2 */
/* BOX2 *//* BOX2 *//* BOX2 *//* BOX2 *//* BOX2 *//* BOX2 */
#box2{
  position: relative;
  width: 100%;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  background-color: rgb(255, 255, 255);
  padding-bottom: 40px;

}


#train_card_cu{
  
  position: relative;
  width: 80%;
  margin: auto;
  padding: 10px 0;

}

/* date */
#date-selector{
  display: flex;
  justify-content: space-around;
  width: 100%;
}
#date-selector label {
  cursor: pointer; 
  border-radius: 5px;
  padding:5px ;
  width: 100px;
  text-align: center;
  background-color: #0076b510;
  border: #00000015 solid 1px;
}

#date-selector label:hover{
  color: black; 
  
  background-color: #0076b52e;

}

#date-selector input[type="radio"]{
  display: none;
}

#date-selector input[type="radio"]:checked + label:hover {
  background-color: #0076b586;
}

#date-selector input[type="radio"]:checked + label {
  color: black; 
  transition: 0.2s ease-in-out;
  
  background-color: #0076b558;

}

.date_row{
  display: flex;
  width: 80%;
  margin: auto;
  justify-content: space-between;
}

.pre_date, .next_date{
width: 50px;
border-radius: 16px;
background-color: #0076b510;
border: #00000015 solid 1px;
padding:5px ;
text-align: center;
transition: 0.2s ease-in-out;
}

.pre_date:hover, .next_date:hover{
  border-radius: 10px;
  background-color: #d1e6f2;

}




/* cards */

.city_name{
  position: relative;
  width:80%;
  margin: auto;

  padding:20px 0;

  font-size: 52px;

  font-family: "Protest Riot", sans-serif;
  font-weight: 1000;
  font-style: normal;

  display: flex;
  gap: 20px;

}



.city_name p{
  color: #000000ad;
  font-family: 'Poppins', sans-serif;
  position: relative;
  width: 100%;

  line-height: 0;
  margin: 0;
  font-size: 18px;
  border-radius:30px ;
}


/* card */

.train_card{
  position: relative;
  width: 100%;
  margin-top:20px ;
  background-color:white;
  border-radius:30px ;
  /* height: 300px; */
  padding-bottom: 30px;
  box-shadow: rgba(0, 0, 0, 0.236) 0 0 20px ;

}


.Train_det{
  padding-top: 60px;
  position: relative;
  width: 93.5%;
  margin: auto;

  font-size: 52px;
  font-family: "Protest Riot", sans-serif;
  font-weight: 1000;
  font-style: normal;

  display: flex;
  justify-content:space-between;
  gap: 20px;
  align-items: center;
}

.Train_name_no p{
  /* font-family: 'Poppins', sans-serif; */
  width: 100%;

  line-height: 0;
  margin: 0;
  font-size: 22px;
  color: #000000bb;
}

.Departs_On{
  line-height: 0;
  font-size: 28px;
  color: #0000009a;
}

.Time_in_card{
  margin-top: -30px;
  /* padding-top:20px ; */
  display: flex;
  gap: 10px;
  /* font-family: 'Poppins', sans-serif; */
  font-weight: 800;
  font-size: 36px;
  color: #000000b7;
}

.Distance{
  position: relative;
  top: 3px;
  max-height: 25px;
  padding:0 25px;
  text-align: center;
  /* font-family: 'Poppins', sans-serif; */
  border-bottom:rgba(0, 0, 0, 0.455) dashed 4px;
  font-size: 18px;
}

.train_Classes{
  padding-top: 20px;
  display: flex;
  position: relative;
  width: 80%;
  margin: auto;
  gap: 30px;
  justify-content:center;
  flex-wrap: wrap;
}

.price_cell{
  position: relative;
  height: 110px;
  min-width: 200px;
  padding: 10px;

  box-shadow: rgba(0, 0, 0, 0.236) 0 0 20px ;
  border-radius: 10px;
  transition: 0.1s ease-in-out;
  padding: 0 20px;
}

.price_cell:hover{
  box-shadow: rgba(0, 0, 0, 0.298) 0 0 20px ;
  background-color: #0083ca2e;
}

a{text-decoration: none;}

.price,.name_of_class{
width: 100%;
text-align: center;
font-weight: bolder;
bottom: 0;
left: 0;
font-size: 20px;
}

.name_of_class{
  padding-top: 25px;
}
.price{
  padding-bottom: 0px;

}

.name_of_class{
  top: 0;
  font-family: "Protest Riot", sans-serif;
  font-weight: 1000;
  font-style: normal;
}


/* teams *//* teams *//* teams *//* teams *//* teams *//* teams */
/* teams *//* teams *//* teams *//* teams *//* teams *//* teams */


.tearms{
  position: relative;
  width: 100%;
  background-color: white;

  min-height: 300px;
  padding: 30px;

  border-top:5px solid rgba(0, 0, 0, 0.153) ;
}

.tearms p,.tearms  strong{
  padding-top: 10px;
  position: relative;
  width: 75%;
  margin: auto;
}





/*subject*//*subject*//*subject*//*subject*//*subject*//*subject*//*subject*//*subject*//*subject*//*subject*/
.subject-all-box{
  position: relative;
  width: 100%;
  height: 320px;
  background-color: rgb(24, 34, 41);
  
}

.subject-all-box h1{
  position:absolute;
  font-size: 44px;
  top:11%;
  left:12%;
  text-align: left;
  color: white;
  line-height: 55px;
}

.subject-all-box p {
  position: absolute;
  top:50%;
  left:32.2%;
  transform: translate(-50%, 0);
  font-size: 18px;
  width:85%;
  text-align: center;
  color: white;
}
.class_contaner{
  position: absolute;

  display: flex;
  top: 190px;
  left: 220px;
}

.join-us,.google,.facebook{
  display: flex;
  padding: 10px;
  position:relative;
  text-align: left;
  font-size: 20px;
  padding: 10PX;
  font-weight: bolder;
  border-radius: 10px;
  transition: 0.2s ease-in-out;
  margin-left: 10px;
}

.join-us{
  background-color: rgb(218, 75, 94);
  color: white;
}

.join-us-image{
  margin-left: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-image:url('../images/logo/arrow-right-white-d85aec9d3fd64593da5457cf782c3df6a5bffddf62f1f7c5127802e205ef7056.svg');
  background-position: center;
  background-size:100% 100%;
}

.google{
  background-color: white;
  color: black;
}

.google-image{
  margin-left: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-image:url('../images/logo/google\ \(1\).svg');
  background-position: center;
  background-size:100% 100%;
}

.facebook{
  position:relative;
  background-color: rgb(75, 120, 218);
  color: white;
}

.facebook-image{
  margin-left: 10px;
  width: 30px;
  height: 30px;
  border-radius: 20%;
  background-image:url('../images/logo/facebook-white-c3976d65c45599df63819cf43b1535a3bd8e12d0cba5881e4ffebe0f2fcb7bae.svg');
  background-position: center;
  background-size:100% 100%;
}



.join-us:hover{
  background-color: rgba(218, 75, 94, 0.747);
  color: white;
  box-shadow: 0 0 5px rgb(218, 75, 94),0 0 15px rgb(218, 75, 94);
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.329);
  transition: 0.2s;
}

.google:hover{
  background-color: rgba(255, 255, 255, 0.945);
  color: black;
  box-shadow: 0 0 5px white,0 0 15px white;
  text-shadow: 0 0 5px rgb(0, 0, 0, 0.329);
  transition: 0.2s;
  font-weight: bolder;
}
.facebook:hover{
  background-color: rgb(75, 120, 218, 0.747);
  color: white;
  box-shadow: 0 0 5px rgb(75, 120, 218),0 0 15px rgb(75, 120, 218);
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.329);
  transition: 0.2s;
}


.subject-image-box{
  position: absolute;
  top: 2.5%;
  left:73%;
  transform: translate(-50%, 0);
  width: 400px;
  height: 300px;
  background-image:url('../images/community.svg');
  background-position: center;
  background-size:100% 100%;
}

/*footer*//*footer*//*footer*//*footer*//*footer*//*footer*//*footer*//*footer*//*footer*//*footer*/
.footer-all-box{
  position: relative;
  width: 100%;
  height: 300px;
  background-color: white;
 /* background-image:url('../images/footer.png');
  background-position: center;
  background-size:100% 100%;
  color: white;
  font-size: 50px;*/
}

.footercol-1{
  position: absolute;
  top: 50%;
  left: 19.5%;
  transform: translate(-50%, -50%);
  height: 100%;
  width: 400px;
}

.footercol-1 h1{
  position: absolute;
  font-size: 85px;
  top: 9.3%;
  left: 2px;
  line-height: 0;
}
.footercol-1 p{
  position: absolute;
  top: 60.2%;
  left: 24.5%;
  transform: translate(-50%, -50%);
  font-weight: bold;
}

.footerul {
  display: flex;
  position: absolute;
  top: 45.6%;
  left: 18.5%;
  transform: translate(-50%, -50%);
}

.footerul .footerli {
  list-style: none;
}

.footerul .footerli a {
  width: 40px;
  height: 40px;
  background-color: transparent;/*color at background*/
  text-align: center;
  line-height: 40px;
  font-size: 17.5px;
  margin: 0 5px;
  display: block;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  border: 3px solid rgb(0, 0, 0);
  z-index: 1;
}

.footerul .footerli a .icon {
  position: relative;
  color: #262626;
  transition: .5s;
  z-index: 3;
}

.footerul .footerli a:hover .icon {
  color: #fff;
  transform: rotateY(360deg);
}

.footerul .footerli a:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: #f00;
  transition: .5s;
  z-index: 2;
}

.footerul .footerli a:hover:before {
  top: 0;
}

.footerul .footerli:nth-child(1) a:before{
  background: #3b5999;
}

.footerul .footerli:nth-child(2) a:before{
  background: #55acee;
}

.footerul .footerli:nth-child(3) a:before {
  background: #0077b5;
}

.footerul .footerli:nth-child(4) a:before {
  background: #dd4b39;
}

.footerul2 {
  display: flex;
  position: absolute;
  top: 68.2%;
  left: 19.5%;
  transform: translate(-50%, -50%);
}

.footerul2 .footerli2 {
  text-decoration: none;
  list-style: none;  display: flex;  
  text-decoration: none;
  list-style: none;
}



.footerul2 .footerli2 a{
  text-align: center;
  line-height: 40px;
  font-size: 17.5px;
  margin: 0 4px;  text-decoration: none;
  position: relative;
  overflow: hidden;
  color: #000;
  font-weight: bolder;
}

.footerli2 a:hover{
  color: #BC1823;

}

.r1,.r2,.r3,.r4,.r5,.r6,.r7{
  list-style: none;
}

.r1{
  position: absolute;
  top: 34.5%;
  left: 29.9%;/*40 37*/
  transform: translate(-50%, -50%);
}

.r2{
  position: absolute;
  top: 48%;
  left: 40.9%;
  transform: translate(-50%, -50%);
}

.r3{
  position: absolute;
  top: 39%;
  left: 48.9%;
  transform: translate(-50%, -50%);
}

.r4{
  position: absolute;
  top: 43.5%;
  left: 58.9%;
  transform: translate(-50%, -50%);
}

.r5{
  position: absolute;
  top: 38.5%;
  left: 80%;
  transform: translate(-50%, -50%);
  width: 450px;
}


.r1 .c1 a,.r2 .c2 a,.r3 .c3 a,.r4 .c4 a,.r5 .c5 a{
  text-decoration: none;
}

.r1,.r2,.r3,.r4,.r5{
 /* text-align: center;*/
  font-size: 17.5px;
  text-decoration: none;
  color: #000;
}

.r1 a,.r2 a,.r3 a,.r4 a,.r5 a{
  color: #000;
}

.c1:hover, .c2:hover, .c3:hover, .c4:hover, .c5:hover{
color: #BC1823;
}




/* remove */
.remove_file{
  display: none;
  width: 90%;
  margin:10px auto;




}

.remove_file label{
  font-size: 20px;
  font-weight: bolder;
}

.remove_file.remove{
  display: block;
}




/* digitsInput *//* digitsInput *//* digitsInput */
/* digitsInput *//* digitsInput *//* digitsInput */



.remove_file label{
  font-size: 34px;
  text-align: center;
  width: 100px;
  align-self: center;
  align-items: center;
  padding-top: 10px;
  height: 135px;
}

#digitsInput{
 width: 130px;
 border-radius: 20px;
border: 1px rgba(0, 0, 0, 0.457) solid;
text-align: center;
width: 250px;
height: 55px;
font-size: 32px;

transition: 0.2s ease-in-out;

}

#digitsInput:hover{
  background-color: #d0e5f152;

}

.remove_file button{
  border-radius: 7px;
  border: 1px rgba(0, 0, 0, 0.457) solid;
  background-color: #d0e5f1d2;
  padding: 10px;
  width: 100px;
}

.pnrbox{
  display: flex;
  margin: 20px 0;
}


.remove_file .but_option_CU{
  position: relative;
  width: 150px;
  height: 55px;

  font-size: 32px;

  background-color:rgba(0, 0, 0, 0.888);
  color: white;

  border-radius: 10px;
  text-align: center;
  font-weight: 900;
  overflow: hidden;
  margin-left: 10px;
}
.remove_file .but_option_CU_box{
  position: absolute;
  width: 100%;
  height: 100%;
  padding-top: 4px;
  transition: 0.2s ease-in-out;
}

.remove_file .but_option_CU_box::after{
  content:"let's go";
  top: 0px;
  left: -150px;

  background-color: green;
  position: absolute;
  width: 100%;
  height: 100%;
  padding-top: 4px;
  animation: background_color_change 2s infinite; 

}

@keyframes background_color_change {
  0% {background-color: green;}
  50%{background-color: rgba(3, 218, 3, 0.76);}
  0% {background-color: green;}
}


.remove_file .but_option_CU:hover .but_option_CU_box{
  transform: translatex(150px);
}

#reservationDetails{
  margin-top:-90px;
  margin-bottom:-30px;
  background-color: #00000011;
  border-radius: 10px;
  padding: 20px;

}

.booking_card, .box1,#reservationDetails{
  transition: 0.2s ease-in-out;
}