@import url("https://fonts.googleapis.com/css?family=Roboto:400,700, 300,500,600|Poppins:400,300,600|Caveat:400");
@import url('https://fonts.googleapis.com/css2?family=Bungee+Inline&display=swap');
    	* {
    		margin:  0;
    		box-sizing: border-box;
        padding:  0;
    	}


       
.roboto-normal 
{
	font-family: 'Roboto';
font-style: normal;
font-weight: 500;
text-align: center;
}


.glass-style
{
    padding: 10px;margin: 10px;margin-left:  50px;margin-top:  0;display: inline-block;
    font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-size: 1.4em;
line-height: 50px;
/* or 167% */

text-transform: capitalize;

color: #FFFFFF;

text-shadow: 0px 19px 20px rgba(0, 0, 0, 0.25);
background: rgba(217, 217, 217, 0.29);
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}


.what-am-i 
{
    font-family: 'Poppins';
font-style: normal;
font-weight: 300;
font-size: 1.6em;

/* or 167% */

text-align: center;
text-transform: uppercase;

color: #FFFFFF;
float:  left;
box-shadow: -18px 14px 4px 2px rgba(0, 0, 0, 0.27);
margin:  100px;
opacity:  0;
}

/* Projects Section Styling */
#upper-1
{
    background: #39776C;width: 80%;
    height:  470px;
      display:  inline-block;margin:  50px;
       margin-bottom:  0;
     box-shadow: -12px 17px 0px #AED4B2;
        border-radius: 11.6076px;
        transition:  all 0.5s;
}



#project-names-container:hover #upper-1
{
    box-shadow: 2.4125px -2.8952px 0px #AED4B2;
}
#project-names-container:hover #upper-2
{
     box-shadow: -2.4125px 3.8952px 0px #AED4B2;
}
/*#upper-1:hover
{
     box-shadow: 2.4125px -2.8952px 0px #AED4B2;
}*/
/*#upper-2:hover
{
     box-shadow: -2.4125px 3.8952px 0px #AED4B2;
}*/


#upper-2
{
    background: #39776C;
box-shadow: -12.7729px 13.7555px 0px #AED4B2;
border-radius: 11.6076px;
width: 80%;
height: 205.81px;margin:  50px;
transition:  all 0.5s;
}

#heading-projects
{
    font-style: normal;
font-weight: 500;
font-size: 1.7em;
line-height: 27px;
/* or 58% */
margin:  20px;
text-align: center;
letter-spacing: 0.26em;
text-transform: capitalize;

color: #AED4B2;
position: relative;
    display: inline-block;
text-shadow: 0px 3.93013px 3.93013px rgba(0, 0, 0, 0.25);
transition:  all 1s;
/*background:  black;
width:  90%;*/
}

/*#project-names-container:hover  #heading-projects
{

    width:  0;
}*/

#projects-list  a
{
  text-decoration: none;
  color: #FFFFFF;
  padding:  5px;
  transition:  all 0.2s;
}

#projects-list  a:hover
{
  border:  3px solid #AED4B2;
  background:  #ffffff;
  color:  #000000;
}

#upper-1 > ul {
  font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-size: 1.3em;
line-height: 36px;
/* or 116% */
margin:  10px;
letter-spacing: 0.08em;
text-decoration-line: underline;
text-transform: capitalize;
text-decoration:  none;
list-style: none;
color: #FFFFFF;
}



#project-container
{
    background: #3b0947;
border-width: 5px 0px;
border-style: solid;
border-color: #000000;
border-radius: 20px;
min-height: 547px;
margin-top: 30px;
padding: 15px;
}

.project-content
{
    font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-size: 1.1em;
line-height: 48px;
/* or 198% */
margin:  50px;
letter-spacing: 0.13em;

color: #FFFFFF;
}

.project-links 
{
font-family: 'Poppins';
font-style: normal;
font-weight: 600;
font-size: 1.1em;
line-height: 48px;
/* or 198% */
margin:  50px;
letter-spacing: 0.13em;

color: #FFFFFF
}

