@charset "utf-8";

body {
   font: 16px arial, sans-serif;
  background-image: url("seashells-sand-beach-rakushki.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

img {
    max-width: 100%;
    max-height: 100%;
}

.box-shadow {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
  text-align: center;
}

.circle-shadow {
    /* Horizontal offset | Vertical offset | Blur radius | Spread radius | Color */
    -webkit-box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
       -moz-box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
}

.center {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 50% !important;
}

/*link format*/
a:link{
	color: #0000FF;
}

a:visited {
    color: #8B008B;
}

a:active {
	color: 	#A52A2A;
}

a:hover {
    color: #00008B;
}
/* end link format*/

.container-fluid {
    padding-top: 10px;
    padding-bottom: 10px;
	opacity: 0.8;
}

.container-fluid-2 {
    padding-top: 10px;
    padding-bottom: 10px;
	font-size: 14pt;

}

.container-top {
    padding-top: 100px;
    padding-bottom: 10px;
	border-radius: 25px;
}

.container {
    padding: 10px;
	border-radius: 25px;
}

/*navboxes*/
.container-navbox {
  margin: auto;
  position: relative;
  width: 50%;
}

.image-navbox {
  display: block;
  width: 100%;
  height: auto;
}

.overlay-navbox {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #e8ffff;
  overflow: hidden;
  width: 100%;
  height:0;
  transition: .5s ease;
}

.container-navbox:hover .overlay-navbox {
  bottom: 0;
  height: 100%;
}

.text-navbox {
  font-size: 13px;
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 2px;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center; 
}

.text-navbox2 {
  font-size: 18px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.text-navbox3 {
  font-size: auto;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}



@media screen and (max-width: 600px) {
  .text-navbox {
    font-size: 4px;
  }
.text-navbox2,.text-navbox3 {
    font-size: 6px;
  }
}


/*end navboxes*/

.bg-1 { 
    background-color: #14acc3; /* Teal-Original Color*/
    color: #ffffff;
	opacity: 0.9;
	margin: auto;
	font-size: 16px;
}

.bg-2 { 
    background-color: #f0ffff; /* light-light blue-Original Color*/
    color: #000000;
	opacity: 0.9;
}

.bg-3 { 
    background-color: #6ea9b5; /* Gray Blue */
    color: #ffffff;
	opacity: 0.9;
}

.bg-4 { 
    background-color: #628ac1; /* Blue */
    color: #ffffff;
	opacity: 0.9;
}

.bg-5 { 
    background-color: #CCC49F; /* Tan-Original Color */
    color: #000000;
	opacity: 0.8;
}

.bg-6 { 
    background-color: #4caf50; /* Green-Original Color */
    color: #ffffff;
}

bg-6.link{
	color: #000000;
	font-weight: bold;
}

.bg-7 { 
    background-color: #7b8f7c; /* Sea Green */
    color: #ffffff;
	opacity: 0.9;	
}

.bg-8 { 
    background-color: #e6ffff; /* aquamarine */
    color: #000000;
	opacity: 0.9;	
}

.bg-9 { 
    background-color: #FFEFD5; /* Cream */
    color: #000000;
	opacity: 0.9;
}

.bg-10 { 
    background-color: #F0FFF0; /* Light Green */
    color: #000000;
	opacity: 0.9;

}

.bg-11 { 
    background-color: #DCDCDC; /* Light Gray */
    color: #000000;
	opacity: 0.9;
}

.bg-12 { 
    background-color: #878787; /* Dark Gray */
    color: #ffffff;
	opacity: 0.9;
}

.bg-13 { 
    background-color: none; /* None */
    color: #000000;
	opacity: 0.9;
}

.bg-14 { 
	background-color: none; /* None */
    color: #000000;
	opacity: 1;
	margin: auto;
}

.bg-15 { 
    background-color: ffffff; /* white */
    color: #000000;
	opacity: 1;
}

.carousel-inner > .item > img {
    margin: 0 auto;
}

.carousel-inner {
   margin-bottom:50px;
}

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #bbb;
  color: black;
}

/* Style the back side */
.flip-card-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}

/* Container for the overall skills section */
.skills-section {
  max-width: 900px;
  margin: 0 auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Individual Category Cards */
.skill-category-card {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 20px 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.skill-category-card h3 {
  margin-top: 0;
  margin-bottom: 6px;
  color: #1e293b;
  font-size: 2rem;
}

.category-description {
  margin: 0 0 16px 0;
  color: #64748b;
  font-size: 1.5rem;
}

/* Flexbox container for layout of pills */
.pill-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Base style for pill tags */
.skill-pill {
  display: inline-block;
  background-color: #f1f5f9;
  color: #334155;
  font-size: 1.2rem;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid #cbd5e1;
  transition: all 0.2s ease-in-out;
}

.skill-pill:hover {
  background-color: #e2e8f0;
  transform: translateY(-1px);
}

/* Highlight style for core heavy-hitting tools */
.skill-pill.highlight {
  background-color: #e0f2fe;
  color: #0369a1;
  border-color: #bae6fd;
  font-weight: 600;
}

.skill-pill.highlight:hover {
  background-color: #bae6fd;
}

/* Styling for the academic roles line (e.g., Teaching Assistant, Research Assistant) */
.academic-roles {
  font-size: 1.2rem;
  color: #475569;          /* Subtle slate gray tone */
  font-style: italic;
  margin-top: 4px;
  margin-bottom: 16px;
}

/* Optional styling for the concentration line above it */
.academic-focus {
  font-size: 1.2rem;
  color: #1e293b;          /* Darker text for readability */
  margin-bottom: 4px;
}

.thesis-highlight {
  font-size: 1.2rem;
  color: #1e293b;
  background-color: #f8fafc;
  border-left: 3px solid #0284c7;
  padding: 8px 12px;
  margin: 12px 0 16px 0;
  border-radius: 0 4px 4px 0;
}
.cv-vector-icon {
  width: 100px;
  height: 100px;
  display: block;
  margin: 0 auto;
  transition: transform 0.2s ease;
}

.cv-vector-icon:hover {
  transform: scale(1.08);
}

[role="dialog"], .modal-container, .pdf-popup-wrapper {
  margin-top: 90px; /* Pushes the entire popup down so it clears the fixed nav */
}

.activity-card {
    background: #ffffff;
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .activity-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }
  .year-badge {
    float: right;
    font-size: 13px;
    padding: 5px 10px;
    background-color: #337ab7;
    color: #fff;
    border-radius: 12px;
    font-weight: 600;
  }
  .section-title {
    margin-bottom: 25px;
    font-weight: 700;
    letter-spacing: 0.5px;
  }