@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@300&display=swap");

body {
  font-family: "Comfortaa", cursive;
}



#cmplz-document {
	margin: 4rem auto;
	max-width: 860px;
}

.nav-pills {
	margin-top:-27px
}

.logo{
	max-width:160px!important;
	height:auto;
}

#to_register {
    margin-right: clamp(15px, 1.5vw, 20px);
    font-size: clamp(12px, 1.2vw, 14px);
    padding: clamp(10px, 1.5vw, 15px) !important;
}

.section-heading h2 {
  margin: 0 auto;
  padding: 10px auto;
  font-size: 32px;
  font-weight: 700;
  color: #4b52b6;
  background-color: #fff;
  transition: 1s;
}

.section-heading h2:hover {
  color: #fff;
  background-color: #4b52b6;
}

.line-dec {
  width: 60px;
  height: 3px;
  background-color: #4b52b6;
  margin: 10px auto;
}

.isotope-toolbar button {
  margin: 5px;
}

.isotope-item {
  margin-bottom: 5px;
}

.isotope-item img {
 
}

.lightbox .lb-image{
  border: none;
}

.lb-data{
  display:none;
  }

/*

.lb-image{
  border-radius: 16px!important;
}

.lb-data{
  border-radius: 16px!important;
}

.lb-outerContainer{
  border-radius: 17px;
}

*/

.fade-in-text-section .content h2, .fade-in-text-section .content .h2 {
	font-size:42px!important;
}

.fade-in-text-section .content .cta{
	font-size:18px!important;
}

/* Default styles for desktop */
.responsive-text-container {
    justify-content: center; /* Vertically center the text */
}

/* Mobile-specific styles */
@media (max-width: 991px) {
    .responsive-text-container {
        justify-content: flex-end; /* Align text at the bottom */
        padding-bottom: 1rem; /* Add some spacing at the bottom */
    }
}

.label {
    font-size: clamp(1rem, 2vw, 2rem); 
    font-weight: normal;
    text-align: center;
}


.post-value-label {
    font-size: clamp(1rem, 2vw, 2rem); 
    font-weight: lighter;
    text-align: center;
}

#group-specifications .counter  {
    font-size: clamp(1.5rem, 3vw, 5rem)!important; 
    font-weight: bold;
    text-align: center;
}


#group-specifications .label {
    font-size: clamp(1.5rem, 3vw, 4rem); 
    font-weight: normal;
    text-align: center;
}


#group-specifications .post-value-label {
    font-size: clamp(2rem, 3vw, 4rem); 
    font-weight: lighter;
    text-align: center;
}


@media (min-width: 992px) { 
	.prog-header {
		margin-right: 60%; 
	}
}

@media (min-width: 768px) and (max-width: 991.98px) { 
	.prog-header {
		margin-right: 40%; 
	}
}

@media (min-width: 576px) and (max-width: 767.98px) { 
	.prog-header {
		margin-right: 30%; 
	}
}

@media (max-width: 575.98px) { 
	.prog-header {
		margin-right: 15%; 
	}
}

.prog-header {
	padding-right: 60px;
}

/* Apply text scaling using clamp() */
.prog-header p {
	font-size: clamp(16px, 2vw, 21px);
}



/* Make all .btns square-edged */
.btn {
  border-radius: 0 !important;
}

.headlines{
  width: 2rem; opacity: 1;
}

#galleryGrid {
  
}


   /* make the scroll wrapper hide its scrollbar */
      .scrolling-wrapper {
        overflow-x: auto;
        display: flex;
        flex-wrap: nowrap;
        gap: 1rem;
        padding-bottom: 1rem;
      }
      .scrolling-wrapper::-webkit-scrollbar {
        display: none;
      }
      .scrolling-wrapper {
        -ms-overflow-style: none;
        scrollbar-width: none;
      }

     
     .scrolling-wrapper .card {
  flex: 0 0 auto;  
  width: clamp(18rem, 60vw, 32rem);
}

 .gallery img {
      object-fit: cover;
      height: 200px;
      width: 100%;
    }

/* Make the active filter button black with white text */
#locationFilters .list-group-item.active {
  background-color: #000 !important;
  border-color: #000 !important;
  color: #fff !important;
}

/* make all tabs transparent bg + dark text */
.nav-tabs .nav-link {
  background-color: transparent;
  color: #212529;       /* Bootstrap $body-color */
  border-color: transparent;  /* remove the default borders if you like */
}

/* override the active one to bg-dark + white text */
.nav-tabs .nav-link.active {
  background-color: #000; /* same as .bg-dark */
  color: #fff;            /* same as .text-white */
  border-color: #000 #000 #000; /* match the bg so it looks seamless */
}

/* optional: when you hover on the other tabs, keep them transparent but darken text */
.nav-tabs .nav-link:hover {
  background-color: transparent;
  color: #000;
}

/* in your custom stylesheet, loaded after Bootstrap */
.hero-img {
  object-fit: cover;            /* same as .object-fit-cover */
  object-position: 50% 20%;     /* horizontal center, 20% from top */
}

.btn-close{

  background-color: #fff!important;

}

/* When any .nav-link inside #modelpageSpecsTab gets .active, make it dark/white */
#modelpageSpecsTab .nav-link.active {
  background-color: var(--bs-dark) !important;
  color: var(--bs-white)       !important;
}