/*!
Theme Name: Leo Michalopoulos
Theme URI: http://underscores.me/
Author: Leonidas Michalopoulos
Author URI: http://leom.gr
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: leo-mich
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Leo Michalopoulos is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
/* ================================================
   Apple-Inspired Bootstrap Theme Override
   Clean | Minimal | Subtle Depth | Modern Sans
   ================================================ */

/* ----- Base Reset ----- */
body {
    background-color: #fafafa;
    color: #111;
    font-family: "SF Pro Text", "Inter", sans-serif;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: -0.01em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #000;
}

a {
    color: #007aff;
    /* Apple blue */
    text-decoration: none;
    transition: color 0.25s ease;
}

a:hover {
    color: #0056d6;
    text-decoration: underline;
}

/* ----- Buttons ----- */
.btn {
    border-radius: 12px;
    font-weight: 500;
    letter-spacing: -0.01em;
    transition: all 0.2s ease;
    border: none;
}

.btn-primary {
    background: #007aff!improtant;
    color: #fff!important;
    box-shadow: 0 2px 6px rgba(0, 122, 255, 0.2);
}

.btn-primary:hover {
    background: #0062cc;
    box-shadow: 0 4px 10px rgba(0, 122, 255, 0.3);
}

.btn-light,
.btn-outline-light {
    background: #fff;
    color: #111;
    border: 1px solid #d1d1d1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.btn-light:hover {
    background: #f2f2f2;
}

