@import url(https://fonts.googleapis.com/css?family=Quattrocento+Sans);

/*────────────────────────────────────────────────────────────
  Global Reset + Smooth Scroll
────────────────────────────────────────────────────────────*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth; /* for <a href="#sectionX"> jumps */
}

html,body {
  width: 100%;
  font-family: 'Playfair Display', serif;
  background: #000;
  color: white;
}


/*────────────────────────────────────────────────────────────
  Navbar Styles
────────────────────────────────────────────────────────────*/
.navbar {
  display: flex;
  flex-direction: row;
  justify-content: right;
  background-color: transparent;
  padding: 10px 20px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  backdrop-filter: blur(100px);
}

/* ─────────────────────────────────────────── */
/* 1) Base navbar/link styling (adjust colors/spacing as needed) */
/* ─────────────────────────────────────────── */
/* 1) Basic Navbar/Link Styling */

.navbar nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.navbar nav a,
.navbar .dropbtn-new {
  font-family: 'Montserrat', Arial, sans-serif;
  color: #ffffff;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.3rem;
  padding: 0.5rem 0.75rem;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  transition: color 0.2s ease;
}

.navbar nav a:hover,
.navbar .dropbtn-new:hover {
  color: #bbc7d1;
  text-decoration: underline;

}

/* ─────────────────────────────────────────── */
/* 2) Dropdown Wrapper Positioning */
.dropdown-new {
  position: relative;
  display: inline-block;
}

/* ─────────────────────────────────────────── */
/* 3) Hidden-by-default Dropdown Content */
.dropdown-new .dropdown-content-new {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%) scaleY(0);
  transform-origin: top center;
  width: 160px; /* adjust as needed */
  background-color: rgba(127, 115, 115, 0.8);
  backdrop-filter: blur(8px);
  border-radius: 8px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
  overflow: hidden;

  opacity: 0;
  visibility: hidden;
  transition:
    transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
    opacity 0.25s ease,
    visibility 0s linear 0.3s; /* delay hiding until animation finishes */
  pointer-events: none;
  z-index: 100;
}

/* ─────────────────────────────────────────── */
/* 4) “Open” Class → Expand + Fade In */
.dropdown-new.open .dropdown-content-new {
  transform: translateX(-50%) scaleY(1);
  opacity: 1;
  visibility: visible;
  transition:
    transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
    opacity 0.25s ease,
    visibility 0s; /* show visibility immediately */
  pointer-events: auto;
}

/* ─────────────────────────────────────────── */
/* 5) Submenu Items */
.dropdown-content-new a {
  display: block;
  padding: 0.65rem 1rem;
  color: #ffffff;
  text-decoration: none;
  font-size: 0.7rem;
  transition: background-color 0.2s ease;
}

.dropdown-content-new a:not(:last-child) {
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.dropdown-content-new a:hover {
  background-color: rgba(0, 119, 204, 0.1);
}

/* ─────────────────────────────────────────── */
/* 6) Arrow Styling */
.dropbtn-new {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.arrow-new {
  width: 10px;
  height: 10px;
  border-right: 3px solid #ffffff;
  border-bottom: 3px solid #fbfbfb;
  transform: rotate(45deg);
  transition: transform 0.3s ease;
  margin-top: 2px;
}

/* Rotate arrow when “open” */
.dropdown-new.open .arrow-new {
  transform: rotate(-135deg);
}

/* ─────────────────────────────────────────── */
/* 7) Optional Hover Glow Behind Button */
.dropbtn-new::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background: rgba(0, 119, 204, 0);
  transition: background 0.2s ease;
  z-index: -1;
}

.dropdown-new.open .dropbtn-new::before {
  /* light blue glow when menu is open */
  background: rgba(255, 255, 255, 0.1);
}
  .dropbtn-new::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 4px;
    transition: background 0.2s ease;
    z-index: -1;
  }

  .dropdown-new:hover .dropbtn-new::before {
    background: rgba(0, 0, 0, 0.1);
    
  }


/*────────────────────────────────────────────────────────────
  Logo / Animated Text
────────────────────────────────────────────────────────────*/
.animated-text {
  color: #fff;
  position: absolute;
  top: 40%;
  left: 8%;
  transform: translate(-50%, -50%);
  background: transparent;
  padding: 10px 40px;
  height: 60px;
  overflow: hidden;
}

.line {
  text-align: center;
  font-size: 40px;
  line-height: 60px;
}

.line:first-child {
  animation: anim 14s infinite;
}

@keyframes anim {
  0%   { margin-top:    0; }
  16%  { margin-top:  -60px; }
  33%  { margin-top: -120px; }
  50%  { margin-top: -180px; }
  66%  { margin-top: -120px; }
  82%  { margin-top:  -60px; }
  100% { margin-top:    0; }
}

