* {
    box-sizing: border-box;
  }
  
  .column {
    float: left;
    width: 33.33%;
    padding: 5px;
  }
  .nav-menu{
    font-size: 1.25rem;
  }
  
  /* Clearfix (clear floats) */
  .row::after {
    content: "";
    clear: both;
    display: table;
  }
  
  /* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
  @media screen and (max-width: 500px) {
    .column {
      width: 100%;
    }
  }

  /* Style the Image Used to Trigger the Modal */
#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
  }
  
  #myImg:hover {opacity: 0.7;}
  
  /* The Modal (background) */
  .modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    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.9); /* Black w/ opacity */
  }
  
  /* Modal Content (Image) */
  .modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
  }
  
  /* Caption of Modal Image (Image Text) - Same Width as the Image */
  #caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
  }
  
  /* Add Animation - Zoom in the Modal */
  .modal-content, #caption { 
    animation-name: zoom;
    animation-duration: 0.6s;
  }
  
  @keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
  }
  
  /* The Close Button */
  .close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
  }
  
  .close:hover,
  .close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
  }
  
  /* 100% Image Width on Smaller Screens */
  @media only screen and (max-width: 700px){
    .modal-content {
      width: 100%;
    }
  }

  /*รูปภาพ เส้นทางยอดนิยม */

  div.gallery {
    border: 0px solid #ccc;
  }
  
  div.gallery:hover {
    border: 0px solid #777;
  }
  
  div.gallery img {
    width: 100%;
    height: auto;
  }
  
  div.desc {
    padding: 15px;
    text-align: center;
  }
  
  * {
    box-sizing: border-box;
  }
  
  .responsive {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
  }

  .clearfix:after {
    content: "";
    display: table;
    clear: both;
  }
  #Navborder{
    border-radius: 25px;
    padding: 4px;
    width: 180px;
    height: 30px;
    background: rgba(3, 78, 241, 0.753)
    
    
}

/* tab */

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

/* ปุ่มกดธงชาติ */

.flag-button {
  display: inline-block;
  padding: 15px 25px;
  font-size: 14px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: gray;
  border: none;
  border-radius: 25px;
  padding-right: 1rem;
  margin: 5px;
  
  
}

.flag-button:hover {background-color: lightgray}

.flag-button:active {
  background-color: black;
  
  transform: translateY(4px);
}
.flag-img {
  width: 40px;
  height: auto;
}

/* ปุ่มกดโปรแกรมทัวร์ */
.button {
  display: inline-block;
  padding: 15px 25px;
  font-size: 25px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: rgb(73, 129, 250);
  border: none;
  border-radius: 15px;
  
}

.button:hover {background-color: #4eb2f5}

.button:active {
  background-color: blue;
  
  transform: translateY(4px);
}

/* border เบอร์โทร */

.border-tel {
  border: 3px;
  padding: 10px;
  border-radius: 25px;
  font-size: 22px;
  background: linear-gradient(to right, #fc5c7d, #6a82fb);
  color: #fff;
  
}

/* banner 2 รูป */

.img-ban {
  width: 570px;
  height: 100%;
  padding: 10px;
  margin: 0%
}

/* Album Gallery */
div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  
  padding: 20px;
  text-align: center;
  
}

/* image text */

.scontainer {
  position: relative; 
  max-width: 100%; /* Maximum width */
  margin: 0 auto; /* Center it */
}

.scontainer .content {
  position: absolute; /* Position the background text */
  bottom: 0; /* At the bottom. Use top:0 to append it to the top */
  background: rgb(0, 0, 0); /* Fallback color */
  background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
  color: #f1f1f1; /* Grey text */
  width: 100%; /* Full width */
  padding: 20px; /* Some padding */
}

/* back to top */
body{
  margin: 0;
  padding: 0;
  font-family: "Prompt";
}

#topBtn{
  position: fixed;
  bottom: 40px;
  right: 40px;
  font-size: 22px;
  width: 50px;
  height: 50px;
  background: #e74c3c;
  color: white;
  border: none;
  cursor: pointer;
}

/* วันเดินทาง*/
.period{
  font-size: 1.1rem;
  font-weight: inherit;
  padding: 4px;
  background-color: #bdc3c7;
  line-height: 50%;
}
.period2{
  font-size: 1.1rem;
  font-weight: inherit;
  padding: 4px;
  background-color: #ff3838;
  line-height: 50%;
  color: #fff;
}
/* ปุ่มจอง download โปรแกรม */

.btn-prog{
  text-align: right;
  line-height: 50px;
  position: relative;
}
/* contact */
.contact{
  padding: 50px;
  text-align: left;
}

/* Banner Slide Text */

/* google map*/
.google-map{
  margin: 0;
  padding: 0;
  width: 100%;
  height: auto;
}

/*bg navbar*/
.bg-navbar{
  background-image: radial-gradient(circle, #feffff, #f9fbfb, #f5f7f7, #f0f4f3, #ecf0ef);
}
/*discount*/
.discount{
  color: #ff3838;
}
/*ราคาทัวร์*/
.price-start{
  font-size: 1rem;
  
}
/* border hit-route */

.border-hit {
  border: 3px;
  padding: 10px;
  border-radius: 25px;
  font-size: 1.1rem;
  background: linear-gradient(to bottom, #ee0979, #ff6a00);
  color: #fff;
  font-family: 'Mitr', sans-serif;
  text-decoration: none;
  
}

/* banner tkt & uk study */
.banner-brand{
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
  font-size: 2rem;
  color: #fff;
}
mark {
  background-color: yellow;
  color: black;
}