/* --- 1. GLOBAL RESET & VARIABLES --- */
:root {
    --color-primary-dark: #0a0a1a; /* Very dark space blue */
    --color-secondary-dark: #1a1a2e; /* Slightly lighter blue */
    --color-light-text: #e0e0e0;
    --color-white: #ffffff;
    --color-accent: #00aaff; /* A professional tech blue */
    --color-glow-blue: rgba(0, 170, 255, 0.7); /* A softer, more translucent glow blue */
    --color-glow-blue-strong: rgba(0, 170, 255, 1); /* Opaque glow for inner shadow */
    
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Lato', sans-serif;

    /* --- NEW: Default mouse positions --- */
    --mouse-x: 50vw;
    --mouse-y: 50vh;
}

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

html {
    /* scroll-behavior: smooth; */
    font-size: 16px;
    /* scroll-padding-top: 70px; /* Adjust this value based on your header height */
}

body {
    background-color: var(--color-primary-dark);
    color: var(--color-light-text);
    font-family: var(--font-body);
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden; 
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-white);
    font-weight: 700;
    margin-bottom: 1rem;
}

h2 {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 3rem;
    letter-spacing: 1px;
}

/* --- PREMIUM SOLID TITLES WITH ANIMATED UNDERLINE --- */
.content-section h2 {
    color: var(--color-white);
    background: none;
    -webkit-text-fill-color: initial;
    
    /* Shrinks the hover zone so the underline matches the text length perfectly */
    position: relative; 
    width: fit-content;
    margin-inline: auto; 
    
    /* Faint base glow */
    text-shadow: 0 0 10px rgba(0, 170, 255, 0.2); 
    transition: text-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* 1. The Text Hover Effect */
.content-section h2:hover {
    text-shadow: 0 0 15px var(--color-accent);
    transform: scale(1.02);
}

/* 2. The Premium Underline Setup (Hidden by default) */
.content-section h2::after {
    content: '';
    position: absolute;
    bottom: -8px; /* Spacing below the text */
    left: 0;
    width: 100%;
    height: 2px; /* Thin, sharp tech line */
    background: var(--color-accent);
    box-shadow: 0 0 10px var(--color-accent); /* Gives the line a neon glow */
    
    /* Animation Physics: Starts at 0 width from the center */
    transform: scaleX(0);
    transform-origin: center; 
    
    /* A high-end "bouncy" easing curve for the expansion */
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 3. The Underline Hover Effect (Expands to full width) */
.content-section h2:hover::after {
    transform: scaleX(1);
}

p {
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
}

a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--color-white);
}

img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.content-section {
    padding: 6rem 0;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    position: relative;
    z-index: 2;
}

.content-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- GLOW SNIPPET INTEGRATION --- */
/* Base button style, modified for glow */
.cta-button {
    display: inline-block;
    background: var(--color-accent);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-weight: 600;
    padding: 0.8rem 2rem;
    border-radius: 30px;
    letter-spacing: 1px;
    transition: all 0.3s ease-in-out; /* Smoother transition for glow */
    position: relative;
    overflow: hidden; /* Important for inner glow effect */
    border: 1px solid var(--color-accent); /* Soft border for definition */
}

.cta-button:hover {
    background: var(--color-white); /* White background on hover */
    color: var(--color-primary-dark); /* Dark text on white background */
    transform: translateY(-3px) scale(1.02); /* Slightly more pronounced lift and scale */
    box-shadow: 
        0 0 10px var(--color-glow-blue), /* Soft outer glow */
        0 0 20px var(--color-glow-blue),
        0 0 30px var(--color-glow-blue);
    border-color: var(--color-white); /* White border on hover */
}

/* Optional: Add a subtle inner glow effect similar to Disney+/Hotstar's active states */
/* This creates a light source effect from within the button */
.cta-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: var(--color-glow-blue-strong);
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: all 0.4s ease-out;
    filter: blur(15px); /* Soften the inner glow */
    z-index: 0; /* Ensure it stays behind text */
}

.cta-button:hover::before {
    width: 120%; /* Expand to cover the button */
    height: 120%;
    opacity: 0.3; /* Subtle opacity */
}


/* --- NEW: Hero Section Buttons --- */

/* This makes the buttons smaller and sets the NEW DARKER blue as the default */
.hero-buttons .cta-button {
    padding: 0.6rem 1.5rem; 
    font-size: 0.85rem; 
    
    background: #1a1a2eb3; /* Your new darker blue */
    border-color: #017ab7; /* Makes the border match */

    animation: random-wiggle-animation 10s ease-in-out infinite;
}

/* This NEW rule fixes the hover, bringing back the original white style */
.hero-buttons .cta-button:hover {
    background: var(--color-white); /* Original white background */
    color: var(--color-primary-dark); /* Original dark text */
    border-color: var(--color-white); /* Original white border */

    /* This brings back the original glow from the .cta-button:hover rule */
    box-shadow: 
        0 0 10px var(--color-glow-blue), 
        0 0 20px var(--color-glow-blue),
        0 0 30px var(--color-glow-blue);
}

.hero-buttons {
    display: flex; /* Make buttons sit side-by-side */
    gap: 1.5rem; /* Space between the buttons */
    margin-top: 2.5rem; /* Add some space above the buttons */
    flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
}

/* --- NEW: Typography Styles (FIXED) --- */
blockquote {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-style: italic;
    color: var(--color-accent);
    border-left: 4px solid var(--color-accent);
    padding-left: 1.5rem;
    margin: 2rem 0 0 0;
}

/* --- NEW: Section Subtitle --- */
.section-subtitle {
    text-align: center;
    color: var(--color-accent); /* Same blue as the quote */
    font-size: 1.2rem;
    font-style: italic;
    font-family: var(--font-body);
    margin-top: -2.5rem; /* Pull it closer to the title */
    margin-bottom: 3rem; /* Add space below it */
}

/* --- NEW: Style for Icons in About Section Paragraphs --- */
.about-text p {
    display: flex; /* Aligns icon and text horizontally */
    align-items: flex-start; /* Aligns content to the top (best for long text) */
    gap: 10px; /* Space between the icon and the text */
}

/* Target the paragraphs inside the About section */
.about-text p {
    margin-bottom: 14px; /* Reduce this number to bring points closer together */
    line-height: 1.5;    /* Ensures the text itself isn't too cramped */
}

/* Optional: Keep the very first (bolder) paragraph with its original spacing */
.about-text p:first-child {
    margin-bottom: 20px; 
}


.para-icon {
    flex-shrink: 0; /* Prevents the icon from shrinking */
    color: var(--color-accent); /* Blue accent color */
    font-size: 1.2rem;
    margin-top: -3px; /* Small adjustment for vertical alignment */
}

/* --- NEW: Static Glow for About Section Icons --- */
.para-icon i {
    /* Adjust blur (8px) and opacity (0.5) for desired minimalism */
    text-shadow: 0 0 8px rgba(0, 170, 255, 0.5); 
}


/* This rule now ONLY applies to lists inside .content-section */
.content-section ul {
    list-style-type: none;
    margin-bottom: 1.5rem;
    padding-left: 0.5rem;
}

/* This rule now ONLY applies to list items inside .content-section */
.content-section ul li {
    position: relative;
    padding-left: 1.5rem; /* Space for the icon */
    margin-bottom: 0.75rem; /* More spacing for list items */
    font-size: 1.1rem;
}

/* This rule now ONLY applies to the icon before list items inside .content-section */
.content-section ul li::before {
    content: '\f105'; /* Font Awesome angle-right icon */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--color-accent);
    position: absolute;
    left: 0;
    top: 2px;
}


/* --- NEW: Section Divider Line --- */
.section-divider {
  border: none; /* Remove default 3D border */
  height: 1px; /* Set line thickness */
  background-color: rgba(255, 255, 255, 0.1); /* Match heading underline color */

  /* Match container width and centering */
  max-width: 1200px; 
  margin-left: auto;
  margin-right: auto;

  /* Adjust vertical spacing if needed (optional) */
  margin-top: 0; 
  margin-bottom: 0;

  /* Ensure it respects container padding on smaller screens */
  width: calc(100% - 4rem); /* 100% minus left/right padding of container */
}

/* --- 2. INTERACTIVE BACKGROUND (CURSOR EFFECT) --- */