/* button */
.btn {
  font-size: 1.3rem;
  padding: 8px 15px;
  border: none;
  color: #ffffff;
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  background: linear-gradient(45deg, #23408a, #84bcf8);
}
.btn::after {
  content: "";
  z-index: -1;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 10px;
}
/* glow */
.btn::before {
  content: "";
  background: linear-gradient(
    45deg,
    #917b7b, #FF7300,
     #002BFF, #FF00C8, #FF0000
  );
  position: absolute;
  top: -2px;
  left: -2px;
  background-size: 600%;
  z-index: -1;
  width: calc(100% + 4px);
  height:  calc(100% + 4px);
  filter: blur(8px);
  animation: glowing 10s linear infinite;
  transition: opacity .3s ease-in-out;
  border-radius: 10px;
  opacity: 0;
}

@keyframes glowing {
  0% {background-position: 0 0;}
  50% {background-position: 100% 0;}
  100% {background-position: 0 0;}
}

/* hover */
.btn:hover::before {
  opacity: 1;
}

.btn:active:after {
  background: transparent;
}

.btn:active {
  color: #fff0f0;
}

/*────────────────────────────────────────────────────────────
  gallery
────────────────────────────────────────────────────────────*/
/* === Masonry Gallery === */

.gallery-container {
  margin-top: 6rem;                             /* push content down */
  overflow-y: auto;
}

/* 2) Grid: no more top-margin */
.gallery.masonry {
  margin-top: 0;                                
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 7px;
  gap: 17px;
  padding: 2rem;
}

.gallery.masonry .item {
  position: relative;
  overflow: hidden;

}

.gallery.masonry .item img {
  display: block;
  height: auto;
  width: 96%;
}

/* text overlays (optional) */
.gallery.masonry .label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: sans-serif;
  font-size: 2rem;
  color: #fff;
  text-shadow: 0 0 8px rgba(0,0,0,0.7);
  pointer-events: none;
}

/*────────────────────────────────────────────────────────────
  1) Mobile (≤ 768px) – Tablet & Large Phones
────────────────────────────────────────────────────────────*/
@media (max-width: 768px) {
  
  /*----------------------------------------------------------------
    A) GENERAL FONT‐SIZES & PADDING
  ----------------------------------------------------------------*/
  body {
    font-size: 0.9rem;        /* slightly smaller base text */
  }

  h1 {
    font-size: 2.25rem;       /* shrink large headings */
  }

  .about-me {
    padding: 20px 40px;      /* reduce left/right padding */
    font-size: 1rem;       /* scale down paragraph text */
    line-height: 1.4;
  }

  /*----------------------------------------------------------------
    B) SCROLL‐SNAP SECTIONS
  ----------------------------------------------------------------*/
  /* Keep sections full‐height, but reduce the large pseudo‐overlay blur
     so mobile devices don’t feel too “heavy.” */
  .section::before {
    backdrop-filter: blur(6px);
  }

  /* If the animation feels too “long” on mobile, we can reduce transition times */
  .section,
  .section .content {
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
  }







  /*----------------------------------------------------------------
    C) NAVBAR / DROPDOWN
  ----------------------------------------------------------------*/
  .navbar {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 2px;
    backdrop-filter: blur(50px); /* slightly reduce blur intensity */
  }

  /* Stack nav items if they overflow */
  .navbar nav {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
  }

  .navbar nav a,
  .navbar .dropbtn-new {
    font-size: 1.2rem;
    padding: 0.4rem 0.6rem;
  }

  /* Shrink the dropdown’s width */
  .dropdown-new .dropdown-content-new {
    width: 140px;
  }

  .dropdown-content-new a {
    font-size: 0.8rem;
    padding: 0.5rem 0.75rem;
  }

  .arrow-new {
    width: 8px;
    height: 8px;
    border-width: 2px;
  }

  /*----------------------------------------------------------------
    D) ANIMATED TEXT (“ABI D CRUZ”)
  ----------------------------------------------------------------*/
  .animated-text {
    display: none;
    top: 30%;
    left: 15%;
    transform: translate(-50%, -30%);
    padding: 8px 10px;
  }

  .line {
    font-size: 26px;
    line-height: 52px;
  }


  /*----------------------------------------------------------------
    F) “HIRE ME!” BUTTON (GLOW EFFECT)
  ----------------------------------------------------------------*/
  .btn {
    font-size: 1.1rem;
    padding: 6px 12px;
    border-radius: 8px;
  }

  .btn::before {
    top: -1.5px;
    left: -1.5px;
    width: calc(100% + 3px);
    height: calc(100% + 3px);
    filter: blur(6px);
  }
}

/* Tablet: two-column layout */
@media (max-width: 1024px) {
  .gallery.masonry {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 1.5rem;
  }

  .gallery.masonry .item img {
    width: 100%;
  }
}

/* Large phones / small tablets: single-column */
@media (max-width: 600px) {
  .gallery.masonry {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 2rem;
  }

  .gallery-container {
    position: relative;;
    overflow: hidden;
    width: 100%;
    height: auto;
  }

  .gallery.masonry .item img {
    width: 100%;
    display: block;
    height: auto; /* ensure images scale properly */}

  /* optional: shrink overlay text for small screens */
  .gallery.masonry .label {
    font-size: 1.5rem;
  }
}

/* Very small phones: trim padding */
@media (max-width: 375px) {
  .gallery.masonry {
    padding: 0.5rem;
    gap: 8px;
  }

  .gallery-container {
    margin-top: 3rem;
  }

  .gallery.masonry .label {
    font-size: 1.25rem;
  }
}