/* =========================
   GLOBAL & ROOT VARIABLES
   =========================
   - :root: Defines CSS variables for theme colors, used throughout the site for consistency.
   - body: Sets the main font and enables smooth scrolling for all HTML content.
*/
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&family=Savate:ital,wght@0,200..900;1,200..900&display=swap');

:root  {
    --text-color: #eeba0b;
    --extra-color: #198754;
    --paragraph-color: #f0f0f0;
    --background-color: #062726;
}

.bg-app-black {
    background-color: var(--background-color); 
}

body {
    font-family: "Newsreader", serif;
    scroll-behavior: smooth;
}

/* =========================
   BACK TO TOP BUTTON STYLES
   =========================
   - #backToTop: Styles the "Back to Top" button, including visibility, position, and hover effects.
*/

#backToTop {
  display: none;
  position: fixed;
  bottom: 40px;
  right: 40px;
  z-index: 99;
  font-size: 24px;
  border: none;
  font-size: 21px;
  outline: none;
  background: var(--background-color);
  color: var(--text-color);
  cursor: pointer;
  padding: 7px 28px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  overflow: hidden; /* Needed for the animation */
  position: fixed;
  border-top-right-radius: 14px;
  border-top-left-radius: 14px;
  transition: color 0.7s cubic-bezier(0.4,0,0.2,1);
}

#backToTop::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px; /* Start as a border */
  background: var(--extra-color); /* The animated background color */
  z-index: -1;
  transition: height 0.7s cubic-bezier(0.4,0,0.2,1);
}

#backToTop::after {
  height: var(--backtotop-bg-height, 0%); /* Animate to fill the button */
}

/* =========================
   NAVIGATION BAR STYLES
   =========================
   - .navbar: Styles the <nav> element for the main navigation bar, including background, height, and border.
   - .navbar-nav, .nav-item, .nav-link: Style the <ul> and <li> navigation structure, including hover/focus effects and icon spacing.
   - .fas: Targets Font Awesome icons inside nav links.
*/
.navbar {
    height: 14vh;    
    background: rgba(6, 39, 38, 0.7); /* semi-transparent background */
    backdrop-filter: blur(5px);
    border-bottom: 1px solid var(--extra-color);
    cursor: pointer;
}

.navbar-nav {
    font-family: "Newsreader", sans-serif;
    font-weight: 600;
}

.navbar-nav .nav-item {
    position: relative;
    padding-right: 21px;
    margin-right: 14px;
}

.navbar-nav .nav-item::before {
    /* L shape at bottom left */
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 21%;
    height: 30%;
    border-left: 1.4px solid var(--paragraph-color);
    border-bottom: 1.4px solid var(--paragraph-color);
    border-radius: 0 0 0 7px;
}

.navbar-nav .nav-item::after {
    /* Inverted L at top right */
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 70%;
    height: 50%;
    border-top: 1.4px solid var(--paragraph-color);
    border-right: 1.4px solid var(--paragraph-color);
    border-radius: 0 7px 0 0;
}

.navbar-nav .nav-item::before,
.navbar-nav .nav-item::after {
    transition: width 0.6s cubic-bezier(0.4,0,0.2,1), height 0.6s cubic-bezier(0.4,0,0.2,1);
}

.navbar-nav .nav-item::before {
    /* L shape at bottom left */
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 21%;
    height: 30%;
    border-left: 1.4px solid var(--paragraph-color);
    border-bottom: 1.4px solid var(--paragraph-color);
    border-radius: 0 0 0 7px;
}

.navbar-nav .nav-item::after {
    /* Inverted L at top right */
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 70%;
    height: 50%;
    border-top: 1.4px solid var(--paragraph-color);
    border-right: 1.4px solid var(--paragraph-color);
    border-radius: 0 7px 0 0;
}

.navbar-nav .nav-item:hover::before,
.navbar-nav .nav-item:focus-within::before {
    width: 100%;
    height: 100%;
}

.navbar-nav .nav-item:hover::after,
.navbar-nav .nav-item:focus-within::after {
    width: 100%;
    height: 100%;
}

.navbar-nav .nav-item.active-scrollspy::before,
.navbar-nav .nav-item.active-scrollspy::after {
    width: 100%;
    height: 100%;
}

.navbar-nav .nav-item.active-scrollspy .nav-link {
    color: var(--text-color);
}

.navbar-nav .nav-link {
    color: var(--extra-color);
    font-size: 1rem;
    padding: 0.5rem 1rem;
    transition: color 0.3s ease;
}

