:root {
  --bg-color: #F1EDE5;
  --text-color: #111111;
  --accent-color: #007bff;
  --section-bg: #FAF9F5; 
  --section-bg-2: #E3E3E3; 
  --text-color-2: #595959; 
  --left-gradient:linear-gradient(to right, #E3E3E3 0%, rgba(227, 227, 227, 0) 100%);
  --right-gradient: linear-gradient(to left, #E3E3E3 0%, rgba(227, 227, 227, 0) 100%);
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s ease, color 0.3s ease;
}

body.dark-mode {
  --bg-color: #121212;
  --text-color: #F1EDE5;
  --accent-color: #66ccff;
  --section-bg: #1e1e1e; 
  --section-bg-2: #1e1e1e; 
  --text-color-2: #B3B3B3; 
  --left-gradient:linear-gradient(to right, #1e1e1e 0%, rgba(30, 30, 30, 0) 100%);
  --right-gradient: linear-gradient(to left, #1e1e1e 0%, rgba(30, 30, 30, 0) 100%);
}

.smenu{
	display:none;
}
#menuicon {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.slide-in-left {
	-webkit-animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}


@-webkit-keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-1000px);
            transform: translateX(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-1000px);
            transform: translateX(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}

.scale-in-ver-top {
	-webkit-animation: scale-in-ver-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: scale-in-ver-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes scale-in-ver-top {
  0% {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
    opacity: 1;
  }
}
@keyframes scale-in-ver-top {
  0% {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
    opacity: 1;
  }
}

.scale-out-ver-top {
	-webkit-animation: scale-out-ver-top 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	        animation: scale-out-ver-top 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

@-webkit-keyframes scale-out-ver-top {
  0% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
    opacity: 1;
  }
}
@keyframes scale-out-ver-top {
  0% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
    opacity: 1;
  }
}




.box-shadow{
	box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}

.section {
  background-color: var(--section-bg);
  transition: background-color 0.3s ease;
}
.section-2 {
  background-color: var(--section-bg-2);
  transition: background-color 0.3s ease;
}
.hor-line {
  border:1px solid var(--section-bg-2);
  transition: background-color 0.3s ease;
}
.bckcolor {
  background-color: var(--bg-color);
  transition: background-color 0.3s ease;
}

.txtcolor {
  color: var(--text-color-2);
}

.profile-group {
  position: relative;
  width: fit-content;
  height: 60px; /* Adjust height based on overlap */
}

.profile-group-item {
  position: absolute;
  border-radius:50%;
  padding:4px;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
}

.profile-group-item img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  object-fit: cover;
}

/* Overlap each image slightly to the right */
.profile-group-item:nth-child(2) {
  left: 40px;
}
.profile-group-item:nth-child(3) {
  left: 80px;
}
.profile-group-item:nth-child(4) {
  left: 120px;
}

.scroll-container {
  display: flex;
  overflow: hidden;
  white-space: nowrap;
  align-items: center;
}

.scroll-track {
  display: flex;
}

.scroll-track img {
  flex-shrink: 0;
  height: 50px;
  margin: 0 15px;
}

#timage {
  transition: opacity 0.5s ease-in-out;
}

#timage.fade-out {
  opacity: 0;
}

.white-fade-right {
  background: var(--left-gradient);
}
.white-fade-left {
  background: var(--right-gradient);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.4s ease;
  opacity: 0;
}

.faq-box.active .faq-answer {
  max-height: 500px; /* enough space for content */
  opacity: 1;
  padding-top: 25px;  /* adjust to taste */
  padding-bottom: 25px;
}

.faq-box {
  background: none;   /* remove any background */
  box-shadow: none;   /* remove any shadow */
}

.faq-box button i {
  transition: transform 0.3s ease;
}

.faq-box.active button i {
  transform: rotate(180deg);
}

.box-shadow-bottom{
	box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px;
}

.box-shadow-leftright{
	
}
  
.faq-box::before,
.faq-box::after {
  content: none !important;
  display: none !important;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  align-items: start; /* prevents equal height stretching */
}

.formdialog{
	display:none;
}



 /* For desktop: */
@media only screen and (min-width: 768px) {
	
.navbar-style-1{
	display:grid;
	grid-template-columns:40% 20% 40%;
	font-size:15px;
}
.navbar-style-1 ul{
	width:95%;
	list-style:none;
}
.navbar-style-1 ul li{
	float:left;
	margin-right:30px;
}
.navbar-style-1 ul li:hover{
	cursor:pointer;
}
.navbar-right{
	text-align:right;
}

.navbar-right button{
	width:auto;
	padding:12px 20px;
	border:none;
	font-size:15px;
	display:inline-block;
}
.navbar-right button:hover{
	cursor:pointer;
}

.navbar-style-2{
	display:grid;
	grid-template-columns:15% 45% 40%;
	font-size:15px;
}
.navbar-style-2 ul{
	width:95%;
	list-style:none;
}
.navbar-style-2 ul li{
	float:left;
	margin-right:30px;
}
.navbar-style-2 ul li:hover{
	cursor:pointer;
}

.navbar-style-3{
	display:grid;
	grid-template-columns:40% 20% 40%;
	font-size:15px;
}
/* Hide by default */
#bigmenu {
  display: none;
}

/* Show when menu-visible is applied */
#bigmenu.menu-visible {
  display: block;
}


}