/* =========================
   GLOBAL / BODY BACKGROUND
   ========================= */

:root {
    --bg-1:#070b1a;
    --bg-2:#0d1230;
    --bg-3:#12183d;

    --glass-bg: rgba(18, 28, 58, 0.45);
    --glass-border: rgba(255,255,255,0.08);

    --text:#f5f7ff;
    --muted:#9aa4c7;

    --glow:#6f5cff;
    --cyan:#35d0ff;
}

* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html {
    font-size: 62.5%;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: system-ui, -apple-system, sans-serif;
    color: #ffffff;
    
    /* 1. Deep dark base color */
    background-color: #0b0914;
    
    /* 2. Layered soft radial glows (Teal on right, Purple on left) */
    background-image: 
        radial-gradient(circle at 85% 30%, rgba(15, 118, 110, 0.4) 0%, transparent 50%),
        radial-gradient(circle at 10% 40%, rgba(107, 33, 168, 0.4) 0%, transparent 60%),
        radial-gradient(circle at 50% 80%, rgba(15, 23, 42, 0.8) 0%, transparent 100%);
    
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    
    /* Optional: Center your layout */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px 250px;    
}

/* subtle blur glow blobs */
body::before,
body::after{
  content:"";
  position:absolute;
  width:42rem;
  height:42rem;
  border-radius:50%;
  filter:blur(9rem);
  z-index:-1;
}

body::before{
  top:-12rem;
  left:-12rem;
  background:rgba(110,92,255,0.18);
}

body::after{
  bottom:-14rem;
  right:-10rem;
  background:rgba(0,210,255,0.12);
}

.container {
    display: flex;
    flex-direction: column;
    gap: 5rem;
}

/* Graphical elements for the HEADER section */

.header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0px;
    z-index: 50;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

/* Graphical elements for the INTRODUCTION section */

.introduction {
    display:flex;
    flex-direction: column;
    align-items: stretch;
    height: 100%;
    padding: 1.5rem;
}

.intro-header {
    display: flex;
    flex-direction: row;
    padding: 1rem;
    justify-content: center;
    gap: 1.5rem;
    align-items: stretch;
    width: 100%;
}

.intro-content {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    padding: 1rem;
    gap: 2rem;
    justify-self: center;
}

.intro-content .glass-card {
    flex:1;
    margin: 0.2rem;
    height: auto;
}

.intro-header .pastil {
    align-self: center;
    justify-items: center;
}

.intro-skills {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;    /* This is the key: it stacks items only when they hit the wall */
    gap: 1rem;
    justify-content: flex-start;
    width: 100%;  
    padding: 1.7rem;  
}

.intro-skills .pastil {
    margin: 0;             /* REMOVE the 1.2rem global margin that breaks the layout */
    display: flex;         /* Keep icon and text aligned */
    width: fit-content;    /* Only as wide as the text */
    white-space: nowrap;   /* Keep "Operation Research" on ONE line */
    padding: 0.8rem 1.6rem; /* Cleaner padding for small skill tags */
    font-size: 1.4rem;
}

.downloader {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    padding: 1.7rem;
}

.profile-card {
    border-radius: 32px;
    padding: 2rem;
    margin-bottom: 2rem;
}

.profile-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.profile-identity {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-family: 'Space Grotesk',sans-serif;
}

.profile-avatar {
    display: flex;
    height: 4rem;
    width: 4rem;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    border-width: 1px;
    border-color: rgb(255 255 255 / 0.15);
    background-image: linear-gradient(to bottom right, rgb(139 92 246 / 0.4), rgb(34 211 238 / 0.3));
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
    color: rgb(255 255 255 / 1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18),0 10px 30px rgba(0,0,0,0.22);
}

.profile-detail-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-size: 1.5rem;
    line-height: 1.25rem;
    color: rgb(226 232 240 / 1);
    padding: 2rem;
}

.profile-detail-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.right-part {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    gap: 2rem;
}

.card-title {
    display: flex;
    flex-direction: row;
    align-self: center;
    padding: 2.4rem;
    gap: 1.2rem;
}

.card-title .picture {
    border: 0.1rem solid blue;
}

.card-title .title {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.card-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.card-content {
    display: inline-flex;
    flex-direction: column;
    gap: 1.2rem;


    padding: 2.4rem;
    border: 0.1rem solid #ddd;
    border-radius: 2.0rem;

    box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.08);
    background: #110541;
}

.glass-card .pastil {
    display: flex;
    flex-direction: column;
    align-self: flex-start;
}