/* Projects Section Styling Ending */


#achievements-heading
{
    background: rgba(182, 220, 255, 0.96);
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
font-size: 1.4em;
line-height: 70px;
letter-spacing: 0.105em;
/* or 250% */

text-transform: capitalize;
color: #01346F;
text-align:  center;
transform:  scaleY(0);
}


#heading-for-animation
{
    display:  inline-block;
   
     transform:  translateX(-500%);

}

.achievements-description
{
    opacity:  0;
}
.achievements-description
{
     animation:  fall-in 0.7s linear forwards 1.4s;
}

.achievements-values
{
    /*border-bottom: 1px solid #000000;*/
    padding: 5px;
    display:  inline-block;
    font-family: 'Roboto';
font-style: normal;
font-weight: 700;
font-size: 24px;
/* or 225% */
margin:  0;
text-transform: capitalize;

color: #1E1E1E;
}





#achievements-container
{
    display: flex;
flex-direction: row;
flex-wrap:  wrap;
align-items: flex-start;
padding: 0px;
justify-content: space-evenly;
margin-top:  70px;

}

.achievements-description
{
    font-family: 'Roboto';
font-style: normal;
font-weight: 300;
font-size: 1em;
line-height: 30px;
/* or 183% */

text-transform: capitalize;
list-style:  none;
color: #000000;
padding:  0;
}

.achievement-areas
{
   font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-size: 1.4em;
line-height: 50px;
/* or 225% */
text-align: center;
text-transform: capitalize;
color: #002959;
}

.skill-containers
{
    margin:  30px;
}

.skill-percentage
{
    background: #BFBFBF;
    border-radius: 10px;
    width: 300px;
    height: 25px;
}

.skill-actual
{
    background: #4B2CA3;
    border-radius: 10px;
    height: 25px;
    display: inline-block;
}

.skill-text
{
    font-family: 'Kantumruy',sans-serif;
font-style: normal;
font-weight: 300;
font-size: 1.2em;
line-height: 21px;
/* or 67% */

text-align: center;

color: #000000;
}


.progress-ring__circle {
  transition: stroke-dashoffset 1s;

}
.progress-ring__circle {
  stroke-dashoffset: 345.57;
  transform:  rotate(-90deg);
  transform-origin:  50% 50%;
  } 

@keyframes rolesentry
{
    from
    {
      transform:  translateY(100%);
      opacity: 1;
      z-index:  -1;
    }
    to
    {
      transform:  translateY(0%);
      opacity:  1;
      z-index:  -1;
    }
}


.whatami_content_anime
{
   
   animation:  rolesentry 1s ease-in-out forwards;

}

#what-am-i_sticker
{
    z-index:  2;
}


#courses-section
{
    width: 90%;
    margin: auto;
    margin-top:  30px !important;
    margin-bottom:  10px;

}

#pattern-container
{
    width:  200px;
    height:  300px;
    background:  url(background_pattern_svg.svg);
    background-repeat:  space;
    background-position: center right;
}



.courses-heading
{
    font-family: 'Inter',sans-serif;
font-style: normal;
font-weight: 400;
font-size: 1.3em;
line-height: 15px;
color: #FFFFFF;
margin-bottom:  10px;

}

.course-svgs
{
    width:  17%;
}


.each-course
{
    
    margin-top:  20px;
    margin-bottom:  10px;
}
.course-name
{
    font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-size: 1.2em;
line-height: 29px;
/* or 111% */
color: #000000;
}

.course-description
{
    display: inline-block;
    
    border-radius: 14.7935px;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 1.1em;
    line-height: 22px;
    /* or 112% */
    color: #0F543F;
    text-stroke: 1px solid #000000;
    padding:  10px;
    text-align:  left;
    }

#all-course-container
{
    display:  flex;
    justify-content:  space-between;
    flex-wrap:  wrap;
}

