.body {
    margin: 0px !important;
}

.header-nav .nav-item {
    display: none !important;
}

/* Hero Section with Professional Background Image */
section.section-hero,
.section.section-hero {
    position: relative;
 /* Professional .NET/C# code background from Unsplash */
    background-image: url('/PortoTheme/img/custom/hero-dotnet-bg.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    background-color: transparent !important;
}

/* Alternative high-quality backgrounds - uncomment to try different ones */

/* PHP/JavaScript code background */
/*
section.section-hero,
.section.section-hero {
    background-image: url('/PortoTheme/img/custom/hero-coding-bg.jpg') !important;
}
*/

/* Business professional background (Porto placeholder) */
/*
section.section-hero,
.section.section-hero {
    background-image: url('/PortoTheme/img/parallax/parallax-corporate-18.jpg') !important;
}
*/

/* Clean modern office (Porto placeholder) */
/*
section.section-hero,
.section.section-hero {
    background-image: url('/PortoTheme/img/parallax/parallax-corporate-9-1.jpg') !important;
}
*/

.hero-background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.85) 0%, rgba(118, 75, 162, 0.85) 100%);
    z-index: 1;
}

/* Alternative overlay colors - uncomment one to change the look */
/*
.hero-background-overlay {
    background: linear-gradient(135deg, rgba(0, 136, 204, 0.9) 0%, rgba(0, 90, 156, 0.9) 100%);
}
*/

/*
.hero-background-overlay {
    background: linear-gradient(135deg, rgba(26, 35, 126, 0.85) 0%, rgba(13, 71, 161, 0.85) 100%);
}
*/

/*
.hero-background-overlay {
    background: rgba(0, 0, 0, 0.5);
}
*/

.hero-content-wrapper {
    position: relative;
    z-index: 2;
}

.hero-content {
    animation: fadeInUp 1s ease-out;
}

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

.scroll-down-arrow {
    z-index: 3;
}

.animate-bounce {
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
   transform: translateY(0);
    }
    40% {
      transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

/* Parallax Section for Experience */
section.section-parallax-experience,
.section.section-parallax-experience {
    position: relative;
    /* Professional workspace background - modern desk with laptop */
    background-image: url('/PortoTheme/img/custom/experience-workspace-bg.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    background-color: transparent !important;
    padding: 100px 0 !important;
}

.section-parallax-experience::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 136, 204, 0.85);
    z-index: 1;
}

.section-parallax-experience > * {
  position: relative;
    z-index: 2;
}

/* Parallax Section for Projects */
section.section-parallax-projects,
.section.section-parallax-projects {
    position: relative;
    /* Data analytics background - charts and graphs */
    background-image: url('/PortoTheme/img/custom/projects-data-bg.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
 background-attachment: fixed !important;
    background-color: transparent !important;
    padding: 100px 0 !important;
}

.section-parallax-projects::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(118, 75, 162, 0.85);
    z-index: 1;
}

.section-parallax-projects > * {
    position: relative;
    z-index: 2;
}

/* Override Porto's default section backgrounds for ALL sections */
section.section-default,
.section.section-default {
    background-color: transparent !important;
}

section.section-primary,
.section.section-primary {
    background-color: #0088cc !important;
}

section.section-secondary,
.section.section-secondary {
    background-color: #f4f4f4 !important;
}

/* Timeline Styles */
.timeline-simple {
    position: relative;
    padding-left: 30px;
}

.timeline-simple::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
background: #0088cc;
}

/* Timeline for light backgrounds */
.section-default .timeline-simple::before,
.section-secondary .timeline-simple::before {
    background: #0088cc;
}

/* Timeline for dark/parallax backgrounds */
.section-parallax-experience .timeline-simple::before,
.section-parallax-projects .timeline-simple::before,
.section-primary .timeline-simple::before {
    background: #ffffff;
}

.timeline-item {
  position: relative;
    padding-bottom: 30px;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -35px;
  top: 5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #0088cc;
    border: 3px solid #fff;
    box-shadow: 0 0 0 3px #0088cc;
}

