/* --- General Styles --- */
body {
    font-family: 'Cairo', sans-serif;
    scroll-behavior: smooth;
    background-color: #f8fafc; /* Light gray background */
    overflow-x: hidden;
}

/* Animated line for headers */
.animated-line {
    width: 80px;
    max-width: 90%;
    height: 3px;
    background-color: #2563eb;
    margin: 0 auto;
    transform: scaleX(0);
    transition: transform 0.8s ease-out;
}
.reveal.active .animated-line {
    transform: scaleX(1);
    animation: pulse-line 2.5s ease-in-out infinite 0.8s;
}

@keyframes pulse-line {
    0% { transform: scaleX(1); }
    50% { transform: scaleX(1.3); }
    100% { transform: scaleX(1); }
}

/* Scroll-triggered reveal animation */
.reveal {
    position: relative;
    transform: translateY(100px);
    opacity: 0;
    transition: all 1s ease;
}
.reveal.active {
    transform: translateY(0px);
    opacity: 1;
}

/* Scroll to top button */
#scrollTopBtn {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out;
}
#scrollTopBtn.show {
    opacity: 1;
    pointer-events: auto;
}

/* --- Hero Section (index.html) --- */
#hero {
    position: relative;
    background-color: #f8fafc;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem 0;
    padding-top: 80px;
    box-sizing: border-box;
}
#hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url('https://l.top4top.io/p_3459s40ti1.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    opacity: 0.15;
    z-index: 0;
}

/* Typing effect cursor */
.typing-cursor {
    display: inline-block;
    width: 3px; height: 1.8rem;
    background-color: #2563eb;
    animation: blink 1s infinite;
    margin-right: 4px;
}
@keyframes blink { 50% { opacity: 0; } }

/* Skill Circle SVG */
.progress-circle {
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
    stroke-dasharray: 283;
    stroke-dashoffset: 283;
    transition: stroke-dashoffset 2s ease-out;
}

/* --- About Section (General) --- */
.shapes-container {
    position: relative;
    width: 280px; height: 280px;
    margin: auto;
}
.shapes-container img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.shape, .text-shape {
    position: absolute;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.shape {
    animation-duration: 10s;
}
.text-shape {
    z-index: 0;
    animation-duration: 12s;
}

/* Floating/Rotating shapes */
.shape-1 { width: 20px; height: 20px; top: 10%; left: 5%; background-color: rgba(37, 99, 235, 0.2); border-radius: 50%; animation-name: float-up; }
.shape-2 { width: 15px; height: 15px; top: 20%; right: 5%; background-color: rgba(37, 99, 235, 0.2); border-radius: 50%; animation-name: float-down; animation-delay: 2s; }
.shape-3 { width: 25px; height: 25px; bottom: 10%; left: 15%; background-color: rgba(37, 99, 235, 0.2); border-radius: 50%; animation-name: float-up; animation-delay: 4s; }
.shape-4 { width: 0; height: 0; top: 70%; right: 10%; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 20px solid rgba(37, 99, 235, 0.2); animation-name: rotate-slow; animation-delay: 1s; }

.text-shape-1 { width: 0; height: 0; top: 20%; right: 15%; border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 25px solid rgba(239, 68, 68, 0.15); animation-name: rotate-slow; }
.text-shape-2 { width: 22px; height: 22px; bottom: 20%; left: 15%; background-color: rgba(5, 150, 105, 0.15); border-radius: 50%; animation-name: float-down; animation-delay: 3s; }
.text-shape-3 { width: 18px; height: 18px; top: 30%; left: 25%; background-color: rgba(234, 179, 8, 0.2); border-radius: 50%; animation-name: float-up; animation-delay: 1s; }

@keyframes float-up { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }
@keyframes float-down { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(20px); } }
@keyframes rotate-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* --- Portfolio Section --- */
.portfolio-card .overlay {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(30, 64, 175, 0.9);
    color: white; opacity: 0;
    transition: opacity 0.4s ease;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    padding: 1rem; text-align: center;
}
.portfolio-card:hover .overlay { opacity: 1; }
.portfolio-card img { transition: transform 0.4s ease; }
.portfolio-card:hover img { transform: scale(1.05); }

/* Portfolio Filter (portfolio.html) */
.filter-btn {
    transition: all 0.3s ease;
}
.filter-btn.active {
    background-color: #2563eb;
    color: white;
}
.portfolio-item {
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
}
.portfolio-item.hidden {
    opacity: 0;
    transform: scale(0.9);
    width: 0;
    height: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
}
.portfolio-card .details {
    transform: translateY(100%);
    transition: transform 0.5s ease;
}
.portfolio-card:hover .details {
    transform: translateY(0);
}