#courses-heading
{
  /* background: #4C5CE8;*/
/*border-bottom: 8px solid #000000;*/
border-radius: 8.6194px;
color: #FFFFFF;
    border-bottom: 3px solid #02090e;
text-shadow: 0px 1.99626px 1.99626px rgba(0, 0, 0, 0.25);
transform: matrix(1, 0, 0.01, 1, 0, 0);font-family: 'Poppins';
font-style: normal;
font-weight: 800;
font-size: 1.5em;
padding:  10px;
/* or 125% */
background: #5f4b99;;
letter-spacing: 0.1em;
}

#contact-heading
{
    background: #5700C6;
    font-family: 'Roboto';
font-style: normal;
font-weight: 300;
font-size: 1.3em;
line-height: 40px;
/* or 188% */
text-transform: capitalize;
padding:  2px;
color: #FBFBFB;
}

#heading-text
{
   position:  relative;
   left:  60px;
}

#contact-container
{
    display: flex;
    justify-content: space-evenly;
    margin-bottom:  20px;
    flex-direction:  column;

    
}
#personal-info-container
{
    
     text-align: center;
     margin: auto;
     margin-top:  90px;
     align-self: center;


}
#pinfo-name
{
 background: #65A0FA;
 margin: auto;
 text-align: center;
 font-family: 'Roboto',sans-serif;
font-style: normal;
font-weight: 100;
font-size: 1.4em;
padding:  8px;
/* or 225% */

text-transform: capitalize;
color: #FFFFFF;
}

.info-section
{
    /*display:  flex;
    flex-direction:  column;
    justify-content: space-between;

*/
border:  1px solid black;   
border-top:  0;
}

.rows
{
    text-align: left;
    display:  flex;
    flex-direction:  row;
    padding:  10px;
}
.columns p
{
    margin-bottom:  0;
}

.first-column
{
    font-family: 'Roboto';
font-style: normal;
font-weight: 600;
font-size: 1.2em;
/* or 281% */
font-size: calc(0.6vw + 0.4vh + 1vmin);
text-transform: capitalize;
display:  inline-block;
color: #232172;
width:  30%;
margin-left: 10px;
}


.second-column
{
    font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-size: 1.1em;
display:  inline-block;
/* or 154% */
margin-left:  5px;
font-size: calc(0.5vw + 0.4vh + 1vmin);
width:  70%;
color: #232172;

}

#feel-free
{
font-family: 'Inter', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 2em;
line-height: 40px;
/* or 188% */
margin:  20px;


color: #D23737;
}

