@import url("https://use.typekit.net/xxe4ryq.css");

/* MODERN DESIGN SYSTEM */
:root {
  --primary: #0f172a;
  --secondary: #3b82f6;
  --accent: #10b981;
  --text-main: #f3f3f3;
  --bg-dark: #343330;
  --glass: rgba(255, 255, 255, 0.03);
  --glass-border: rgba(255, 255, 255, 0.1);
  --shadow-premium: 0 20px 40px rgba(0,0,0,0.4);
}

#fabtheme-body {
  background-color: var(--primary);
  color: var(--text-main);
  font-size: 18px;
  line-height: 1.6;
  font-family: 'Inter', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Outfit', sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 800;
}
/* END OF HEADINGS */

/* ABOUT */
#about {
	background-image: linear-gradient(rgba(15, 23, 42, 0.8), rgba(15, 23, 42, 0.8)), url("../images/about_bg_dark.png");
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}

.fabtheme-about{
	background: rgba(15, 23, 42, 0.9);
	backdrop-filter: blur(10px);
	color: #F3F3F3;
	border-left: 6px solid var(--secondary) !important;
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.3);
	font-size: 15px;
}

.fabtheme-about p {
	margin-bottom: 10px;
}
/* END OF ABOUT */

/* TEAM */
#team {
	background-image: linear-gradient(rgba(15, 23, 42, 0.8), rgba(15, 23, 42, 0.8)), url("../images/AdobeStock_379918456.jpeg");
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}
.fabtheme-team-1{
	background: rgba(15, 23, 42, 0.95);
	backdrop-filter: blur(10px);
	color: #F3F3F3;
	border-right: 8px solid var(--accent) !important;
	border-radius: 0 12px 12px 0;
}
.fabtheme-team-2{
	border: 0;
	border-radius: 16px;
	height: 100%;
	min-width: 150px;
	max-width: 300px;
	margin-bottom: 24px;
	padding: 0;
	overflow: hidden;
	background-color: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.fabtheme-team-2:hover{
	transform: translateY(-10px);
	background-color: rgba(255, 255, 255, 0.1);
	box-shadow: 0 20px 40px rgba(0,0,0,0.4);
	border-color: var(--secondary);
}
/* END OF TEAM */

/* SERVICES */
.fabtheme-services{
	background: rgba(15, 23, 42, 0.95);
	backdrop-filter: blur(10px);
	color: #F3F3F3;
	border-right: 8px solid var(--accent) !important;
	border-radius: 0 12px 12px 0;
}
.fabtheme-services-2{
	background: rgba(255, 255, 255, 0.05) !important;
	color: #F3F3F3 !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	border-radius: 12px !important;
	transition: all 0.3s ease !important;
}
.fabtheme-services-2:hover{
	background: rgba(255, 255, 255, 0.1) !important;
	transform: scale(1.02);
	box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
/* END OF SERVICES */

/* RESOURCES */
#resources{
	background-image: linear-gradient(rgba(15, 23, 42, 0.8), rgba(15, 23, 42, 0.8)), url("../images/AdobeStock_425641109-3.jpeg");
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}
.fabtheme-resources{
	background: rgba(15, 23, 42, 0.95);
	color: #F3F3F3;
	border-left: 20px solid #a35404e6;
}
.fabtheme-resources-2{
	background: rgba(15, 23, 42, 0.95);
	color: #F3F3F3;
	border: 0;
	border-radius: 0;
	text-align: center;
	font-weight: lighter;
}
/* END OF RESOURCES */

/* CONTACT */
#contact {
	background-image: linear-gradient(rgba(15, 23, 42, 0.8), rgba(15, 23, 42, 0.8)), url("../images/contact_Picture.jpg");
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}
.fabtheme-contact{
	background: rgba(15, 23, 42, 0.95);
	color: #F3F3F3;
	border-left: 20px solid #a35404e6;
}
/* END OF CONTACT */

