/********** Template CSS **********/

:root {

  --primary: #EB1616;

  --secondary: #191C24;

  --light: #6C7293;

  --dark: #000000;

}



/* Back to Top */

.back-to-top {

  position: fixed;

  display: none;

  right: 45px;

  bottom: 45px;

  z-index: 99;

}



/*** Spinner ***/

#spinner {

  opacity: 0;

  visibility: hidden;

  transition: opacity .5s ease-out, visibility 0s linear .5s;

  z-index: 99999;

}

#spinner.show {

  transition: opacity .5s ease-out, visibility 0s linear 0s;

  visibility: visible;

  opacity: 1;

}



/*** Button ***/

.btn { font-weight: 500; transition: .5s; }

.btn-square { width: 38px; height: 38px; }

.btn-sm-square { width: 32px; height: 32px; }

.btn-lg-square { width: 48px; height: 48px; }

.btn-square, .btn-sm-square, .btn-lg-square {

  padding: 0; display: flex; align-items: center; justify-content: center; font-weight: normal;

}



/*** Navbar ***/

.navbar .dropdown-toggle::after {

  border: none; content: "\f107"; font-family: "Font Awesome 5 Free"; font-weight: 900;

  vertical-align: middle; margin-left: 8px;

}

.navbar .navbar-nav .nav-link {

  margin-right: 30px; padding: 40px 0; color: var(--light);

  font-family: 'Oswald', sans-serif; font-size: 18px; font-weight: 600; text-transform: uppercase; outline: none;

}

.navbar .navbar-nav .nav-link:hover,

.navbar .navbar-nav .nav-link.active { color: var(--primary); }

.navbar.sticky-top { top: -100px; transition: .5s; }



@media (max-width: 991.98px) {

  .navbar .navbar-nav .nav-link,

  .navbar.shadow-sm .navbar-nav .nav-link { margin-right: 0; padding: 10px 0; }

  .navbar .navbar-nav { margin-top: 8px; border-top: 1px solid var(--light); }

}

@media (min-width: 992px) {

  .navbar.shadow-sm .navbar-nav .nav-link { padding: 20px 0; }

  .navbar .nav-item .dropdown-menu {

    display: block; border: none; margin-top: 0; top: 150%;

    opacity: 0; visibility: hidden; transition: .5s;

  }

  .navbar .nav-item:hover .dropdown-menu {

    top: 100%; visibility: visible; transition: .5s; opacity: 1;

  }

}



/*** Header / Carousel ***/

.carousel-caption {

  top: 0; left: 0; right: 0; bottom: 0;

  background: rgba(0, 0, 0, .85); z-index: 1;

}

.carousel-control-prev, .carousel-control-next { width: 10%; }

.carousel-control-prev-icon, .carousel-control-next-icon { width: 3rem; height: 3rem; }



@media (max-width: 768px) {

  #header-carousel .carousel-item { position: relative; min-height: 450px; }

  #header-carousel .carousel-item img {

    position: absolute; width: 100%; height: 100%; object-fit: cover;

  }

}



/* Default header image (pages that don’t override) */

.page-header{

  background:

    linear-gradient(rgba(0, 0, 0, .85), rgba(0, 0, 0, .85)),

    url(../img/carousel-1.jpg) center center no-repeat;

  background-size: cover;

}

.breadcrumb-item + .breadcrumb-item::before { color: var(--light); }



/*** Services (legacy square button kept for other uses) ***/

.service-item .btn {

  position: absolute; right: -50px; bottom: -50px; width: 50px; height: 50px;

  color: var(--primary); background: var(--dark); opacity: 0;

}

.service-item:hover .btn { right: 0; bottom: 0; opacity: 1; }



/*** Team ***/

.team-item .team-img::before,

.team-item .team-img::after {

  position: absolute; content: ""; width: 0; height: 100%; top: 0; left: 0;

  background: rgba(0, 0, 0, .85); transition: .5s;

}

.team-item .team-img::after { left: auto; right: 0; }

.team-item:hover .team-img::before,

.team-item:hover .team-img::after { width: 50%; }



.team-item .team-img .team-social {

  position: absolute; width: 100%; height: 100%; top: 0; left: 0;

  display: flex; align-items: center; justify-content: center;

  transition: .5s; z-index: 3; opacity: 0;

}

.team-item:hover .team-img .team-social { transition-delay: .3s; opacity: 1; }



.team-item .team-social .btn {

  display: inline-flex; margin: 0 3px; color: var(--primary); background: var(--dark);

}