/* --- UPDATED: Smoother Interactive Background --- */
#interactive-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; 

    /* Smoothed Gradient Layers */
    background: 
        /* Layer 1: Much larger, very soft main accent glow */
        radial-gradient(
            1000px circle at var(--mouse-x) var(--mouse-y), /* Increased size significantly */
            rgba(0, 170, 255, 0.15), /* Kept opacity moderate */
            rgba(80, 0, 180, 0.05),  /* Reduced purple opacity */
            transparent 80%          /* Softer fade-out (was 70%) */
        ),
        /* Layer 2: Even larger, extremely subtle secondary dark glow */
        radial-gradient(
            1200px circle at var(--mouse-x) var(--mouse-y), /* Increased size significantly */
            rgba(26, 26, 46, 0.1),  /* Reduced secondary dark opacity */
            transparent 85%         /* Much softer fade-out (was 80%) */
        );

    transition: background 0.1s linear; 
}


/* --- 3. HEADER & NAVIGATION --- */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 1.0rem 0;
    transition: all 0.3s ease;
    background: rgba(10, 10, 26, 0.5);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

nav .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


/* --- UPDATED: Transparent Logo with Custom CSS Background --- */
.nav-logo img {
    height: 34px; 
    width: 34px;   
    object-fit: cover; 
    border-radius: 8px; /* The rounded square shape */

    /* NEW: Creates a premium dark gradient directly behind your transparent photo */
    background: linear-gradient(135deg, #162235 0%, #0a0a1a 100%);

    /* The Glossy Frame */
    border: 1.5px solid rgba(255, 255, 255, 0.25); 
    box-shadow: 
        0 4px 6px rgba(0, 0, 0, 0.3), 
        0 0 10px rgba(0, 170, 255, 0.15); 

    transition: all 0.3s ease-in-out;
}

/* --- Minimalist Border-Only Hover Effect --- */
.nav-logo:hover img {
    /* 1. Only the border lights up blue */
    border-color: rgba(0, 170, 255, 0.9); 
    
    /* 2. Forces the logo to stay perfectly flat (no pop up) */
    transform: none; 
    
    /* 3. Overrides the glow, leaving only a basic, dark drop shadow */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); 
}

.nav-logo {
    display: flex;
    align-items: center;
}

.nav-links {
    display: flex;
    list-style: none; /* This is the default, which is fine */
}

.nav-links li {
    margin-left: 2rem;
    /* The specific list-item styles from above will NOT apply here */
}

.nav-links a {
    color: var(--color-white);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 1px;
    padding: 0.5rem;
    transition: color 0.3s ease;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--color-accent); /* Keep the blue text color */
    /* Add a subtle glow using your existing glow variable */
    text-shadow: 0 0 8px var(--color-glow-blue); 
}

.menu-toggle {
    display: none; /* Hidden on desktop */
    font-size: 1.5rem;
    color: var(--color-white);
    cursor: pointer;
}

/* --- 4. HERO (HOME) SECTION --- */
/* --- HERO (HOME) SECTION: Minimalistic Topographic Contour Pattern --- */
#home.hero {
  min-height: 100vh;
  height: auto;
  display: flex;
  align-items: center;
  padding-top: 60px;
  opacity: 1;
  transform: none;
  position: relative;
  z-index: 2;
  overflow: hidden;
}

#home.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 900'%3E%3Cg fill='none' stroke='%2340c8ff' stroke-width='1' stroke-opacity='0.07'%3E%3C!-- Wide sweeping open contours --%3E%3Cpath d='M-100,420 C150,320 350,500 600,380 S900,260 1300,400'/%3E%3Cpath d='M-100,460 C150,360 350,540 600,420 S900,300 1300,440'/%3E%3Cpath d='M-100,500 C150,400 350,580 600,460 S900,340 1300,480'/%3E%3Cpath d='M-100,540 C150,440 350,620 600,500 S900,380 1300,520'/%3E%3Cpath d='M-100,580 C150,480 350,660 600,540 S900,420 1300,560'/%3E%3C!-- Upper band --%3E%3Cpath d='M-100,160 C200,80 450,240 700,140 S1000,60 1300,180'/%3E%3Cpath d='M-100,200 C200,120 450,280 700,180 S1000,100 1300,220'/%3E%3Cpath d='M-100,240 C200,160 450,320 700,220 S1000,140 1300,260'/%3E%3C!-- Lower band --%3E%3Cpath d='M-100,680 C200,600 450,760 700,660 S1000,580 1300,700'/%3E%3Cpath d='M-100,720 C200,640 450,800 700,700 S1000,620 1300,740'/%3E%3C!-- Closed oval contours (left cluster) --%3E%3Cellipse cx='180' cy='300' rx='160' ry='80' transform='rotate(-12 180 300)'/%3E%3Cellipse cx='180' cy='300' rx='110' ry='50' transform='rotate(-12 180 300)'/%3E%3Cellipse cx='180' cy='300' rx='60' ry='25' transform='rotate(-12 180 300)'/%3E%3C!-- Closed oval contours (right cluster) --%3E%3Cellipse cx='980' cy='580' rx='180' ry='90' transform='rotate(8 980 580)'/%3E%3Cellipse cx='980' cy='580' rx='120' ry='55' transform='rotate(8 980 580)'/%3E%3Cellipse cx='980' cy='580' rx='65' ry='28' transform='rotate(8 980 580)'/%3E%3C!-- Subtle mid closed shape --%3E%3Cellipse cx='600' cy='200' rx='200' ry='70' transform='rotate(-5 600 200)'/%3E%3Cellipse cx='600' cy='200' rx='140' ry='42' transform='rotate(-5 600 200)'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
  /* Soft fade toward content side */
  mask-image: linear-gradient(to right, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 50%, transparent 80%);
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 50%, transparent 80%);
  /* Very slow, barely perceptible drift */
  animation: topoShift 60s ease-in-out infinite alternate;
}

@keyframes topoShift {
  0%   { transform: translateY(0px) scale(1); }
  100% { transform: translateY(-18px) scale(1.02); }
}

.hero-content {
    display: flex;
    align-items: center;
    justify-content: space-between; 
    gap: 3rem;
    width: 100%;
}

/* --- Hero Image - Liquid Morph (Clean Theme Border) --- */
.hero-image {
    flex-basis: 350px; 
    width: 350px; 
    height: 350px;
    position: relative; 
    
    /* The organic "blob" shape is the resting state */
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    
    /* Thinner 2px line, dimmed to 40% opacity */
    border: 2px solid rgba(0, 170, 255, 0.5); 
    
    /* UPDATED: A mild, noticeable glow for the resting state */
    box-shadow: 0 0 40px rgba(0, 170, 255, 0.4); 
        
    /* THE FIX 1: Use a dedicated animation that does NOT use 'transform' */
    animation: fadeInHeroImage 1.5s ease-out;
    
    /* THE FIX 2: Pre-build the 3D layer permanently so the browser is ready for JS */
    transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1);
    
    /* THE FIX 3: Explicitly transition ONLY shape and glow. NEVER use 'all 0.5s' here */
    transition: border-radius 0.5s ease-in-out, box-shadow 0.5s ease-in-out, border-color 0.5s ease-in-out !important;
    overflow: hidden;
}

/* THE FIX 4: The new entrance animation using 'top' instead of 'transform' */
@keyframes fadeInHeroImage {
    from { opacity: 0; top: 20px; }
    to { opacity: 1; top: 0; }
}

.hero-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; 
    height: 100%; 
    object-fit: cover;
    
    /* FIX 1: Centers the image to pull that bottom edge down */
    object-position: center; 
    
    transition: transform 0.5s ease;
    filter: brightness(1.1) contrast(1.05);
    
    /* FIX 2: Slightly zooms the image so all straight edges bleed entirely outside the frame */
    transform: scale(1.05); 
}

/* --- THE HOVER ACTIONS --- */
.hero-image:hover {
    border-color: rgba(0, 170, 255, 1);
    box-shadow: 0 0 60px rgba(0, 170, 255, 0.65);
    border-radius: 50%;
}

.hero-image:hover img {
    /* FIX 3: Increased from 1.1 to 1.15 so you still get a nice zoom effect on hover! */
    transform: scale(1.15); 
}


