*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;

}

.heading{
    margin-top: 75px;
}
.heading h2{
    font-weight: 600;
    font-size: 30px;
    letter-spacing: 2px;
    color: #008BBF;
    padding: 0;
    margin: 0;
    text-transform: uppercase;
    text-align: center;
    margin-top: -20px;
} 
@import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic);
 body, html {
	 padding: 0;
	 margin: 0;
	 /* background-color: #cfd8dc; */
}
 .seperate {
	 position: relative;
	 width: 100%;
	 background-color: #00394e;
	 border-bottom: 2px solid #37474f;
	 text-align: center;
	 color: #f5f5f5;
     font: 0px/45px "Droid Serif";
	 text-shadow: 1px 4px 2px #37474f;
	 box-shadow: 1px 1px 1px #546e7a;
}
 .seperate:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    left: 57%;
    bottom: -35px;
    margin-left: -50px;
    border: 20px solid transparent;
    border-top-color: #00394e;
}
 .seperate:after {
	 content: "";
	 position: absolute;
	 width: 0;
	 height: 0;
	 left: 50%;
	 bottom: -107px;
	 margin-left: -54px;
	 border: 54px solid transparent;
	 border-top-color: #37474f;
	 z-index: -1;
}
       
.heading img{
    width: 100px;
    position: absolute;
    top: 20px;
    left: calc(50% - 50px);
}
@import url('https://fonts.googleapis.com/css?family=Lato:200,400|Playfair+Display');

.hotel_details{
    margin-top:60px;
    display: flex;
    justify-content: center;
    align-items: center;

}
.wrapper_travel {
  float: left;
  width: 50%;
  min-width: 300px;
  background-color: #f1f1f1;
  margin: 1.5%;
  padding: 2em 1em;
  box-sizing: border-box;
  box-shadow: 0 1px 30px rgba(0, 0, 0, 0.12), 0 3px 5px rgba(0, 0, 0, 0.24);
  text-align: center;
  position: relative;
}
.wrapper_travel>h1 {
  font-family: "Lato", sans-serif;
  font-weight: 200;
  font-size: 1.5em;
  letter-spacing: .15em;
  color: rgb(255, 255, 255);
  margin: 10px 0 0 0;

}
#star_travel{
    margin: 20px 0!important;
    font-size: 12px!important;

}
.golden{
    color: #00394e;
}
.details {
  width: 100%;
  margin: 0 auto 2em;
  padding-top: 10.5em;
  padding-bottom: 1em;
  background-color: #00394e;
  color: rgb(238, 238, 238);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 5px rgba(0, 0, 0, 0.24);
  transition: all ease-in 0.15s;
}
.details  p{
    padding: 20px 10px;
}

.wrapper_travel:hover .details{
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 5px rgba(0,0,0,0.22);
  transform: translate(0px, -2px) scale(1.01);
}

.details>h1 {
  font-family: "Playfair Display";
  font-size: 1em;
}
.details>h2 {
  font-family: sans-serif;
  font-size: 1.4em;
  font-weight: 200;
  letter-spacing: 0.1em;
}
.details>p {
  font-family: sans-serif;
  font-size: 1em;
  font-weight: 200;
}

.image{
  position: relative;
  z-index: 2;
  width: 85%;
  height: 250px;
  margin: 0 auto -10em;
  background-size: cover;
  background-position: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 10px rgba(0, 0, 0, 0.24);
  transition: all ease-in .15s;
}
.wrapper_travel:hover .image{
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  transform: translate(0px, -3px) scale(1.02);
}
.wrapper_travel h4{
    position: absolute;
    color: rgb(235, 235, 235);
    top: 43%;
    left: 37%;
    font-size: 25px;
    /* display: none; */
    z-index: 9999999;

    
}
.i1{
    background-image: url(../images/centara.jpg);
}
.i2 {
  background-image:  url(../images/crownPlaza.jpg);
}
.i3 {
  background-image: url(../images/sherton.jpeg);
  }

.image:hover{
    filter: brightness(.7);
}
.i1:hover>h4{
    display: block;
}
.room_type{
    text-align: left;



}
.room_type a{
    /* background-color:#00394e ; */
    padding: 10px 25px;
    color: #00394e;
    border-radius: 20px;
    transition: .2s linear;
    cursor: pointer;
    border: 2px solid #00394e;
    text-align: center;
    margin: 5px 0;

}
.room_type a:hover{
    background-color: #00394e ;
    color:#fff ;
}



@media screen and (max-width: 1000px) {
  .wrapper_travel{
    width: 47%;
  }
}
@media screen and(max-width:700px){
  .wrapper_travel{
    float: none;
    width: 70%;
    margin: 1em auto;
  }
}


