/* ------------------------------
   Global Reset and Base Styles
------------------------------ */
* {
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
    box-sizing: border-box; /* Include padding & border in total width/height */
    font-family: 'Poppins', sans-serif; /* Set consistent font */
}

/* ------------------------------
   Body Styling
------------------------------ */
body {
    display: flex;
    flex-direction: column;
    color: #000; /* Default text color */
    min-height: 100vh; /* Full height viewport */
    -webkit-font-smoothing: antialiased; /* Smooth font edges (Chrome/Safari) */
    -moz-osx-font-smoothing: grayscale;  /* Smooth font edges (macOS) */
    transition: background-color 0.4s ease, color 0.4s ease; /* Smooth transition for dark/light mode */
}


/* ------------------------------
   Hero Section (Profile + Intro)
------------------------------ */
.hero {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 50px;
    padding-bottom: 40px;
}

/* ------------------------------
   Profile Picture Styling
------------------------------ */
.profile-pic {
    height: 120px;
    width: 120px;
    border-radius: 50%; /* Makes image circular */
    margin-bottom: 15px;
    border: 3px solid #aaa; /* Light border */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Depth shadow */
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease, filter 0.4s ease;
    object-fit: cover; /* Maintain image ratio */
}

/* Hover effect for subtle highlight */
.profile-pic:hover {
    transform: scale(1.08) rotate(2deg); /* Zoom + tilt */
    border-color: #000; 
    filter: brightness(1.05); /* Slight brightness */
}

/* ------------------------------
   Name & Headline Text
------------------------------ */
.name {
    font-size: 1.8rem;
    margin-bottom: 5px;
}
.headline {
    font-size: 1rem;
}


/* ------------------------------
   Social Links Container
------------------------------ */
.social {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px; /* Spacing between buttons */
}

/* ------------------------------
   Social Button Base Styling
------------------------------ */
.btn {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    width: 80%;
    height: 50px;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
}

/* Hover effect for all buttons */
.btn:hover {
    scale: 1.05;
    cursor: pointer;
}

/* ------------------------------
   Icon Styling (Inside Buttons)
------------------------------ */
.btn i {
    font-size: 22px; /* Icon size */
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px; /* Gap between icon & text */
    flex-shrink: 0;
    line-height: 1; /* Center vertically */
}

