:root {
  --tkGray: #999c91;
  --tkBlue: #517087;
  --tkGreen: #749889;
  --tkRed: #b80164;
  --tkYellow: #d9bd86;
}
@font-face {
  font-family: "gotham";
  src: url("https://taviloglukoleksiyon.org/fonts/Gotham-Book.otf");
}
@font-face {
  font-family: "gotham";
  src: url("https://taviloglukoleksiyon.org/fonts/Gotham-Bold.otf");
  font-weight: bold;
}
@font-face {
  font-family: "heroic";
  src: url("https://taviloglukoleksiyon.org/fonts/HeroicCondensed-Medium.otf");
}

body {
  margin: 0;
  padding: 0;
  font-family: "gotham";
  overflow-x: hidden;
  /* Prevents horizontal scroll */
  background-color: #f0f0f0;
  background-size: cover;
  background-position: top;
  background-repeat:repeat-y;
  background-attachment: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
}

h1{
  font-family: "gotham";
  font-weight: bold;
  font-size: 3wv;
}

#header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 150px;
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  background-attachment: fixed;
  /*z-index: 100;*/
}


#logo {
  position: relative;
  top: 20px;
  left: 20px;
  height: 120px;
  width-max:300px;
  z-index: 1000;
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.7));
}

#bkhLogo_container{
  width:300px;
    box-sizing: border-box;
}

#bkhLogo_container:hover .bkhLogo {
    content: url("https://taviloglukoleksiyon.org/img/logo/TK-LogoWhite.png"); /* Change the image on hover */
}

#menu {
  position: fixed;
  top: 0;
  right: -250px;
  width: 250px;
  height: 100%;
  background-color: var(--tkGray);
  color: white;
  padding-top: 60px;
  transition: 0.5s;
  z-index: 1111;
  opacity: 0.95;
  font-weight: bold;
}

#menu a {
  padding: 10px 15px;
  text-decoration: none;
  //font-size:max(2vw, 12px);// 1.5vw;
  font-size: clamp(1em,2vw,3vw);
  color: white;
  display: block;
  transition: 0.3s;
}

#menu a:hover {
  background-color: var(--tkYellow);
}

.menu-btn-open{
  position: absolute;
  top: 20px;
  right: 25px;
  font-size: 2em;
  font-weight: bold;
  margin-left: 50px;
  cursor: pointer;
  color: white;
}

.menu-btn-close{
  position: absolute;
  top: 20px;
  right: 25px;
  font-size: 2em;
  margin-left: 50px;
  cursor: pointer;
  color: white;
}

#openMenu {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 100%;
  z-index: 1500;
}

/* headerBKH menu */
#topMenu {
  position: fixed;
  top: 102px;
  right: 10%;
  display: flex;
  gap: 15px;
  font-weight: bold;
  font-size: 1.1em;
}

#topMenu a {
  color: white;
  text-decoration: none;
  padding: 5px 10px;
}

#topMenu a:hover {
  background-color: var (--tkGreen);
  border-radius: 5px;
}

#topMenuResponsive {
  display: none;
  flex-direction: column;
  padding-left:20px;;
}

/* Style for all pages' container */
#container {
  position: relative;
  width: 86%;
  height: 100%;
  margin: 0 auto;
  margin-top: 160px;
  padding: 5%;
  background-color: white;
  font-size: 1em;
  opacity: 0.9;
  z-index: 1000;
  box-sizing: border-box;
  white-space: pre-line;
}

/* main page teaser  */
#banner {
  position: relative;
  padding: 20px;
  text-align: center; /* Center text within the banner */
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.7));
  width: auto; /* Auto width, based on content */
  height: auto; /* Auto height, based on content */
   //transform: translate(20%,50%);
   top:200px;
   margin:0 auto;
}

#banner .lafz {
  //position: relative;
  width: 60%;
  left:0;
}

#banner .pul {
  position: absolute;
  width: 10%;
  left: 10%;
  top: 00px;
  z-index: 1001;
}

.shadow {
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.7));
}

.opaque {
  opacity: 1;
}

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

.tempInfo img{
  width:50%;
  display: block;
}

@keyframes fadeInOut {
  0%, 100% { opacity: 0; } /* Start and end fully transparent */
  50% { opacity: 1; } /* Fully visible at midpoint */
}

.fading-image {
  animation: fadeInOut 7s infinite; /* Adjust duration as needed */
}


.fading-image:hover {
  opacity: 1 !important; /* Match the value at 50% keyframe */
  //  animation-play-state: paused;
}


/* BKH, ZİYARET, ACTIVITIES, ABOUT */
/* General content container styles */
.content {
  position: relative;
  width: 100%;
  padding:3%;
  display: flex;
  flex-wrap: wrap;
  margin: 1px;
  box-sizing: border-box;
  gap: 10px; /* Spacing between items */
}

/* General styling for each row/column */
.item {
  display: flex;
  width: 100%;  /* Ensure each item takes up full width */
  //gap: 10px;  /* Spacing between cells */
}