/* Graphical elements for the ABOUT-ME section */

.about-me {
    display:flex;
    flex-direction: column;
    align-items: stretch;
    padding: 1.5rem;
}

.about-me .bottom {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2rem;
}

.about-me .bottom .pastil {
    flex: 1;
}

.about-me .left-part {
    align-items: center;
}




.experience {
    padding: 1.5rem;
}

.education {
    padding: 1.5rem;
}

.competence {
    padding: 1.5rem;
}

.hobbies {
    padding: 1.5rem; 
}

.pastil {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  border-width: 1px;
  border-color: rgb(255 255 255 / 0.15);
  padding: 2rem;
  font-size: 1.7rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: rgb(237 233 254 / 1);
  background-color: rgba(255,255,255,0.08);
}


/* .pastil {
    display: inline-flex;
    flex-direction: row;
    gap: 1.2rem;
    margin: 1.2rem;

    padding: 1.5rem;
    border: 0.1rem solid #ddd;
    border-radius: 2.0rem;

    font-size: 1.7rem;

    box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.08);
    background:rgba(15, 22, 44, 0.15);
} */

.pastil p {
    text-align: justify;
}

/* =========================
   GLASS NAVBAR
   ========================= */

.navbar{
    position: sticky;
    top: 0;

    z-index: 1000;
    width:fit-content;
    margin:3rem auto;

    padding:1.4rem 2.2rem;
    border-radius:1.8rem;

    display:flex;
    gap:2.8rem;
    align-items:center;

    /* glass */
    background:rgba(20, 28, 50, 0.45);

    border:1px solid rgba(255,255,255,0.08);

    backdrop-filter: blur(1.8rem);
    -webkit-backdrop-filter: blur(1.8rem);

    box-shadow:
        0 0.8rem 3.2rem rgba(0,0,0,0.35),
        inset 0 0.1rem 0 rgba(255,255,255,0.05);
}

.navbar a{
    color:#c9d2f0;
    text-decoration:none;
    font-size:1.4rem;
    transition:0.25s ease;
}

.navbar a:hover{
    color:white;
}

/* =========================
   GLASS CARD
   ========================= */
.glass-card {
    /* 1. Subtle directional sheen (slightly brighter top-left, fading out) */
    background: linear-gradient(
        135deg, 
        rgba(255, 255, 255, 0.06) 0%, 
        rgba(255, 255, 255, 0.01) 100%
    );

    /* 2. Heavy background blur to frost the glowing background */
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px); /* Safari support */

    /* 3. Crisp, delicate outer border highlight */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;

    /* 4. Deep outer shadow for elevation + faint ambient highlight */
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.05); /* Subtle inner top highlight */

    padding: 40px;
    
    /* Optional transitions if you want a hover effect */
    transition: all 0.3s ease;
    overflow: visible !important;
}

/* Optional: Slight lift on hover */
.glass-card:hover {
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}

/* green circle */
.status-dot{
    display: inline-block;
    width: 10px;
    height: 10px;
    width:10px;
    height:10px;
    border-radius:50%;
    margin-right: 8px;

    background:#4dff88;

    /* halo / glow */
    box-shadow:
        0 0 0 4px rgba(77,255,136,0.15),
        0 0 12px rgba(77,255,136,0.9),
        0 0 24px rgba(77,255,136,0.45);
}