/* The Modal (background) */
.modal1{
    display:none;
    position: fixed; /* Stay in place */
    z-index: 9999999999999; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }
  
  /* Modal Content/Box */
  .modal-content_travel{  background-color: #fefefe;
    top:50%;
    left:50%;
    color: #4a4a4a;
    max-width: 50%;
    position: relative;
    border-radius:10px;
    border: 1px solid #ccc;
   /* Could be more or less, depending on screen size */
    transform: translate(-50% , -50%);
  }
  
  .modal-header_travel{
    align-items: stretch;
    box-shadow: 0 1px 1px rgb(10 10 10 / 10%);
    display: flex;
  }
  
  .modal-header-title_travel{
    align-items: center;
    color: #363636;
    display: flex;
    flex-grow: 1;
    font-weight: 700;
    padding: 5px 15px;
    text-align: center;
  }
  .modal-header-icon_travel{
  
      background: 0 0;
      border: none;
      color: currentColor;
      font-family: inherit;
      font-size: 1em;
      margin: 0;
      padding: 0;
      align-items: center;
      cursor: pointer;
      display: flex;
      justify-content: center;
      padding: 0.75rem 1rem;
  }
  
  #modal-content_travel.animation-1{
    animation: animation-1 0.5s forwards;
  }
  .modal-body_travel{
    padding: 10px 0px;
  }
  @keyframes animation-1{
    0% {
      transform: translate(-50%,-50%) scale(0);
    }
    50% {
      transform: translate(-50%,-50%) scale(1.2);
    }
    70% {
      transform: translate(-50%,-50%) scale(0.9);
    }
    100% {
      transform: translate(-50%,-50%) scale(1);
    }
  }
  .autoplay img{
      /* height: 100px; */
      width: 100%;
      height: 200px;
      align-self: center;
      margin: 40px 0 0px 0;

  }

  /* The Modal (background) */
.modal_travel {
  display:none;
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  z-index: 999999999999;
}

/* Modal Content/Box */
.modal-content_travel {
  background-color: #fefefe;
  top:50%;
  left:50%;
  color: #4a4a4a;
  /*max-width: 100%;*/
  position: relative;
  border-radius:10px;
  border: 1px solid #ccc;
  min-width: 45vw; /* Could be more or less, depending on screen size */
  transform: translate(-50% , -50%);
}

.modal-header_travel{
  align-items: stretch;
  box-shadow: 0 1px 1px rgb(10 10 10 / 10%);
  display: flex;
  justify-content: center;
  background-color: #00222f;
  
}

.modal-header-title_travel{
  align-items: center;
  color: #363636;
  display: flex;
  justify-content: center;
  flex-grow: 1;
  font-weight: 700;
  padding: 5px 15px;
  color: white;
  font-family: "Lato", sans-serif;
  font-weight: 200;
  font-size: 1.5em;
  letter-spacing: .15em;
}
.icon_travel i{
  color: white!important;
  font-size: 20px!important;
  z-index:99999999999999!important;
}
.modal-header-icon_travel{

    background: 0 0;
    border: none;
    color: black;
    font-family: inherit;
    font-size: 1em;
    margin: 0;
    padding: 0;
    align-items: center;
    cursor: pointer;
    display: flex;
    justify-content: center;
    padding: 0.75rem 1rem;
}

#modal-content.animation-1{
  animation: animation-1 0.5s forwards;
}

@keyframes animation-1{
  0% {
    transform: translate(-50%,-50%) scale(0);
  }
  50% {
    transform: translate(-50%,-50%) scale(1.2);
  }
  70% {
    transform: translate(-50%,-50%) scale(0.9);
  }
  100% {
    transform: translate(-50%,-50%) scale(1);
  }
}

.container_travel {
  width: 100%;
  height: 60vh;
  display: flex;
  /* justify-content: center; */
  align-items: center;
  flex-direction: column;
  padding: 20px 0;
  overflow: scroll;
}

.tabs {
  display: flex;
  justify-content:center;
  width: 100%;
  /* max-width: 500px; */
  background: #efefef;
}

.tab {
  font-size: 16px;
  padding: 10px 50px;
  cursor: pointer;
}

.tab.active {
  background-color: rgb(0 34 47);
  color: white;
}

/* 2222 */

.tab1 {
  font-size: 16px;
  padding: 10px 50px;
  cursor: pointer;
}

.tab1.active1 {
  background-color: rgb(0 34 47);
  color: white;
}

/* 333333333333 */
.tab2 {
  font-size: 16px;
  padding: 10px 50px;
  cursor: pointer;
}

.tab2.active2 {
  background-color: rgb(0 34 47);
  color: white;
}



.content {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 25px;
}

.content-item {
  display: none;
}

.content-item img{
  width:300px;
}
.content-item.active {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 90%;
flex-direction: column;
}


/* 222222 */