.contact-me-headings
{
    font-family: 'Roboto';
font-style: normal;
font-weight: 600;
font-size: 1.4em;
line-height: 50px;
/* identical to box height, or 281% */
text-align:  center;
color: #ffffff;
/*background: linear-gradient(180deg, #102206 21.67%, #7000FF 65.56%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;*/
font-family: 'Poppins';
font-style: normal;
font-weight: 600;
font-size: 1.4em;
line-height: 46px;
/* or 178% */

letter-spacing: 0.035em;

background: radial-gradient(95.56% 95.56% at 39.86% 17.22%, #FF00A8 0%, #7000FF 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;

/*text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);*/
}

.contact-me-side-icon
{
    background: #D9D9D9;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
border-radius: 0px 0px 20px 20px;
transform:  rotate(90deg);
width: 52.1px;
height: 32px;
float:  left;
}

.contact-icons
{
    width: 50px;
    margin-right:  40px;
    float:  left;

}


.profile-pic
{
    height: 300px;
    transition:  all 0.5s;
   background:  #ffabff; 
   margin-top:  10px;
   transform:  rotate(-3deg);

}


.profile-pic:hover
{
    transform:  scale(0.5) rotate(-3deg);
}
.contact-bubbles
{
   
    padding: 25px;
     /*background: #83d4bc;*/
   background:  white;
   transition:  all 0.5s;
}

.contact-bubbles
{
    box-shadow: 12px 10px 4px rgba(0, 0, 0, 0.39);
}
.animating-1
{
   animation:  border-bubble1 2s linear infinite 2s;
}

@keyframes border-bubble1
{
    20%
    {
        border-radius: 65px 229px;
  
    }
    40%
    {
        border-radius: 165px 289px;
  
    }
    70%
    {
        border-radius: 165px 189px;
    }
    100%
    {
        border-radius: 165px 129px;
        
    }
}
@keyframes border-bubble2
{
    30%
    {
        border-radius: 165px 229px;
    }
    100%
    {
        border-radius: 165px 129px;
    }
}
.pt1 {
    background: -moz-radial-gradient(0% 2%, circle, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -moz-radial-gradient(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), none;
    background: -webkit-radial-gradient(0% 2%, circle, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -webkit-radial-gradient(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), none;
    background: -ms-radial-gradient(0% 2%, circle, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -ms-radial-gradient(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), none;
    background: -o-radial-gradient(0% 2%, circle, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -o-radial-gradient(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), none;
    background: radial-gradient(0% 2%, circle, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), radial-gradient(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), none;
    background-size: 20px 20px;
}

.main-content {
    background: #FFFFFF;
    box-shadow: 0px 0px 132px -22px rgba(0, 0, 0, 0.7);
    padding: 20px;
    border-radius: 10px;
    margin: 20px auto;
    max-width: 1200px;
}

.main {
    width: 100%;
    height: 100vh; /* Full height of the viewport */
}
.gradient-div
{
 width: 70%;
    height: 100vh; /* Full height of the viewport */
    background: linear-gradient(181.26deg, #6FB1FF 0.72%, #916AFF 97.41%) ;
}


.header-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: auto;
}

.avatar {
    max-width: 300px;
    height: auto;
    margin-top: 20px;
}

@media (min-width: 768px) {
    .header-content {
        flex-direction: row;
        justify-content: space-between;
    }

    .avatar {
        margin-top: 0;
    }
}

.absolute-class
{
position: absolute;
min-width: 80%;
top: 7%;
}

.skills
{

font-size: 0.8em;
}

.skills > *{
display: inline-block;
}

.stats {
border: 5px solid black;
margin: 20px;
background-color: white;
box-shadow: 18px -14px 4px 2px rgba(0, 0, 0, 0.27);
}



.stats p{
text-align: center;
align-items: center;
color: black;
padding: 10px;
font-size: 2.3vh;
text-transform: none; 



}

#latest-skill-container{

background-color: white;
margin: 20px;
border-radius: 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
position: relative;


}



.skill-icon{
height: 70px;
width: 70px;

color: white;
padding: 5px;
/* filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.2)); */

}

.withprogress {
margin: 10px;
padding: 10px;
display: flex;
flex-direction: column;
align-items: center;

flex-wrap: wrap;
align-items: center;
opacity: 0;
transition: all 0.3s;

}

.bubble {
animation: bubble 0.1s ease-in-out forwards;
}




@keyframes bubble {
0% {
    opacity: 0.5;
    transform: translateY(20px);
}
100% {
    opacity: 1;
    transform: translateY(0);
}
}



.withprogress:hover {
transform:  scale(1.5) ;
}
/* .skill-icon:hover {
transform:  scale(2.2) ;
color: white;
} */

/* Section styling */
.section {

color: black;
padding: 30px;
border-radius: 10px;
padding-top: 10px;
width: 80%;
margin: auto;
}

.section-title {
font-size: 24px;
color: black;
margin: auto;
text-align: center;
}

.section-icon {
width: 60px;
height: 60px;
border: 2px solid grey;
border-radius: 18px;
padding: 5px;
margin: 5px;
margin-bottom: 0;
background-color: #c4e2f2;
}

.icon-container {
display: flex;
justify-items: center;
}
.timeline {
border-left: 2px solid #4b2ca3;
padding-left: 20px;
position: relative;
margin-left: 33px;
}

.timeline-item {
margin-bottom: 20px;
position: relative;
padding-left: 15px;
}

.timeline-item h3 {
font-size: 20px;
color: #5c4c4c;
}

.timeline-duration {
font-size: 18px;
color: #4b2ca3;
/* color: #f9c743; */
margin-top: 5px;
}



.timeline-item::before {
content: '';
position: absolute;
left: -26px;
top: 8px;
width: 10px;
height: 10px;
background-color: #f9c744;
border-radius: 50%;
box-shadow: 0 0 0 4px hsl(0, 0%, 22%);
}

/* Responsive styling */
@media (max-width: 768px) {
.timeline {
padding-left: 10px;
}

.timeline-item {
padding-left: 10px;
}

.section-icon {
width: 30px;
height: 30px;
}
}


.timeline-content {
font-size: 1em;
}

.sidebar {
    box-shadow: 0px 0px 132px -22px rgba(0, 0, 0, 0.7);
    padding: 20px;
    border-radius: 0 10px 10px 0;
    /* margin: 20px auto; */
position: fixed;
left: 0;
color: #7d6ce5;
display: flex;
flex-direction: column;
align-items: center;
font-family: 'Poppins';
font-weight: lighter;

line-height: 30px;
letter-spacing: 0.1em;
color: #1D1D1D;
/* text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); */

justify-content: space-between;
background: #FFFFFF;
top: 10%;
z-index: 1000;
white-space: nowrap; /*Prevent the text from wrapping to the next line */
overflow: hidden; /*Hide the overflowed text */
text-overflow: ellipsis;
width: 200px;
transform: translateX(-80%);
transition: transform 0.3s ease;

}

.sidebar:hover {
transform: translateX(0);
}




.sidebar #profile_pic {
border-radius: 50%;
width: 150px;
height: 150px;
margin-bottom: 1%;
transform: rotate(-1deg); 

}

#linkedin {
height: 30px;

}
#linkedin img:hover{
color: red;
}

.sidebar p {
margin: 2px 0;
}

.sidebar a {
color: inherit; 
text-decoration: none;
/* margin: 10px 0; */
/* display: block; */
}


.sidebar a:hover {
text-decoration: underline;
}

.sidebar .contact-info {
margin-top: 20px;
text-align: center;
}

.sidebar .contact-info p {
margin: 3px 0;
}

.sidebar .social-icons {
display: flex;
justify-content: center;
}

.sidebar .social-icons a {
color: #fff;
margin: 0 10px;
font-size: 1.5em;
}



#project-categories button {
background-color: #282C34;
color: #61DAFB;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}

#project-categories button:hover {
background-color: #61DAFB;
color: #20232A;
}