/* **** NEW: Hero Text styles **** */
.hero-text-content {
    flex-basis: 50%; /* Text container takes up more space */
    animation: fadeInHero 1.5s ease-out; /* Re-using old animation */
}

/* --- UPDATED: Hero Text Base Styles (No Animation) --- */
.hero-greeting {
    font-size: 1.5rem;
    font-family: var(--font-body);
    margin-bottom: 0.5rem;
    
    /* Base color is ACCENT BLUE */
    color: var(--color-accent);
    transition: text-shadow 0.3s ease-in-out; /* Add transition */
    
    /* Remove any transition if present */
}

.hero-title {
    font-size: 4.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;

    /* Base color is WHITE */
    color: var(--color-white);
    transition: text-shadow 0.3s ease-in-out; /* Add transition */
}

/* --- UPDATED: Apply Static Glow on Direct Text Hover --- */
.hero-greeting:hover,
.hero-title:hover {
    /* Apply a constant, steady glow */
    text-shadow: 0 0 15px var(--color-accent); /* Adjust 15px for glow size */
    /* Add transition for smooth appearance (optional but recommended) */
    transition: text-shadow 0.3s ease-in-out;
}


.hero-subtitle {
    font-size: 1.5rem;
    color: var(--color-light-text);
    margin-bottom: 2rem;
}

/* --- NEW: Underline for Typed Subtitle --- */
.hero-subtitle .typed {
    border-bottom: 2px solid var(--color-accent); /* Blue underline */
    padding-bottom: 2px; /* Small space below text */
}

@keyframes fadeInHero {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- 5. ABOUT SECTION --- */
.about-content {
    display: flex;
    align-items: center;
    gap: 3rem;
}

/* Pulls the About Me content closer to the title */
#about h2 {
    margin-bottom: 0.8rem; /* You can change this to 1.5rem or 0.5rem to get the exact look you want */
}

.about-text {
    flex: 2;
    position: relative; /* Needed for positioning pseudo-elements */
    padding: 2rem; /* Add padding to make space for the border */
    /* Optional: Add a subtle background if needed */
    background-color: rgba(26, 26, 46, 0.3);
    border-radius: 8px;
}

/* --- Adjust Font Size for About Section Paragraphs --- */
#about .about-text p {
    font-size: 0.90rem; /* Adjust this value */
}

/* --- NEW: Decorative Border for About Text --- */
.about-text::before,
.about-text::after {
    content: '';
    position: absolute;
    width: 30px; /* Length of the border lines */
    height: 30px; /* Length of the border lines */
    border-color: var(--color-accent); /* Blue accent color */
    border-style: solid;
}

/* Top-left corner bracket */
.about-text::before {
    top: 0;
    left: 0;
    border-width: 2px 0 0 2px; /* Top and Left borders */
}

/* Bottom-right corner bracket */
.about-text::after {
    bottom: 0;
    right: 0;
    border-width: 0 2px 2px 0; /* Bottom and Right borders */
}

/* --- UPDATED: About Image Container --- */
.about-image {
    flex: 1;
    text-align: center;
}

/* --- UPDATED: Image Wrapper for Perfect Border --- */
.about-image .img-wrapper {
    width: 350px;
    height: 350px;
    margin: 0 auto;
    overflow: hidden; 
    position: relative; 
    border-radius: 25px; 
    
    border: none; 
    box-shadow: 0 0 30px rgba(0, 170, 255, 0.3); 
    transform: translateZ(0); 
    transition: box-shadow 0.4s ease-in-out; 
}

/* THE FIX 1: Create an invisible overlay to draw the border strictly ON TOP of the image */
.about-image .img-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 25px; 
    border: 3px solid transparent; /* Invisible by default */
    box-sizing: border-box; /* Forces the border to draw inward */
    transition: border-color 0.4s ease-in-out;
    pointer-events: none; /* Allows the mouse to pass through to the image */
    z-index: 2; /* Keeps the line above the photo */
}

/* --- Inner Image Style --- */
.about-image .img-wrapper img {
    width: 100%; 
    height: 100%;
    object-fit: cover;
    
    /* THE FIX 2: Override the global 8px radius to match the 25px container perfectly */
    border-radius: 25px; 
    display: block; /* Removes any default bottom spacing */
    
    transition: transform 0.5s ease-in-out;
}

/* --- Animate Perfect Border on Hover --- */
.about-image .img-wrapper:hover {
     box-shadow: 0 0 40px rgba(0, 170, 255, 0.45); 
}

/* Light up the top-layer border overlay */
.about-image .img-wrapper:hover::after {
     border-color: var(--color-accent); 
}

/* Optional: Adds a very subtle zoom to the photo when hovered */
.about-image .img-wrapper:hover img {
    transform: scale(1.05); 
}


/* --- NEW: Resume Timeline Section --- */
.timeline-container {
    display: grid;
    grid-template-columns: 1fr; /* Single column on mobile */
    gap: 3rem;
    margin-top: 2rem;

    max-width: 950px; /* Make timeline narrower (adjust 900px as needed) */
    margin-left: auto; /* Center the container */
    margin-right: auto; /* Center the container */
}

/* On desktop, create two columns */
@media (min-width: 768px) {
    .timeline-container {
        grid-template-columns: 1fr 1fr; /* Two equal columns */
    }
}

.timeline-column h3 {
    font-size: 1.8rem;
    color: var(--color-accent);
    margin-bottom: 2rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.timeline-column h3 i {
    text-shadow: 0 0 8px rgba(0, 170, 255, 0.5); /* This adds the exact same glow as the About section */
}

.timeline {
    position: relative;
    /* Create the vertical line */
    border-left: 2px solid var(--color-accent); 
    padding-left: 2.5rem; /* Space for cards to branch off */
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.timeline-item {
    position: relative;
    margin-bottom: 2rem; /* Space between cards */
}

/* The glowing dot on the timeline */
.timeline-dot {
    position: absolute;
    left: -2.87rem; /* Your custom value */
    top: 0.5rem; /* Align with card title */
    width: 11px;  /* Your custom value */
    height: 11px; /* Your custom value */
    background: var(--color-accent);
    border-radius: 50%;

    /* REMOVED static box-shadow */
    /* ADDED breathing glow animation */
    animation: dot-breath-glow 1.5s ease-in-out infinite alternate;
}

/* --- NEW: Apply unique delays to each timeline dot --- */
.timeline-item[data-aos="fade-right"][data-aos-delay="100"] .timeline-dot {
    animation-delay: 0s; /* First Education item */
}
.timeline-item[data-aos="fade-right"][data-aos-delay="200"] .timeline-dot {
    animation-delay: -1.2s; /* Second Education item */
}
.timeline-item[data-aos="fade-left"][data-aos-delay="100"] .timeline-dot {
    animation-delay: -0.6s; /* First Experience item */
}
.timeline-item[data-aos="fade-left"][data-aos-delay="200"] .timeline-dot {
    animation-delay: -1.8s; /* Second Experience item */
}

/* --- UPDATED TIMELINE CARDS (More Compact) --- */
.timeline-card {
    background: rgba(26, 26, 46, 0.7); 
    padding: 1rem 1rem; /* Reduced padding further */
    border-radius: 10px;
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    
    /* Reduced height to shrink the box */
    height: 125px; 
    display: flex;
    flex-direction: column;
    justify-content: center; 
}

.timeline-card:hover {
    transform: translateY(-5px); 
    box-shadow: 0 10px 45px rgba(0, 170, 255, 0.275);
    border-color: var(--color-accent);
}

.timeline-card h4 {
    font-size: 0.96rem; /* Smaller title */
    color: var(--color-white);
    margin-bottom: 0.2rem; /* Tighter spacing */
}

/* Target the standard paragraph (company/college name) */
.timeline-card p:not(.timeline-date) {
    font-size: 0.85rem; 
    margin-bottom: 0.2rem; 
    color: var(--color-accent); /* MOVED HERE: Makes the college/company blue */
    font-weight: 600; /* Added bold to make the institution name pop */
}

.timeline-card .timeline-date {
    font-size: 0.75rem; 
    color: #ffffff; /* CHANGED: Makes the date a clean, soft grey */
    font-weight: normal; /* Removed bold so it doesn't compete with the name */
    margin-bottom: 0; 
}

/* --- NEW: 'View Details' Button inside Cards --- */
.read-more-btn {
    margin-top: 0.4rem;
    font-size: 0.8rem;
    color: var(--color-accent); /* Signature blue */
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
    opacity: 0.7; /* Slightly dimmed by default */
    transition: all 0.3s ease;
    width: fit-content;
}

/* Make it light up when the user hovers over the card */
.timeline-card:hover .read-more-btn {
    opacity: 1;
    text-shadow: 0 0 8px rgba(0, 170, 255, 0.4); /* Subtle glow */
}

/* Nudge the arrow to the right on hover to suggest opening something */
.read-more-btn i {
    transition: transform 0.3s ease;
    font-size: 0.7rem;
}

.timeline-card:hover .read-more-btn i {
    transform: translateX(4px); 
}

/* Styling for lists inside timeline cards */
.timeline-card ul {
    list-style-type: none;
    padding-left: 0.5rem;
    margin-bottom: 0;
}
.timeline-card ul li {
    position: relative;
    font-size: 0.95rem;
    padding-left: 1.2rem;
    margin-bottom: 0.5rem;
}
.timeline-card ul li::before {
    content: '\f105'; /* Font Awesome angle-right */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--color-accent);
    position: absolute;
    left: 0;
    top: 2px;
    font-size: 0.9rem;
}

/* Fix for Achievements section heading */
#achievements h3 {
    font-size: 1.8rem;
    color: var(--color-accent);
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 0.5rem;
}
#achievements h3:first-of-type {
    margin-top: 0;
}