/* Flexbox styling for cells */
.cell {
  position: relative;
  flex-grow: 1;  /* Allows cells to grow to fill available space */
  flex-basis: 0;  /* Allows flexible shrinking and growing */
  padding: 10px;  /* Example padding */
  text-align: left;  /* Text alignment */
//  border: 1px solid #ccc;  /* Example border */
}

/* Handling different layouts */

/* Specific styling for 'about' section (2 columns of 3 rows) */
.about {
  flex-direction: row; /* Two columns side by side */
}

.about .item,
.sponsors .item{
  flex: 1; /* Each column takes equal width */
  flex-direction: column; /* Stack cells vertically */
}
.about .cell {
  flex-grow: 0; /* Each column deep as its content  */
}

/* Specific styling for 'ziyaret', 'activities', etc. (2 rows of 3 columns) */
.ziyaret, .activities, .bkh {
  flex-direction: column; /* Two rows */
}

.ziyaret .item, .activities .item, .bkh .item {
  flex-direction: row; /* Stack cells horizontally in each row */
}

/* Heading styles */
.ziyaret h1,
.ziyaret h5,
.ziyaret .contentHeader {
  color: var(--tkRed); /* Sets the color */
}

.ziyaret .item,
.activity .item{
  border-bottom: 1px solid var(--tkRed); /* Adds a bottom border */
}

/* Additional heading margin for H1 */
.ziyaret h1 {
  margin-top: 30px !important;
  margin-bottom: 30px;
}

/* Image and paragraph margin */
.ziyaret img,
.ziyaret p {
  margin-top: 20px;
}

/* Image drop shadow */
.ziyaret img {
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.7));
}
.sponsors img{
  width:100%;
}

.activities h1 {
  margin-top: 30px !important;
  margin-bottom: 10px;
}

.activities .item {
border-bottom: 1px solid var(--tkRed);
}

.eduPrg {
  font-size: clamp(0.8em, 2vw, 1em);
  border-collapse: collapse;
}

.eduPrg tr{
  border-bottom: solid 1px var(--tkRed);
  font-style: italic;
}
.eduPrg td{
  padding: 5px;
  border-right: solid 1px var(--tkRed);
}
.eduPrg .tdR{
  background-color: var(--tkRed);
}

.eduPrg td:last-child{
  border-right: 0px;

}

.topBorder{
border-top: 10px solid var(--tkRed);
}

/* BHK Ekip */
.team {
  text-align:right;
}
.team .text{
font-size: 1.3em;
font-weight: bold;
padding-left:20px;
}
.team span {
  font-size: 0.8em;
  font-weight: normal;
  font-style: italic;
}

/* FOOTER */
footer {
  position: relative;
  bottom: 0;
  right: 0;
  z-index: 1010;
  width: 100%;
  height: 100%;
}

/* FONT options */
.spotText {
  font-family: georgia;
  color: var(--tkRed);
  font-size: 1.5em;
  font-weight: 300;
  font-style: italic;
}
.smallText{
  font-size: 0.8em;
}

.biggerText {
  font-size: 1.5em;
  color: var(--tkBlue);
}

.spotTextG {
  font-family: georgia;
  color: var(--tkGreen);
  font-size: 1.5em;
  font-weight: 300;
  font-style: italic;
}

.biggerText2 {
  font-size: 2em;
  color: var(--tkBlue);
}

.cRed{
  color: var(--tkRed) ;
}
.cBlue{
  color: var(--tkBlue) ;
}

.cBlueB{
  color: var(--tkBlue);
  font-weight: bold;
  font-size: 1.3em;
}
.cGreen{
  color: var(--tkGreen) !important;
}

.cYellow{
  color: var(--tkYellow) !important;
}

.cGray{
  color: var(--tkGray) !important;
}

.bgcHeaderBox{
  background-color: var(--tkYellow);
}

.lineThrough {
  text-decoration: line-through;
}

@media (max-width: 800px) {
  #container {
    display: flex;
    flex-direction: column;
  }
  .content .item{
    display: flex;
    flex-direction: column !important;
  }

  #topMenuResponsive {
    display: flex;
  }
  #topMenu {
    display: none;
  }

  .tempInfo{
    //position: absolute;
    display: flex;
    text-align: : center;
    margin: 0 auto;
    z-index: 1000;
  }

  .tempInfo img{
    height:100%;
  }

}

/* Style for the overlay text */
#overlayText {
  position: fixed;
  bottom: 30px;
  left: 0px;
  color: white;
  padding: 3px;
  background-color: black;
  font-size: 0.8em;
  //font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.language-switch {
  display: inline-block;
  padding: 40px 20px 0 20px;
  border-top: 2px dotted white;
  /* Change the color and width as needed */
  text-align: left;
  width: 100%;
  font-size: 0.6em;
}

.videoContainer {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* Aspect ratio 16:9 (divide 9 by 16 = 0.5625) */
  height: 0;
  overflow: hidden;
}

.videoContainer iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#kvk-confirmation-popup {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    //background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

#kvk-confirmation-popup form {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
}