/* Custom CSS for Shahid Nadeem Portfolio */
/* Add font-display: swap to all font-face declarations */
@font-face {
    font-family: 'BankGothic Md BT';
    src: url('../fonts/BankGothicMediumBT.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Open Sans Font with font-display: swap */
@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/PlayfairDisplay-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/PlayfairDisplay-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/PlayfairDisplay-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/PlayfairDisplay-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Font family classes */
.font-bankgothic {
    font-family: 'BankGothic Md BT', sans-serif;
}

.font-playfair {
    font-family: 'Playfair Display', serif;
}

.font-opensans {
    font-family: 'Open Sans', sans-serif;
}

/* Base font for body */
body { 
    font-family: 'Open Sans', sans-serif; 
    line-height: 1.6;
}

/* Heading styles - Apply BankGothic to H1 only */
h1 {
    font-family: 'BankGothic Md BT', sans-serif;
    font-weight: normal;
    letter-spacing: 1px;
}

/* Other headings use Open Sans */
h2, h3, h4, h5, h6 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    line-height: 1.2;
}

/* Specific heading adjustments */
h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
    font-weight: 600;
}

h3 {
    font-size: 1.75rem;
    font-weight: 600;
}

h4 {
    font-size: 1.5rem;
}

h5 {
    font-size: 1.25rem;
}

h6 {
    font-size: 1.125rem;
}

/* Special case for the hero title to keep BankGothic */
.hero-title {
    font-family: 'BankGothic Md BT', 'Arial Black', sans-serif;
    font-weight: normal; 
}

/* Additional font utilities */
.font-normal {
    font-weight: normal;
}

.font-medium {
    font-weight: 500;
}

.font-semibold {
    font-weight: 600;
}

.font-bold {
    font-weight: 700;
}

body { 
    font-family: 'Open Sans', sans-serif; 
}

.gradient-bg { 
    background: linear-gradient(135deg, #00144F 0%, #3365A2 100%); 
}

.logo-gradient { 
    background: linear-gradient(135deg, #00144F 0%, #3365A2 50%, #FF6B35 100%); 
}

.card-hover { 
    transition: all 0.3s ease; 
}

.card-hover:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 20px 40px rgba(0,0,0,0.1); 
}

.timeline-line { 
    position: relative; 
}

.timeline-line::before { 
    content: ''; 
    position: absolute; 
    left: 15px; 
    top: 0; 
    bottom: 0; 
    width: 2px; 
    background: #e5e7eb; 
}

.timeline-dot { 
    position: relative; 
    z-index: 10; 
}

.skill-bar { 
    transition: width 1s ease-in-out; 
}

.fade-in { 
    opacity: 0; 
    transform: translateY(30px); 
    transition: all 0.6s ease; 
}

.fade-in.visible { 
    opacity: 1; 
    transform: translateY(0); 
}

.accent-red { 
    color: #DC2626; 
}

.accent-green { 
    color: #059669; 
}

.accent-orange { 
    color: #EA580C; 
}

.accent-yellow { 
    color: #D97706; 
}

.bg-accent-red { 
    background-color: #DC2626; 
}

.bg-accent-green { 
    background-color: #059669; 
}

.bg-accent-orange { 
    background-color: #EA580C; 
}

.bg-accent-yellow { 
    background-color: #D97706; 
}

.bg-dark-blue { 
    background-color: #00144F; 
}

.bg-med-blue { 
    background-color: #3365A2; 
}

.bg-light-blue { 
    background-color: #60A5FA; 
}

.text-dark-blue { 
    color: #00144F; 
}

.text-med-blue { 
    color: #3365A2; 
}

.portfolio-item { 
    transition: all 0.3s ease; 
}

.portfolio-item.hidden { 
    display: none; 
}

.portfolio-filter.active { 
    background-color: #3365A2 !important; 
    color: white !important; 
}

.nav-link.active { 
    background-color: #00144F !important; 
    color: white !important; 
}

.nav-link { 
    transition: all 0.3s ease; 
}

/* Additional responsive styles */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
    }
    
    h1 {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 1.75rem;
    }
}