/* =========================================
   ACHIEVEMENTS & CERTIFICATIONS
   ========================================= */

#achievements h3 {
    font-size: 1.8rem;
    color: var(--color-accent);
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 0.5rem;
    
    /* CENTERING: This keeps the icon and text locked in the middle */
    display: flex;
    justify-content: center; 
    align-items: center;
    gap: 15px;
    text-align: center;
}

#achievements h3 i.fa-laptop-code {
    color: var(--color-accent);
    /* Standard subtle glow to match your theme, stays constant */
    text-shadow: 0 0 10px rgba(0, 170, 255, 0.5); 
    display: inline-block;
    transition: all 0.4s ease;
    perspective: 1000px;
}


/* =========================================
   OPTION 7 - GLASS GLOW CARDS (Interactive)
   ========================================= */

.cert-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

/* Base Card Styling - ORIGINAL BACKGROUND + GLOSSY BORDER ONLY */
.glass-cert-card {
    background: rgba(20, 20, 35, 0.4); /* Restored original background */
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 170, 255, 0.2); /* The new subtle blue border */
    border-radius: 16px;
    padding: 1.2rem;
    position: relative;
    overflow: hidden; 
    display: flex;
    flex-direction: column;
    min-height: 180px; 
    transition: all 0.4s ease;
    z-index: 1;
    text-decoration: none;
}


/* --- THE AMBIENT GLOW ORB --- */
.glow-orb {
    position: absolute;
    bottom: -40px;
    right: -40px;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    filter: blur(40px); 
    opacity: 0.15;
    z-index: -1; 
    transition: all 0.4s ease;
}

/* --- FIXED SMALL BADGE ICONS (CSS POP) --- */
.small-badge-icon {
    height: 55px; 
    width: auto;
    object-fit: contain;
    /* Initial state: hidden and small */
    opacity: 0;
    transform: scale(0.5);
    /* Smooth "bouncy" entrance */
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)); 
}

/* This triggers the pop automatically when the card scrolls into view */
.glass-cert-card.aos-animate .small-badge-icon {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.4s; /* Wait for card to appear first */
}

/* Maintain the hover zoom effect */
.glass-cert-card:hover .small-badge-icon {
    transform: scale(1.1);
}

/* Azure Colors (Matching Theme) */
.glass-cert-card.azure .glow-orb { background: var(--color-accent); }
.glass-cert-card.azure .provider { color: var(--color-accent); }
.glass-cert-card.azure .exam-code { color: var(--color-accent); }
.glass-cert-card.azure .brand-icon { color: var(--color-white); }

/* AWS Colors (Matching Theme) */
.glass-cert-card.aws .glow-orb { background: #ff9900; }
.glass-cert-card.aws .provider { color: #ff9900; }
.glass-cert-card.aws .exam-code { color: #ff9900; }
.glass-cert-card.aws .brand-icon { color: var(--color-white); }

/* --- CARD LAYOUT & TYPOGRAPHY --- */

.card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.2rem; /* REDUCED: from 2rem to 0.8rem to pull text up */
}

/* Increased Logo Size */
.brand-icon {
    width: 34px;
    height: 34px;
    font-size: 34px; /* For the AWS font-awesome icon */
    transition: transform 0.3s ease;
}

/* The Green 'Active' Badge - MOVED UP */
.status-badge {
    border: 1px solid rgba(16, 185, 129, 0.4);
    color: #10b981; 
    background: rgba(16, 185, 129, 0.05);
    padding: 0.15rem 0.6rem; /* Slightly slimmer padding */
    border-radius: 20px;
    font-size: 0.7rem; /* Slightly smaller text for better proportion */
    font-weight: 600;
    letter-spacing: 0.5px;
    
    /* THE FIX: Negative margin pulls the badge higher than the logo */
    margin-top: -15px; 
}

.card-content {
    flex-grow: 1;
}

.provider {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 0.5rem;
}

.cert-name {
    font-size: 1.15rem;
    color: var(--color-white);
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 0;
}

/* Bottom Row Layout - TIGHTENED GAP */
.card-bottom {
    margin-top: 1.25rem;   /* REDUCED: from 2rem to 0.8rem */
    padding-top: 1.25rem;  /* REDUCED: from 1rem to 0.8rem */
    border-top: 1px solid rgba(255, 255, 255, 0.05); 
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Increased Visibility for Exam Code */
.exam-code {
    font-size: 1rem;
    font-weight: 800; /* Bolder */
    opacity: 1; /* Removed the fade */
    letter-spacing: 1px;
}

/* The New "View Certification" Button */
.view-cert-btn {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.05);
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    border: 1px solid transparent;
    text-decoration: none; /* Prevents underline on the link */
}

/* --- FIXED HOVER EFFECTS (FIXES SLOW-MO RETURN) --- */

/* 1. Base State Reset: This handles the "Hover Out" speed */
.glass-cert-card.aos-animate {
    /* This forces the card to return to its original position in 0.3s instead of 0.8s */
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease !important;
}

/* 2. The Card Lift - Handles the "Hover In" speed */
.glass-cert-card[data-aos].aos-animate:hover {
    transform: translateY(-5px) !important;
    
    /* Using !important overrides the AOS internal transform lock */
    transition: transform 0.3s ease-out, border-color 0.3s ease, box-shadow 0.3s ease !important;
    
    border-color: rgba(0, 170, 255, 0.6); 
    box-shadow: 0 10px 30px rgba(0, 170, 255, 0.15); 
}

/* 3. Badge & Logo Zoom (Snappy In and Out) */
.small-badge-icon, .brand-icon {
    /* Ensures the icons return to normal size quickly when mouse leaves */
    transition: transform 0.3s ease !important;
}

.glass-cert-card:hover .small-badge-icon,
.glass-cert-card:hover .brand-icon {
    transform: scale(1.1) !important;
    transition: transform 0.2s ease-out !important;
}

/* 4. Orb Brightens on Hover */
.glass-cert-card:hover .glow-orb {
    opacity: 0.4;
    transform: scale(1.2);
    transition: all 0.3s ease-out !important;
}

/* 5. Button Glow Overrides (Azure & AWS) */
.glass-cert-card.azure:hover .view-cert-btn {
    color: var(--color-accent);
    border-color: var(--color-accent);
    box-shadow: 0 0 10px rgba(0, 170, 255, 0.3);
}

.glass-cert-card.aws:hover .view-cert-btn {
    color: #ff9900;
    border-color: #ff9900;
    box-shadow: 0 0 10px rgba(255, 153, 0, 0.3);
}

/* --- REWARDS SUB-SECTION GRID (CLASSIC 3-COLUMN) --- */
.reward-grid {
    display: grid;
    grid-template-columns: repeat(3, 380px);
    
    /* THE FIX: Increased row spacing while keeping column spacing (1.5rem) */
    gap: 2rem 1.5rem; 
    
    margin-top: 2rem;
    justify-content: center;
}

/* Base Card Styling - ORIGINAL BACKGROUND + GLOSSY BORDER ONLY */
.reward-card {
    background: rgba(26, 26, 46, 0.4); 
    backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 170, 255, 0.2); 
    border-radius: 20px;
    padding: 1.2rem 2rem; 
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 380px; 
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
    position: relative;
    
    /* THE FIX: Traps the glowing orb inside the rounded corners */
    overflow: hidden; 
}

/* --- NEW: Reward Card Ambient Glow Orbs (Dual Underglow) --- */
/* 1. The original orb on the bottom-right */
.reward-card .glow-orb {
    background: var(--color-accent); 
    z-index: 0; 
    left: auto; 
    right: -40px; 
    bottom: -40px;
    transform: none; 
    
    /* THE FIX: Lowered base opacity from 0.15 to 0.08 */
    filter: blur(40px);
    opacity: 0.08; 
}

/* 2. The cloned orb on the bottom-left */
.reward-card::before {
    content: '';
    position: absolute;
    bottom: -40px;
    left: -40px;
    width: 130px;
    height: 130px;
    background: var(--color-accent);
    border-radius: 50%;
    
    /* THE FIX: Lowered base opacity from 0.15 to 0.08 */
    filter: blur(40px);
    opacity: 0.08; 
    
    z-index: 0;
    transition: all 0.3s ease-out;
    pointer-events: none; 
}

/* 3. The Hover Effect */
.reward-card:hover .glow-orb,
.reward-card:hover::before {
    /* THE FIX: Lowered hover opacity from 0.4 to 0.2 */
    opacity: 0.2; 
    
    /* THE FIX: Reduced the hover expansion from 1.2 to 1.1 */
    transform: scale(1.1) !important; 
    transition: all 0.3s ease-out !important;
}

/* Make sure the text and slider stay ABOVE the glowing orbs */
.reward-card .reward-slider,
.reward-card .reward-info {
    position: relative;
    z-index: 2;
}

/* --- NEW: Make the text container fill the card --- */
.reward-info {
    display: flex;
    flex-direction: column;
    flex-grow: 1; 
}

/* --- THE CLASSIC SNAPPY HOVER LIFT (PREMIUM GLOW) --- */
.reward-card[data-aos].aos-animate:hover,
.reward-card:hover {
    transform: translateY(-5px) !important;
    border-color: var(--color-accent) !important;
    
    /* THE PREMIUM TWEAK: Tighter blur (30px) and softer opacity (0.25) */
    box-shadow: 0 10px 30px rgba(0, 170, 255, 0.25) !important; 
}

/* --- IMAGE FITTING FOR REWARDS & RECOGNITION BOXES --- */
.reward-slider img {
    width: 100%; /* Scale image to fill parent container width */
    height: 100%; /* Scale image to fill parent container height */
    object-fit: cover; /* Scale image to fill *completely without distortion*, potentially cropping */
}

/* --- RECTANGLE PHOTO FRAME (3:2 ASPECT) --- */
.reward-slider {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2; 
    border-radius: 12px;
    overflow: visible; 
    background: rgba(0, 0, 0, 0.3);
}

.slider-img {
    /* THE FIX: This pins the image exactly to the 3:2 frame's corners */
    position: absolute;
    top: 0;
    left: 0;
    
    width: 100%;
    height: 100%;
    
    /* Forces the image to crop perfectly without squishing */
    object-fit: cover; 
    
    transition: opacity 0.4s ease-in-out;
    border-radius: 12px;
}

/* --- NAVIGATION BUTTONS (OUTSIDE & OUTLINE) --- */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    width: 24px; 
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
}

