/* RESET / GLOBAL STYLES */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  html {
    font-size: 16px; /* Default font size, 1rem = 16px */
    scroll-behavior: smooth; /* Smooth scrolling to anchors */
    background-color: transparent;
  }
  
  body {
    font-family: "Inter", sans-serif;
    color: #ffffff;
    background-color: #121212;
    line-height: 1.6;
  }
  
  ::-webkit-scrollbar {
    width: 16px;
}

/* Track */
::-webkit-scrollbar-track {
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(197, 197, 197, 0.8); 
}

  @media screen and (max-width: 768px) {
    .about-content {
      flex-direction: column; /* stack on top for mobile */
      text-align: center;     /* center text on mobile */
    }
  
    .pfp {
      margin-bottom: 1rem;   /* spacing between image and text */
    }
  }
  
  /* UTILITY CLASSES */
  .gradient-text {
    background-image: linear-gradient(
      90deg,
      #106ac3,
      #1596cd 29%,
      #17c6d2 58%,
      #a3f3ee
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .gradient-winner {
    background-image: linear-gradient(
      90deg,
      #c34610,
      #cd6e15 29%,
      #efdc0e 58%,
      #f3eaa3
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .black-text {
    color: #000000;
  }
  
  .section-title {
    margin-bottom: 1rem;
    position: relative;
    font-size: 2.25rem;
  }
  
  .section-title::after {
    content: "";
    display: block;
    width: 50px;
    height: 3px;
    background: #00b3ff;
    margin: 0.5rem auto 0 auto;
    border-radius: 3px;
  }
  
  /* CONTAINERS */
  .container {
    width: 100%;
    max-width: 2000px;
    margin: 0 auto;
    padding: 1rem 0;
  }
  
  /* NAVBAR */
  .navbar {
    width: 100%;
    background-color: #0f0e0e;
    padding: 0.625rem 0; /* 10px = 0.625rem */
    padding-left: 1.625rem;
    padding-right: 1.625rem;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    transition: background-color 0.3s ease;
  }
  
  .nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .logo {
    font-size: 1.25rem; /* 20px = 1.25rem */
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
  }
  
  .nav-links {
    display: flex;
    gap: 1.25rem; /* 20px = 1.25rem */
    list-style: none;
  }
  
  .nav-links li {
    font-size: 1rem;
    font-weight: 400;
  }
  
  .nav-links a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease;
  }
  
  .nav-links a:hover {
    color: #0080ff;
  }
  
  /* HEADER / HERO */
  .header {
    text-align: center;
    padding: 35vh 0 20vh;
    background: linear-gradient(
        rgba(18, 18, 18, 0.4),
        rgba(18, 18, 18, 10.8)
      ),
      url("https://images.unsplash.com/photo-1518779578993-71e8a63e2323?ixlib=rb-4.0.3&auto=format&fit=crop&w=1634&q=80");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
  }
  
  .hero-content {
    max-width: 1800px;
    margin: 0 auto;
  }

  .hero-socials {
    margin-top: 0.4rem; /* Adjust as needed */
    display: flex;
    gap: 1rem;
    justify-content: center;
  }
  
  .hero-social-link {
    color: #ffffff; /* Adjust color */
    font-size: 1.5rem; /* Adjust icon size */
    transition: color 0.2s ease;
  }
  
  .hero-social-link:hover {
    color: #0077b5; /* Hover color, e.g., LinkedIn blue */
  }  
  
  .heading-1 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    color: #fff;
    font-size: 13.5rem;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -1px;
  }
  
  .sub-heading {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
  }
  
  .overflow-hidden {
    overflow: hidden;
  }
  
  .overflow-hidden2 {
    overflow: hidden;
  }
  
  .header p {
    color: #cccccc;
    font-size: 1.125rem; /* 18px */
    margin-bottom: 2rem;
  }
  
  /* CTA BUTTON */
  .cta-button {
    display: inline-block;
    padding: 0.9375rem 1.875rem; /* 15px 30px */
    background-color: #00aaff;
    color: #ffffff;
    border-radius: 1.875rem; /* 30px = 1.875rem */
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.3s ease;
  }
  
  .cta-button:hover {
    background-color: #0066cc;
  }
  
  .hero-button {
    margin-bottom: 2rem;
  }
  
  /* LOGOS / MARQUEE CONTAINER */
  .logos-container {
    position: relative;
    padding: 2rem;
  }
  
  .small-text {
    text-align: center;
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
  }
  
  /* MARQUEE Outer Wrapper */
.marquee {
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
  }
  
.marquee-content {
    max-width: 800px;
}

  /* The wide row containing the sets of images */
  .marquee-inner {
    display: inline-flex;       /* Horizontal row */
    align-items: center;        /* Vertically center all items */
    white-space: nowrap;        /* Prevent line breaks */
    gap: 5rem;                  /* SPACE between logos (adjust as you like) */
    animation: scroll-left 15s linear infinite;
  }
  
  /* Each item + image */
  .integration-item {
    display: inline-flex;       /* So each item can hold logo in center */
    align-items: center;        /* Vertical alignment within the item */
  }
  
  /* The logos themselves: grayscale, sized, etc. */
  .integration-item img {
    width: 120px;               /* Adjust to your preference */
    height: auto;
    object-fit: contain;
    display: block;
    filter: grayscale(100%);    /* Make them gray */
    opacity: 50%;
  }
  
  /* Keyframe from 0% to -50% for a perfect loop with two sets of images */
  @keyframes scroll-left {
    0% {
      transform: translateX(0%);
    }
    100% {
      transform: translateX(-50%);
    }
  }
  
  
  /* Optional fade shadows */
  .black-shadow, .black-shadow-right {
    position: absolute;
    top: 0; 
    width: 100px; /* or any desired width */
    height: 100%; 
    pointer-events: none; /* so they don’t block clicks */
    z-index: 2; /* above the scrolling logos */
  }
  
  .black-shadow {
    left: 0;
    background: linear-gradient(to right, #121212 0%, rgba(18,18,18,0) 100%);
  }
  
  .black-shadow-right {
    right: 0;
    background: linear-gradient(to left, #121212 0%, rgba(18,18,18,0) 100%);
  }
  
/* ABOUT SECTION */
.about {
    background-color: #f2f2f2;
    color: #000;
    padding: 4.25rem 0; /* 100px */
    text-align: center;
  }
  
  .about-container {
    max-width: 1600px;
    margin: 0 auto;
  }
  
  /* Turn .about-content into a flex row with space for image + text */
  .about-content {
    margin-top: 2rem;
    display: flex;
    flex-direction: row;      /* Side by side on larger screens */
    align-items: center;      /* Vertically center items */
    justify-content: center;  /* Center them horizontally */
    gap: 2rem;                /* Spacing between image & text */
    text-align: left;         /* Let text be left-aligned */
  }
  
  /* Profile Picture Wrapper */
  .about-pic {
    flex: 0 0 auto; /* Keep image at its intrinsic size */
  }
  
  /* Actual Profile Pic styling */
  .pfp {
    width: 400px;         /* Adjust as desired */
    height: 400px;        /* So it’s a square before rounding */
    border-radius: 50%;   /* Circular crop */
    object-fit: cover;    /* Nicely cover the area */
  }
  
  /* Keep .about-text as is, or add some margins */
  .about-text {
    max-width: 1000px;
  }
  
  /* Adjust heading inside about if desired */
  .about-text h3 {
    margin-bottom: 1rem;
    font-size: 1.75rem;
  }
  
  /* Adjust paragraph styling if you want a bit more spacing */
  .about-text p {
    font-size: large;
    margin-bottom: 1rem;
    line-height: 1.6;
  }
  
  
  /* SKILLS SECTION */
  .skills {
    background-color: #1c1c1c;
    padding: 4.25rem 0;
    text-align: center;
  }
  
  .skills h2 {
    margin-bottom: 3.125rem; /* 50px */
    font-size: 2.25rem;
    font-weight: 700;
    color: #ffffff;
  }
  
  .skill-cards {
    display: flex;
    justify-content: center;
    justify-items: center;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap;
  }
  
  .skill-card {
    background-color: #292929;
    padding: 1.5rem;
    border-radius: 0.625rem; /* 10px */
    text-align: center;
    transition: transform 0.3s ease;
    max-width: 200px;
    justify-items: center;
  }
  
  .skill-card:hover {
    transform: translateY(-5px);
  }
  
  .skill-card h3 {
    font-size: 1.25rem;
    margin-bottom: 0.9375rem; /* 15px */
  }
  
  .skill-card img {
    width: 80px;
    height: 80px;
    justify-self: center;
    justify-items: center;
    justify-content: center;
  }
  
  /* EDUCATION SECTION */
  .education {
    background-color: #141414;
    color: #ffffff;
    padding: 4.25rem 0; /* 100px */
    text-align: center;
  }
  
  .education-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 1000px;
    margin: 2rem auto 0 auto;
  }
  
  .education-item {
    background-color: #202020;
    border-radius: 0.625rem; /* 10px */
    display: flex;
    align-items: center;
    padding: 1.5rem;
    transition: transform 0.3s ease;
    gap: 1.5rem;
  }
  
  .education-item:hover {
    transform: translateY(-5px);
  }
  
  .education-logo {
    width: 80px;
    height: auto;
    object-fit: contain;
    border-radius: 0.375rem; /* 6px */
  }
  
  .education-info {
    text-align: left;
  }
  
  .education-info h3 {
    margin-bottom: 0.3rem;
    font-size: 1.3rem;
  }
  
  .education-institution {
    margin-bottom: 0.5rem;
    color: #cccccc;
    font-size: 1rem;
  }
  
  .education-desc {
    color: #b3b3b3;
    font-size: 1rem;
    line-height: 1.5;
  }
  
  /* WORK EXPERIENCE SECTION (card-like) */
  .experience {
    background-color: #1c1c1c;
    padding: 4.25rem 0; /* 100px */
    text-align: center;
  }
  
  .experience-content {
    max-width: 1600px;
  }

  .experience-list {
    display: flex;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    max-width: 1600px;
    margin: 2rem auto 0 auto;
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .experience-item {
    background-color: #292929;
    border-radius: 0.625rem; /* 10px */
    text-align: center;
    padding: 1.5rem;
    max-width: 400px;
    transition: transform 0.3s ease;
  }
  
  .experience-item:hover {
    transform: translateY(-5px);
  }
  
  .experience-logo {
    width: 160px;
    height: auto;
    object-fit: contain;
    margin-bottom: 1rem;
  }
  
  .experience-item h3 {
    margin-bottom: 0.3rem;
    font-size: 1.2rem;
  }
  
  .experience-company {
    margin-bottom: 0.5rem;
    color: #cccccc;
    font-size: 1rem;
  }
  
  .experience-desc {
    color: #aaaaaa;
    font-size: 1rem;
    line-height: 1.5;
  }
  
  /* PROJECTS SECTION */
  .projects {
    padding: 4.25rem 0;
    background-color: #141414;
  }
  
  .projects h2 {
    font-size: 2.25rem;
    text-align: center;
    color: #ffffff;
    margin-bottom: 3.125rem; /* 50px */;
  }
  
  .project-list {
    display: flex;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.875rem; /* 30px */
    max-width: 1600px;
    margin: 0 auto;
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .project {
    background-color: #202020;
    padding: 1.25rem; /* 20px */
    text-align: center;
    border-radius: 0.625rem; /* 10px */
    transition: transform 0.3s ease;
    max-width: 314px;
  }
  
  .project:hover {
    transform: translateY(-5px);
  }
  
  .project img {
    width: 100%;
    border-radius: 0.625rem; /* 10px */
    margin-bottom: 1.25rem; /* 20px */
  }
  
  .project h3 {
    margin-bottom: 0.5rem;
  }
  
  .project-date,
  .project-location {
    color: #cccccc;
    font-size: 0.875rem;
    margin: 0.25rem 0;
  }
  
  .view-project-button {
    display: inline-block;
    padding: 0.625rem 1.25rem; /* 10px 20px */
    background-color: #00aaff;
    color: white;
    border-radius: 1.25rem; /* 20px */
    text-decoration: none;
    margin-top: 1rem;
    transition: background-color 0.3s ease;
  }
  
  .view-project-button:hover {
    background-color: #0066cc;
  }
  
  .contact-container {
    text-align: center;
    padding: 4.25rem 0; /* 100px, adjust as needed */
  }
  
  .contact-container h2 {
    font-size: 2.25rem;
    margin-bottom: 1rem;
  }
  
  .contact-container p {
    color: #cccccc;
    margin-bottom: 2rem;
    font-size: 1.125rem;
  }
  
  .socials-list {
    display: flex;
    flex-direction: column; /* Stack them vertically */
    align-items: center;    /* Center them horizontally */
    gap: 1rem;             /* Spacing between each pill */
  }
  
  .social-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.625rem 1.25rem; /* 10px 20px */
    background-color: transparent; 
    border: 2px solid #00aaff; /* Outline color */
    color: #00aaff;
    border-radius: 1.875rem; /* 30px for pill shape */
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  
  .social-pill i {
    margin-right: 0.5rem; /* Space between icon and text */
    font-size: 1.25rem;   /* Adjust icon size if needed */
  }
  
  .social-pill:hover {
    background-color: #00aaff; 
    color: #ffffff;        /* Invert text/icon color on hover */
  }
    
  
  /* FOOTER SECTION */
  .footer {
    background-color: #000;
    padding: 0rem 0;
    color: #fff;
    text-align: center;
  }
  
  .footer-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .footer-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 0.5rem;
  }
  
  .footer-logo {
    font-size: 1.5rem;
    margin-bottom: 0rem;
    text-transform: uppercase;
  }
  
  .social-links {
    list-style: none;
    display: flex;
    gap: 1rem;
  }
  
  .social-links li a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s;
  }
  
  .social-links li a:hover {
    color: #00aaff;
  }
  
  .back-to-top {
    display: inline-block;
    margin-top: 0.5rem;
    color: #00aaff;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s;
  }
  
  .back-to-top:hover {
    color: #0066cc;
  }
  
  /* MEDIA QUERIES */
  @media screen and (max-width: 768px) {
    .navbar .nav-links {
      display: none; /* For demonstration—add a hamburger menu if needed */
    }
  
    .nav-container {
      justify-content: space-between;
    }
  
    .hero-content {
      padding: 0 1rem;
    }
  
    .heading-1 {
      font-size: 2.5rem;
    }
  }

  .skill-card:hover,
  .education-item:hover,
  .experience-item:hover,
  .project:hover {
    transform: translateY(-5px);
    /* Ombre colored shadow around the card */
    box-shadow:
      0 0 45px 2px #a3f3ec;
  }
  
  /* Fade + slide up initial state */
.fade-section {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Once in view, fade + slide to normal */
.fade-section.appear {
  opacity: 1;
  transform: translateY(0);
}

.fixed-back-to-top {
  position: fixed;        /* Stays in the same place even on scroll */
  bottom: 20px;           /* Adjust spacing from bottom edge */
  right: 20px;             /* Adjust spacing from left edge */
  
  width: 75px;            /* Size the button/container */
  height: 75px;
  border-radius: 50%;     /* Circular shape */
  display: flex;
  align-items: center;
  justify-content: center;
  
  background-color: #beedea; /* Button background color */
  color: #4c4b4b;            /* Icon/text color */
  font-size: 1.5rem;      /* Icon size (adjust as needed) */
  text-decoration: none;  /* Remove underline on link */
  z-index: 9999;          /* High z-index so it’s above other elements */
  
  /* Optional styling transitions (hover effect) */
  transition: background-color 0.3s ease;
}

.fixed-back-to-top:hover {
  background-color: #74c0c9; /* Slightly lighter or darker on hover */
}