/* ==== Global Styles ==== */
:root {
   --background-color: #111f32; /* Dark blue background */
   --highlight-color: #98b7e9; /* Light blue for highlights */
   --text-color-light: #e0e0e0; /* Light grey for general text */
   --card-background: #1a2a40; /* Slightly lighter dark blue for cards/elements */
   --border-color: #304a6e; /* Subtle border color */
   --transition-speed: 0.3s;
   --logo-gradient-start: #ffffff; /* White for silver gradient */
   --logo-gradient-end: #c0c0c0; /* Light grey for silver gradient */
}

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

body {
   font-family: 'DM Sans', sans-serif; /* Tagline and main headings font */
   line-height: 1.6;
   color: var(--text-color-light);
   background-color: var(--background-color);
   background-image:
       linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
       linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
   background-size: 30px 30px;
   scroll-behavior: smooth;
   overflow-x: hidden; /* Prevent horizontal scroll due to animations */
}

/* Inter font for specific sections as requested (like About Me bio, etc.) */
.about-text p,
.about-icons,
footer p,
footer a,
.btn-freelance,
.stat-item,
.overlay p,
#caption { /* Applied to overlay description AND modal caption */
   font-family: 'Inter', sans-serif;
}

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

a {
   color: var(--highlight-color);
   text-decoration: none;
   transition: color var(--transition-speed) ease;
}

a:hover {
   color: #ffffff; /* Brighter white on hover for links */
}

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

/* Icons styling */
.icon {
   width: 20px;
   height: 20px;
   vertical-align: middle;
   stroke: currentColor; /* Inherit color from parent */
   stroke-width: 2;
   stroke-linecap: round;
   stroke-linejoin: round;
   transition: transform var(--transition-speed) ease;
}

/* Buttons */
.btn-hire-me { /* Specific for the Hire Me button */
   display: inline-flex; /* Use flex for icon alignment */
   align-items: center;
   gap: 10px; /* Space between icon and text */
   background-color: var(--highlight-color); /* From 1st page */
   color: #fff;
   padding: 12px 24px;
   font-weight: bold;
   border: none;
   border-radius: 8px; /* From 1st page */
   text-decoration: none;
   font-size: 1rem;
   cursor: pointer;
   transition: background 0.3s, transform 0.2s ease, box-shadow 0.3s ease; /* Combined transitions */
   box-shadow: 0 4px 20px rgba(152, 183, 233, 0.3); /* Added from 2nd page btn-hire-me */
}

.btn-hire-me:hover {
   background-color: #98b7e9; /* Kept from 1st page - no change in color */
   transform: translateY(-3px); /* Added from 2nd page btn-hire-me */
   box-shadow: 0 6px 30px rgba(152, 183, 233, 0.6); /* Added from 2nd page btn-hire-me */
}

/* "Available for Freelance Work" button (from 2nd page) */
.btn-freelance {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background-color: var(--card-background);
   color: var(--text-color-light);
   border: 1px solid var(--border-color);
   padding: 10px 20px;
   border-radius: 50px;
   font-weight: 400;
   text-transform: none;
   font-size: 0.9em;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
   transition: all var(--transition-speed) ease;
   gap: 8px; /* Space for dot */
}

