@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');


:root {
    --font-size-heading: 1rem; /* Define a variable for heading font size */
    --font-size-paragraph: 1rem; /* Define a variable for paragraph font size */
    --font-size-heading1: 2rem; /* Define a variable for heading font size */
    --font-size-heading2: 2rem; /* Define a variable for heading font size */

    
    /* Light theme defaults */
    --sidebg-color: #cecece; /* Define a variable for background color */
    --bg-color: #f4f4f4; /* Define a variable for background color */
    --start-bg-color: #f4f4f4;

    --h1-color: #000000; /* Define a variable for h1 color */
    --h2-color: #000; /* Define a variable for h2 color */
    --h3-color: #000; /* Define a variable for h3 color */
    --p-color: #000; /* Define a variable for paragraph color */
    --sidebar-textcolor: #333; /* Define a variable for sidebar text color */
    --bg-color: #f4f4f4; /* Define a variable for background color */
    --card-front-color: #ddd; /* Define a variable for card front color */
    --card-back-color: var(--card-front-color); /* Define a variable for card back color */
    --card-outline-color: #fff0; /* Define a variable for card outline color */
    --bg-color: #eee; /* Define a variable for background color */
    --wallpaperaccent-color: hsl(35, 100%, 50%);
    --wallpapercomplement-color: hsl(12, 86%, 46%);
    --accent-color: gold;
    transition: --wallpapercomplement-color 0.25s ease, --wallpaperaccent-color 0.25s ease;
    --side-outline-color: #999;
     /* #e69900; Define a variable for start background color */
    --hr-color: #333;
    --bottom-line-color: #333;
  

    }


    
.dark-theme {
  --bottom-line-color: #fff;
  --start-bg-color: #000;
  --bg-color: #000000; /* Define a variable for background color */
  --sidebg-color: #545454;

  
  --side-outline-color: #333;
  --h1-color: #fff; /* Define a variable for h1 color */
 
  --h3-color: #fff; /* Define a variable for h3 color */
  --p-color: #ddd; /* Define a variable for paragraph color */
  --sidebar-textcolor: #bbb; /* Define a variable for sidebar text color */
  --hr-color: #aaa;
  
  
  --h2-color: var(--accent-color);
  --card-front-color: #131313; /* Define a variable for card front color */
  --card-back-color: var(--card-front-color); /* Define a variable for card back color */
  --card-outline-color: #000; /* Define a variable for card outline color */

}


/* Global styling */
* {
  /* set font size */
  font-size: var(--font-size-paragraph);
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.Title {
  position: absolute;
  
  z-index: 10000;
  padding-top: 1rem;
  color: var(--h1-color);
  font-family: 'Roboto', sans-serif; /* Professional, clean, and thin font */
  font-size: 4rem; /* Adjust the size */
  font-weight: 300; /* Thin font weight */
  text-align: center; /* Center-align the text */
  margin: 0;
}


.Subtitle {
  position: absolute;
  top: 26vh;
  z-index: 10000; 
  color: var(--h1-color);
  font-family: 'Roboto', sans-serif;
  
  font-weight: 300;
  text-align: center;
  margin-top: 10px;
}

.arrow-down {
  position: absolute;
  bottom: calc(5%); /* Adjust as needed */
  left: 50%;
  transform: translateX(-50%);
  color: var(--h1-color); /* Use your CSS variable for color */
  font-size: 2.5rem; /* Adjust the size of the arrow */
  animation: bounce 1.5s infinite; /* Add bounce animation */
  cursor: pointer; /* Optional: pointer on hover */
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  40% {
    transform: translateX(-50%) translateY(-10px);
  }
  60% {
    transform: translateX(-50%) translateY(-5px);
  }
}





body {
  overflow-x: hidden;
  font-family: "Helvetica Neue", Arial, sans-serif;
  background-color: var(--bg-color);
  transition: background-color 0.5s ease, color 0.5s ease; /* Add transition here */
  color: var(--p-color);
  scroll-behavior: smooth;
}

html {
 scroll-behavior: smooth;
  
}





.download-button {
  z-index: 10000;
  position: absolute;
  /* top: calc(35vh - 1rem); */
  /* top: calc(33vh + 7rem);
   */
   margin-top: 1.3rem !important;
   top: calc(30vh);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  margin-top: 2rem;
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: #000; /* Black text */
  text-decoration: none;
  background-color: #f5f5f5; /* Light gray background */
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  transition: all 0.3s ease;
}


.medal{
  /* transparency */
  opacity: 0.8;
}

@media (hover: hover) and (pointer: fine) {
.download-button:hover {
  background-color: #e0e0e0; /* Darker gray on hover */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Deeper shadow */
  color: #000; /* Maintain black text on hover */
}
}

/* Section Styling */





/* Image Styling */
.single-image {
  position: absolute;
  right: 0vw;
  border-radius: 0;
  margin-top: 0;
  top:5rem;
  clip-path: inset(4rem 0 calc(15%) 0); /* Crop 15% from top and bottom */
    object-fit: cover;  
  z-index: -1;
  /* width: 90vw; */
  max-width: 100%; /* Adjust maximum size */
  height: auto;
  
}

#resume .single-image{
  margin-top: 1rem;
}