.grad-blue{
    background: linear-gradient(90deg, #7de7ff, #7aa2ff);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.grad-purple{
    background: linear-gradient(90deg, #c7a6ff, #7aa2ff);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

h1 {
    font-size: 3.5rem;
}

p {
    font-size: 1.7rem;
}

.right-picture-pastil {
    display: flex;
    flex-direction: row;
    padding: 2rem;
    gap: 2rem;
    border: 0.1rem solid #ddd;
    border-radius: 2.0rem;

    box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.08);
    background:rgba(15, 22, 44, 0.15);
}

.pending-img {
    display: block;
    width: 5rem;
    height: 5rem;
    background-color: #e0e0e0;
    border: 1px dashed #999;
    text-align: center;
}

/* Vertical centering of children */
.v-align-content {
    display: flex;
    flex-direction: column;
    justify-content: center; 
}

/* Horizontal centering of children */
.h-align-content {
    display: flex;
    flex-direction: column;
    align-items: center; 
}

/* Vertical movement (Main Axis) */
/* Note: In a column, 'auto' margins are the most reliable way to move a single item vertically */
.v-align-self {
    margin-top: auto;
    margin-bottom: auto;
}

/* Horizontal movement (Cross Axis) */
.h-align-self {
    align-self: center;
}

.about-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
    align-items: center;
    justify-items: center;
}

.about-story-card {
    grid-column: span 3;
    border-radius: 30px;
    padding: 2rem;
    justify-items: center;
}

.about-content {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    text-align: justify;
    color: rgb(203 213 225 / 1);
}

.about-highlights-columns {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;

}

.highlight-card {
    border-radius: 30px;
    padding: 2.5rem;
}

.highlight-title {
  font-size: 1.5rem;
  line-height: 1.75rem;
  font-weight: 700;
  color: rgb(255 255 255 / 1);
}

.highlight-list {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.highlight-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-radius: 1rem;
    border-width: 1px;
    border-color: rgb(255 255 255 / 0.1);
    padding: 1rem;
    background-color: rgba(255,255,255,0.06);
}

.quote-card {
    border-radius: 30px;
    padding: 1.5rem;
    font-family: 'Space Grotesk',sans-serif;
    font-size: 1.7rem;
    font-weight: 600;
    text-align: center;
}

.section-header {
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow: visible !important;
}

.section-eyebrow {
    font-family: 'Space Grotesk',sans-serif;
    font-size: 1.5rem;
    line-height: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    color: rgb(165 243 252 / 0.8);
}

.section-heading {
  font-weight: 700;
  font-family: 'Space Grotesk',sans-serif;
  color: #f8fbff;
  font-size: 36px;
  line-height: 1.15;
}

.experience-timeline {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    justify-items: center;
}

.experience-card {
    border-radius: 30px;
    padding: 1.75rem;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    width: 100%;
}

.experience-card:hover {
    transform: translate(0, -0.35rem) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);
    border-color: rgb(252 211 77 / 0.3);
    background-color: rgb(255 255 255 / 0.12);
    box-shadow: 0 20px 44px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.16);
}

.experience-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.industry-tag {
    border-radius: 9999px;
    border-width: 1px;
    border-color: rgb(255 255 255 / 0.1);
    background-color: rgb(245 158 11 / 0.1);
    padding: 1rem;
    font-size: 1.5rem;
    line-height: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    color: rgb(253 230 138 / 1);
}

.experience-icon {
    height: 2.5rem;
    width: 2.5rem;
}

.experience-title {
    font-family: 'Space Grotesk',sans-serif;
    margin-top: 1.25rem;
    font-size: 1.7rem;
    line-height: 2rem;
    font-weight: 700;
    color: rgb(255 255 255 / 1);
}

.experience-subtitle {
    margin-top: 0.5rem;
    font-size: 1.3rem;
    line-height: 1.25rem;
    color: rgb(203 213 225 / 1);
}

.experience-divider {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    height: 0.5rem;
    width: 100%;
    background-color: rgb(255 255 255 / 0.1);
}

.experience-bullet-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    font-size: 0.875rem;
    text-align: justify;
    /* line-height: 1.25rem; */
    color: rgb(203 213 225 / 1);
}

.glass {
    background: linear-gradient(180deg,rgba(255,255,255,0.12) 0%,rgba(255,255,255,0.06) 100%);
    backdrop-filter: blur(18px) saturate(140%);
    overflow: visible !important;
 
}

.hobby-card {
    width: auto;
    overflow: hidden;
    border-radius: 30px;
    transition: transform 150ms cubic-bezier(0.4,0,0.2,1),box-shadow 150ms cubic-bezier(0.4,0,0.2,1),border-color 150ms cubic-bezier(0.4,0,0.2,1);
}

.hobby-content {
    padding: 1.5rem;
}

.hobby-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.5rem;
}

.hobby-title {
    font-family: 'Space Grotesk',sans-serif;
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
    color: rgb(255 255 255 / 1);
}

.hobby-description {
    margin-top: 0.75rem;
    font-size: 1.7rem;
    text-align: justify;
    /* line-height: 1.7rem; */
    color: rgb(203 213 225 / 1);
    padding: 1.5rem;
    
}

.hobby-icon {
    width: 2rem;  /* Using rem keeps it proportional to your font size */
    height: 2rem; /* Keep width and height equal for icons */
    display: block; /* Prevents tiny alignment gaps at the bottom */
}

.hobby-image-wrap {
    height: 50%;
    width: 100%;
}