.slider-btn.prev { left: -1.7rem; }
.slider-btn.next { right: -1.7rem; }

.slider-btn:hover {
    background: transparent !important;
    border-color: var(--color-accent) !important;
    color: var(--color-accent) !important;
    box-shadow: 0 0 10px rgba(0, 170, 255, 0.3);
}

/* --- UPDATED: Reward Card Text Layout & Colors --- */
.reward-info .award-header {
    display: flex;
    flex-direction: column;
    gap: 6px; /* Spacing between the two lines */
    margin-bottom: 0.8rem;
    align-items: center; /* Centers the text */
    text-align: center;
}

/* 1. The "Recognized with:" Text */
.reward-info .recognized-text {
    font-size: 0.75rem;
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.5); /* Soft, faded grey */
    font-weight: 600;
}


/* 2. The Actual Award Name (With Animated Gradient) */
.reward-info .award-name {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.3;
    
    /* COPY YOUR CHOSEN GRADIENT HERE (Currently set to Option 1: Gold) */
    background: linear-gradient(90deg, #F3E5AB, #D4AF37, #F3E5AB);
    
    /* This makes the gradient large enough to slide around */
    background-size: 200% auto;
    
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    /* The Animation Trigger */
    animation: textShimmer 3s linear infinite;
    
    /* COPY YOUR CHOSEN GLOW COLOR HERE (Currently set to Option 1: Gold) */
    filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.4));
}

/* --- THE SHIMMER ANIMATION --- */
@keyframes textShimmer {
    to {
        background-position: 200% center;
    }
}

/* Fallback: Hide the old paragraph text just in case */
.reward-info p {
    display: none; 
}

/* --- THE "LUMINOUS FIBER-OPTIC" PREMIUM BUTTON --- */

/* 1. The Idle (Non-Hover) State */
.reward-info .read-more-btn {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    
    /* Brightened text and visible blue tint so the user knows it's a button */
    color: #ffffff; /* Change this to pure white */
    font-weight: 600; /* Add this to make the text slightly bolder */
    background: rgba(0, 170, 255, 0.05); 
    border: 1px solid rgba(0, 170, 255, 0.3); 
    box-shadow: 0 0 10px rgba(0, 170, 255, 0.1);

    padding: 0.6rem 1.6rem;
    border-radius: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: auto auto 0 auto !important;
    position: relative;
    
    /* Bouncy, expensive-feeling physics curve for the lift */
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Arrow icon inside the button */
.read-more-btn i {
    color: #00f2fe; /* Bright neon cyan */
    text-shadow: 0 0 8px rgba(0, 242, 254, 0.6); /* The base glow */
    margin-left: 5px; /* Keeps a nice gap between text and arrow */
    transition: all 0.3s ease;
}

/* Make the glow brighter when you hover over the button */
.read-more-btn:hover i {
    text-shadow: 0 0 15px rgba(0, 242, 254, 1);
    transform: translateX(4px); /* Optional: Slides the arrow to the right slightly */
}

/* 2. The Idle Arrow State */
.reward-info .read-more-btn i {
    font-size: 0.75rem;
    color: var(--color-accent); /* Tech-blue arrow so it pops out instantly */
    opacity: 0.9;
    transition: all 0.4s ease;
}

/* 3. THE PREMIUM HOVER LIGHTING */
.reward-card:hover .read-more-btn {
    /* Text snaps to crisp white */
    color: #ffffff !important; 
    background: rgba(0, 170, 255, 0.08); 
    border-color: rgba(0, 170, 255, 0.6); 

    /* THE MAGIC: 3D inner glow and outer drop shadow simultaneously */
    box-shadow: 
        inset 0 0 20px rgba(0, 170, 255, 0.4),  /* Deep inner blue glow */
        inset 0 0 5px rgba(255, 255, 255, 0.4), /* Sharp white inner rim light */
        0 10px 20px rgba(0, 170, 255, 0.15);    /* Soft outer shadow on the page */

    /* Satisfying physical lift toward the user */
    transform: translateY(-5px); 
}

/* 4. The Hover Arrow State */
.reward-card:hover .read-more-btn i {
    transform: translateX(5px); /* Arrow shoots forward */
    color: var(--color-accent);
    opacity: 1;
}

/* --- NEW: Rewards Modal Styles --- */
.reward-modal-slider {
    position: relative;
    width: 100%;
    height: 350px; /* Fixed height so the modal doesn't jump around */
    background: rgba(0, 0, 0, 0.4); /* Dark backdrop for the photos */
    border-radius: 12px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.reward-modal-slider img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* PERFECT FIT: shows the whole image without cropping */
    border-radius: 8px;
}

/* Reposition the navigation buttons inside the modal */
.reward-modal-slider .slider-btn {
    background: rgba(0, 0, 0, 0.6) !important; /* Slightly darker to see on images */
}
.reward-modal-slider .slider-btn.prev { left: 10px; }
.reward-modal-slider .slider-btn.next { right: 10px; }

#reward-modal-title {
    font-size: 1.6rem;
    color: var(--color-accent);
    margin-bottom: 1rem;
    font-family: var(--font-heading);
}