.navbar-nav .nav-link {
    color: var(--extra-color);
    font-size: 1rem;
    padding: 0.5rem 1rem;
    transition: color 0.3s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-item:hover .nav-link,
.navbar-nav .nav-item:focus-within .nav-link {
    color: var(--text-color);
}


.navbar-nav .nav-link .fas {
    padding: 0 7px;
}

/* =========================
   HOME SECTION STYLES
   =========================
   - #home: Styles the <section id="home">, including headings, subheadings, and text blocks.
   - .home-container, .choose-engineer-title, .set-apart-title, .tech-game-title: Style various headings and containers in the home section.
   - .span, .fas: Style highlighted text and icons within the home section.
*/
#home {
    padding: 0;
}

.home-container {
    padding: 0;
}

#home h1{
    font-size: 2.1rem;
    color: var(--text-color);
    margin: 2.1rem 0;
    letter-spacing: 2px;
    text-decoration: underline;
    text-underline-offset: 14px;
}

#services h1 {
    color: var(--text-color);
    margin: 3rem 0;
    letter-spacing: 2px;
    text-decoration: underline;
    text-underline-offset: 14px;
}

#contact h1 {
    color: var(--text-color);
    margin: 3rem 0;
    letter-spacing: 2px;
    text-decoration: underline;
    text-underline-offset: 14px;
}

#home .choose-engineer-title {
    font-size: 1.4rem;
    color: var(--text-color);
    margin: 2.1rem 0;
    letter-spacing: 2px;
    text-decoration: underline;
    text-underline-offset: 14px;
}

#home .set-apart-title {
    font-size: 1.4rem;
    color: var(--text-color);
    margin-top: 4.9rem;
    padding-bottom: 7px;
    letter-spacing: 2px;
    text-decoration: underline;
    text-underline-offset: 14px;
}

#home .set-apart-title-2 {
    margin-bottom: 4.9rem;
    font-size: 1rem;
    font-weight: 400;
    color: var(--extra-color);
    font-family: "Savate", sans-serif;
}

#home .tech-game-title {
    font-size: 1.4rem;
    color: var(--text-color);
    margin-top: 4.9rem;
    padding-bottom: 7px;
    letter-spacing: 2px;
    text-decoration: underline;
    text-underline-offset: 14px;
}

#referrals .referral-title {
    font-size: 2.1rem;
    color: var(--text-color);
    padding-bottom: 7px;
    letter-spacing: 2px;
    text-decoration: underline;
    text-underline-offset: 14px;
}

#referrals .referral-title-2 {
    margin: 2.1rem 0;
    font-size: 1rem;
    font-weight: 400;
    color: var(--extra-color);
    font-family: "Savate", sans-serif;
}

#home .fa-arrow-turn-down {
    color: var(--text-color);
    font-size: 1rem;
    padding-left: 14px;
}

#home .home-text {
    font-size: 1.2rem;
    color: var(--paragraph-color);
    margin: 4.9rem 0;
    line-height: 1.6;
}

.home-container .choose-engineer-text {
    font-size: 1.1rem;
    color: var(--paragraph-color);
    margin: 2.1rem 0;
}

.home-container .choose-engineer-text p {
    border-bottom: 1.4px solid var(--extra-color);
    padding: 36px 0;
}

.home-container .set-apart-text p {
    border-bottom: 1.4px solid var(--extra-color);
    padding: 36px 0;
}

#home .home-container .tech-game-text {
    border-bottom: 1.4px solid var(--extra-color);
    padding: 36px 0;
}

#home .span {
    color: var(--extra-color);
    font-family: 'Savate', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
}

#home .span .fas {
    color: var(--extra-color);
    font-size: 1.2rem;
    margin-bottom: 42px;
}

/* =========================
   SERVICES SECTION STYLES
   =========================
   - #services: Styles the <section id="services"> and its child elements.
   - .services-row, .card, .card-body: Style the Bootstrap card layout for service offerings.
   - .btn: Styles the service action buttons.
*/
#services .services-row {
    margin-top: 3rem;
}

#services .services-row .card {
    background: var(--background-color);
    border: none;
    margin: 2rem;
}

#services .services-row .card .card-body {
    padding: 2rem;
}

#services .services-row .card .card-body h3 {
    color: var(--text-color);
    font-size: 1.4rem;
    margin-bottom: 1rem;
}

#services .services-row .card .card-body h3 i {
    color: var(--extra-color);
    padding-right: 0.7rem;
    transition: color 0.7s ease;
}

#services .services-row .card .card-body:hover i {
    color: var(--text-color);
}

#services .services-row .card .card-body .card-text {
    color: var(--paragraph-color);
    font-size: 1rem;
    line-height: 1.6;
    letter-spacing: 1.4px;
    padding: 1.4rem 0;
}

#services .services-row .card .card-body .card-text2 {
    color: var(--paragraph-color);
    font-size: 1.2rem;
    font-weight: 400;
}

#services .services-row .card .card-body .card-text2 span {
    color: var(--text-color);
    font-family: 'Savate', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    padding-left: .7rem;
    font-size: 1rem;
}