/* ----- Cards ----- */
.card {
    border: none;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

/* ----- Navbar ----- */
.navbar {
    background-color: #fff;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
}

.navbar-brand {
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #000 !important;
}

.nav-link {
    color: #333 !important;
    transition: color 0.2s ease;
}

.nav-link:hover {
    color: #007aff !important;
}

/* ----- Forms ----- */
.form-control {
    border-radius: 10px;
    border: 1px solid #d1d1d1;
    padding: 0.65rem 1rem;
    font-size: 1rem;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
    background-color: #fff;
}

.form-control:focus {
    border-color: #007aff;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.25);
    outline: none;
}

/* ----- Tables ----- */
.table {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
}

.table th {
    font-weight: 600;
    background-color: #f9f9f9;
}

.table-hover tbody tr:hover {
    background-color: #f2f2f7;
}

/* ----- Alerts ----- */
.alert {
    border-radius: 12px;
    border: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.alert-primary {
    background: #e8f0ff;
    color: #0045cc;
}

/* ----- Shadows & Surfaces ----- */
.shadow-apple {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.bg-apple-gray {
    background-color: #f5f5f7;
}

/* ----- Utility Helpers ----- */
.rounded-apple {
    border-radius: 18px !important;
}

.text-apple-muted {
    color: #6e6e73 !important;
}

/* ----- Footer ----- */
footer {
    background-color: #f5f5f7;
    color: #6e6e73;
    font-size: 0.9rem;
    padding: 2rem 0;
}

/* ===== GLOBAL SPACING FIX ===== */

/* Increase section padding globally */
section {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
}

/* If you want even more “Apple white space” look: */
@media (min-width: 992px) {
    section {
        padding-top: 8rem !important;
        padding-bottom: 8rem !important;
    }
}

/* Reduce padding slightly for smaller screens */
@media (max-width: 768px) {
    section {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }
}

/* Headings spacing */
h2.section-heading,
.about-section h2,
.skills-section h2,
.values-section h2 {
    margin-bottom: 1.5rem !important;
}

/* Ensure paragraph spacing under headings is consistent */
section p {
    margin-bottom: 2rem !important;
}

/* Add breathing room between cards */
.skill-card,
.value-card,
.project-card,
.service-card {
    margin-bottom: 1.5rem;
}

/* Add subtle gap below hero before next section */
.about-hero {
    margin-bottom: 5rem;
}

/* Keep CTA clean and separated */
.about-cta {
    margin-top: 6rem;
}


/* HERO SECTION */
/* ===== APPLE HERO SECTION ===== */
.hero {
    min-height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 1rem;
    background: #fff;
    color: #111;
    position: relative;
    overflow: hidden;
}

/* ===== ANIMATED BACKGROUND ===== */
.hero-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 30%, rgba(0, 122, 255, 0.15), transparent 60%),
        radial-gradient(circle at 70% 60%, rgba(255, 45, 85, 0.12), transparent 60%),
        radial-gradient(circle at 50% 80%, rgba(52, 199, 89, 0.12), transparent 70%);
    background-size: 200% 200%;
    animation: bgMove 18s ease-in-out infinite alternate;
    filter: blur(80px);
    z-index: 0;
}

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

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* ===== TEXT & CONTENT ===== */
.hero h1 {
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #000;
    animation: fadeInUp 0.8s ease forwards;
}

.hero p {
    animation: fadeInUp 1s ease forwards;
}

.hero .btn {
    animation: fadeInUp 1.2s ease forwards;
}

/* ===== SOFT FADE ANIMATION ===== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== BUTTONS ===== */
.hero .btn-primary {
    background: #007aff;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 122, 255, 0.25);
    transition: all 0.3s ease;
}

.hero .btn-primary:hover {
    background: #0056d6;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 122, 255, 0.35);
}

.hero .btn-light {
    background: #fff;
    color: #111;
    border: 1px solid #d1d1d1;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.hero .btn-light:hover {
    background: #f2f2f2;
    transform: translateY(-2px);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .hero h1 {
        font-size: 1.9rem;
    }

    .hero p {
        font-size: 1rem;
    }
}

/* ===== APPLE NAVBAR ===== */
.navbar-apple {
    backdrop-filter: blur(14px);
    background: rgba(255, 255, 255, 0.75);
    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    padding: 0.9rem 0;
    z-index: 1000;
}

.navbar-apple .navbar-brand {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
    color: #000 !important;
    letter-spacing: -0.03em;
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.navbar-apple .brand-dot {
    width: 10px;
    height: 10px;
    background: #007aff;
    border-radius: 50%;
    display: inline-block;
}

.navbar-apple .nav-link {
    color: #333 !important;
    font-weight: 500;
    letter-spacing: -0.01em;
    margin: 0 0.6rem;
    transition: color 0.25s ease;
}

.navbar-apple .nav-link:hover,
.navbar-apple .nav-link.active {
    color: #007aff !important;
}

/* Hide button shadow when used in navbar */
.navbar-apple .btn-primary {
    font-weight: 500;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.2);
    transition: all 0.3s ease;
}

.navbar-apple .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 122, 255, 0.3);
}

/* ===== Navbar Scroll Effect ===== */
.navbar-apple.scrolled {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    padding: 0.6rem 0;
}

/* ===== Responsive Toggle Icon ===== */
.navbar-toggler {
    border: none;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' fill='black' class='bi bi-list'%3e%3cpath d='M3 12.5h18M3 6h18M3 19h18' stroke='black' stroke-width='1.5'/%3e%3c/svg%3e");
}

/* ===== LANGUAGE SWITCHER ===== */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
}

.lang-link {
  color: #6e6e73;
  transition: color 0.3s ease;
}

.lang-link:hover {
  color: #007aff;
}

.lang-current {
  color: #007aff;
}

a,
a:visited {
  color: inherit;
  text-decoration: none;
}

/* Specific hover style for consistency */
a:hover {
  color: #007aff; /* Apple blue hover */
  text-decoration: underline;
}

/* Services */
/* ===== SERVICES SECTION ===== */
.services-section {
    background: linear-gradient(180deg, #fff 0%, #f9f9fb 100%);
}

.section-heading {
    font-size: 2rem;
    letter-spacing: -0.02em;
    position: relative;
    display: inline-block;
}

.section-heading::after {
    content: "";
    display: block;
    width: 40px;
    height: 3px;
    background: #007aff;
    margin: 0.6rem auto 0;
    border-radius: 2px;
}

/* ===== SERVICE CARD ===== */
.service-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
    transition: all 0.35s ease;
}