/* Timeline dots for parallax sections */
.section-parallax-experience .timeline-item::before,
.section-parallax-projects .timeline-item::before,
.section-primary .timeline-item::before {
    background: #ffffff;
    border: 3px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 0 3px #ffffff;
}

.timeline-date {
    font-size: 0.9rem;
    margin-bottom: 10px;
    display: block;
}

.timeline-content h4 {
    margin-bottom: 5px;
}

/* Feature Box Styles */
.feature-box-style-2 {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
}

.feature-box-style-2 .feature-box-icon {
    margin-right: 20px;
    font-size: 2rem;
    flex-shrink: 0;
}

.feature-box-style-2 .feature-box-info {
    flex: 1;
}

.feature-box-style-3 {
    text-align: center;
}

/* Card Styles */
.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
}

/* Badge Styles */
.badges-wrapper .badge {
    font-size: 0.85rem;
    padding: 8px 12px;
    font-weight: 500;
}

/* Badge styles for light backgrounds - make them stand out on parallax sections */
.section-parallax-experience .badge-light,
.section-parallax-projects .badge-light {
    background-color: rgba(255, 255, 255, 0.95) !important;
    color: #333 !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
    font-weight: 600;
}

/* Divider Styles */
.divider-small {
width: 60px;
    margin: 0 auto;
}

.divider-small hr {
    border-top: 3px solid;
    opacity: 1;
}

.divider-primary hr {
border-color: #0088cc;
}

.divider-light hr {
    border-color: #fff;
}

/* Section Styles */
.section {
    position: relative;
}