#reward-modal-story p {
    font-size: 1rem;
    color: var(--color-light-text);
    line-height: 1.6;
}

/* --- Premium Glossy Effect for Rewards Modal --- */
.reward-glass-modal {
    /* 1. The Glossy Transparent Effect from your Reward Cards */
    background: rgba(26, 26, 46, 0.4) !important; 
    border: 1px solid rgba(0, 170, 255, 0.2) !important;
    border-radius: 20px !important;
    
    /* 2. The Heavy Blur from your Academics Modal */
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    
    /* 3. A premium inner/outer shadow to make the glass pop */
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.05), 0 10px 40px rgba(0, 170, 255, 0.2) !important;
}

/* Make the close button slightly brighter so it's visible on the dark glass */
.reward-glass-modal .modal-close {
    color: var(--color-white);
    opacity: 0.8;
}
.reward-glass-modal .modal-close:hover {
    color: var(--color-accent);
    opacity: 1;
}


/* =========================================
   6. GLOSSY SKILLS SUB-SECTION (DESKTOP)
   ========================================= */
.skills-wrapper {
    margin-top: 4rem; 
}

/* --- Matches the exact style of the Academics & Career titles --- */
.skills-title {
    font-size: 1.8rem; /* Matched size to Academics/Career Journey */
    color: var(--color-accent); /* Blue accent color */
    margin-bottom: 2rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Matched underline */
    text-align: center; /* Aligned to the left */
}

/* This adds the exact same glow to the new icon as the other titles */
.skills-title i {
    text-shadow: 0 0 8px rgba(0, 170, 255, 0.5); 
}

/* This is the large glossy background box */
.skills-container {
    background: rgba(26, 26, 46, 0.4); 
    backdrop-filter: blur(12px); 
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 170, 255, 0.2); 
    border-radius: 20px;
    padding: 3rem;
    box-shadow: inset 0 0 20px rgba(0, 170, 255, 0.05), 0 10px 30px rgba(0,0,0,0.5); 
}

.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

/* These are the individual skill panels inside the box */
.skill-card {
    background: rgba(255, 255, 255, 0.03); 
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: left;
    transition: all 0.3s ease;
}

/* This matches your timeline hover effect EXACTLY */
.skill-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 45px rgba(0, 170, 255, 0.275);
    border-color: var(--color-accent);
}

.skill-card h3 {
    font-size: 1.2rem;
    color: var(--color-white);
    margin-bottom: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

/* Adds a tech-blue glow to the new Font Awesome icons */
.skill-card h3 i {
    color: var(--color-accent);
    font-size: 1.4rem;
    text-shadow: 0 0 10px rgba(0, 170, 255, 0.5); 
}

.skill-card p {
    font-size: 0.95rem;
    color: #b0b0b0; 
    line-height: 1.6;
    margin-bottom: 0;
}


/* --- 7. PROJECTS SECTION --- */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.project-card {
    background: rgba(26, 26, 46, 0.7);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden; 
    transition: all 0.3s ease;
}

.project-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(0, 170, 255, 0.2);
    border-color: var(--color-accent); /* Added this line for consistency */
}

.project-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.project-card h3 {
    font-size: 1.4rem;
    padding: 1.5rem 1.5rem 0.5rem 1.5rem;
}

.project-card p {
    font-size: 1rem;
    padding: 0 1.5rem 1rem 1.5rem;
    margin-bottom: 0.5rem;
}

.project-link {
    display: inline-block;
    padding: 0 1.5rem 1.5rem 1.5rem;
    font-weight: 700;
}


/* --- 8. CONTACT SECTION --- */
#contact {
    text-align: center;
}

.contact-subtitle {
    font-size: 1.2rem;
    max-width: 600px;
    margin: 0 auto 2.5rem auto;
}


/* --- NEW: Contact Section Buttons Container --- */
.contact-buttons {
  display: flex; /* Makes items sit side-by-side */
  justify-content: center; /* Centers the group of buttons */
  gap: 2rem; /* Spacing between the Email and LinkedIn buttons */
  margin-top: 2.5rem;
  flex-wrap: wrap;
}

/* --- UPDATED: Contact Section Text + Icon Buttons (Inherit Global CTA Style) --- */
.contact-buttons .cta-button {
  font-size: 2rem; /* Reduced from 1.75rem (Makes the icons slightly smaller) */

  display: inline-flex;
  align-items: center;
  justify-content: center; 
  gap: 8px; 

  /* Reduced the overall button width from 140px to 110px */
  width: 120px; 

  /* Shrunk the top/bottom and left/right padding */
  padding: 0.6rem 1rem; 
  border-radius: 30px; 
}

/* --- Shake ONLY the specific button being hovered --- */
.contact-buttons .cta-button:hover {
    animation: shake-animation 0.4s ease-in-out;
}

/* Stop shake and apply default CTA hover effect on direct hover */
.contact-buttons .cta-button:hover {
    /* Default .cta-button:hover styles will apply */
    animation: none; /* Stops the shake animation */
}

/* --- 9. FOOTER --- */
footer {
    padding: 2rem 0;
    text-align: center;
    background: var(--color-primary-dark);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 4rem;
    position: relative; 
    z-index: 2;
}

footer p {
    margin-bottom: 0;
    font-size: 0.9rem;
    color: var(--color-light-text);
}

/* --- NEW: Timeline Modal Styles --- */
.modal-overlay {
    position: fixed;
    inset: 0;
    /* Darkened to 0.7 for better focus, but still lets glow through */
    background: rgba(10, 10, 30, 0.7); 
    /* Increased blur to soften the background shapes */
    backdrop-filter: blur(6px); 
    -webkit-backdrop-filter: blur(6px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    position: relative;
    background: rgba(26, 26, 46, 0.95); 
    backdrop-filter: blur(15px); 
    border-radius: 15px;
    
    border: 1px solid rgba(0, 170, 255, 0.5); 
    box-shadow: 0 0 20px rgba(0, 170, 255, 0.15), 
                0 0 8px rgba(0, 170, 255, 0.3);   
    
    padding: 2.5rem;
    width: 100%;
    max-width: 900px; 
    max-height: 90vh;
    overflow-y: auto;

    /* --- NEW: 3D Flip Starting State --- */
    opacity: 0; 
    /* Starts flipped 90 degrees away and scaled down to 50% */
    transform: perspective(1200px) rotateY(-90deg) scale(0.5); 
    transition: all 0.8s ease-in-out; /* Changed from 0.5s to 0.8s, and removed the bounce */ 
}

/* --- NEW: Reverse Starting State for Career Column --- */
/* Instead of starting at -90deg (left), it starts at +90deg (right) */
.modal-content.reverse-flip {
    transform: perspective(1200px) rotateY(90deg) scale(0.5); 
    transition: all 0.8s ease-in-out; /* NEW: Handles Academics closing */
}

/* --- NEW: 3D Flip Ending State (When Opened) --- */
.modal-overlay.active .modal-content {
    opacity: 1;
    /* Flips back to flat (0deg) and pops up to full size (1) */
    transform: perspective(1200px) rotateY(0deg) scale(1);
    /* We moved the bouncy 0.5s animation here so it ONLY happens when opening */
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* --- Modal Company/University Subtitle --- */
#modal-subtitle {
    font-size: 1.05rem;
    color: var(--color-white);
    margin-bottom: 1rem;
    opacity: 0.9;
}

.modal-close {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    font-size: 2.5rem;
    color: var(--color-light-text);
    cursor: pointer;
    line-height: 1;
    transition: color 0.3s ease;
}
.modal-close:hover {
    color: var(--color-accent);
}

#modal-title {
    font-size: 1.8rem;
    color: var(--color-accent);
    margin-bottom: 0.5rem;
}
#modal-date {
    font-size: 1rem;
    color: var(--color-light-text);
    font-weight: 600;
    margin-bottom: 1.5rem;
}

/* Style for text/lists inside the modal */
#modal-summary p,
#modal-summary ul li {
    font-size: 1rem;
    color: var(--color-light-text);
}