.service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.service-card .icon {
    font-size: 2.2rem;
    color: #007aff;
    opacity: 0.9;
}

.service-card h5 {
    color: #000;
}

.service-card p {
    color: #6e6e73;
    margin-bottom: 0;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .section-heading {
        font-size: 1.6rem;
    }
}

/* Packages */
/* ===== PACKAGES SECTION ===== */
.packages-section {
    background: linear-gradient(180deg, #ffffff 0%, #f9f9fb 100%);
}

/* Cards */
.package-card {
    display: flex;
    flex-direction: column;
    justify-content: start;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
    transition: all 0.35s ease;
}

.package-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
}

.package-card h5 {
    font-size: 1.25rem;
}

.package-card ul li {
    margin-bottom: 0.4rem;
}

/* Buttons */
.package-card .btn {
    align-self: center;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.25);
    transition: all 0.3s ease;
}

.package-card .btn:hover {
    background: #0056d6;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 122, 255, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
    .package-card {
        text-align: center;
    }

    .package-card ul {
        text-align: left;
    }
}

/* Workflow Section */
/* ===== WORKFLOW SECTION ===== */
.workflow-section {
    background: #fff;
}

.workflow-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
    transition: all 0.35s ease;
}

.workflow-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.08);
}

.workflow-card .icon {
    font-size: 2rem;
    color: #007aff;
    opacity: 0.9;
}

/* Responsive */
@media (max-width: 768px) {
    .workflow-card {
        text-align: center;
    }
}

/* Metrics Section */
/* ===== METRICS SECTION ===== */
.metrics-section {
    background: linear-gradient(180deg, #f9f9fb 0%, #ffffff 100%);
    position: relative;
    overflow: hidden;
}

.metrics-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 25% 25%, rgba(0, 122, 255, 0.1), transparent 60%),
        radial-gradient(circle at 75% 75%, rgba(52, 199, 89, 0.08), transparent 70%);
    filter: blur(100px);
    animation: moveLight 20s ease-in-out infinite alternate;
    z-index: 0;
}

.metric-card {
    background: transparent;
    transition: transform 0.3s ease;
}

.metric-card:hover {
    transform: translateY(-4px);
}

.metric-card h3 {
    font-size: 2.5rem;
    color: #000;
}

.metric-card p {
    font-size: 0.95rem;
    color: #6e6e73;
}

/* Responsive */
@media (max-width: 768px) {
    .metric-card h3 {
        font-size: 2rem;
    }
}



/* Projects */
/* ===== PROJECTS SECTION ===== */
.projects-section {
    background: #fff;
}

/* Reuse section heading style */
.section-heading::after {
    content: "";
    display: block;
    width: 40px;
    height: 3px;
    background: #007aff;
    margin: 0.6rem auto 0;
    border-radius: 2px;
}

/* ===== PROJECT CARD ===== */
.project-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.05);
    transition: all 0.4s ease;
    position: relative;
}

.project-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 35px rgba(0, 0, 0, 0.1);
}

.project-img {
    height: 220px;
    background-size: cover;
    background-position: center;
    filter: brightness(0.95);
    transition: all 0.4s ease;
}

.project-card:hover .project-img {
    filter: brightness(1.05);
    transform: scale(1.05);
}

.project-content {
    padding: 1.5rem;
    text-align: left;
}

.project-content h5 {
    color: #000;
    font-weight: 600;
}

.project-content p {
    color: #6e6e73;
    font-size: 0.95rem;
}

.project-content a {
    font-weight: 500;
    color: #007aff;
    transition: color 0.25s ease;
}

.project-content a:hover {
    color: #0056d6;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .project-img {
        height: 180px;
    }

    .project-content {
        text-align: center;
    }
}