#services .services-row .card .card-body .btn {
    color: var(--paragraph-color);
    text-transform: uppercase;
    font-weight: 600;
    font-family: 'Savate', sans-serif;
    background-color: var(--extra-color);
    border: none;
    padding: 0.7rem 1.4rem;
    transition: background-color 0.7s ease, color 0.3s ease;
}

#services .services-row .card .card-body .btn:hover {
    background-color: var(--text-color);
    color: var(--background-color);
}

.section-content {
    min-height: calc(100vh - 4rem); /* Approx. header height; ensures sections are tall enough to scroll */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
}

/* =========================
   CONTACT SECTION STYLES
   =========================
   - #contact: Styles the <section id="contact"> and its child elements.
   - .social-media-link, .document-download-link: Style the social and download links, including icons and text.
   - .social-link, i, span: Style anchor tags and icons within contact links.
*/
#contact .contact-title-2 {
    font-size: 1rem;
    font-weight: 400;
    color: var(--extra-color);
    text-transform: uppercase;
    font-family: "Savate", sans-serif;
    margin-bottom: 4rem;
}

#contact .social-media-link {
    border-bottom: 1.4px solid var(--text-color);
    font-size: 1rem;
    padding: 21px;
}

#contact .document-download-link {
    border-bottom: 1.4px solid var(--text-color);
    font-size: 1rem;
    padding: 21px;
    margin-top: 21px;
}

#contact .social-media-link p {
    padding-top: 49px;
    padding-left: 49px;
    font-family: 'Newsreader', sans-serif;
}

#contact .document-download-link p {
    padding-top: 49px;
    padding-left: 49px;
    font-family: 'Newsreader', sans-serif;
}

#contact .social-media-link .social-link {
    text-decoration: none;
}

#contact .document-download-link .social-link {
    text-decoration: none;
}

#contact .social-media-link .social-link i {
    color: var(--text-color);
    font-size: 2.8rem;
}

#contact .document-download-link .social-link i {
    color: var(--text-color);
    font-size: 2.8rem;
}

#contact .social-media-link:hover i {
    color: var(--extra-color);
    transition: color 0.3s ease;
}

#contact .document-download-link:hover i {
    color: var(--extra-color);
    transition: color 0.3s ease;
}

#contact .social-media-link .social-link span {
    color: var(--extra-color);
    font-family: 'Savate', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    padding-left: 4rem;
}

#contact .document-download-link .social-link span {
    color: var(--extra-color);
    font-family: 'Savate', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    padding-left: 4rem;
}

/* =========================
   REFERRALS SECTION STYLES
   =========================
   - #referrals: Styles the <section id="referrals"> and its form elements.
   - .referral-form, input, form .btn: Style the referral input and submit button.
*/
#referrals .referral-form input {
    border: none;
    background: var(--extra-color);
    color: var(--paragraph-color);
    opacity: .5;
}

#referrals form .btn {
    width: 490px;
    color: var(--paragraph-color);
    text-transform: uppercase;
    font-weight: 600;
    font-family: 'Savate', sans-serif;
    background-color: var(--extra-color);
    border: none;
    padding: 0.7rem 1.4rem;
    transition: background-color 0.7s ease, color 0.3s ease;
}

#referrals form .btn:hover {
    background-color: var(--text-color);
    color: var(--background-color);
}

/* =========================
   CARD HOVER EFFECTS
   =========================
   - .card-hover-effect: Adds interactive hover effects to service cards.
*/
.card-hover-effect {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    border-color: #198754 !important; /* Ensure border is green */
}

.card-hover-effect:hover {
    transform: translateY(-5px); /* Lift card */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5); /* Stronger shadow */
}

/* =========================
   QUOTE MODAL STYLES
   =========================
   - #quoteModal: Styles the modal dialog for quote requests, including header, form, and alerts.
*/
#quoteModal .modal-content {
    background: #181a1b;
    color: #fff;
    border-radius: 1rem;
    box-shadow: 0 8px 32px 0 rgba(0,0,0,0.5);
    border: 1px solid #222;
}

#quoteModal .modal-header {
    border-bottom: 1px solid #222;
    background: #181a1b;
}

#quoteModal .modal-title {
    color: #6dfc8c;
    font-weight: 600;
}

#quoteModal .btn-close {
    filter: invert(1);
}

#quoteModal .form-control {
    background: #23272b;
    color: #fff;
    border: 1px solid #444;
}

#quoteModal .form-control:focus {
    background: #23272b;
    color: #fff;
    border-color: #6dfc8c;
    box-shadow: 0 0 0 0.2rem rgba(109,252,140,0.15);
}

#quoteModal .btn-success {
    background: linear-gradient(90deg, #6dfc8c 0%, #1fa463 100%);
    border: none;
    color: #181a1b;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(109,252,140,0.15);
}