/* Ensure modal list styling matches timeline cards */
#modal-summary ul {
    list-style-type: none;
    padding-left: 0.5rem;
    margin-bottom: 0;
}
#modal-summary ul li {
    position: relative;
    padding-left: 1.2rem;
    margin-bottom: 0.5rem;
}
#modal-summary ul li::before {
    content: '\f105';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--color-accent);
    position: absolute;
    left: 0;
    top: 2px;
    font-size: 0.9rem;
}

/* --- NEW: SHAKE ANIMATION KEYFRAMES --- */
@keyframes shake-animation {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-2px, 0); }
  40% { transform: translate(2px, 0); }
  60% { transform: translate(-2px, 0); }
  80% { transform: translate(2px, 0); }
  100% { transform: translate(0, 0); }
}


@keyframes breathing-outline-glow {
  0%   { 
    /* The glow starts subtle, using your accent color */
    text-shadow: 0 0 5px var(--color-accent); 
  }
  50%  { 
    /* The glow gets brighter and wider */
    text-shadow: 0 0 20px var(--color-accent);
  }
  100% { 
    text-shadow: 0 0 5px var(--color-accent);
  }
}

/* --- NEW: PULSE ANIMATION KEYFRAMES --- */
@keyframes random-wiggle-animation {
  0%   { transform: translate(0, 0); }
  15%  { transform: translate(-1px, 2px); }
  30%  { transform: translate(2px, -1px); }
  45%  { transform: translate(1px, 1px); }
  60%  { transform: translate(-2px, -2px); }
  75%  { transform: translate(0px, 2px); }
  100% { transform: translate(0, 0); }
}


/* --- NEW: Animation for gentle breathing (scaling) --- */
@keyframes star-breathe {
  from { transform: scale(0.8); }
  to { transform: scale(1.2); }
}

/* --- NEW: Animation for twinkling (opacity) --- */
@keyframes star-twinkle {
  from { opacity: 0.5; }
  to { opacity: 1; }
}

.typed-cursor {
  opacity: 1;
  animation: typedjsBlink 0.7s infinite;
  color: var(--color-accent); /* Make cursor blue */
  font-weight: bold; /* Optional: makes cursor slightly thicker */
}
@keyframes typedjsBlink {
  50% { opacity: 0.0; }
}

@keyframes typedjsBlink {
  50% { opacity: 0.0; }
}

/* --- NEW: Keyframes for Dot Breathing Glow --- */
@keyframes dot-breath-glow {
  from { 
    opacity: 0.7;
    /* Start with a subtle glow */
    box-shadow: 0 0 8px 3px rgba(0, 170, 255, 0.4);
  }
  to { 
    opacity: 1;
    /* End with a stronger glow */
    box-shadow: 0 0 15px 5px rgba(0, 170, 255, 0.7);
  }
}

/* --- FINAL REFINED TECH HOVER EFFECTS --- */

/* Base icon setup */
.skill-card h3 i {
    display: inline-block;
    transition: all 0.3s ease;
}

/* 1. Cloud Platforms: "Passing Drift" (KEEPING - You liked this) */
@keyframes cloudDrift {
    0% { transform: translateX(-12px); opacity: 0; }
    20% { transform: translateX(-6px); opacity: 1; }
    80% { transform: translateX(6px); opacity: 1; }
    100% { transform: translateX(12px); opacity: 0; }
}
.skill-card:nth-child(1):hover h3 i {
    animation: cloudDrift 2s linear infinite;
}

/* 2. Migration: "Vertical Upload Loop" (The Arrow Effect) */
/* This makes the whole icon thrust upward, fade, and reset from the bottom */
@keyframes uploadArrow {
    0% { transform: translateY(0); opacity: 1; }
    40% { transform: translateY(-15px); opacity: 0; } /* Arrow/Cloud flies up */
    41% { transform: translateY(15px); opacity: 0; }  /* Instantly teleports to bottom */
    100% { transform: translateY(0); opacity: 1; }   /* Slides back into center */
}
.skill-card:nth-child(2):hover h3 i {
    animation: uploadArrow 1.2s ease-in-out infinite;
}

/* 3. Infrastructure: "Box by Box" loading effect */
/* Uses a stepped clip to simulate the 3 hierarchy boxes appearing */
@keyframes infraLoading {
    0% { clip-path: inset(50% 0 0 0); opacity: 0.4; }    /* Bottom boxes only */
    50% { clip-path: inset(0 0 0 0); opacity: 1; }      /* Whole icon */
    100% { clip-path: inset(0 0 50% 0); opacity: 0.4; } /* Top box only */
}
.skill-card:nth-child(3):hover h3 i {
    animation: infraLoading 1.5s steps(3) infinite;
}

/* 4. Core Strengths: Thunder (KEEPING - Your favorite) */
@keyframes thunderStrike {
    0%, 100% { opacity: 1; transform: scale(1) skew(0); }
    10% { opacity: 0.3; transform: scale(1.3) skew(-10deg); color: #fff; text-shadow: 0 0 15px #00aaff; }
    15% { opacity: 1; transform: scale(1) skew(0); }
    20% { opacity: 0.5; transform: scale(1.2) skew(5deg); }
    25% { opacity: 1; }
}
.skill-card:nth-child(4):hover h3 i {
    animation: thunderStrike 1.5s linear infinite;
}

/* 5. Operations: "Shield Pulse" (Better than Fold) */
/* A strong 3D heartbeat that feels like a protective barrier */
@keyframes shieldPulse {
    0% { transform: scale(1) rotateY(0deg); }
    50% { transform: scale(1.25) rotateY(180deg); color: #fff; }
    100% { transform: scale(1) rotateY(360deg); }
}
.skill-card:nth-child(5):hover h3 i {
    animation: shieldPulse 2s ease-in-out infinite;
}

/* 6. Disaster Recovery: Slow Spin (KEEPING - Your favorite) */
@keyframes slowSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.skill-card:nth-child(6):hover h3 i {
    animation: slowSpin 6s linear infinite;
}

/* --- Adjust Icon Size in All Section Titles --- */
h2 i, h3 i {
    font-size: 0.85em; /* Makes the icon slightly smaller than the text */
}

/* --- SECTION TITLE ICON HOVERS (CONSOLIDATED) --- */

/* 1. Base setup: Ensure all title icons are ready to animate */
h3 i {
    display: inline-block;
    transition: all 0.3s ease;
}

/* 2. Academics: The "Toss & Tilt" */
h3:hover i.fa-graduation-cap {
    animation: capToss 1.2s ease-in-out infinite;
    color: var(--color-accent); /* Tech Blue */
}

@keyframes capToss {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-6px) rotate(-15deg); }
}

/* 3. Career Journey: The "Climbing Launch" */
h3:hover i.fa-arrow-up-right-dots {
    animation: arrowClimb 1s ease-in-out infinite;
    color: var(--color-accent);
}

@keyframes arrowClimb {
    0% { transform: translate(0, 0); opacity: 1; }
    50% { transform: translate(5px, -5px); opacity: 0.7; }
    100% { transform: translate(0, 0); opacity: 1; }
}

/* 4. Skills & Expertise: The "Tightening Wrench" */
.skills-title:hover i.fa-tools {
    animation: wrenchTurn 0.8s ease-in-out infinite;
    color: var(--color-accent);
}

@keyframes wrenchTurn {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-25deg); }
    75% { transform: rotate(25deg); }
}

/* 5. Certifications & Learning: The "Laptop Tilt" */
h3:hover i.fa-laptop-code {
    animation: laptopTilt 1.5s ease-in-out infinite;
    color: var(--color-accent);
}

@keyframes laptopTilt {
    0%, 100% { transform: rotateX(0deg) translateY(0); }
    50% { transform: rotateX(20deg) translateY(-5px); }
}

/* 6. Rewards & Recognition: The "Medal Swing" */
h3:hover i.fa-medal {
    animation: medalSwing 1.2s ease-in-out infinite;
    color: var(--color-accent);
}

@keyframes medalSwing {
    0%, 100% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(-15deg) scale(1.1); }
    75% { transform: rotate(15deg) scale(1.1); }
}


