@import url(https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.5.0/css/flag-icon.min.css);
.whatsapp-icon {
    position: fixed;
    bottom: 30px;
    left: 30px;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}
.whatsapp-icon a {
    background-color: #1ea69a;
    display: inline-block;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
.whatsapp-icon i {
    width: 62px;
    height: 62px;
    line-height: 62px;
    /* Vertically center the icon */
    text-align: center;
    /* Horizontally center the icon */
    font-size: 24px;
    /* Adjust font size as needed */
    color: #FFFFFF;
    transition: transform 0.3s ease;
}
.whatsapp-icon i:hover {
    transform: scale(1.1);
}
/* language button */
.flags{
  font-size:3em;
  line-height:1;
  margin:0;
  display: flex; /* Use flexbox */
  align-items: center; /* Align items vertically center */
  justify-content: center; /* Align items horizontally center */
}
.flags a {
  margin: 0 4px; /* Add some space between flags */
}
.flag{
  box-sizing:content-box;
  display:inline-block;
  position:relative;
  width:1em;
  height:1em;
  margin:0;
  background:#fff;
  border-radius:50%;
  border:solid #eee;
  overflow:hidden;
  box-shadow:0;
  opacity:.5;
  transition: 1s;
}
/* Additional styles for flags if needed */
.flag:hover, .flag.active{
  border-radius:50%;
  box-shadow:0 0 .2em #666;
  opacity:1;
  transform:rotate(-360deg);
}
/* UK */
.en{
  background:rgb(200,10,10);
}
.en:after{
}
.en:before{
  display:block;
  content:"";
  width:0;
  height:0;
  position:absolute;
  left:.5em;
  border-style: solid;
  border-width: 0 0 .5em 1em;
  border-color: transparent  transparent  transparent rgb(10,100,150);
  box-shadow:0 0 0 .125em #fff;
}
.en:after{
  display:block;
  content:"";
  position:absolute;
  background:#fff;
  width:.125em;
  height:.65em;
  left:66%;
  transform:rotate(60deg);
}
/* Wales CY */
.cy:before{
  background:rgb(10,150,10);
  display:block;
  position:absolute;
  bottom:0;
  content:"";
  width:1em;
  height:0.5em;
}
.cy:after{
  display:block;
  content:"";
  width:.5em;
  height:0.5em;
  position:absolute;
  top:.25em;
  left:.25em;
  background:rgb(200,10,10);
  border-radius:50% 50% 0 ;
}
/* Francais FR */
.fr:before{
  background:rgb(10,100,150);
  display:block;
  position:absolute;
  bottom:0;
  content:"";
  width:.333em;
  height:1em;
}
.fr:after{
  display:block;
  content:"";
  width:.333em;
  height:1em;
  float:right;
  background:rgb(200,10,10);
}
/* Italiano IT */
.it:before{
  background:rgb(10,150,10);
  display:block;
  position:absolute;
  bottom:0;
  content:"";
  width:.333em;
  height:1em;
}
.it:after{
  display:block;
  content:"";
  width:.333em;
  height:1em;
  float:right;
  background:rgb(200,10,10);
}
/* Deutchland DE */
.de{
  background:rgb(200,10,10);
}
.de:before{
  background:rgb(255,200,0);
  display:block;
  position:absolute;
  bottom:0;
  content:"";
  width:1em;
  height:.333em;
}
.de:after{
  display:block;
  content:"";
  width:1em;
  height:.333em;
  background:rgb(0,0,0);
}
.content{
  overflow:hidden;
  background:#eee;
  width:80%;
  padding:2em;
  margin:0 auto;
}
.customimg{
  display: block;
  width: 100%;
  height: 40vh !important;
  object-fit: cover;
  object-position: center;
}
.tourheader{
  font-size: 0.7rem !important;
  font-weight: 100;
  color: #1ea69a;
}
.bolden {
  font-weight:400;
  font-size:larger; 
}
.teammemberimg{
  border-radius: 10%;
}
.tourdetails p{
  text-align: left;
}
.dots{
  list-style:disc outside none;
  display:list-item; 
  margin-left: 20px;
}
.nobackground{
  background-color: transparent;
}
  .slide {
    font-size: 50px;
    text-align: center;
    border: 1px solid black;
    margin-bottom: 20px;
  }
  .tourdetailssectiondiv{
    vertical-align: top !important;
    display: flex;
  }
  .virtualtoursectionsize{
  }
  .collapse-area {
    background:  #f5f6f8;
  }
  .panel {
    margin-top: 0px !important;
    border-radius: 0px !important;
    border: none;
    border-bottom-color: #D7D8DC;
    box-shadow: 0 0px 0px 0 transparent !important;
    -moz-box-shadow: 0 0px 0px 0 transparent !important;
    -webkit-box-shadow: 0 0px 0px 0 transparent !important;
    -o-box-shadow: 0 0px 0px 0 transparent !important;
  }
  .panel .panel-heading {
    /* border-radius: 0px !important; */
    background: #f5f6f8;
    padding: 0px !important;
    border-bottom: 0px solid #DDDEE2;
  }
  .panel .panel-heading .panel-title a {
    /* border-radius: 20px; */
    width: 100%;
    text-decoration: none;
    font-weight: bold;
    display: block;
    padding: 23px 15px;
    font-weight: 300;
    color: #60626d;
    background-color: #ffffff;
    line-height: 29px;
    position: relative;
  }
  .panel .panel-heading .panel-title a:hover,
  .panel .panel-heading .panel-title a:active {
    text-decoration: none;
    cursor: pointer;
    transition: all 0.4s;
    -moz-transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    color: #02aeb3;
  }
  .panel .panel-heading .panel-title a span {
    float: left;
    margin-top: 15px;
    margin-right: 30px;
    transition: all 0.4s;
    -moz-transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
  }
  .panel .panel-heading .panel-title a .bar,
  .panel .panel-heading .panel-title a .bar:after {
    border-width: 1px;
    border-style: solid;
    width: 21px;
    border-radius: 10px;
    transition: all 0.4s;
    -moz-transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
  }
  .panel .panel-heading .panel-title a .bar:after {
    content: "";
    height: 0;
    position: absolute;
    top: 38px;
    left: 15px;
  }
  .panel .panel-heading .panel-title a.collapsed {
    background-color: #f5f6f8 !important;
    border-bottom: 1px solid #eeeef3;
    position: relative;
    transition: all 0.4s;
    -moz-transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
  }
  .panel .panel-heading .panel-title a.collapsed .bar {
    border-color: #75767F;
  }
  .panel .panel-heading .panel-title a.collapsed .bar:after {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    border-color: #75767F;
    transition: all 0.4s;
    -moz-transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
  }
  .panel-collapse {
    /* border-radius: 20px !important; */
    background-color: #ffffff;
  }
  .panel-collapse .panel-body {
    background-color: #ffffff;
    border: 0px solid !important;
    line-height: 26px;
    font-weight: 300;
    /* margin-left: 50px; */
    padding-left: 50px;
    padding-bottom: 16px;
    padding-top: 16px;
    margin-top: -10px;
    margin-bottom: 10px;
    color: #60626d;
  }
  .ukiyo-logo{
    width: 100px;
    height: auto; 
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}
  .ukiyo-logo-white {
    width: 100px;
    height: auto; 
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}
.video-section {
  background: url('surfing/video/video1.MOV') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}
.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  border-radius: 1.5rem;
}
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
.tourcover{
  border-radius: 1em;
}
#svg-container {
  display: flex;
  justify-content:space-around;
  align-items: center;
}
.svg-item {
  width: 2rem; 
  height: 2rem; 
}
.kvkk{
  text-align: start;
}
.ukiyogallery {
    padding:.5rem;
}
.main-img img,
.imgs img {
  border-radius: .5rem;
margin-bottom:.5rem;
  width: 100%;
}
.imgs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 5px;
  cursor: pointer;
}
@keyframes fadeIn {
  to {
      opacity: 1;
  }
}
.fade-in {
  opacity: 0;
  animation: fadeIn 0.5s ease-in 1 forwards;
}