#projects-grid {
margin-top: 20px;
}

.project-item {
position: relative;
overflow: hidden;
border-radius: 8px;
}

.project-item img {
transition: transform 0.3s ease;
}

.project-item:hover img {
transform: scale(1.05);
}

.project-info {
position: absolute;
bottom: 0;
left: 0;
padding: 10px;
background: rgba(0, 0, 0, 0.5);
border-bottom-left-radius: 8px;
color: white;
border-top-right-radius: 8px;
font-size: 12px;
transition: all 0.2s;

}


.project-info h3, .project-info p {
margin: 0;
}

.project-info h3 {
font-size: 1.2em;
}

.project-info p {
font-size: 0.9em;
margin-top: 5px;
}
.projects-container {
max-width: 1200px;
margin: 50px auto;
padding: 0 20px;
}

.projects-header {
font-size: 36px;
font-weight: bold;
margin-bottom: 20px;
}

.filter {
margin-bottom: 20px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: baseline;
}

.filter a {
margin-right: 20px;
text-decoration: none;
color: #F5F5F5;
font-size: 18px;
}

.filter a.active {
color: #FFD700;
border-bottom: 2px solid #FFD700;
padding-bottom: 5px;
}

.projects-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
padding: 20px;
}

.project-card {
background-color: #333;
border-radius: 15px;
overflow: hidden;
width: calc(30.333% - 20px);
position: relative;
transition: all 0.3s ease;
}