.team-item .team-social .btn:hover { color: #FFFFFF; background: var(--primary); }



/*** Testimonial ***/

.testimonial-carousel { max-width: 700px; margin: 0 auto; }

.testimonial-carousel .owl-dots {

  margin-top: 35px; height: 100px; display: flex; align-items: center; justify-content: center;

}

.testimonial-carousel .owl-dots .owl-dot {

  width: 60px; height: 60px; margin: 0 5px; padding: 10px; background: var(--secondary); transition: .5s;

}

.testimonial-carousel .owl-dots .owl-dot.active { width: 100px; height: 100px; }

.testimonial-carousel .owl-dots .owl-dot img { opacity: .1; transition: .5s; }

.testimonial-carousel .owl-dots .owl-dot.active img { opacity: 1; }



/*** Footer ***/

.footer .btn.btn-link {

  display: block; margin-bottom: 5px; padding: 0; text-align: left; color: var(--light);

  font-size: 15px; font-weight: normal; text-transform: capitalize; transition: .3s;

}

.footer .btn.btn-link::before {

  position: relative; content: "\f105"; font-family: "Font Awesome 5 Free"; font-weight: 900; margin-right: 10px;

}

.footer .btn.btn-link:hover { color: var(--primary); letter-spacing: 1px; box-shadow: none; }

.footer .copyright { padding: 1.5rem; font-size: 15px; background: var(--dark); }

.footer .copyright a { color: var(--light); }

.footer .copyright a:hover { color: var(--primary); }



/*** Brand / Logo ***/

@font-face {

  font-family: 'Cyberdyne';

  src: url('/fonts/cyberdyneital.woff2') format('woff2'),

       url('/fonts/cyberdyneital.ttf') format('truetype');

  font-weight: normal;

  font-style: normal;

  font-display: swap;

}

.logo-text { font-family: 'Cyberdyne', sans-serif; font-size: 2.5rem; font-weight: normal; text-transform: uppercase; }

.logo-text .sim { color: red; }

.logo-text .forge { color: white; }

.logo-text .reg-symbol {

  font-family: Arial, sans-serif; font-size: 11px; vertical-align: super; color: #ccc; margin-left: 2px; line-height: 1;

}



/*** “Learn More” corner button on service cards ***/

.btn-learnmore {

  position: absolute; bottom: 0; right: 0; display: inline-block;

  background-color: #000; color: var(--primary);

  font-family: 'Oswald', sans-serif; font-size: 14px; font-weight: 600; text-transform: uppercase;

  padding: 8px 18px; text-decoration: none; border-radius: 0; z-index: 2;

  opacity: 0; visibility: hidden; transform: translate(120%, 120%);

  transition: opacity .4s ease, transform .4s ease, background-color .25s ease, color .25s ease;

}

@media (min-width: 992px) {

  .service-item:hover .btn-learnmore { opacity: 1; visibility: visible; transform: translate(0, 0); }

}

@media (max-width: 991.98px) {

  .service-item.show-btn .btn-learnmore { opacity: 1; visibility: visible; transform: translate(0, 0); }

}

.btn-learnmore:hover { background-color: var(--primary); color: #fff; }



/*** “View” button inside team card hover ***/

.team-item .team-social .btn.btn-square {

  font-family: 'Oswald', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; line-height: 1;

  width: auto; height: auto; padding: .5rem .9rem; display: inline-flex; align-items: center; justify-content: center;

  border-radius: 0; background: var(--dark); color: var(--primary); transition: all .25s ease;

}

.team-item .team-social .btn.btn-square:hover { background: var(--primary); color: #fff; }



/*** New: Corner “View” button (team cards) ***/

.btn-view{

  position:absolute; bottom:0; right:0; display:inline-block; background:#000; color:var(--primary);

  font-family:'Oswald',sans-serif; font-size:14px; font-weight:600; text-transform:uppercase;

  padding:8px 18px; text-decoration:none; border-radius:0; z-index:2; opacity:0; visibility:hidden;

  transform:translate(120%,120%); transition:opacity .4s ease, transform .4s ease, background-color .25s ease, color .25s ease;

}

@media (min-width: 992px){ .team-item:hover .btn-view{ opacity:1; visibility:visible; transform:translate(0,0); } }

@media (max-width: 991.98px){ .team-item.show-btn .btn-view{ opacity:1; visibility:visible; transform:translate(0,0); } }

.btn-view:hover{ background:var(--primary); color:#fff; }



/*** Minor utilities ***/

.w-50.bg-secondary h1, .w-50.bg-secondary h2 { text-align: center; }



/*** Mobile-only navbar layout tweaks ***/

@media (max-width: 768px) {

  .navbar.navbar-expand-lg { flex-direction: column; align-items: center; }

  .navbar-brand { text-align: center; margin: 0 auto; }

  .navbar-toggler { margin: .5rem auto; }

  .navbar-collapse, .navbar-nav .nav-link { text-align: center; }

  .navbar .dropdown-menu { text-align: center; margin: 0 auto; }

  .navbar .dropdown-menu .dropdown-item { text-align: center; }

}



/*** Hero slide image sizing (global) ***/

#header-carousel .carousel-item > img {

  position: static;

  width: 100%;

  height: auto;          /* preserve aspect ratio */

  display: block;

  object-fit: contain;   /* avoid crop; change to cover if you prefer */

}



/*** Unify hero slide title across H1 and P ***/

.carousel-caption .hero-title {

  font-family: 'Oswald', sans-serif;

  font-weight: 600;

  line-height: 1.1;

  text-transform: uppercase;

  letter-spacing: 0.5px;

}



/*** ® symbol sizing ***/

.reg-symbol { margin-left: 2px; font-size: 0.6em; }



/*** Sidebar ToC + Summary + Callout (dark theme support) ***/

.toc-sticky{

  background: rgba(255,255,255,0.04);

  border: 1px solid rgba(255,255,255,0.10);

  border-radius: .5rem;

  padding: 1rem;

}

.toc-sticky h3{ color:#fff; }

.toc-sticky .list-group{ background: transparent; }

.toc-sticky .list-group-item{

  background: transparent !important;

  color: #e9ecef;

  border-color: rgba(255,255,255,0.10);

  padding-left: .25rem; padding-right: .25rem;

}

.toc-sticky .list-group-item a{ color: var(--bs-primary); }

.toc-sticky .list-group-item a:hover{ text-decoration: underline; }

.list-group-flush > .list-group-item{ background-color: transparent !important; }



/* Summary panel – dark */

.policy-summary{

  background: rgba(255,255,255,0.04);

  border: 1px solid rgba(255,255,255,0.10);

  color: #e9ecef;

  border-radius: .5rem;

}

.policy-summary a{ color: var(--bs-primary); }

main .policy-summary h2{ color:#fff; opacity:1; }

main .policy-summary li{ color:#e9ecef; }

main .policy-summary .text-muted{ color:#adb5bd; }



/* Boilerplate / callout – dark */

main .callout{

  background: rgba(255,255,255,0.04);

  border: 1px solid rgba(255,255,255,0.10);

  border-left: 4px solid var(--bs-primary);

  color:#e9ecef;

  border-radius: .5rem;

}

main .callout strong{ color:#fff; }



/* ======================================================================

   PAGE-SPECIFIC OVERRIDE: Terms & Conditions header image

   Add class="page-terms" on the <body> of the T&C page.

   Because this CSS file lives in /css/, images use ../img/ paths here.

   ====================================================================== */

.page-terms .page-header{

  background:

    linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)),

    url("../img/simforge-nascar-atlanta.jpg") no-repeat !important; /* force override */

  background-size: cover !important;

  background-position: 88% 18% !important; /* focus on car/logo */

  min-height: 420px;

}

@media (max-width: 1399.98px){ .page-terms .page-header{ background-position: 86% 22% !important; } }

@media (max-width: 991.98px) { .page-terms .page-header{ background-position: 80% 28% !important; } }

@media (max-width: 575.98px){ .page-terms .page-header{ background-position: 75% 36% !important; min-height: 340px; } }



@media (min-width: 992px){

  .page-terms .page-header{ min-height: clamp(520px, 50vh, 720px); }

}



.page-terms .page-header{

  display: flex;

  align-items: center;

  justify-content: center;

  min-height: 420px;

}

.page-terms .page-header .container{

  padding-top: 0 !important;

  padding-bottom: 0 !important;

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

}

.page-terms .page-header .breadcrumb{ justify-content: center !important; }

.page-terms .policy-summary,

.page-terms .callout{

  background: rgba(255,255,255,0.04) !important;

  border: 1px solid rgba(255,255,255,0.10) !important;

  color: #e9ecef !important;

  border-radius: .5rem !important;

}

.page-terms .policy-summary h2,

.page-terms .callout strong{ color:#fff !important; }

.page-terms .policy-summary .text-muted{ color:#adb5bd !important; }

.page-terms .policy-summary a{ color: var(--bs-primary) !important; }



/* Force Simforge logo to center on mobile */

@media (max-width: 768px) {

  .navbar .navbar-brand {

    display: flex;

    justify-content: center;

    align-items: center;

    width: 100% !important;

    margin: 0 auto !important;

    text-align: center !important;

  }

  .logo-text { margin: 0 auto !important; text-align: center !important; }

}



/* Center logo text on mobile navbar */

@media (max-width: 991.98px) {

  .navbar-brand {

    margin-left: auto !important;

    margin-right: auto !important;

    text-align: center !important;

    display: flex;

    justify-content: center;

  }

  .navbar .logo-text { margin: 0 auto; text-align: center; }

}



.carousel-item picture,

.carousel-item img {

  width: 100%;

  height: 100vh;

  object-fit: cover;

  object-position: center;

}



/* ======================================================================

   PAGE-SPECIFIC OVERRIDE: About page header image

   Add class="page-about" on the <body> of the About page.

   ====================================================================== */

.page-about .page-header{

  background:

    linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)),

    url("../img/simforge-about.jpg") no-repeat !important; /* replace with your chosen image */

  background-size: cover !important;

  background-position: center center !important;

  min-height: 420px;

}

@media (min-width: 992px){

  .page-about .page-header{ min-height: clamp(520px, 50vh, 720px); }

}

.page-about .page-header{

  display: flex;

  align-items: center;

  justify-content: center;

}

.page-about .page-header .container{

  padding-top: 0

 /* ======================================================================

   PAGE-SPECIFIC OVERRIDE: About page header image

   Requires: <body class="about-page"> in about.html

   ====================================================================== */

.about-page .page-header{

  background:

    linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)),

    url("../img/simforge-about.jpg") no-repeat center center !important;

  background-size: cover !important;

  min-height: 420px;

}

@media (min-width: 992px){

  .about-page .page-header{ min-height: clamp(520px, 50vh, 720px); }

}

.about-page .page-header{

  display: flex;

  align-items: center;

  justify-content: center;

}

.about-page .page-header .container{

  padding-top: 0 !important;

  padding-bottom: 0 !important;

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

}



/* Mobile-only tweaks for the "5+ Years Experience" block */

@media (max-width: 768px) {

  .about-stats-box h1,

  .about-stats-box h2 {

    display: block;

    width: 100%;

    text-align: center;

  }



  .about-stats-box h1 {

    font-size: 1.6rem;   /* smaller for mobile */

    margin-bottom: 0.3rem;

  }



  .about-stats-box h2 {

    font-size: 1.3rem;   /* proportional to h1 */

    margin-top: 0;

  }

}
	
	/* Ensure images are visible on mobile and fill the frame */
#header-carousel .carousel-item {
  position: relative;
  min-height: 68vh;
  background: transparent !important; /* kill accidental black bg */
}

#header-carousel .carousel-item img.carousel-img {
  width: 100%;
  height: 68vh;
  object-fit: cover;
  display: block;
}

/* Remove any accidental overlay from template */
#header-carousel .carousel-item::before {
  content: none !important;
}

/* Optional: if you still want a subtle overlay for text legibility */
#header-carousel .carousel-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.15));
  pointer-events: none;
}

	/* Smooth FAQ Transitions */
.accordion-button {
  transition: background-color .25s ease, color .25s ease, box-shadow .25s ease, filter .25s ease;
}
.accordion-button::after {
  transition: filter .25s ease, transform .25s ease;
}

/* Hover */
.accordion-button:hover {
  background-color: #0d6efd !important; /* Simforge primary */
  color: #fff !important;
}

/* Active (expanded) */
.accordion-button:not(.collapsed) {
  background-color: #0d6efd !important;
  color: #fff !important;
  box-shadow: none;
}

/* Make the Bootstrap caret visible on dark/blue backgrounds */
.accordion-button::after {
  filter: invert(1);
}
.accordion-button:not(.collapsed)::after {
  transform: rotate(180deg); /* subtle flip when open */
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .accordion-button,
  .accordion-button::after {
    transition: none !important;
  }
}
	
	/* Smooth in-page anchor scrolling */
html {
  scroll-behavior: smooth;
}

/* Prevent motion for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Offset for fixed navbar so the section title isn't hidden */
#faq { scroll-margin-top: 90px; }  /* adjust if your navbar height differs */