/* --- About Page (about.html) --- */
.timeline-container { position: relative; max-width: 1200px; margin: 0 auto; }
.timeline-container::after { content: ''; position: absolute; width: 3px; background-color: #e5e7eb; top: 0; bottom: 0; right: 50%; margin-right: -1.5px; }
.timeline-item { padding: 10px 40px; position: relative; background-color: inherit; width: 50%; opacity: 0; transition: all 0.8s ease; }
.timeline-item.active { opacity: 1; }
.timeline-item:nth-child(odd) { right: 0; transform: translateX(100px); }
.timeline-item.active:nth-child(odd) { transform: translateX(0); }
.timeline-item:nth-child(even) { right: 50%; transform: translateX(-100px); }
.timeline-item.active:nth-child(even) { transform: translateX(0); }
.timeline-item::after { content: ''; position: absolute; width: 25px; height: 25px; background-color: white; border: 4px solid #2563eb; top: 25px; border-radius: 50%; z-index: 1; }
.timeline-item:nth-child(odd)::after { right: -12.5px; }
.timeline-item:nth-child(even)::after { left: -12.5px; }
.timeline-content { padding: 20px 30px; background-color: white; position: relative; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.07); transition: all 0.3s ease; }
.timeline-content:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); }
@media screen and (max-width: 768px) {
    .timeline-container::after { right: 20px; }
    .timeline-item { width: 100%; padding-right: 60px; padding-left: 25px; }
    .timeline-item:nth-child(odd), .timeline-item:nth-child(even) { right: 0%; transform: translateX(0); }
    .timeline-item::after, .timeline-item:nth-child(even)::after { right: 7.5px; left: auto; }
}

/* --- Services Page (services.html) --- */
details summary { list-style: none; cursor: pointer; }
details summary::-webkit-details-marker { display: none; }
details summary .icon { transition: transform 0.3s; }
details[open] summary .icon { transform: rotate(180deg); }

/* --- Contact Page (contact.html) --- */
.form-input { transition: all 0.3s; }
.form-input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2); }

/* --- Project Detail Page --- */
.project-hero-img { height: 60vh; max-height: 500px; }

/* --- 404 Page --- */
.text-404 { font-size: 10rem; font-weight: 900; color: #e2e8f0; position: relative; animation: text-glitch 4s infinite linear; }
@keyframes text-glitch { 0% { transform: skew(0deg); } 20% { transform: skew(-5deg); text-shadow: 2px 2px 0 #2563eb; } 40% { transform: skew(5deg); text-shadow: -2px -2px 0 #ef4444; } 60% { transform: skew(0deg); text-shadow: none; } 100% { transform: skew(0deg); } }
.ghost-container { animation: float-y 4s ease-in-out infinite; }
.ghost-shadow { width: 70%; height: 10px; background-color: rgba(0,0,0,0.1); border-radius: 50%; margin: 0 auto; animation: scale-shadow 4s ease-in-out infinite; }
@keyframes float-y { 0% { transform: translateY(0px); } 50% { transform: translateY(-25px); } 100% { transform: translateY(0px); } }
@keyframes scale-shadow { 0% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(0.8); opacity: 0.2; } 100% { transform: scale(1); opacity: 0.5; } }

/* --- Thank You Page --- */
.checkmark-circle { width: 100px; height: 100px; position: relative; margin: 0 auto; }
.checkmark-circle .background { width: 100px; height: 100px; border-radius: 50%; background: #2563eb; position: absolute; animation: scale-in 0.5s ease-out forwards; }
.checkmark-circle .checkmark { position: absolute; top: 50%; left: 50%; transform-origin: 50% 50%; transform: translate(-50%, -50%) scale(0); width: 50px; height: 50px; animation: draw-checkmark 0.5s 0.5s ease-out forwards; }
.checkmark-circle .checkmark_stem { position: absolute; background-color: #fff; width: 5px; height: 25px; top: 22px; left: 23px; transform: rotate(45deg); }
.checkmark-circle .checkmark_kick { position: absolute; background-color: #fff; width: 5px; height: 45px; top: 13px; left: 14px; transform: rotate(-45deg); }
@keyframes scale-in { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes draw-checkmark { from { transform: translate(-50%, -50%) scale(0); } to { transform: translate(-50%, -50%) scale(1); } }

/* Prose styles for content from WordPress editor */
.prose { max-width: 80ch; }

/* --- WordPress Dynamic Menu Styles --- */

/* This removes the default list styling */
.menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Styles for desktop menu links */
.nav-item a {
    transition: color 0.3s;
}
.nav-item a:hover {
    color: #2563eb;
}
/* Style for the current page link */
.nav-item.current-menu-item a {
    color: #2563eb;
}

/* Styles for mobile menu links */
.mobile-menu-nav li a {
    display: block;
    padding: 0.75rem 1rem;
    font-size: 0.875rem; /* 14px */
    color: #374151; /* text-gray-700 */
}
.mobile-menu-nav li a:hover {
    background-color: #eff6ff; /* bg-blue-50 */
}
.mobile-menu-nav .current-menu-item a {
    background-color: #eff6ff; /* bg-blue-50 */
    font-weight: 600; /* semibold */
}
/* Styling for Service Content Lists */
.prose ul {
    list-style: none;
    padding-right: 0;
}

.prose ul li {
    padding-right: 2rem;
    position: relative;
}

.prose ul li::before {
    content: '\f058'; /* Font Awesome check-circle icon */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: #22c55e; /* green-500 */
    position: absolute;
    right: 0;
    top: 5px;
}