/* Icon alignment adjustments per platform */
.btn.youtube i { transform: translateX(-10px); }
.btn.facebook i { transform: translateX(-6px); }
.btn.instagram i { transform: translateX(-3px); }
.btn.threads i { transform: translateX(-12px);}
.btn.telegram i { transform: translateX(-5px);}
/* ======================================
   YouTube - Gradient Style
====================================== */
.btn.youtube {
    background: linear-gradient(45deg, #FF0000, #CC0000);
    color: #fff;
    box-shadow: 0 3px 8px rgba(255, 0, 0, 0.3);
}
.btn.youtube:hover {
    background: linear-gradient(45deg, #e60000, #990000);
    box-shadow: 0 5px 12px rgba(255, 0, 0, 0.4);
    transform: translateY(-2px);
}

/* ======================================
   Facebook - Gradient Style
====================================== */
.btn.facebook {
    background: linear-gradient(45deg, #1877F2, #1458c4);
    color: #fff;
    box-shadow: 0 3px 8px rgba(24, 119, 242, 0.3);
}
.btn.facebook:hover {
    background: linear-gradient(45deg, #1666e1, #0f4da8);
    box-shadow: 0 5px 12px rgba(24, 119, 242, 0.4);
    transform: translateY(-2px);
}

/* ======================================
   Instagram - Gradient Style
====================================== */
.btn.instagram {
    background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af, #515BD4);
    color: #fff;
    box-shadow: 0 3px 8px rgba(193, 53, 132, 0.3);
}
.btn.instagram:hover {
    background: linear-gradient(45deg, #e06a1c, #c12a74, #6b2f92, #3b42c3);
    box-shadow: 0 5px 12px rgba(193, 53, 132, 0.4);
    transform: translateY(-2px);
}

/* ======================================
   Threads - Light Theme
====================================== */
.btn.threads {
    background: linear-gradient(45deg, #232323, #3b3b3b, #555555);
    color: #ffffff;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}
.btn.threads:hover {
    background: linear-gradient(45deg, #2c2c2c, #464646, #6e6e6e);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.35);
    transform: translateY(-2px);
}

/* ======================================
   Telegram - Gradient Style
====================================== */
.btn.telegram {
    background: linear-gradient(45deg, #0088cc, #229ED9);
    color: #fff;
    box-shadow: 0 3px 8px rgba(0, 136, 204, 0.3);
}
.btn.telegram:hover {
    background: linear-gradient(45deg, #007ab8, #1c8dc7);
    box-shadow: 0 5px 12px rgba(0, 136, 204, 0.4);
    transform: translateY(-2px);
}


/* ------------------------------
   Footer Section
------------------------------ */
footer {
    text-align: center;
    margin-top: auto;
    padding-top: 5px;
    margin-bottom: 5px;
    font-size: 0.8rem;
    color: rgb(59, 166, 187);
}



/* ------------------------------
   Responsive Design
------------------------------ */

/* Tablet View (≤768px) */
@media (max-width: 768px) {
  .container .profile-pic { height: 110px; width: 110px; }
  .container .name { font-size: 1.5rem; }
  .container .headline { font-size: 0.9rem; }
  .social .btn { width: 90%; height: 60px; font-size: 0.95rem; }
}

/* Mobile View (≤480px) */
@media (max-width: 480px) {
  body { min-height: 90vh; }
  .container .profile-pic { height: 110px; width: 110px; }
  .social .btn { width: 80%; height: 50px; font-size: 0.9rem; }
}

/* ------------------------------
   Animations
------------------------------ */

/* Page fade-in animation */
body {
  animation: fadeIn 1.2s ease-in-out;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Staggered button animation delays */
.social .btn:nth-child(1) { animation-delay: 0.3s; }
.social .btn:nth-child(2) { animation-delay: 0.45s; }
.social .btn:nth-child(3) { animation-delay: 0.6s; }
.social .btn:nth-child(4) { animation-delay: 0.75s; }

/* ================================
   Floating Dark Mode Toggle Button
================================ */
.dark-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background-color: #fff;
    color: #000;
    border: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 999;
    transition: all 0.3s ease;
}

/* Hover animation on toggle button */
.dark-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

/* ================================
   Dark Mode Styling
================================ */
body.dark {
    background: linear-gradient(135deg, #0a0a0a, #1c1c1c, #2a2a2a);
    min-height: 100vh;
    color: #e0e0e0;
}

/* Profile pic appearance in dark mode */
body.dark .profile-pic {
    border-color: #fff;
}

/* Hover effect for profile pic in dark mode */
body.dark .profile-pic:hover {
    transform: scale(1.15) rotate(1deg);
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.4);
    border-color: #e6dcdc;
    filter: brightness(1.1) contrast(1.1);
}

/* Headings and text colors in dark mode */
body.dark .name { color: #e1cfcf; }
body.dark .headline { color: #aaa; }

/* Generic button base in dark mode */
body.dark .btn {
    background-color: #8b8b8b;
    background: #8b8b8b;
    color: #000;
    box-shadow: none;
}
body.dark .btn:hover { color: #fff; }

/* ======================================
   YouTube - Dark Theme
====================================== */
body.dark .btn.youtube {
    background: linear-gradient(45deg, #CC0000, #660000);
    color: #fff;
    box-shadow: 0 3px 8px rgba(255, 0, 0, 0.25);
}
body.dark .btn.youtube:hover {
    background: linear-gradient(45deg, #ff1a1a, #990000);
    box-shadow: 0 5px 12px rgba(255, 0, 0, 0.35);
    transform: translateY(-2px);
}

/* ======================================
   Facebook - Dark Theme
====================================== */
body.dark .btn.facebook {
    background: linear-gradient(45deg, #0f4da8, #062d66);
    color: #fff;
    box-shadow: 0 3px 8px rgba(24, 119, 242, 0.25);
}
body.dark .btn.facebook:hover {
    background: linear-gradient(45deg, #1666e1, #0a3f8a);
    box-shadow: 0 5px 12px rgba(24, 119, 242, 0.35);
    transform: translateY(-2px);
}

/* ======================================
   Instagram - Dark Theme
====================================== */
body.dark .btn.instagram {
    background: linear-gradient(45deg, #833AB4, #C13584, #E1306C, #F77737);
    color: #fff;
    box-shadow: 0 3px 8px rgba(193, 53, 132, 0.25);
}
body.dark .btn.instagram:hover {
    background: linear-gradient(45deg, #9b45d5, #d63f93, #ff4088, #f9883f);
    box-shadow: 0 5px 12px rgba(193, 53, 132, 0.35);
    transform: translateY(-2px);
}
/* ======================================
   Telegram - Dark Theme
====================================== */
body.dark .btn.telegram {
    background: linear-gradient(45deg, #0088cc, #229ED9, #37b1e2);
    color: #fff;
    box-shadow: 0 3px 8px rgba(34, 158, 217, 0.25);
}
body.dark .btn.telegram:hover {
    background: linear-gradient(45deg, #007ab8, #1c8dc7, #2ea3d5);
    box-shadow: 0 5px 12px rgba(34, 158, 217, 0.35);
    transform: translateY(-2px);
}

/* ======================================
   Threads - Dark Theme
====================================== */
body.dark .btn.threads {
    background: linear-gradient(45deg, #ffffff, #d9d9d9, #bfbfbf);
    color: #000;
    box-shadow: 0 3px 8px rgba(255, 255, 255, 0.15);
}
body.dark .btn.threads:hover {
    background: linear-gradient(45deg, #f5f5f5, #e0e0e0, #cfcfcf);
    box-shadow: 0 5px 12px rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

/* Footer color in dark mode */
body.dark footer p { color: #777; }

/* Toggle button styling in dark mode */
body.dark .dark-toggle {
    background-color: #222;
    color: #fff;
    box-shadow: 0 4px 15px rgba(255,255,255,0.1);
}

/* Optional: smooth icon rotation on toggle */
.dark-toggle i {
    transition: transform 0.4s ease;
}

body.dark .dark-toggle i {
    transform: rotate(360deg);
}