/* PARALLAX */
.fabtheme-parallax-1{
	height: 100%;
	width: 100%;
	background-image: url("../images/services_bg_dark-3.png");
  background-attachment: fixed;
  background-position: center;
  background-repeat: repeat;
	background-size: cover;
}

.fabtheme-parallax-2{
	height: 100%;
	width: 100%;
  background-attachment: fixed;
  background-position: center;
  background: rgba(15, 23, 42, 0.95);
  background-repeat: no-repeat;
	background-size: cover;
}
/* END OF PARALLAX */

/* NAVIGATION */
#fabtheme-navbar {
  position: fixed;
  /* Reduced vertical padding from 10px to 5px */
  padding: 5px 10px;
  background-color: rgba(15, 23, 42);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border-bottom: 0px solid rgba(255,255,255,0.05);
  backdrop-filter: blur(0px);
  z-index: 1000;
}

#fabtheme-navbar.solid {
  /* Reduced vertical padding from 10px to 5px */
  padding: 5px 10px;
  background-color: rgba(255, 255, 255);
  backdrop-filter: blur(12px);
  color: #0f172a;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  border-bottom: 0px solid rgba(0,0,0,0.05);
}

/* Fix for the space between Title and Subtitle */
.brand-title h1 {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1; /* Ensures the text box doesn't have extra height */
}

.brand-title {
  font-size: 30px;
  font-weight: 800;
  color: white;
  line-height: 1;
  letter-spacing: 0.5px;
  transition: color 0.3s ease;
}

.brand-subtitle {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  /* Use a small negative margin if you want them even closer */
  margin-top: 0px; 
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: color 0.3s ease;
  line-height: 1.2;
}

/* Rest of your existing CSS... */
#fabtheme-navbar .fabtheme-nav-link {
  color: rgba(255,255,255,0.85);
  font-weight: 500;
  transition: all 0.3s ease;
}

#fabtheme-navbar.solid .fabtheme-nav-link {
  color: #0f172a;
}

/* Ensures the H1 inside the title turns black in solid mode */
#fabtheme-navbar.solid .brand-title,
#fabtheme-navbar.solid .brand-title h1 {
  color: #000000 !important;
}

/* Ensures the subtitle turns black/dark gray in solid mode */
#fabtheme-navbar.solid .brand-subtitle {
  color: #333333 !important;
  opacity: 1;
}

/* --- Logo Swap Logic --- */

/* When NOT solid: show light logo, hide dark logo */
#fabtheme-navbar:not(.solid) .logo-light {
  display: block !important;
}
#fabtheme-navbar:not(.solid) .logo-dark {
  display: none !important;
}

/* When solid: hide light logo, show dark logo */
#fabtheme-navbar.solid .logo-light {
  display: none !important;
}
#fabtheme-navbar.solid .logo-dark {
  display: block !important;
}

/* Remove the filter from previous version as we are now swapping files */
#fabtheme-navbar:not(.solid) .brand-logo {
  filter: none;
}
/* END OF NAVIGATION */
/* LINK SHOW */
.fabtheme-link-show{
    padding-top: 60px;
    margin-top: -60px;
}
/* END OF LINK SHOW */
/* LINKS */
.fabtheme-link-1{
	color: #F3F3F3;
}
.fabtheme-link-1:hover{
	color: var(--secondary);
}
.fabtheme-link-2{
	color: #F3F3F3;
}
.fabtheme-link-2:hover{
	color: #E3EDE9;
	text-decoration: none;
}
/* END OF LINKS */