/* Content wrapper */
/* .content {
  margin-left: 15vw; 
} */

/* Section styling + fade-in transition */
.section {
  /* min-height: 100vh; */
  padding: 6rem 3rem 3rem 3rem;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
  
}
.section.visible {
  opacity: 1;
  transform: translateY(0);


}

.grid-intro {
  margin-bottom: 1rem;
  font-style: italic;
  color: var(--sidebar-textcolor);
}



#start.section {
min-height: 100dvh; /* Declared twice */
display: flex;
flex-direction: column;
align-items: center;
text-align: center;

}

.angled-line {
  display: none; /* Hide the line on the start page */  
}

/* Start page with distinct orange-ish background */
#start {
  /* background-color: var(--start-bg-color); */
  /* background image bg.jpg */
  /* background-image: url('bg.jpg'); */
  background-size: cover;
  background-position: center;
  
  color: #1b1b1b;
}


h1 {
  color: var(--h1-color);
  transition: color 0.5s ease, color 0.5s ease; /* Add transition here */
  font-size: var(--font-size-heading1);
}

h2 {
  color: var(--h2-color);
  /* font-size: var(--font-size-heading2); */
  font-family: 'Roboto', sans-serif;
  font-weight: 300; /* Thin font weight */
  font-size: var(--font-size-heading2);
}

/* Common heading styles */
h1, h2 {
  margin-bottom: 1rem;
}






#achievements, #projects {
  width: 100%;
  padding: 3rem;
  box-sizing: border-box;
}


.cards-container {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  perspective: 1000px;
}

.card {
  position: relative;
  cursor: pointer;
  transition: transform 0.5s;
  transform-style: preserve-3d;
}

.card.expanded {
  grid-column: 1 / -1; /* Expand across all columns */
  width: 99%;            /* Adjust as needed */
  margin: 0 auto;       /* Center it */
}

.card-inner {
  width: 100%;
  
  transition: transform 0.6s;
  transform-style: preserve-3d;
  position: relative;
}

.card.expanded .card-inner {
  min-height: 300px; /* Expand height when clicked */
}


.card-front, .card-back {
  display: flex;
  flex-direction: column;
  align-items: center; /* Centers items horizontally */
  padding: 1rem; /* Ensure padding is consistent */
  box-sizing: border-box;
  
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  background: var(--card-front-color);
  border: 1px solid var(--card-outline-color);
  border-radius: 5px;
}

.card-back {
  transform: rotateY(180deg);
  overflow-y: auto; /* Allows scrolling for longer content */
  background: var(--card-back-color); /* Optional: Different background for the back */
}

.card-front h3, .card-back h4 {
  align-self: center; /* Centers the title horizontally */
  margin-top: 0; /* Removes top margin */
  margin-bottom: 1rem; /* Adds space below the title */
  text-align: center; /* Centers the text within the heading */
}

.card-front p, .card-back p {
  align-self: flex-start; /* Aligns paragraphs to the start (left) */
  text-align: left; /* Ensures text within paragraphs is left-aligned */
  width: 100%; /* Allows paragraphs to take full width for better readability */
}

.card.flipped .card-inner {
  transform: rotateY(180deg);
}

@media (hover: hover) and (pointer: fine) {
.card:hover {
  /* transform: scale(1.02); */
  /* Increase darkness */
  filter: brightness(0.9);
}
}






/* about section  */

/* Ensure first sentence in the introduction is on its own line */
.intro {
  margin-bottom: 20px; /* Adds space below the intro sentence */
  line-height: 1.6;
}

/* Ensure subsections display inline if space allows */
.about-content {
  display: flex;
  flex-wrap: wrap; /* Allows wrapping on smaller screens */
  gap: 20px; /* Space between sections */
}

.academic-section, .leadership-section, .core-principles {
  flex: 1; /* Each section takes equal width if space permits */
  min-width: 300px; /* Ensures sections stack if the screen is narrow */
}

/* Overall Section Styling */
#about .about-wrapper, #about .rest-wrapper {
  margin-bottom: 20px; /* Spacing between the introduction and the rest */
}

/* Introduction Styling */
.about-wrapper {
  display: block; /* Ensures introduction always stays on a single line */
}

/* Rest Wrapper Styling */
.rest-wrapper {
  display: flex;
  flex-wrap: wrap; /* Allows the sections to wrap on smaller screens */
  gap: 20px; /* Space between the subsections */
}

.leadership-section, .core-principles, .academic-section {
  flex: 1; /* Equal width for subsections */
  min-width: 300px; /* Ensures stacking on smaller screens */
}


h3 {
  margin-bottom: 10px;
}

ul {
  list-style: none;
  padding: 0;
}

ul li {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

ul li i {
  margin-right: 10px;
}

.fa-solid {
  color: var(--accent-color);
}



p {
  margin-bottom: 10px;
  line-height: 1.6;
}




/* end  about section  */



.bottom-line {
  width: 40vw;
  height: 1px;
  background-color: var(--bottom-line-color); /* Adjust color as needed */
  padding: 0px;
  margin: 1rem auto 2rem auto; /* Adjust margin as needed - top right bottom left */
}