.content-item1 {
  display: none;
}

.content-item1 img{
  width:300px;
}
.content-item1.active1 {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 90%;
flex-direction: column;
}


.content-item2 {
  display: none;
}

.content-item2 img{
  width:300px;
}
.content-item2.active2 {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 90%;
flex-direction: column;
}




/* .popup_img{
  display: flex;
  justify-content: center;

} */
.popup_desc{
  padding: 20px 15px;
  text-align: center;
}
.popup_desc h2{
  color: #00222f;
  font-size: 25px;
}

#upper_head{
  font-size: 8px;
  color: black;
  letter-spacing: 3px;
}
.one h2 {
  position: relative;
  color: #080808;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}


.one h2 {

  padding-bottom: 5px;
  text-transform: uppercase;
}
.one h2:before {
  width: 28px;
  height: 3px;
  display: block;
  content: "";
  position: absolute;
  bottom: 17px;
  left: 50%;
  margin-left: -14px;
  background-color: #b80000;
}
.one h2:after {
  width: 100px;
  height: 1px;
  display: block;
  content: "";
  position: relative;
  margin-top: 20px;
  bottom: 12px;
  left: 50%;
  margin-left: -50px;
  background-color: #b80000;
}

.top{
  display: flex;
  align-items: center;
}
.bottom{
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.bottom h2{
  color: #00222f;
  text-align: center;
  padding: 10px 0;
}
.bottom h2:after {
  display: inline-block;
  margin: 0 0 8px 20px;
  height: 1px;
  content: " ";
  text-shadow: none;
  background-color: #b80000;
  width: 140px;

}
.bottom h2:before {
  display: inline-block;
  margin: 0 20px 8px 0;
  height: 1px;  
  content: " ";
  text-shadow: none;
  background-color: #b80000;
  width: 140px;
}
.highlights_lines{
  display: flex;
  justify-content: space-evenly;
  margin-top: 20px;
}
.highlights_lines li{
  list-style-type: none;
  line-height: 30px;
}
.li_icon {
  color: #b80000;
  font-size: 14px;
  padding-right: 5px;
}
#event-table table,#event-table th,#event-table td {
  border: 1px solid #c9c9c9;
  padding: 5px 15px;
  margin: 10px 0;
}

#event-table{
  align-self: center;
}

#event-table table {
    border-collapse: collapse;
    text-align: center;
}

#event-table tr:nth-child(even) {
  /* background-color: lightgrey; */
}

#event-table th {
  background-color: #00222f;
  color: white;
  padding: 5px 15px;
  font-weight: 500;
  text-align:center;
}
#event-table tr{
  padding: 10px 20px;
}
.three_hotels a{
    padding:5px 20px;
    border:1px solid black;
    cursor:pointer;
    color:black;
    
}
@media screen and (max-width: 1400px){
.hotel_details{
    margin-top: 60px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.wrapper_travel{
    width:28%;
}
.tab,.tab1,.tab2 {
    font-size: 16px;
    padding: 10px 20px;
    cursor: pointer;
}
.bottom h2:after {
        width: 5vw;
}
.bottom h2:before {
         width: 5vw;
}
.modal-content_travel{
    min-width:60vw;
}
}
@media screen and (max-width: 1100px){
 .hotel_details{
    margin-top: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap:wrap;
}
.wrapper_travel{
    width:42%;
}


.modal-content_travel{
    min-width:72vw;
}
.bottom{
    margin-top:5px;
}
}
@media screen and (max-width: 850px){
     .hotel_details{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction:column;

}
.wrapper_travel{
    width:70%;
    margin:20px 0;
}
.autoplay img{
    object-fit:cover;
}
.tabs{
    flex-wrap:wrap;
}
.top {
    display: flex;
    align-items: center;
    flex-direction: column;
}
.modal-content_travel{
    min-width:80vw;
}
.one h2{
    margin-top:10px;
    margin-bottom:0;
       font-size: 25px;
}
.bottom_head h2{
      margin-top:10px;
    margin-bottom:0;
   font-size: 22px;
}
}
@media screen and (max-width: 500px)
{
    .wrapper_travel{
    width:85%;
    margin:20px 0;
}
.modal-content_travel {
    min-width: 90vw;
}
.highlights_lines{
    display:block;
 
}
#dbtn{
    font-size:12px!important;
}
}
@media screen and (max-width: 374px){
 #event-table table, #event-table th, #event-table td {
    border: 1px solid #c9c9c9;
     padding:0; 
    margin: 10px 0;
    font-size: 10px;
}
.popup_img img {
    width: 250px;
}
.one h2{
    margin-top:10px;
    margin-bottom:0;
       font-size: 20px;
}
.bottom_head h2{
      margin-top:10px;
    margin-bottom:0;
   font-size: 18px;
}
}