#quoteModal .btn-success:hover {
    background: linear-gradient(90deg, #1fa463 0%, #6dfc8c 100%);
    color: #181a1b;
}

#quoteModal .alert-success {
    background: #232b23;
    color: #6dfc8c;
    border-color: #6dfc8c;
}

#quoteModal .alert-danger {
    background: #2b2323;
    color: #ff6b6b;
    border-color: #ff6b6b;
}

/* =========================
   SLIDE-IN/SLIDE-OUT BUTTON EFFECTS
   =========================
   - .slide-btn: Styles the animated button that appears on hover for social/document links and cards.
   - .card-hover-group: Container for cards with slide-out button effect.
*/
.slide-btn {
  display: block;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s, transform 0.3s;
  width: 100%;
  margin: 0.5rem auto 0 auto;
  background: #198754;
  color: #fff;
  border: none;
  border-radius: 0.3rem;
  pointer-events: none;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
}

.social-media-link:hover + .slide-btn,
.document-download-link:hover + .slide-btn {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.slide-btn:hover {
    color: var(--text-color);
    border-bottom: 1.4px solid var(--text-color);
}

.position-relative {
  position: relative !important;
}

.card-hover-group {
  position: relative;
}

.slide-btn {
  display: block;
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
  transition: opacity 0.3s, transform 0.3s;
  width: 90%;
  margin: 0.5rem auto 0 auto;
  background: #198754;
  color: #fff;
  border: none;
  border-radius: 0.3rem;
  position: absolute;
  left: 0; right: 0;
  z-index: 2;
  transition-delay: 0s, .7s;
}

.card-hover-group:hover .slide-btn,
.card-hover-group:focus-within .slide-btn {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
}

.card-hover-group:not(:hover):not(:focus-within) .slide-btn {
  transition-delay: .7s, 0s;
}

/* =========================
   UNIVERSAL FADE-IN AND MOVE-UP ANIMATION
   =========================
   - .reveal-on-scroll: Adds fade-in and move-up animation for elements.
   - .visible: Triggers the animation.
   - .hidden-up: Adds reverse effect for elements.
   - .heading: Optional slower effect for headings.
*/
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.4,0,0.2,1), transform 0.8s cubic-bezier(0.4,0,0.2,1);
}
.reveal-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}
.reveal-on-scroll.hidden-up {
    opacity: 0;
    transform: translateY(-40px);
}

/* Optional: slower, more pronounced effect for headings */
.reveal-on-scroll.heading {
    transition-duration: 1.2s;
    transform: translateY(60px);
}

/* =========================
   GLASS PANEL STYLES
   =========================
   - .glass-panel: Adds a frosted glass effect for panels.
*/
.glass-panel {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  box-shadow: 0 4px 32px rgba(0,0,0,0.1);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.3);
  padding: 2rem;
}

/* =========================
   RESPONSIVE STYLES (MOBILE)
   =========================
   - @media (max-width: 576px): Adjusts layout, font sizes, paddings, and button widths for mobile screens.
*/
@media (max-width: 576px) {
    .navbar-nav.flex-row {
        flex-direction: row !important;      /* Keep nav links in a row */
        align-items: center !important;
        width: 80%;
        justify-content: space-between;
        gap: 0.2rem;
    }
    .navbar-nav .nav-item {
        width: auto;
        padding: 7px;
        margin: 0 7px;
    }
    .navbar-nav .nav-link {
        padding: 0.3rem 0.5rem !important;
        font-size: 0.85rem !important;
        text-align: center;
        min-width: 0;
    }
    .navbar .container {
        justify-content: flex-start !important;
        padding-left: 0.2rem;
        padding-right: 0.2rem;
    }

    /* Remove fixed width from referral form button */
    #referrals form .btn {
        width: 100% !important;
    }

    /* Reduce padding and margin for cards and sections */
    .section-content {
        padding: 0.5rem !important;
    }
    #services .services-row .card {
        margin: 0.5rem !important;
    }
    #services .services-row .card .card-body {
        padding: 1rem !important;
    }

    /* Reduce font sizes for headings */
    #home h1, #services h1, #contact h1, #referrals .referral-title {
        font-size: 1.3rem !important;
        text-decoration: none !important;
    }
    #home .choose-engineer-title,
    #home .set-apart-title,
    #home .tech-game-title {
        font-size: 1rem !important;
    }

    /* Reduce padding in text blocks */
    .home-container .choose-engineer-text p,
    .home-container .set-apart-text p,
    #home .home-container .tech-game-text {
        padding: 12px 0 !important;
    }

    /* Contact section paddings */
    #contact .social-media-link p,
    #contact .document-download-link p {
        padding-top: 12px !important;
        padding-left: 0 !important;
    }
    #contact .social-media-link .social-link span,
    #contact .document-download-link .social-link span {
        padding-left: 1rem !important;
    }
}