/*Style for sticky-footer */

.active {
	color: #1C7430;
}

	  
.mobile-bottom-nav__item-contrate a {
    font-size: 18px;
    font-weight: bold;
    color: #1C7430;
	border: solid 3px #FFFFFF;
    border-radius: 50%;
    background: #1C7430;
    width: 55px;
    height: 55px;
    display: block;
    padding-top: 15px;
    padding-left: 9px;
}

.mobile-bottom-nav__item-contrate {
    padding: 10px;
    text-align: center;
    font-size: 12px;
    font-weight: lighter;
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    transition: 0.5s;
    margin-top: -18px;
    max-width: 78px;
    height: 78px;
	color: #fff;
	
}


.mobile-bottom-nav__item {
    flex-grow: 1;
    text-align: center;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    transition: 0.5s;
}
		
		
.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
/*    will-change: transform;*/
/*    min-height: 65px;*/
    box-shadow: 0 -2px 1px -2px #ded7e9;
	background: #000000;
    color: #fff!important;
}

.mobile-bottom-nav-menu {
	padding-top: 3px;
	padding-bottom: 2px;
    display: flex;
}


.mobile-bottom-nav__item a {
	color: #fff !important;
	text-decoration: none;
/*	font-weight: 600;*/
}
		
.mobile-bottom-nav__item i {
	font-size: 20px;
	padding-bottom: 5px;
}

 .mobile-bottom-nav__item-content-contrate {
	 display: flex;
	 flex-direction: column;
}

 .mobile-bottom-nav__item--active {
	 color: #1C7430;
}

 .mobile-bottom-nav__item--active i {
	 color: #1C7430;

}
 .mobile-bottom-nav__item-content {
	 display: flex;
	 color: #fff !important;
	 flex-direction: column;
	 padding: 5px 0;
}
 
.bt-cont-texto {
	margin-top: 6px;
} 
	
		  
/* Style for popup */
.modal.fade .modal-dialog {
    transition: transform .3s ease-out;
    transform: translate(0,50px);
}
.modal-dialog {
  position: fixed !important;
  bottom: 0 !important;
  left: 0% !important;
  right: 0% !important;
  margin-bottom: 0 !important;
      
} 

.modal.show .modal-dialog {
    transform: none;
}

.modal-content {
  border-top-left-radius: 20px !important;
  border-top-right-radius: 20px !important;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
	
	background: #fff;
	}
	
.modal-backdrop {
  z-index: -1;
}


/* Circular image gallery */
.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    text-align: center;
}

.gallery-item {
    width: 80px;
    text-decoration: none;
    color: #333;
}

.gallery-item img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid #7eca8f;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery-item:hover img {
    transform: scale(1.1);
}

.gallery-item p {
    margin-top: 10px;
    font-size: 14px;
}

/* Responsive Styles */
@media screen and (max-width: 768px) {
    .gallery {
        width: 100%;
        grid-template-columns: repeat(4, 1fr);
        display: grid;
    	gap: 15px;
    }
	.gallery-item {
		width: 60px;
	}

	.gallery-item img {
		width: 60px;
		height: 60px;
	}
}


/*swipeable horizontal cards by MOG*/
.how-it-works {
/*    width: 90%;*/
    margin: 0 auto;
}

.feature-card-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    overflow: hidden; /* Prevent scroll bar from appearing */
}

.feature-card {
    background-color: #2a2a2a; /* Lighter dark theme */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    flex: 1 1 22%;
    min-width: 220px;
    max-width: 250px;
    position: relative;
    text-align: left; /* Align content to the left */
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.7);
}

.feature-card i {
    font-size: 30px;
    color: #ffffff;
    margin-bottom: 15px;
}

.feature-card h3 {
    margin-bottom: 10px;
    color: #fff;
}

.feature-card p {
    color: #ffffff;
    line-height: 1.6;
}

/* Swipable Cards for Mobile */
@media screen and (max-width: 768px) {
    .feature-card-wrapper {
        flex-wrap: nowrap;
        gap: 10px;
        padding-bottom: 10px;
        -webkit-overflow-scrolling: touch;
        overflow-x: auto;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none;  /* Internet Explorer 10+ */
    }

    .feature-card-wrapper::-webkit-scrollbar {
        display: none; /* Safari and Chrome */
    }

    .feature-card {
        flex: 0 0 75%;
        max-width: 75%;
        min-width: 75%;
/*        margin: 0 5px;*/
    }
}