/* About Section */
/* ===== ABOUT SECTION ===== */
.about-section {
    background: linear-gradient(180deg, #f9f9fb 0%, #ffffff 100%);
    overflow: hidden;
}

/* Image styling */
.about-img-wrapper {
    position: relative;
    display: inline-block;
}

.about-img {
    border-radius: 20px;
    transition: transform 0.6s ease, box-shadow 0.6s ease;
}

.about-img:hover {
    transform: scale(1.03);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

/* Headings and text */
.about-section h2 {
    font-size: 2rem;
    letter-spacing: -0.02em;
}

.about-section p {
    font-size: 1.05rem;
    line-height: 1.7;
}

/* Soft fade animation */
.about-section .col-md-5,
.about-section .col-md-7 {
    opacity: 0;
    transform: translateY(25px);
    animation: fadeUp 1s ease forwards;
}

.about-section .col-md-5 {
    animation-delay: 0.2s;
}

.about-section .col-md-7 {
    animation-delay: 0.4s;
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .about-section h2 {
        font-size: 1.6rem;
    }

    .about-section p {
        font-size: 1rem;
    }

    .about-img {
        max-width: 80%;
    }
}

/* Testimonials */
/* ===== TESTIMONIALS SECTION ===== */
.testimonials-section {
    background: linear-gradient(180deg, #ffffff 0%, #f9f9fb 100%);
}

.testimonial-card {
    max-width: 700px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
    transition: all 0.4s ease;
}

.testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.testimonial-text {
    font-size: 1.1rem;
    font-style: italic;
    line-height: 1.7;
    color: #111;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: invert(1) grayscale(100%);
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.carousel-control-prev-icon:hover,
.carousel-control-next-icon:hover {
    opacity: 1;
}

/* Dots (indicators) */
.carousel-indicators [data-bs-target] {
    background-color: #007aff;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    opacity: 0.4;
    transition: opacity 0.3s ease;
}

.carousel-indicators .active {
    opacity: 1;
}

/* Responsive */
@media (max-width: 768px) {
    .testimonial-text {
        font-size: 1rem;
    }

    .testimonial-card {
        margin: 0 1rem;
    }
}

/* Blog */
/* ===== BLOG SECTION ===== */
.blog-section {
    background: linear-gradient(180deg, #f9f9fb 0%, #ffffff 100%);
}

/* Blog cards */
.blog-card {
    border-radius: 20px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
    transition: all 0.4s ease;
}

.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
}

.blog-img {
    height: 220px;
    background-size: cover;
    background-position: center;
    transition: all 0.4s ease;
}

.blog-card:hover .blog-img {
    transform: scale(1.05);
    filter: brightness(1.05);
}

.blog-content {
    text-align: left;
}

.blog-content h5 {
    color: #000;
}

.blog-content a {
    color: #007aff;
    font-weight: 500;
    transition: color 0.25s ease;
}

.blog-content a:hover {
    color: #0056d6;
}

/* Responsive */
@media (max-width: 768px) {
    .blog-img {
        height: 180px;
    }

    .blog-content {
        text-align: center;
    }
}

/* Newsletter */
/* ===== NEWSLETTER SECTION ===== */
.newsletter-section {
    background: linear-gradient(180deg, #ffffff 0%, #f5f5f7 100%);
    position: relative;
    overflow: hidden;
}

.newsletter-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 25% 25%, rgba(0, 122, 255, 0.12), transparent 60%),
        radial-gradient(circle at 75% 75%, rgba(255, 45, 85, 0.1), transparent 70%);
    filter: blur(100px);
    animation: moveLight 20s ease-in-out infinite alternate;
    z-index: 0;
}

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

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.newsletter-form .form-control {
    border-radius: 12px;
    border: 1px solid #d1d1d1;
    padding: 0.8rem 1.2rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
    font-size: 1rem;
}

.newsletter-form .form-control:focus {
    border-color: #007aff;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2);
    outline: none;
}

.newsletter-form .btn {
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.25);
    transition: all 0.3s ease;
}

.newsletter-form .btn:hover {
    background: #0056d6;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 122, 255, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
    .newsletter-form input {
        width: 100%;
    }
}


/* Contact Section */
/* ===== CONTACT / CTA SECTION ===== */
.contact-section {
    background: linear-gradient(180deg, #ffffff 0%, #f5f5f7 100%);
    position: relative;
    overflow: hidden;
    padding: 6rem 1rem;
}

.contact-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 30%, rgba(0, 122, 255, 0.12), transparent 60%),
        radial-gradient(circle at 80% 70%, rgba(255, 45, 85, 0.12), transparent 70%);
    filter: blur(100px);
    animation: moveLight 20s ease-in-out infinite alternate;
    z-index: 0;
}

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

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.contact-content {
    position: relative;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    padding: 3rem 2rem;
    max-width: 800px;
    margin: 0 auto;
    animation: fadeInUp 1s ease forwards;
}

.contact-content h2 {
    font-size: 2rem;
    letter-spacing: -0.02em;
}

.contact-content p {
    font-size: 1.05rem;
    line-height: 1.7;
}

/* Buttons */
.contact-content .btn-primary {
    font-weight: 600;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0, 122, 255, 0.25);
    transition: all 0.3s ease;
}

