/*
Theme Name: Merch & Web Solutions SPA
Theme URI: http://example.com/
Author: Your Name
Author URI: http://example.com/
Description: A custom WordPress theme for Merchandising & Web Solutions with SPA-like navigation.
Version: 1.0
Text Domain: merch-web-spa
*/


@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600&display=swap');


/* Fonts */
:root {
    --default-font: "Roboto",  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --heading-font: "Questrial",  sans-serif;
    --nav-font: "Noto Sans",  sans-serif;
  }
  
  /* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
  :root { 
    --background-color: #ffffff; /* Background color for the entire website, including individual sections */
    --default-color: #0a0f14; /* Default color used for the majority of the text content across the entire website */
    --heading-color: #0f2943; /* Color for headings, subheadings and title throughout the website */
    --accent-color: #e87532; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
    --surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
    --contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
  }
  
  /* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
  :root {
    --nav-color: #0a0f14;  /* The default color of the main navmenu links */
    --nav-hover-color: #e87532; /* Applied to main navmenu links when they are hovered over or active */
    --nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */
    --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
    --nav-dropdown-color: #0a0f14; /* Used for navigation links of the dropdown items in the navigation menu. */
    --nav-dropdown-hover-color: #e87532; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
  }
  
  /* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */
  
  .light-background {
    --background-color: #faf9fb;
    --surface-color: #ffffff;
  }
  
  .dark-background {
    --background-color: #060606;
    --default-color: #ffffff;
    --heading-color: #ffffff;
    --surface-color: #252525;
    --contrast-color: #ffffff;
  }
  
  /* Smooth scroll */
  :root {
    scroll-behavior: smooth;
  }
  
/* Apply Times New Roman alternative to all text */
body {
    font-family: 'Noto Serif', 'Times New Roman', Times, serif;
}




.sidebar {
  border-right: 1px solid #ddd;
  text-align: center;
  font-size: large;
  font-family: 'Times New Roman', Times, serif;
}

.nav-link.active {
  background-color: #0d6efd;
  color: #fff !important;
  font-weight: bold;
}

.section-title {
      border-bottom: 3px solid #00d4ff;
      display: inline-block;
      padding-bottom: 5px;
    }
    .sop-card {
      background-color: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 12px;
      transition: all 0.3s ease-in-out;
    }
    .sop-card:hover {
      background-color: rgba(255, 255, 255, 0.15);
      transform: scale(1.02);
    }
    .sop-card h5 {
      color: #00d4ff;
    }
/* Line-Specific Styles */
.line1 {
    font-size: 40px;
    font-weight: 400;
    color: #000; /* Lighter Gray */
}

.line2 {
    font-size: 40px;
    font-weight: 700;
    color: #007bff; /* Highlighted color */
}

.line3 {
    font-size: 35px;
    font-weight: 600;
    color: #000; /* Black */
}

.line4 {
    font-size: 40px;
    font-weight: 700;
    color: #007bff; /* Blue */
}

/* Skills Section */
.skills {
    padding: 5em 0;
  }

 
  
  .skills .skill-box {
    background: #fff;
    padding: 2em;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    text-align: center;
  }
  
  .skills .skill-box h3 {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 15px;
  }
  
  .skills .skill-box p {
    font-size: 1.1rem;
    margin-bottom: 20px;
  }
  
  .skills .progress {
    height: 8px;
    background-color: #f1f1f1;
    border-radius: 10px;
    margin-top: 10px;
  }
  
  .skills .progress-bar {
    height: 100%;
    background-color: #007bff;
    border-radius: 10px;
  }
  
  .skills .progress-bar[aria-valuenow="97"] {
    background-color: #28a745; /* Green for Merchandising */
  }
  
  .skills .progress-bar[aria-valuenow="90"] {
    background-color: #007bff; /* Blue for HTML */
  }
  
  .skills .progress-bar[aria-valuenow="80"] {
    background-color: #f39c12; /* Yellow for CSS */
  }
  
  .skills .progress-bar[aria-valuenow="65"] {
    background-color: #e74c3c; /* Red for JavaScript */
  }
  
  .skills .text-end {
    font-weight: bold;
    color: #333;
  }
  
  @media (max-width: 768px) {
    .skills .skill-box {
      margin-bottom: 20px;
    }
  }
  .hero-heading {
    font-family: 'Noto Serif', serif;  /* Times New Roman alternative */
    font-weight: 700;
    text-align: left;  /* Align left or center as needed */
    color: #222;  /* Dark color */
}

/* Social Icons */
.social-icons a {
    color: black;
    margin-left: 10px;
    transition: color 0.3s ease;
}

.social-icons a:hover {
    color: #007bff;
}

#additionalInfo, #additionalInfoNew, #additionalInfoNew1, #additionalInfoNew2, #additionalInfoNew3, #additionalInfoNew4, #additionalInfoNew5, 
#additionalInfoNew6, #additionalInfoNew7, #additionalInfoNew8, #additionalInfoNew9, #additionalInfoNew10, #additionalInfoNew11, #additionalInfoNew12,
 #additionalInfoNew13, #additionalInfoNew14
{
  display: none;
}

.list-group-item {
  border: none;
  font-size: 1rem;
}


 .tnaSection {
      max-width: 960px;
    }
    #tnaSection {
      background-color: rgba(255, 255, 255, 0.95);
      color: #333;
      border-radius: 16px;
      box-shadow: 0 0 25px rgba(0,0,0,0.3);
      padding: 40px 30px;
      margin-top: 60px;
    }
    #tnaSection h1, h2 {
      font-weight: 700;
      color: #1f1c2c;
    }
    #tnaSection .form-label {
      font-weight: 500;
    }
    #tnaSection .btn {
      font-weight: 500;
      letter-spacing: 0.5px;
    }
    #tnaSection table {
      background-color: #fff;
    }
    #tnaSection table thead {
      background-color: #f0f0f0;
    }
    #tnaSection table td, table th {
      vertical-align: middle;
    }
   
    @media print {
      .no-print {
        display: none !important;
      }
    }

    

  .consumption {
    transition: transform 0.3s, box-shadow 0.3s;
     background-color: rgba(255, 255, 255, 0.95);
      color: #333;
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  }

  .feature-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 30px rgba(0,0,0,0.2);
  }

  .header-box {
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  }

  a {
    text-decoration: none !important;
  }