/* BUTTON */
.fabtheme-button{
  display: inline-block;
  padding: 12px 28px !important;
  background-color: var(--secondary);
  color: white !important;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.fabtheme-button:hover{
  background-color: #2563eb;
  transform: translateY(-2px);
  color: white !important;
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
  text-decoration: none;
}
/* END OF BUTTON */

/* CARD COLUMNS */
@media (min-width: 576px){
    .fabtheme-card-columns{
        column-count: 1;
    }
	.card-count>.fabtheme-card-columns{
        column-count: 1;
    }
}
@media (min-width: 768px){
    .fabtheme-card-columns{
        column-count: 1;
    }
	.card-count>.fabtheme-card-columns{
        column-count: 1;
    }
}
@media (min-width: 992px){
    .fabtheme-card-columns{
        column-count: 3;
    }
	.card-count>.fabtheme-card-columns{
        column-count: 3;
    }
}
@media (min-width: 1200px){
    .fabtheme-card-columns{
        column-count: 3;
    }
	.card-count>.fabtheme-card-columns{
        column-count: 3;
    }
}
/* END OF CARD COLUMNS */

/* CARD COLUMNS 2 */
@media (min-width: 576px){
    .fabtheme-card-columns2{
        column-count: 1;
    }
        .card-count>.fabtheme-card-columns2{
        column-count: 1;
    }
}
@media (min-width: 768px){
    .fabtheme-card-columns2{
        column-count: 2;
    }
        .card-count>.fabtheme-card-columns2{
        column-count: 2;
    }
}
@media (min-width: 992px){
    .fabtheme-card-columns2{
        column-count: 3;
    }
        .card-count>.fabtheme-card-columns2{
        column-count: 3;
    }
}
@media (min-width: 1200px){
    .fabtheme-card-columns2{
        column-count: 5;
    }
        .card-count>.fabtheme-card-columns2{
        column-count: 5;
    }
}

/* Reduce the horizontal space between columns */
.fabtheme-card-columns {
    column-gap: 0.75rem; /* Default is 1.25rem; adjust as needed */
}

/* Reduce the vertical space between individual cards */
.fabtheme-card-columns .card {
    margin-bottom: 0rem; /* Default is 1.25rem */
}

/* Optional: reduce the padding inside the card body if it looks too bulky */
.fabtheme-card-columns .card-body {
    padding: 0rem; 
}
/* END OF CARD COLUMNS 2 */

/* IMAGES ZOOM IN */
.fabtheme-zoom img {
	width: 100%;
	height: auto;
	transition: all 0.5s ease-in-out;
}
.fabtheme-zoom:hover img {
    transform: scale(1.1);
}
/* END OF IMAGES ZOOM IN */

/* SCROLL TOP */
.fabtheme-scrolltop{
	display: none;
	width: 100%;
	margin: 0 auto;
	position: fixed;
	bottom: 20px;
	right: 10px;
}
.fabtheme-scroll{
	position: absolute;
	right: 20px;
	bottom: 20px;
	background-color: #c0b1a8;
	padding: 20px;
	text-align: center;
	margin: 0 0 0 0;
	cursor: pointer;
	transition: 0.5s;
}
.fabtheme-scroll:hover{
	transition: 0.5s;	
}
.fabtheme-scroll .fas{
	font-size: 30px;
	color: #000000;
	margin-top: -5px;
	margin-left: 1px;
	transition: 0.5s;
}
/* END OF SCROLL TOP */

/* HEIGHT OF ALL ELEMENTS */
*{
    min-height: 0.01px;
}
/* END OF HEIGHT OF ALL ELEMENTS */

/* FOOTER */
#fabtheme-footer{
	background-color: #121420;
	color: #F3F3F3;
}
/* END OF FOOTER */

@media (min-width: 1000px){
    .navbar-expand-custom {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    .navbar-expand-custom .navbar-nav {
        flex-direction: row;
    }
    .navbar-expand-custom .navbar-nav .nav-link {
        padding-right: .5rem;
        padding-left: .5rem;
    }
    .navbar-expand-custom .navbar-collapse {
        display: flex!important;
    }
    .navbar-expand-custom .navbar-toggler {
        display: none;
    }
}

.nav-item a {padding: 0px;}

/* END OF CUSTOM CSS */

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  background-color: rgba(0, 0, 0, 0.5);
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  /* bottom: 4px; */
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size:0.8em;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 10px;
  width: 10px;
  margin-top: 2vh;
  margin-bottom: -2.6vh;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}