/*swipeable horizontal cardsfor courses*/
.course-card-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    overflow: hidden; /* Prevent scroll bar from appearing */
}

.course-card {
/*    background-color: #2a2a2a;  */
/*    padding: 20px;*/
    height: 280px;
    border-radius: 10px;
	border: 1px solid #ccc;
/*    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.5);*/
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    flex: 1 1 22%;
    min-width: 220px;
    max-width: 250px;
    position: relative;
    text-align: left; /* Align content to the left */
}

.course-card:hover {
    transform: translateY(-5px);
    box-shadow: 0px 5px 15px rgba(186,196,188, 0.7);
}

.course-card-img {
    height: 150px;
    width: 100%;
    background-repeat: no-repeat;
    background-size: contain;
	object-fit: scale-down;
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
	display: flex;
    align-items: center;
	justify-content: center;
}

.course-card a {
/*    font-size: 30px;*/
    color: #1C7430;
    text-decoration: none;
}

.course-card h3 {
    margin-bottom: 5px;
    color: #000;
}

.course-card-description {
	padding: 10px;
}
.course-card p {
    color: #000;
    text-overflow: ellipsis;
    word-wrap: break-word;
    overflow: hidden;
    max-height: 4.6em;
    line-height: 1.6;
}

/* Swipable Cards for Mobile */
@media screen and (max-width: 768px) {
    .course-card-wrapper {
        flex-wrap: nowrap;
        gap: 10px;
        padding-bottom: 10px;
        -webkit-overflow-scrolling: touch;
        overflow-x: auto;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none;  /* Internet Explorer 10+ */
    }

    .course-wrapper::-webkit-scrollbar {
        display: none; /* Safari and Chrome */
    }

    .course-card {
        flex: 0 0 60%;
        max-width: 60%;
        min-width: 60%;
/*        margin: 0 5px;*/
    }
}



/* Hide the div on large screens */
@media (min-width: 1024px) {
  .hide-on-desktop {
    display: none;
  }
}

/* Show the div on small screens */
@media (max-width: 1023px) {
  .hide-on-desktop {
    display: block; /* or flex, grid, etc., depending on your layout */
  }
}



/* Show the div on large screens */
@media (min-width: 1024px) {
  .show-on-desktop {
    display: block; /* or flex, grid, etc., depending on your layout */
  }
}

/* Hide the div on small screens */
@media (max-width: 1023px) {
  .show-on-desktop {
    display: none;
  }
}



  .show-on-mobile {
    display: block !important; /* Ensure it appears in the modal */
  }