.project-card:hover {
transform: translateY(-10px);
}

.project-image {
width: 100%;
height: 180px;
object-fit: cover;
transition: all 0.5s;
}

.project-info {
padding: 20px;
}

.project-title {
font-size: 18px;
margin-bottom: 10px;
transition: all 0.3s;
}

.project-category {
font-size: 16px;
color: #B0B0B0;
}


#heading-projects::after {
content: '';
position: absolute;
left: 0;
bottom: -13px;
width: 80px;
height: 6px;
background-color: #FFD700;
border-radius: 0px 10px;
}

#heading-projects:hover {
letter-spacing: 0.1em;
}



.project-card:hover .project-title {
font-size: 24px;
color: #FFD700; /* Change to yellow on hover */
}


.contact-section {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #1a1a1a;
padding: 20px;
border-radius: 10px;

margin: auto;
}

.contact-left {
display: flex;
flex-direction: column;
}




.contact-left a {
color: inherit;
text-decoration: none;
}

.contact-right {
display: flex;
flex-direction: row;

}

.contact-item {
display: flex;
align-items: center;
margin-bottom: 10px;
}

.icon {
width: 50px;
height: 50px;

background-color:white;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}

.icon:hover {
background-color: #ffd602;
}

.email-icon::before {
content: url('mail.png');

}

.location-icon::before {
content: url('location.png');
}

.github-icon::before {
content: url('github-logo.svg');
}

.linkedin-icon::before {
content: url('linkedin-logo.svg');
}

.text {
color: #e0e0e0;
font-size: 16px;
}




.contact-icons-latest
{
background: #ffffff3b;
color: #ffd602;
font-size: 30px;
padding: 10px;
border-radius: 5px;
margin: 5px;
}

#main-linkedin {
background: #C4E2F2; 
border: 1px solid #000000; 
padding: 10px; 
margin-top: 10px; 
border-radius: 50px; 
display: inline-block;
transition: all 0.2s;
}

#main-linkedin:hover {
background-color: #c23535;
color: white;
cursor: pointer;

}

.hidden {
display: none;
height: 0;
overflow: hidden;
}

.appear {
animation: appear 1s forwards;
}


footer {
text-align: center;
margin-top: 20px;
font-size: 18px;
color: #666;
}


.menu-icon {
    position: relative;
    top: 10px;
    right: -49.5%; /* Move it outside the navbar */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 20px;
    cursor: pointer;
    background-color: white;
    transition: all 0.5s ease;
    border-radius: 2px;
}


.menu-icon .line {
    width: 100%;
    height: 3px;
    background-color: #000000;
    border-radius: 2px; 
}

/* Custom vertical scrollbar for WebKit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 12px; /* Width for vertical scrollbar */
    height: 12px; /* Height for horizontal scrollbar, set to keep default height */
}

::-webkit-scrollbar-track {
    background: #f1f1f1; /* Track background color */
    border-radius: 10px; /* Rounded track for vertical scrollbar */
   
}

::-webkit-scrollbar-thumb {
    background-color:rgb(75, 44, 163); /* Thumb color */
    border-radius: 10px; /* Rounded thumb for vertical scrollbar */
    border: 3px solid #f1f1f1; /* Border for thumb to match track */
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgb(50, 25, 116) /* Hover effect for thumb */
}

/* Target horizontal scrollbar and reset it */
::-webkit-scrollbar:horizontal {
    height: 12px; /* Reset to default height (change if desired) */
    background: transparent; /* Transparent background to resemble default behavior */
}