.btn-freelance:hover {
   background-color: var(--background-color);
   border-color: var(--highlight-color);
   color: var(--highlight-color);
   transform: translateY(-2px);
   box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

.btn-freelance .dot {
   width: 8px;
   height: 8px;
   background-color: var(--highlight-color); /* Changed to #98b7e9 */
   border-radius: 50%;
   box-shadow: 0 0 5px var(--highlight-color);
   animation: pulse 1.5s infinite ease-in-out;
}

/* Header - Hero Section (from 2nd page structure) */
.hero-section {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   text-align: center;
   background: transparent; /* Background is now on body */
   color: var(--text-color-light);
   padding: 40px 0;
   position: relative;
   overflow: hidden;
}

.navbar {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 20px 40px;
   background-color: rgba(17, 31, 50, 0.8); /* Semi-transparent background */
   backdrop-filter: blur(5px);
   z-index: 1000;
   animation: fadeInDown 1s ease-out forwards;
}

.logo {
   display: flex;
   align-items: center;
   gap: 8px;
}

.header-logo {
   width: 45px;
   height: 45px;
   object-fit: contain;
   border-radius: 5px;
   transition: transform 0.3s ease;
}

.header-logo:hover {
   transform: scale(1.05);
}

.brand-name {
   font-size: 1.6em;
   font-weight: 700;
   font-family: 'DM Sans', sans-serif; /* Kept font from 1st page for brand name */
   background: linear-gradient(45deg, var(--logo-gradient-start), var(--logo-gradient-end));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   line-height: 1;
}

.hero-content {
   max-width: 900px;
   margin-top: 60px;
   animation: fadeInUp 1.2s ease-out forwards;
   animation-delay: 0.5s;
   opacity: 0;
}

/* Tagline (from 1st page content, 2nd page icon) */
.tagline-title {
   font-family: 'DM Sans', sans-serif; /* Kept font from 1st page body */
   font-size: 3rem; /* From 1st page header h1 */
   margin-bottom: 20px; /* From 1st page header h1 */
   line-height: 1.2; /* From 1st page header h1 */
   color: var(--text-color-light);
   font-weight: 700;
}

.tagline-title .growth-icon {
   width: 40px;
   height: 40px;
   color: var(--highlight-color);
   margin-left: 10px;
   vertical-align: middle;
}

/* About Section (from 1st page content, 2nd page profile pic style) */
.about {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   gap: 40px;
   padding: 80px 20px;
   background-color: var(--card-background); /* Added background for distinction */
}

.about-content {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   gap: 40px;
   max-width: 1200px;
   margin: 0 auto;
}

.about-profile-pic { /* Changed from .about img to avoid conflict, from 2nd page */
   width: 180px; /* From 1st page */
   height: 180px; /* From 1st page */
   object-fit: cover;
   border-radius: 50%; /* From 2nd page for round pic */
   border: 3px solid var(--highlight-color); /* From 2nd page */
   box-shadow: 0 0 15px rgba(152, 183, 233, 0.5); /* From 2nd page */
   animation: fadeIn 1.5s ease-in-out;
   transition: transform 0.4s ease; /* From 2nd page */
}

.about-profile-pic:hover {
   transform: scale(1.05) rotate(7deg);
}

.about-text {
   max-width: 500px;
}

.about-text h2 {
   font-size: 2rem;
   margin-bottom: 20px;
   color: var(--highlight-color);
}

.about-text p {
   margin-bottom: 20px;
   line-height: 1.6;
}

.about-icons {
   display: flex;
   flex-direction: column;
   gap: 10px;
   font-size: 1rem;
   color: #ccc;
}

.about-icons i {
   color: var(--highlight-color);
   margin-right: 10px;
}

/* Gallery / My Designs */
.gallery {
   padding: 60px 20px;
}

.gallery h2 {
   font-size: 2rem;
   margin-bottom: 40px;
   display: flex;
   align-items: center;
   gap: 10px;
   margin-left: 40px; /* From 1st page */
   color: var(--highlight-color);
}

.thumbnails {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
   gap: 20px;
   justify-content: center; /* Center the thumbnails */
}

.gallery-item {
   position: relative;
   overflow: hidden;
   border-radius: 12px;
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
   transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
   border: 1px solid var(--border-color);
   cursor: pointer;
}

.gallery-item:hover {
   transform: translateY(-10px);
   box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
}

.gallery-item img {
   width: 100%;
   height: auto;
   border-radius: 12px;
   transition: transform 0.5s ease;
}

.gallery-item:hover img {
   transform: scale(1.05);
}

.overlay {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
   color: #fff;
   padding: 20px;
   transform: translateY(100%);
   transition: transform 0.4s ease-out;
   opacity: 0;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   height: 100%;
   box-sizing: border-box;
}

.gallery-item:hover .overlay {
   transform: translateY(0);
   opacity: 1;
}

.overlay h3 {
   font-family: 'DM Sans', sans-serif;
   font-size: 1.2em;
   margin-bottom: 5px;
   color: var(--highlight-color);
}

.overlay p {
   font-family: 'Inter', sans-serif;
   font-size: 0.85em;
   line-height: 1.4;
   color: #ccc;
   opacity: 0;
   transition: opacity 0.3s ease 0.1s;
}

.gallery-item:hover .overlay p {
   opacity: 1;
}

/* Footer */
footer {
   text-align: center;
   padding: 40px 20px;
   color: #aaa;
   font-size: 0.9rem;
   animation: fadeIn 1s ease-in-out;
   background-color: #0a1420;
   border-top: 1px solid var(--border-color);
}

footer a {
   color: var(--highlight-color);
   text-decoration: none;
}

.social-links-footer {
   display: flex;
   justify-content: center;
   gap: 20px;
   margin-bottom: 20px;
}

.social-links-footer a {
   font-size: 1.5em;
   color: var(--text-color-light);
   background-color: var(--card-background);
   border: 1px solid var(--border-color);
   width: 45px;
   height: 45px;
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
   transition: all var(--transition-speed) ease;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.social-links-footer a:hover {
   color: #fff;
   transform: translateY(-5px) scale(1.1);
   box-shadow: 0 8px 20px rgba(152, 183, 233, 0.4);
}

/* Social icon brand colors with glow */
.social-whatsapp:hover { background-color: #25D366; border-color: #25D366; box-shadow: 0 0 15px #25D366; }
.social-facebook:hover { background-color: #1877F2; border-color: #1877F2; box-shadow: 0 0 15px #1877F2; }
.social-instagram:hover {
   background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
   border-color: transparent;
   box-shadow: 0 0 15px #d6249f;
}
.social-telegram:hover { background-color: #0088CC; border-color: #0088CC; box-shadow: 0 0 15px #0088CC; }
.social-pinterest:hover { background-color: #E60023; border-color: #E60023; box-shadow: 0 0 15px #E60023; }
.social-linkedin:hover { background-color: #0A66C2; border-color: #0A66C2; box-shadow: 0 0 15px #0A66C2; }

.footer-email {
   display: block;
   margin-top: 10px;
   color: var(--highlight-color);
   font-weight: 500;
}

/* ==== Animations ==== */
@keyframes fadeInDown {
   from {
       opacity: 0;
       transform: translateY(-50px);
   }
   to {
       opacity: 1;
       transform: translateY(0);
   }
}

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

@keyframes fadeIn {
   from {
       opacity: 0;
   }
   to {
       opacity: 1;
   }
}

@keyframes pulse {
   0% {
       transform: scale(0.8);
       opacity: 0.7;
   }
   50% {
       transform: scale(1.1);
       opacity: 1;
   }
   100% {
       transform: scale(0.8);
       opacity: 0.7;
   }
}

/* ==== Scroll Animation Support ==== */
.fade-hidden {
   opacity: 0;
   transform: translateY(20px);
   transition: all 0.6s ease-out;
}
.fade-visible {
   opacity: 1;
   transform: translateY(0);
}

/* ==== Image Modal (for full view) ==== */
.modal {
   display: none; /* Hidden by default */
   position: fixed;
   z-index: 2000;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0,0,0,0.9);
   backdrop-filter: blur(5px);
   /* Centering content with flexbox */
   flex-direction: column; /* Stack image and caption vertically */
   align-items: center; /* Horizontally center content */
   justify-content: center; /* Vertically center content */
   overflow: auto; /* Enable scroll if needed for very small screens/large images */
   padding: 20px; /* Padding for modal content */
}

.modal-content {
   display: block;
   max-width: 95%; /* Increased max-width for more image room */
   max-height: 80vh; /* Adjusted max height to accommodate caption below */
   animation-name: zoom;
   animation-duration: 0.6s;
   border-radius: 10px;
   box-shadow: 0 5px 25px rgba(152, 183, 233, 0.4);
   object-fit: contain; /* Ensure image fits without cropping */
}

#caption {
   margin: 20px auto 0 auto; /* Margin top to separate from image */
   display: block;
   width: 95%; /* Match image width for alignment */
   max-width: 700px;
   text-align: center;
   color: #ccc;
   padding: 10px 0;
   height: auto; /* Auto height to fit content */
   font-size: 0.9em; /* Adjust caption font size */
   line-height: 1.4;
}

.close-button {
   position: absolute;
   top: 15px;
   right: 35px;
   color: #f1f1f1;
   font-size: 40px;
   font-weight: bold;
   transition: 0.3s;
   cursor: pointer;
   z-index: 2001;
}

.close-button:hover,
.close-button:focus {
   color: var(--highlight-color);
   text-decoration: none;
   cursor: pointer;
}

@keyframes zoom {
   from {transform:scale(0)}
   to {transform:scale(1)}
}


/* ==== Responsive ==== */
@media (max-width: 768px) {
   .navbar {
       flex-direction: column;
       padding: 15px 20px;
       position: relative;
       background-color: var(--background-color);
       backdrop-filter: none;
   }

   .logo {
       margin-bottom: 15px;
       gap: 6px;
   }

   .header-logo {
       width: 35px;
       height: 35px;
   }
   .brand-name {
       font-size: 1.4em;
   }
   .nav-links {
       width: 100%;
       text-align: center;
   }
   .navbar .nav-links .btn-freelance {
       margin-left: 0;
       margin-top: 10px;
       width: fit-content;
       align-self: center;
   }

   .hero-content .tagline-title {
       font-size: 2.5em;
   }
   .tagline-title br + .tagline-title {
       font-size: 1.8em;
   }
   .tagline-title .growth-icon {
       width: 30px;
       height: 30px;
   }
   .btn-hire-me {
       font-size: 1em;
       padding: 12px 25px;
   }

   .about-content {
       flex-direction: column;
       gap: 30px;
   }
   .about-profile-pic {
       width: 120px;
       height: 120px;
   }
   .about-text {
       text-align: center;
   }
   .about-icons {
       align-items: center;
   }

   .gallery h2 {
       margin-left: 0;
       justify-content: center;
       font-size: 2em;
   }

   .thumbnails {
       /* On mobile, allow thumbnails to be larger and centered */
       grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
       justify-content: center;
   }

   /* Adjust overlay text size for mobile */
   .overlay h3 {
       font-size: 1em;
   }
   .overlay p {
       font-size: 0.75em;
   }

   .modal-content {
       max-width: 95%;
       max-height: 75vh; /* Adjusted for mobile caption to prevent cutting */
   }
   #caption {
       width: 95%;
       font-size: 0.8em;
       margin-top: 15px;
   }

   .social-links-footer {
       flex-wrap: wrap;
       gap: 15px;
   }
}

@media (max-width: 480px) {
   .hero-content .tagline-title {
       font-size: 2em;
   }
   .tagline-title br + .tagline-title {
       font-size: 1.5em;
   }

   .logo h1 {
       font-size: 1.3em;
   }
   .btn-hire-me {
       padding: 8px 15px;
       font-size: 0.8em;
   }
   .about-text p {
       font-size: 0.9em;
   }
           }