.hobby-image {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.contact-card {
    border-radius: 34px;
    padding: 2.5rem;
}

.glass-strong {
    background: linear-gradient(180deg,rgba(255,255,255,0.16) 0%,rgba(255,255,255,0.09) 100%);
    backdrop-filter: blur(22px) saturate(155%);
    border: 1px solid rgba(255,255,255,0.2);
    box-shadow: 0 18px 50px rgba(0,0,0,0.34),inset 0 1px 0 rgba(255,255,255,0.16),inset 0 0 0 1px rgba(255,255,255,0.05);
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.5rem;
}

.contact-intro {
    grid-column: span 7 / span 7;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact-heading {
    display: inline-block;
    font-weight: 700;
    font-family: 'Space Grotesk',sans-serif;
    color: #f8fbff;
    font-size: 36px;
    line-height: 1.15;
    align-items: center;
    justify-content: center;
}

.contact-details-list {
    grid-column: span 5 / span 7;
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.email-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    border-radius: 1rem;
    border-width: 1rem;
    border-color: rgb(255 255 255 / 0.15);
    padding: 1.25rem;
    font-size: 1rem;
    line-height: 1.25rem;
    font-weight: 600;
    font-size: 1.3rem;
    color: rgb(255 255 255 / 1);
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    background-color: rgba(255,255,255,0.08);
}

.linkedin-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    border-radius: 1rem;
    border-width: 1rem;
    border-color: rgb(255 255 255 / 0.15);
    padding: 1.25rem;
    font-size: 1.3rem;
    line-height: 1.25rem;
    font-weight: 600;
    color: rgb(255 255 255 / 1);
    background-color: rgba(255,255,255,0.08);
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.contact-icon {
    height: 1.25rem;
    width: 1.25rem;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
    vertical-align: middle;
}

a {
    text-decoration: inherit;
    padding: 1rem;
}

#myCarousel {
    max-width: 600px;
    margin: 0 auto;
}

/* =========================
   RESPONSIVE MEDIA QUERY
   ========================= */

@media (max-width: 1024px) {
    /* Reduce the heavy side padding for tablets/laptops */
    body {
        padding: 40px 100px;
    }
}

@media (max-width: 768px) {
    /* 1. Reset Body Padding - Vital for mobile space */
    body {
        display: block;
        padding: 20px;
        height: auto;
    }

    /* 2. Navbar - Allow it to wrap or scroll if it's too long */
    .navbar {
        position: sticky;
        top: 10px;

        z-index: 9999;
        width: 95%;
        gap: 1.5rem;
        flex-wrap: wrap;
        justify-content: center;
        padding: 1rem;
    }
    
    .navbar a {
        font-size: 1.2rem; /* Slightly smaller for small screens */
    }

    /* 3. Introduction Section - Stack Left and Right parts */
    .introduction {
        flex-direction: column;
        gap: 3rem;
    }

    .right-part {
        width: 100%;
    }

    /* 4. About Me Grid - Change 5 columns to 1 */
    .about-grid {
        grid-template-columns: 1fr;
    }

    .about-story-card, 
    .about-highlights-columns {
        grid-column: span 1; /* Reset the column spans */
        width: 100%;
    }

    /* 5. Experience & Hobbies Timelines - Change 3 columns to 1 */
    .experience-timeline {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    /* 6. Contact Section - Stack items */
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .contact-intro, 
    .contact-details-list {
        grid-column: span 1;
        text-align: center;
    }

    /* 7. Typography - Adjust sizes for smaller screens */
    h1, .section-heading, .contact-heading {
        font-size: 2.8rem;
    }

    .pastil {
        font-size: 1.4rem;
        width: 100%; /* Make pastils full width on mobile if needed */
        justify-content: center;
    }

    .downloader {
        flex-direction: column;
        width: 100%;
    }

    /* 8. Fix images - ensure image wraps don't take too much vertical space */
    .hobby-image-wrap {
        height: 200px;
    }
}

/* =========================
   SKILLS CAROUSEL MOVES
   ========================= */
.marquee-wrapper {
  overflow: hidden;
  width: 100%;
}

.marquee-track {
  display: flex;
  width: max-content;
  gap: 3rem;
  animation: marquee 10s linear infinite;
}

.marquee-wrapper:hover .marquee-track {
  animation-play-state: paused; /* pause on hover */
}

/* @keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
} */

.tech-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-right: 1rem;
  background: #f8f9fa00;
  border: 1px solid #02020367;
  border-radius: 12px;
  padding: 1.25rem 1rem;
  width: 100px;
}

.tech-card img  { width: 60px; height: 60px; object-fit: contain; }
.tech-card span { font-size: 1.2rem; font-weight: 500; color: white; }