h1, h2, h3, h4, h5, h6 {font-family: "Lobster", sans-serif}
.w3-row-padding img {margin-bottom: 12px}
/* .bgimg {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url('https://www.w3schools.com/w3images/profile_girl.jpg');
  min-height: 100%;
} */
@font-face {
 font-family: 'YanShiFoXiTi';
 src: url('fonts/YanShiFoXiTi/Slidefu-Regular-2.ttf'); /* Change the extension to match your file */
}

@font-face {
font-family: 'Aakar Regular';
src: url('fonts/Aakar Regular/Aakar Regular.ttf') format('truetype'); /* Update the path if needed */
}

@font-face {
   font-family: 'vesper_libre';
   src: url("fonts/Vesper_Libre/VesperLibre-Bold.ttf");
}

@font-face {
   font-family: 'kalam';
   src: url("fonts/Kalam/Kalam-Bold.ttf");
}


@font-face {
   font-family: 'Kurale';
   src: url("fonts/Kurale/Kurale-Regular.ttf");
}

@font-face {
   font-family: "Tillana";
   src: url("fonts/Tillana/Tillana-Regular.ttf");
}


@font-face {
   font-family: "hentaigana";
   src: url('fonts/Yuji_Hentaigana_Akebono/YujiHentaiganaAkebono-Regular.ttf');
}

@font-face {
   font-family: 'tegaki';
   src: url('fonts/851-tegaki-zatsu/851tegaki_zatsu_normal_0883.ttf');
}

.chinese {
 font-family: 'YanShiFoXiTi', sans-serif;
}

.chinese-container {
    width: 100%;  /* Adjust as needed */
    height: 100px; /* Adjust as needed */
    display: flex; /* Enable flexbox */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    font-family: 'Arial', sans-serif; /* Example font, adjust as needed */
}

.japanese {
   font-family: 'tegaki';
}

.sanskrit {
   font-family: 'Tillana';
   font-size: 33px; /* Set the font size to your desired value */
   font-style: italic;
   font-weight: bold; /* Make the text bold */
   text-align: right; /* Center align the text */
   display: block; /* Make the span a block element to occupy the full width */
   margin: 10px 0; /* Add some margin to separate it from other elements */
   color: gray; /*Set the color to your preference*/
}
/* Other CSS rules */

/* Style for the sidebar */
.sidebar {
    width: 40%; /* Slightly adjusted for scrollbar space */

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    height: 100%; /* Full-height: remove this if you want "auto" height */
    overflow-x: hidden; /* Hide horizontal scrollbar */
    overflow-y: auto; /* Allow vertical scrolling if needed */
    position: fixed;/*Fixed position*/
    top: 0;
    display: flex;
    /* flex-direction: column; Stack horizontal bars vertically */
    align-items: center; /* Center the horizontal bars horizontally */
    background-color: white; /* This color should match your page's background or the desired sidebar color */
    /* box-shadow: 20px 0px 15px -5px grey; This creates the fade-out effect. Adjust the values for a stronger/weaker fade. */



}



/* Style for the horizontal bar */
.horizontal-bar-left {
    width: 100%; /* Full width of the sidebar */
    display: inline-flex;

    animation: scroll 500s linear infinite; /* Animation duration for one set of images */
}

.horizontal-bar-left img {
    width: 200px;
    height: 200px;
}


/* Style for the horizontal bar that scrolls to the right */
.horizontal-bar-right {
    width: 100%; /* Full width of the sidebar */
    display: inline-flex;
    animation: scrollRight 500s linear infinite; /* Animation for right scrolling */
}

/* Animation for slow right scrolling */
@keyframes scrollRight {
    0% { transform: translateX(-800px); } /* Start from the leftmost position */
    100% { transform: translateX(0); } /* End at the initial position */
}


.horizontal-bar-right img {
    width: 200px;
    height: 200px;
}

/* Animation for slow scrolling */
@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-800px); } /* 800px is the total width of one set of images */
}





.question-mark {
 cursor: pointer;
 font-weight: bold;
 color: gray; /* Change the color as needed */
 font-size: 40%; /* Adjust the font size to make it smaller */
 vertical-align: top; /* Display the question mark as a superscript */
}

.tooltip {
display: none;
position: absolute;
background-color: #f9f9f9;
padding: 5px;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
font-size: 20%; /* Set to the desired font size */
font-weight: normal; /* Set the font weight to normal */
font-style: normal; /* Set the font style to normal */
font-family: "Times New Roman", serif /* Set the desired font family */
}

.university-table {
    width: 100%;
    margin: 0;
}

.university-logo {
    width: 100px; /* Fixed width */
    height: 100px; /* Fixed height */

}

.university-row td {
padding-left: 10px; /* Reduced padding */
padding-right: 10px; /* Added right padding */
vertical-align: middle;
text-align: left;
}
.university-row td:first-child {
    width: 25%;
    vertical-align: top;
}
.university-row td:last-child {
    width: 75%;
    vertical-align: middle;
}

.experience-section {
    display: flex; /* Use flex layout */
    align-items: flex-start; /* Align items to the top */
    margin-bottom: 30px; /* Add space between sections */
}

.content-section {
    text-align: left;
}

.content-section h2 {
    text-align: left;
}

.content-section table {
    margin-left: 0;
    margin-right: 0;
}

.experience-logo {
    max-width: 100px; /* Adjust the width as needed */
    height: fit-content; /* Maintain the aspect ratio */
    margin-right: 20px; /* Add space between image and text */
}



.img-container-change {
    /* width: 400px;s */
    height: 400px;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.img-container-change img {
    height: 100%;
    width: auto;
    transition: transform 0.5s ease; /* Animation duration and easing */
}

#arrow {
    cursor: pointer;
}
#courses {
    display: none;
    margin-left: 20px;
    margin-top: -10px;  /* Reduced margin-top */
}