/*card styles*/

    .wallet-card {
      background-color: #fff;
      border-radius: 12px;
      box-shadow: 0 0 10px rgba(0,0,0,0.05);
      padding: 1rem;
    }
    .wallet-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #f8f9fa;
      border-radius: 10px;
      padding: 0.75rem 1rem;
      margin-bottom: 0.75rem;
    }
    .wallet-item img {
		width: 35px;
		height: 35px;
		border-radius: 50%;
		border: 1px solid #303031;
		margin-right: 10px;
		object-fit:cover;
	}
    .zegid-card {
      background-color: #e6f0ff;
      border-radius: 12px;
      padding: 1rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .zegid-card .icon {
      font-size: 1.25rem;
      color: #6c63ff;
    }



/*Scrollable wallaet card*/

    .scroll-wallet-container {
      display: flex;
      overflow-x: auto;
      gap: 1rem;
      padding: 1rem 0;
      scroll-snap-type: x mandatory;
    }

    .scroll-wallet-container::-webkit-scrollbar {
      display: none;
    }

    .scroll-wallet-item {
      flex: 0 0 auto;
      width: 250px;
      background-color: #fff;
      border-radius: 12px;
      padding: 1rem;
      box-shadow: 0 0 8px rgba(0,0,0,0.05);
      scroll-snap-align: start;
    }

    .scroll-wallet-item img {
		width: 35px;
		height: 35px;
		border-radius: 50%;
		border: 1px solid #303031;
		margin-right: 10px;
		object-fit:cover;
    }

    .scroll-wallet-item .arrow {
      float: right;
      color: #888;
    }


/*Cards for menus*/
.card-custom {
      background-color: #fff;
      border: none;
      border-radius: 10px;
      padding: 15px;
      margin-bottom: 20px;
      height: 100px;
/*      display: flex;*/
/*      flex-direction: column;*/
      justify-content: center;
/*	text-align: center;*/
    }
    .card-custom .icon-circle {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 10px;
      font-size: 20px;
      color: #000;
    }
    .green { background-color: #00ff7f; }
    .blue { background-color: #3399ff; }
    .purple { background-color: #b266ff; }
    .deep-purple { background-color: #8a2be2; }
    .gold { background-color: gold; color: #000; }
    .deep-gold { background-color: #ffbf00; color: #000; }
    .orange { background-color: #ff914d; }
    .amber-orange { background-color: #F4A261; }
    .teal { background-color: #00bfa6; }
    .emerald-green { background-color: #2D6A4F; }
    .crimson-red { background-color: #D00000; }
    .navy-blue { background-color: #1D3557; }
    .violet-indigo { background-color: #6A4C93; }
    .electric-blue { background-color: #3A0CA3; }

    .card-title {
      font-weight: bold;
      font-size: 12px;
    }

    .card-subtitle {
      font-size: 0.9rem;
      color: #333;
    }

    a.card-link {
      text-decoration: none;
      color: inherit;
    }


/* tabbed menu*/
.tab-menu {
      display: flex;
      justify-content: flex-start;
      border-bottom: 1px solid #ccc;
      font-family: sans-serif;
    }

    .tab {
      padding: 0px 16px;
      cursor: pointer;
      color: #666;
      font-weight: 600;
		font-size: 18px;
      position: relative;
    }

    .tab.active {
      color: #000;
    }

    .tab.active::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: -1px;
      height: 3px;
      background-color: #28a745; /* aqua-ish line */
      border-radius: 3px 3px 0 0;
    }





/*floating bottom buttons (for buy/sell)*/
	.floating-buttons {		
      position: fixed;
      bottom: 80px;
      width: 100%;
      display: flex;
      justify-content: center; /* center the button group */
      gap: 10px; /* space between buttons */
      z-index: 999;
    }

    .floating-buttons a {
      background-color: #28a745;
      border: none;
      color: white;
      padding: 12px 24px;
      border-radius: 30px;
      font-size: 16px;
		width: 45%;
		max-width: 200px;
      font-weight: 600;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    .floating-buttons a:hover {
      background-color: #4ad469;
    }







/*Custom bootstrap styles by MOG*/
/* Display Utility: Core */

:root {
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
	
	
  --spacer-0: 0;
  --spacer-1: 0.25rem;
  --spacer-2: 0.5rem;
  --spacer-3: 1rem;
  --spacer-4: 1.5rem;
  --spacer-5: 3rem;
}


.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }

/* Responsive Display: SM and up */
@media (min-width: 576px) {
  .d-sm-none { display: none !important; }
  .d-sm-block { display: block !important; }
  .d-sm-inline { display: inline !important; }
  .d-sm-inline-block { display: inline-block !important; }
  .d-sm-flex { display: flex !important; }
  .d-sm-inline-flex { display: inline-flex !important; }
}

/* Responsive Display: MD and up */
@media (min-width: 768px) {
  .d-md-none { display: none !important; }
  .d-md-block { display: block !important; }
  .d-md-inline { display: inline !important; }
  .d-md-inline-block { display: inline-block !important; }
  .d-md-flex { display: flex !important; }
  .d-md-inline-flex { display: inline-flex !important; }
}

/* Responsive Display: LG and up */
@media (min-width: 992px) {
  .d-lg-none { display: none !important; }
  .d-lg-block { display: block !important; }
  .d-lg-inline { display: inline !important; }
  .d-lg-inline-block { display: inline-block !important; }
  .d-lg-flex { display: flex !important; }
  .d-lg-inline-flex { display: inline-flex !important; }
}

/* Responsive Display: XL and up */
@media (min-width: 1200px) {
  .d-xl-none { display: none !important; }
  .d-xl-block { display: block !important; }
  .d-xl-inline { display: inline !important; }
  .d-xl-inline-block { display: inline-block !important; }
  .d-xl-flex { display: flex !important; }
  .d-xl-inline-flex { display: inline-flex !important; }
}


/* Padding */
.p-0 { padding: var(--spacer-0) !important; }
.p-1 { padding: var(--spacer-1) !important; }
.p-2 { padding: var(--spacer-2) !important; }
.p-3 { padding: var(--spacer-3) !important; }
.p-4 { padding: var(--spacer-4) !important; }
.p-5 { padding: var(--spacer-5) !important; }

/* Padding Top */
.pt-0 { padding-top: var(--spacer-0) !important; }
.pt-1 { padding-top: var(--spacer-1) !important; }
.pt-2 { padding-top: var(--spacer-2) !important; }
.pt-3 { padding-top: var(--spacer-3) !important; }
.pt-4 { padding-top: var(--spacer-4) !important; }
.pt-5 { padding-top: var(--spacer-5) !important; }

/* Padding Bottom */
.pb-0 { padding-bottom: var(--spacer-0) !important; }
.pb-1 { padding-bottom: var(--spacer-1) !important; }
.pb-2 { padding-bottom: var(--spacer-2) !important; }
.pb-3 { padding-bottom: var(--spacer-3) !important; }
.pb-4 { padding-bottom: var(--spacer-4) !important; }
.pb-5 { padding-bottom: var(--spacer-5) !important; }

/* Padding Left */
.pl-0 { padding-left: var(--spacer-0) !important; }
.pl-1 { padding-left: var(--spacer-1) !important; }
.pl-2 { padding-left: var(--spacer-2) !important; }
.pl-3 { padding-left: var(--spacer-3) !important; }
.pl-4 { padding-left: var(--spacer-4) !important; }
.pl-5 { padding-left: var(--spacer-5) !important; }

/* Padding Right */
.pr-0 { padding-right: var(--spacer-0) !important; }
.pr-1 { padding-right: var(--spacer-1) !important; }
.pr-2 { padding-right: var(--spacer-2) !important; }
.pr-3 { padding-right: var(--spacer-3) !important; }
.pr-4 { padding-right: var(--spacer-4) !important; }
.pr-5 { padding-right: var(--spacer-5) !important; }

/* Padding X (Left & Right) */
.px-0 { padding-left: var(--spacer-0) !important; padding-right: var(--spacer-0) !important; }
.px-1 { padding-left: var(--spacer-1) !important; padding-right: var(--spacer-1) !important; }
.px-2 { padding-left: var(--spacer-2) !important; padding-right: var(--spacer-2) !important; }
.px-3 { padding-left: var(--spacer-3) !important; padding-right: var(--spacer-3) !important; }
.px-4 { padding-left: var(--spacer-4) !important; padding-right: var(--spacer-4) !important; }
.px-5 { padding-left: var(--spacer-5) !important; padding-right: var(--spacer-5) !important; }

/* Padding Y (Top & Bottom) */
.py-0 { padding-top: var(--spacer-0) !important; padding-bottom: var(--spacer-0) !important; }
.py-1 { padding-top: var(--spacer-1) !important; padding-bottom: var(--spacer-1) !important; }
.py-2 { padding-top: var(--spacer-2) !important; padding-bottom: var(--spacer-2) !important; }
.py-3 { padding-top: var(--spacer-3) !important; padding-bottom: var(--spacer-3) !important; }
.py-4 { padding-top: var(--spacer-4) !important; padding-bottom: var(--spacer-4) !important; }
.py-5 { padding-top: var(--spacer-5) !important; padding-bottom: var(--spacer-5) !important; }

/* Margin */
.m-0 { margin: var(--spacer-0) !important; }
.m-1 { margin: var(--spacer-1) !important; }
.m-2 { margin: var(--spacer-2) !important; }
.m-3 { margin: var(--spacer-3) !important; }
.m-4 { margin: var(--spacer-4) !important; }
.m-5 { margin: var(--spacer-5) !important; }

/* Margin Top */
.mt-0 { margin-top: var(--spacer-0) !important; }
.mt-1 { margin-top: var(--spacer-1) !important; }
.mt-2 { margin-top: var(--spacer-2) !important; }
.mt-3 { margin-top: var(--spacer-3) !important; }
.mt-4 { margin-top: var(--spacer-4) !important; }
.mt-5 { margin-top: var(--spacer-5) !important; }

/* Margin Bottom */
.mb-0 { margin-bottom: var(--spacer-0) !important; }
.mb-1 { margin-bottom: var(--spacer-1) !important; }
.mb-2 { margin-bottom: var(--spacer-2) !important; }
.mb-3 { margin-bottom: var(--spacer-3) !important; }
.mb-4 { margin-bottom: var(--spacer-4) !important; }
.mb-5 { margin-bottom: var(--spacer-5) !important; }

/* Margin Left */
.ml-0 { margin-left: var(--spacer-0) !important; }
.ml-1 { margin-left: var(--spacer-1) !important; }
.ml-2 { margin-left: var(--spacer-2) !important; }
.ml-3 { margin-left: var(--spacer-3) !important; }
.ml-4 { margin-left: var(--spacer-4) !important; }
.ml-5 { margin-left: var(--spacer-5) !important; }

/* Margin Right */
.mr-0 { margin-right: var(--spacer-0) !important; }
.mr-1 { margin-right: var(--spacer-1) !important; }
.mr-2 { margin-right: var(--spacer-2) !important; }
.mr-3 { margin-right: var(--spacer-3) !important; }
.mr-4 { margin-right: var(--spacer-4) !important; }
.mr-5 { margin-right: var(--spacer-5) !important; }

/* Margin X (Left & Right) */
.mx-0 { margin-left: var(--spacer-0) !important; margin-right: var(--spacer-0) !important; }
.mx-1 { margin-left: var(--spacer-1) !important; margin-right: var(--spacer-1) !important; }
.mx-2 { margin-left: var(--spacer-2) !important; margin-right: var(--spacer-2) !important; }
.mx-3 { margin-left: var(--spacer-3) !important; margin-right: var(--spacer-3) !important; }
.mx-4 { margin-left: var(--spacer-4) !important; margin-right: var(--spacer-4) !important; }
.mx-5 { margin-left: var(--spacer-5) !important; margin-right: var(--spacer-5) !important; }

/* Margin Y (Top & Bottom) */
.my-0 { margin-top: var(--spacer-0) !important; margin-bottom: var(--spacer-0) !important; }
.my-1 { margin-top: var(--spacer-1) !important; margin-bottom: var(--spacer-1) !important; }
.my-2 { margin-top: var(--spacer-2) !important; margin-bottom: var(--spacer-2) !important; }
.my-3 { margin-top: var(--spacer-3) !important; margin-bottom: var(--spacer-3) !important; }
.my-4 { margin-top: var(--spacer-4) !important; margin-bottom: var(--spacer-4) !important; }
.my-5 { margin-top: var(--spacer-5) !important; margin-bottom: var(--spacer-5) !important; }

/* Auto margins */
.mx-auto { margin-left: auto !important; margin-right: auto !important; }



@media (min-width: 992px) {
  /* Padding */
  .p-lg-0 { padding: var(--spacer-0) !important; }
  .p-lg-1 { padding: var(--spacer-1) !important; }
  .p-lg-2 { padding: var(--spacer-2) !important; }
  .p-lg-3 { padding: var(--spacer-3) !important; }
  .p-lg-4 { padding: var(--spacer-4) !important; }
  .p-lg-5 { padding: var(--spacer-5) !important; }

  .pt-lg-0 { padding-top: var(--spacer-0) !important; }
  .pt-lg-1 { padding-top: var(--spacer-1) !important; }
  .pt-lg-2 { padding-top: var(--spacer-2) !important; }
  .pt-lg-3 { padding-top: var(--spacer-3) !important; }
  .pt-lg-4 { padding-top: var(--spacer-4) !important; }
  .pt-lg-5 { padding-top: var(--spacer-5) !important; }

  .pr-lg-0 { padding-right: var(--spacer-0) !important; }
  .pr-lg-1 { padding-right: var(--spacer-1) !important; }
  .pr-lg-2 { padding-right: var(--spacer-2) !important; }
  .pr-lg-3 { padding-right: var(--spacer-3) !important; }
  .pr-lg-4 { padding-right: var(--spacer-4) !important; }
  .pr-lg-5 { padding-right: var(--spacer-5) !important; }

  .pb-lg-0 { padding-bottom: var(--spacer-0) !important; }
  .pb-lg-1 { padding-bottom: var(--spacer-1) !important; }
  .pb-lg-2 { padding-bottom: var(--spacer-2) !important; }
  .pb-lg-3 { padding-bottom: var(--spacer-3) !important; }
  .pb-lg-4 { padding-bottom: var(--spacer-4) !important; }
  .pb-lg-5 { padding-bottom: var(--spacer-5) !important; }

  .pl-lg-0 { padding-left: var(--spacer-0) !important; }
  .pl-lg-1 { padding-left: var(--spacer-1) !important; }
  .pl-lg-2 { padding-left: var(--spacer-2) !important; }
  .pl-lg-3 { padding-left: var(--spacer-3) !important; }
  .pl-lg-4 { padding-left: var(--spacer-4) !important; }
  .pl-lg-5 { padding-left: var(--spacer-5) !important; }

  .px-lg-0 { padding-left: var(--spacer-0) !important; padding-right: var(--spacer-0) !important; }
  .px-lg-1 { padding-left: var(--spacer-1) !important; padding-right: var(--spacer-1) !important; }
  .px-lg-2 { padding-left: var(--spacer-2) !important; padding-right: var(--spacer-2) !important; }
  .px-lg-3 { padding-left: var(--spacer-3) !important; padding-right: var(--spacer-3) !important; }
  .px-lg-4 { padding-left: var(--spacer-4) !important; padding-right: var(--spacer-4) !important; }
  .px-lg-5 { padding-left: var(--spacer-5) !important; padding-right: var(--spacer-5) !important; }

  .py-lg-0 { padding-top: var(--spacer-0) !important; padding-bottom: var(--spacer-0) !important; }
  .py-lg-1 { padding-top: var(--spacer-1) !important; padding-bottom: var(--spacer-1) !important; }
  .py-lg-2 { padding-top: var(--spacer-2) !important; padding-bottom: var(--spacer-2) !important; }
  .py-lg-3 { padding-top: var(--spacer-3) !important; padding-bottom: var(--spacer-3) !important; }
  .py-lg-4 { padding-top: var(--spacer-4) !important; padding-bottom: var(--spacer-4) !important; }
  .py-lg-5 { padding-top: var(--spacer-5) !important; padding-bottom: var(--spacer-5) !important; }

  /* Margin */
  .m-lg-0 { margin: var(--spacer-0) !important; }
  .m-lg-1 { margin: var(--spacer-1) !important; }
  .m-lg-2 { margin: var(--spacer-2) !important; }
  .m-lg-3 { margin: var(--spacer-3) !important; }
  .m-lg-4 { margin: var(--spacer-4) !important; }
  .m-lg-5 { margin: var(--spacer-5) !important; }

  .mt-lg-0 { margin-top: var(--spacer-0) !important; }
  .mt-lg-1 { margin-top: var(--spacer-1) !important; }
  .mt-lg-2 { margin-top: var(--spacer-2) !important; }
  .mt-lg-3 { margin-top: var(--spacer-3) !important; }
  .mt-lg-4 { margin-top: var(--spacer-4) !important; }
  .mt-lg-5 { margin-top: var(--spacer-5) !important; }

  .mr-lg-0 { margin-right: var(--spacer-0) !important; }
  .mr-lg-1 { margin-right: var(--spacer-1) !important; }
  .mr-lg-2 { margin-right: var(--spacer-2) !important; }
  .mr-lg-3 { margin-right: var(--spacer-3) !important; }
  .mr-lg-4 { margin-right: var(--spacer-4) !important; }
  .mr-lg-5 { margin-right: var(--spacer-5) !important; }

  .mb-lg-0 { margin-bottom: var(--spacer-0) !important; }
  .mb-lg-1 { margin-bottom: var(--spacer-1) !important; }
  .mb-lg-2 { margin-bottom: var(--spacer-2) !important; }
  .mb-lg-3 { margin-bottom: var(--spacer-3) !important; }
  .mb-lg-4 { margin-bottom: var(--spacer-4) !important; }
  .mb-lg-5 { margin-bottom: var(--spacer-5) !important; }

  .ml-lg-0 { margin-left: var(--spacer-0) !important; }
  .ml-lg-1 { margin-left: var(--spacer-1) !important; }
  .ml-lg-2 { margin-left: var(--spacer-2) !important; }
  .ml-lg-3 { margin-left: var(--spacer-3) !important; }
  .ml-lg-4 { margin-left: var(--spacer-4) !important; }
  .ml-lg-5 { margin-left: var(--spacer-5) !important; }

  .mx-lg-0 { margin-left: var(--spacer-0) !important; margin-right: var(--spacer-0) !important; }
  .mx-lg-1 { margin-left: var(--spacer-1) !important; margin-right: var(--spacer-1) !important; }
  .mx-lg-2 { margin-left: var(--spacer-2) !important; margin-right: var(--spacer-2) !important; }
  .mx-lg-3 { margin-left: var(--spacer-3) !important; margin-right: var(--spacer-3) !important; }
  .mx-lg-4 { margin-left: var(--spacer-4) !important; margin-right: var(--spacer-4) !important; }
  .mx-lg-5 { margin-left: var(--spacer-5) !important; margin-right: var(--spacer-5) !important; }

  .my-lg-0 { margin-top: var(--spacer-0) !important; margin-bottom: var(--spacer-0) !important; }
  .my-lg-1 { margin-top: var(--spacer-1) !important; margin-bottom: var(--spacer-1) !important; }
  .my-lg-2 { margin-top: var(--spacer-2) !important; margin-bottom: var(--spacer-2) !important; }
  .my-lg-3 { margin-top: var(--spacer-3) !important; margin-bottom: var(--spacer-3) !important; }
  .my-lg-4 { margin-top: var(--spacer-4) !important; margin-bottom: var(--spacer-4) !important; }
  .my-lg-5 { margin-top: var(--spacer-5) !important; margin-bottom: var(--spacer-5) !important; }

  /* Auto Margins */
  .ml-lg-auto { margin-left: auto !important; }
  .mr-lg-auto { margin-right: auto !important; }
  .mx-lg-auto { margin-left: auto !important; margin-right: auto !important; }
}

/* Default mobile-first columns */
.col-1  { width: 8.3333%; }
.col-2  { width: 16.6666%; }
.col-3  { width: 25%; }
.col-4  { width: 33.3333%; }
.col-5  { width: 41.6666%; }
.col-6  { width: 50%; }
.col-7  { width: 58.3333%; }
.col-8  { width: 66.6666%; }
.col-9  { width: 75%; }
.col-10 { width: 83.3333%; }
.col-11 { width: 91.6666%; }
.col-12 { width: 100%; }

/* Responsive variants */
@media (min-width: 992px) {
  .col-lg-1  { width: 8.3333%; }
  .col-lg-2  { width: 16.6666%; }
  .col-lg-3  { width: 25%; }
  .col-lg-4  { width: 33.3333%; }
  .col-lg-5  { width: 41.6666%; }
  .col-lg-6  { width: 50%; }
  .col-lg-7  { width: 58.3333%; }
  .col-lg-8  { width: 66.6666%; }
  .col-lg-9  { width: 75%; }
  .col-lg-10 { width: 83.3333%; }
  .col-lg-11 { width: 91.6666%; }
  .col-lg-12 { width: 100%; }
}

/*
example usage <div class="d-none d-lg-block">This will be hidden until large screens</div>
<span class="d-inline d-md-none">Visible only on small screens</span>
*/



	.fab {
    position: fixed;
    right: 20px;
    bottom: 80px;
    background-color: #19692c; 
/*	border: 1px dashed #fff;*/
    color: #fff!important;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.3);
    transition: background-color 0.3s ease;
    z-index: 1000;
    text-decoration: none;
}

.fab:hover {
  background-color: #5a55b3; /* Slightly darker for hover effect */
}

.fab-icon {
    font-size: 24px;
}