::-webkit-scrollbar-thumb:horizontal {
    background: initial; /* Keep the default appearance for the thumb */
    border-radius: 0; /* Remove rounding from horizontal scrollbar */
    border: none; /* Remove any border for horizontal scrollbar thumb */
}

/* Firefox scrollbar: Affects both horizontal and vertical */
body {
    scrollbar-width: thin; /* Thin scrollbar */
    scrollbar-color: rgb(75, 44, 163)#f1f1f1; /* Thumb and track color for both scrollbars in Firefox */
}

.research-img {
    background-size: cover;  /* Cover the entire container */
    background-position: center; /* Center the image */  
    border-radius: 10px; height: 300px;width: 600px;
    position: relative;  /* Needed for the icon positioning */
    cursor: pointer;   
    transition: background-size 0.7s, opacity 0.3s ease;
    
}

#research1 {
    background-image: url(./images/research1.png);
    
}

#research2 {
    background-image: url(./images/research2.png);
    
}

.research-txt {
    text-align: justify;
}

.magnifier-icon {
    position: absolute;
    top: 50%;             /* Vertically center the icon */
    left: 50%;            /* Horizontally center the icon */
    transform: translate(-50%, -50%);  /* Adjust for perfect centering */
    font-size: 50px;      /* Set icon size */
    color: white;         /* White icon for contrast */
    visibility: hidden;   /* Hidden by default */
    transition: visibility 0.3s, opacity 0.3s ease;  /* Smooth fade-in */
    opacity: 0;
    z-index: 2;           /* Ensure the icon stays above the background */
}

.research-img::before {
    content: '';  /* Creates a pseudo-element */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('your-research-image.jpg');
    background-size: cover;
    background-position: center;
    transition: background 0.5s ease, filter 0.5s ease;  /* Smooth transition */
    filter: none;  /* No blur initially */
    background-color: rgba(0, 0, 0, 0);  /* Transparent by default */
}

.research-img:hover::before {
    background-color: rgba(139, 134, 134, 0.4);  /* Slight black tint */
    filter: blur(5px);  /* Blur only the background */
    background-blend-mode: darken;  /* Blend the tint with the background */
}



.research-img:hover .magnifier-icon {
    visibility: visible;  /* Make the icon visible */
    opacity: 1;   
          /* Fade in the icon */
}

/* Optional: Hover effect for background image (magnifying zoom effect) */



.roles-interests-container {
  width: 70%;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;  /* Makes the boxes wrap into new lines if needed */
}

.roles-interests {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.box {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 10px 20px;
  margin: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  font-size: 0.9em;
  font-weight: bold;
  display: inline-block;
  color: #333;
  text-align: center;
  white-space: nowrap;
  border-radius: 15px;
    background-color: #f4f4f9;
}

/* Responsive design */
@media (max-width: 768px) {
  .box {
    font-size: 1em;
    padding: 8px 15px;
  }
}

#affiliations {
    text-align: center;
    padding: 20px;
  }
  
  #affiliations h3 {
    font-size: 1.8em;
    margin-bottom: 20px;
    color: #333;
  }
  
  /* Container for scrolling content */
  .scroll-container {
    width: 70%;
    overflow: hidden;
    position: relative;
    margin: auto;
  }
  
  /* Scrolling content */
  .scrolling-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    animation: scroll-left 15s linear infinite;
    /* Make content continue scrolling without abrupt stops */
  }
  
  .affiliation-item {
    flex: 0 0 auto;
    margin: 0 30px;
  }
  
  .affiliation-item img {
    width: 120px;
    height: auto;
    display: block;
    object-fit: contain;
    transition: transform 0.3s ease;
  }
  
  .affiliation-item img:hover {
    transform: scale(1.1);
  }
  
  /* Keyframes for left-side scrolling */
  @keyframes scroll-left {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(calc(-100%));
    }
  }
  
  /* Responsive design for smaller screens */
  @media (max-width: 768px) {
    .affiliation-item img {
      width: 80px;
    }
  }