.box-shadow-3 {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Button Hover Effects */
.btn-light:hover {
    background-color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Text Shadow for Better Readability */
.section-hero .text-color-light,
.section-parallax-experience .text-color-light,
.section-parallax-projects .text-color-light {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* Enhanced text readability on parallax backgrounds */
.section-parallax-experience h4,
.section-parallax-experience .timeline-content h4,
.section-parallax-experience p,
.section-parallax-experience li,
.section-parallax-projects h4,
.section-parallax-projects p,
.section-parallax-projects li {
    color: #ffffff !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}

/* List icons for light text */
.list-light li {
  color: #ffffff !important;
}

.list-light li i {
    color: #ffffff !important;
}

/* Ensure all text in parallax sections is white and readable */
.section-parallax-experience *,
.section-parallax-projects * {
    color: #ffffff;
}

/* Override for cards which should remain with dark text on light background */
.section-parallax-experience .card *,
.section-parallax-projects .card *,
.section-parallax-experience .badge-light,
.section-parallax-projects .badge-light {
    color: #333 !important;
}

/* ========================================
   MOBILE RESPONSIVE IMPROVEMENTS
   ======================================== */

/* Mobile devices (phones) - Max width 767px */
@media (max-width: 767px) {
    /* Base font size for mobile readability */
    body { font-size: 16px !important; }
    
 /* Featured Projects Mobile Optimization */
    .featured-projects .col-lg-4,
    .featured-projects .col-md-6 {
    flex: 0 0 100%;
        max-width: 100%;
    }
    
    .featured-projects h3 {
     font-size: 1.5rem !important;
    }
    
    .featured-project-card .card-body {
  padding: 1.5rem !important;
    }
    
    .featured-projects .gap-2 {
        gap: 0.5rem;
        flex-wrap: wrap;
    }
    
    .featured-projects .btn-sm {
        font-size: 0.85rem !important;
     padding: 0.5rem 1rem !important;
    }
    
    /* Porto theme font size classes - Optimized for mobile */
    .text-12 { font-size: 2.25rem !important; line-height: 1.2 !important; } /* Main heading */
    .text-10 { font-size: 1.75rem !important; line-height: 1.3 !important; } /* Section titles */
    .text-8 { font-size: 1.5rem !important; }
    .text-6 { font-size: 1.25rem !important; }
    .text-5 { font-size: 1.15rem !important; line-height: 1.5 !important; } /* Priest title */
    .text-4 { font-size: 1rem !important; line-height: 1.6 !important; } /* Body text */
    .text-3 { font-size: 0.95rem !important; }
    
    /* Standard headings */
    h1 { font-size: 2rem !important; line-height: 1.2 !important; }
    h2 { font-size: 1.75rem !important; line-height: 1.3 !important; }
    h3 { font-size: 1.5rem !important; }
    h4 { font-size: 1.25rem !important; }
    h5 { font-size: 1.1rem !important; }
    
    /* Paragraphs and lists */
    p { font-size: 1rem !important; line-height: 1.6 !important; }
    li { font-size: 0.95rem !important; line-height: 1.6 !important; }
    
    /* Timeline improvements */
    .timeline-content h4 { font-size: 1.15rem !important; line-height: 1.4 !important; }
    .timeline-content p, .timeline-content li { font-size: 0.95rem !important; }
    .timeline-date { font-size: 0.9rem !important; }
    
    /* Cards */
    .card h4 { font-size: 1.15rem !important; }
    .card p { font-size: 0.95rem !important; }
    .card-body { padding: 1.5rem !important; }
    
    /* Badges */
    .badge, .badges-wrapper .badge { 
        font-size: 0.85rem !important; 
        padding: 0.5rem 0.75rem !important; 
    }
    
    /* Feature boxes - Stack vertically on mobile */
    .feature-box-style-2 { 
        flex-direction: column !important; 
        text-align: center !important; 
    }
    .feature-box-style-2 .feature-box-icon { 
        margin: 0 0 1rem 0 !important; 
        font-size: 2.5rem !important; 
    }
    .feature-box-style-2 h4 { font-size: 1.15rem !important; }
    .feature-box-style-2 p { font-size: 0.95rem !important; }
    
    /* Buttons */
    .btn { font-size: 1rem !important; padding: 0.75rem 1.5rem !important; }
    .btn-lg { font-size: 1.05rem !important; padding: 1rem 2rem !important; }
    
    /* Spacing */
    .section { padding: 3rem 0 !important; }
    .container { padding-left: 1rem !important; padding-right: 1rem !important; }
}

/* Extra small devices - Max width 575px */
@media (max-width: 575px) {
    .text-12 { font-size: 1.85rem !important; }
    .text-10 { font-size: 1.5rem !important; }
    .text-5 { font-size: 1.05rem !important; }
    .section { padding: 2rem 0 !important; }
    .container { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
}

/* Tablets in portrait - 768px to 991px */
@media (min-width: 768px) and (max-width: 991px) {
    .text-12 { font-size: 3.25rem !important; }
    .text-10 { font-size: 2.25rem !important; }
    body { font-size: 16px !important; }
}

/* ========================================
   MOBILE RESPONSIVE IMPROVEMENTS
   ======================================== */

/* Featured Projects in Hero Section */
.featured-projects {
    position: relative;
    z-index: 3;
}

.featured-project-card {
  transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.featured-project-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

.featured-projects .card-body {
    background: rgba(255, 255, 255, 0.95);
}

.featured-projects a {
    text-decoration: none;
}

.featured-projects .btn-outline {
    border: 2px solid;
    background: transparent;
 transition: all 0.3s ease;
}

.featured-projects .btn-outline:hover {
    background: #0088cc;
color: #fff !important;
}

.featured-projects .gap-2 {
    gap: 0.5rem;
}

/* Featured Project Logos */
.featured-logo-container {
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.featured-logo {
    max-width: 120px;
    max-height: 80px;
    width: auto;
height: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.featured-project-card:hover .featured-logo {
    transform: scale(1.1);
}

/* Fallback icon styling (when no logo available) */
.featured-logo-container i {
    transition: transform 0.3s ease, color 0.3s ease;
}

.featured-project-card:hover .featured-logo-container i {
    transform: scale(1.1);
}

/* ========================================
MOBILE RESPONSIVE IMPROVEMENTS
   ======================================== */