/* Print styles */
@media print {
    .gradient-bg {
        background: #00144F !important;
    }
    
    .no-print {
        display: none;
    }
}
.portfolio-item {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.portfolio-filter {
    transition: all 0.3s ease;
}

/* Mobile Responsiveness Fixes - Enhanced */
@media (max-width: 768px) {
  /* Portfolio filter buttons spacing */
  .flex.flex-wrap.justify-center.mb-12 .portfolio-filter {
    margin: 0.25rem !important;
    padding: 0.75rem 1.25rem !important;
    width: calc(50% - 0.5rem);
    text-align: center;
  }
  
  /* Hero section buttons spacing - Target the actual class/structure */
  .gradient-bg .space-x-4 {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
  }
  
  .gradient-bg .space-x-4 a {
    margin: 0.5rem 0 !important;
    display: block;
    width: 100% !important;
    text-align: center;
  }
  
  /* Portfolio item spacing */
  #portfolio-grid .portfolio-item {
    margin-bottom: 2rem !important;
  }
  
  /* Contact info items spacing */
  #contact .flex.items-center {
    margin-bottom: 1.5rem !important;
  }
  
  /* Navigation menu spacing - if you have a mobile menu */
  nav ul li {
    margin: 0.75rem 0 !important;
  }
  
  /* Timeline items spacing */
  .timeline-line .flex.items-start {
    margin-bottom: 2.5rem !important;
  }
  
  /* Testimonial card spacing */
  #testimonials .card-hover {
    margin-bottom: 2rem !important;
  }
  
  /* Skill bars spacing */
  .space-y-6 > div {
    margin-bottom: 1.75rem !important;
  }
}

/* Additional mobile fixes for very small screens */
@media (max-width: 480px) {
  /* Portfolio filter buttons on very small screens */
  .flex.flex-wrap.justify-center.mb-12 .portfolio-filter {
    width: 100%;
    font-size: 0.9rem;
    padding: 0.6rem 1rem !important;
    margin: 0.25rem 0 !important;
  }
  
  /* Contact section buttons */
  #contact .space-x-4 {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
  }
  
  #contact .space-x-4 a {
    margin: 0.5rem 0 !important;
    width: 100% !important;
    text-align: center;
  }
  
  /* Reduce hero text size on very small devices */
  .gradient-bg h1 {
    font-size: 2rem !important;
  }
  
  .gradient-bg p.text-xl {
    font-size: 1.1rem !important;
  }
  
  .gradient-bg p.text-lg {
    font-size: 1rem !important;
  }
  
  h1 {
    font-size: 1.75rem !important;
  }
}

/* Force specific spacing for mobile view */
@media (max-width: 768px) {
  /* Add bottom margin to all sections */
  section {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  
  /* Ensure proper spacing between elements */
  .max-w-7xl > .text-center {
    margin-bottom: 3rem !important;
  }
  
  /* Add spacing between grid items */
  .grid > * {
    margin-bottom: 2rem !important;
  }
  
  .grid > *:last-child {
    margin-bottom: 0 !important;
  }
}
/* Fix for Call to Action buttons spacing on mobile */
@media (max-width: 768px) {
  /* Target the specific call to action section */
  #portfolio .text-center.mt-16 .space-x-4 {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    align-items: center !important;
  }
  
  #portfolio .text-center.mt-16 .space-x-4 a {
    margin: 0.5rem 0 !important;
    display: block !important;
    width: 100% !important;
    max-width: 280px !important;
    text-align: center !important;
  }
  
  /* Specific styling for the buttons */
  #portfolio .text-center.mt-16 .bg-med-blue {
    background-color: #3365A2 !important;
  }
  
  #portfolio .text-center.mt-16 .border-2.border-med-blue {
    border: 2px solid #3365A2 !important;
    color: #3365A2 !important;
  }
  
  #portfolio .text-center.mt-16 .border-2.border-med-blue:hover {
    background-color: #3365A2 !important;
    color: white !important;
  }
}

/* For very small screens */
@media (max-width: 480px) {
  #portfolio .text-center.mt-16 .space-x-4 a {
    max-width: 100% !important;
    padding: 1rem 1.5rem !important;
    font-size: 1rem !important;
  }
}