/* --- 10. RESPONSIVE DESIGN (Mobile) --- */
@media (max-width: 768px) {
    
    /* --- Global Mobile Resets --- */
    html, body {
        overflow-x: hidden; /* Kills horizontal scroll strictly */
        width: 100%; 
    }
    
/* --- Shrink the top navigation bar --- */
    header {
        padding: 0.6rem 0; 
    }

    /* --- section titles --- */
    h2 {
        font-size: 2.0rem;
        margin-top: 0; /* 1. Remove the old negative margin */
        position: relative; /* 2. Unlocks visual positioning */
        top: -1.25rem; /* 3. Visually nudges ONLY the title up without dragging the section */
    }


    /* --- 1. HERO / HOME SECTION (Fixes the Overlap & Text Wrap) --- */
    #home.hero {
        min-height: 100vh;
        height: auto; 
        padding-top: 100px; /* Pushes content safely below the fixed nav */
        padding-bottom: 80px; /* Creates a large safe gap above the next section */
        align-items: flex-start; /* Stops flexbox from aggressively centering and overlapping */
    }

    .hero-content {
        flex-direction: column; 
        text-align: center;
        gap: 1.5rem; 
    }


    .hero-text-content {
        flex-basis: auto;
        width: 100%;
        max-width: 100vw;
        padding: 0 10px; /* Safe breathing room on the edges */
    }

    .hero-title {
        /* UPDATED: Increased the minimum to 2.1rem and the scale to 9.5vw */
        font-size: clamp(2.5rem, 11.5vw, 2.8rem); 
        white-space: nowrap; 
    }

/* --- Shrinks the text dynamically based on the phone's screen size --- */
    .hero-subtitle {
        /* clamp() ensures it never gets too big or too small. 
           3.8vw means it shrinks and grows with the screen width! */
        font-size: clamp(0.75rem, 3.8vw, 1.1rem); 
        line-height: 1.5;
    }

    /* --- Forces the text to stay on exactly one line --- */
    .hero-subtitle .typed {
        white-space: nowrap; 
        display: inline-block; 
    }
    
    .hero-buttons {
        justify-content: center; 
        margin-top: 1.5rem;
    }

    /* --- 2. ABOUT SECTION (Fixes the Hidden Hamburger Menu) --- */
    .about-content {
        flex-direction: column-reverse; /* Text goes above image */
        gap: 2.5rem;
    }

    /* CRITICAL FIX: Shrinks the wrapper (not just the image) to stop screen stretching */
    .about-image .img-wrapper {
        width: 250px !important;
        height: 250px !important;
    }

    .about-image .img-wrapper img {
        width: 100%;
        height: 100%;
    }

    /* CRITICAL FIX: Recalculate border-wipe math for the 250px size */
    .about-image .img-wrapper::before {
        box-shadow: 0 calc(250px - 3px) 0 0 var(--color-accent) !important; 
    }

    .about-image .img-wrapper::after {
        box-shadow: calc(250px - 3px) 0 0 0 var(--color-accent) !important; 
    }

    
    .about-text {
        padding: 1.5rem; 
    }

    /* --- 3. NAVIGATION MENU --- */
    .menu-toggle {
        display: block;
    }

    .nav-links {
        display: none; 
        position: absolute;
        top: 100%; 
        left: 0;
        width: 100%;
        background: var(--color-primary-dark);
        flex-direction: column;
        align-items: center;
        padding: 1rem 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .nav-links.active {
        display: flex;
    }

    .nav-links li {
        margin: 0.5rem 0;
        margin-left: 0; /* Overrides desktop margin */
    }

/* --- 4. GRIDS & BUTTONS --- */
    .projects-grid {
        grid-template-columns: 1fr; /* Keeps projects stacking properly */
    }

    /* --- GLOSSY SKILLS SUB-SECTION (Mobile Only) --- */
    .skills-wrapper {
        margin-top: 3.5rem; 
    }

    .skills-title {
        font-size: 1.6rem; /* Matched mobile size to Academics/Career Journey */
        margin-bottom: 1.5rem;
    }

    .skills-container {
        padding: 1.5rem; /* Shrinks the glossy box padding for phone screens */
        border-radius: 15px;
    }

    .skills-grid {
        grid-template-columns: 1fr; 
        gap: 1rem; 
    }
    
    .skill-card {
        padding: 1.2rem; 
    }
    
    .skill-card h3 {
        font-size: 1.1rem; 
        margin-bottom: 0.5rem;
    }

    .skill-card h3 i {
        font-size: 1.2rem;
    }
    
    .skill-card p {
        font-size: 0.85rem; 
        line-height: 1.5;
    }

    .contact-buttons {
        flex-direction: column; /* Stacks contact buttons vertically on very small screens */
        align-items: center;
        gap: 1.5rem;
    }

    /* --- TIMELINE / RESUME FIXES --- */
    .timeline {
        padding-left: 1.5rem; /* Reduces the huge gap between the line and the cards */
        margin-left: 0.5rem; /* Gives the line a little breathing room from the screen edge */
    }

    .timeline-dot {
        /* Perfectly centers the glowing dot on the vertical line for mobile */
        left: calc(-1.5rem - 6px); 
    }

    /* --- TIMELINE BOX SIZE (Mobile Only - DYNAMIC) --- */
    .timeline-card {
        height: auto; /* THE FIX: The box will now grow or shrink to perfectly fit the text! */
        padding: 1rem; /* Keeps a clean, even border around the text */
        justify-content: center; 
    }

    /* --- TIMELINE TEXT SIZES (Mobile Only) --- */
    .timeline-card h4 {
        font-size: 0.95rem; /* Keeps the title easily readable */
        margin-bottom: 0.3rem; /* Small breathing room */
    }

    .timeline-card p:not(.timeline-date) {
        font-size: 0.85rem; /* Keeps the company/college readable */
        margin-bottom: 0.3rem;
    }

    .timeline-card .timeline-date {
        font-size: 0.8rem; 
    }
    
    .timeline-column h3 {
        font-size: 1.6rem; /* Slightly adjusts the "Academics" / "Career Journey" titles */
    }

    /* --- 5. BACKGROUND --- */
    #interactive-bg {
        background: none; /* Disables JS cursor effect for mobile performance */
    }

    body {
        /* Static gradient fallback */
        background: radial-gradient(ellipse at 50% 20%, #1a1a2e, #0a0a1a 70%);
    }

    /* --- MOBILE SPECIFIC OVERRIDES FOR CERTIFICATIONS --- */
    .glass-cert-card {
        min-height: 160px; /* Your "perfect" mobile height */
        padding: 0.8rem 1.2rem; /* Tightened mobile padding */
    }

    .card-top {
        margin-bottom: 0.8rem; /* Pulls content up */
    }

    .status-badge {
        font-size: 0.7rem; 
        margin-top: -15px; /* Aggressive lift for mobile */
        padding: 0.15rem 0.6rem;
    }

    .card-bottom {
        margin-top: 0.8rem;
        padding-top: 0.8rem;
    }

    
    /* --- Mobile Fix for Hero Image Size & Gaps --- */
        #home .hero-image {
        width: 260px;
        height: 260px;
        flex: 0 0 260px; /* Shorthand for grow, shrink, and basis */
        margin: 0 auto;
        display: block;
    }

    #home .hero-image img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* Keeps the edges hidden without the hacky feel */
        transform: scale(1.08); 
    }

    /* --- MOBILE REWARDS REFINEMENT --- */
    .reward-grid {
        grid-template-columns: 1fr; 
        gap: 2.5rem; 
        width: 100%;
        justify-items: center; 
    }

    .reward-card {
        width: 96%; 
        max-width: 420px;
        margin: 0 auto;
        padding: 1.25rem 1.5rem; 
        gap: 0.7rem; 
    }

    .reward-slider {
        aspect-ratio: 3 / 2; 
        overflow: visible; 
        width: 100%;
    }

    .slider-btn {
        width: 22px; 
        height: 22px;
        font-size: 0.55rem;
    }

    .slider-btn.prev { left: -1.1rem; }
    .slider-btn.next { right: -1.1rem; }

    .reward-info h3 {
        font-size: 0.95rem; 
        margin-bottom: 0.2rem;
        line-height: 1.3;
    }
    
    .reward-info p {
        font-size: 0.78rem; 
        line-height: 1.4;
    }

    .reward-info .award-name br {
        display: none; /* Turns off the manual line breaks on mobile */
    }

}