.contact-content .btn-primary:hover {
    background: #0056d6;
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 122, 255, 0.35);
}

/* Fade-in animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .contact-content {
        padding: 2rem 1.5rem;
    }

    .contact-content h2 {
        font-size: 1.6rem;
    }
}

/* Footer */
/* ===== FOOTER ===== */
.footer-section {
    background: #f5f5f7;
    color: #6e6e73;
    font-size: 0.95rem;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.footer-section h6 {
    font-size: 1.05rem;
    letter-spacing: -0.02em;
}

.footer-link {
    color: #6e6e73;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-link:hover {
    color: #007aff;
}

/* Social icons */
.footer-social {
    font-size: 1.25rem;
    color: #6e6e73;
    transition: color 0.3s ease, transform 0.3s ease;
}

.footer-social:hover {
    color: #007aff;
    transform: translateY(-2px);
}

/* Divider */
.footer-section hr {
    border-color: rgba(0, 0, 0, 0.1);
}

/* Responsive */
@media (max-width: 768px) {
    .footer-section {
        text-align: center;
    }

    .footer-social {
        font-size: 1.3rem;
    }
}

/* About me PAGE */
/* ===== ABOUT HERO ===== */
.about-hero {
    background: linear-gradient(180deg, #fff 0%, #f5f5f7 100%);

    .about-hero {
        padding-top: 8rem !important;
    }
}

.about-photo {
    border-radius: 20px;
    transition: transform 0.6s ease, box-shadow 0.6s ease;
}

.about-photo:hover {
    transform: scale(1.03);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.08);
}

/* ===== BACKGROUND SECTION ===== */
.about-background {
    background: #fff;
}

.about-background p {
    font-size: 1.05rem;
    line-height: 1.8;
}

/* ===== SKILLS ===== */
.skills-section {
    background: linear-gradient(180deg, #f9f9fb 0%, #ffffff 100%);
}

.skill-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    font-weight: 500;
}

.skill-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}

/* ===== VALUES ===== */
.values-section {
    background: #fff;
}

.value-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
    transition: all 0.4s ease;
}

.value-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
}

/* ===== CTA ===== */
.about-cta {
    background: linear-gradient(180deg, #ffffff 0%, #f5f5f7 100%);
    overflow: hidden;
}

.cta-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 30%, rgba(0, 122, 255, 0.12), transparent 60%),
        radial-gradient(circle at 80% 70%, rgba(255, 45, 85, 0.12), transparent 70%);
    filter: blur(100px);
    animation: moveLight 20s ease-in-out infinite alternate;
}

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

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}