:root {
  --bg-color: #F6F6F6;
  --text-color: #fefefe;
  --accent-color: #007bff;
  --section-bg: #FAF9F5; 
  --section-bg-2: #E3E3E3; 
  --text-color-2: #595959; 
  --text-color-3: #111111;
  --line-color: #D6D6D6;
  --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; 
  --text-color-3: #F1EDE5;
  --line-color: #CFCFCF;
  --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%);
}


#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;
}

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


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


.io {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-bottom {
  opacity: 1;
  transform: translateY(0);
}

.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-in-top {
	-webkit-animation: scale-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: scale-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes scale-in-top {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
    opacity: 1;
  }
}
@keyframes scale-in-top {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 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;
  }
}

.fade-in-fwd {
	-webkit-animation: fade-in-fwd 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in-fwd 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}


@-webkit-keyframes fade-in-fwd {
  0% {
    -webkit-transform: translateZ(-80px);
            transform: translateZ(-80px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    opacity: 1;
  }
}
@keyframes fade-in-fwd {
  0% {
    -webkit-transform: translateZ(-80px);
            transform: translateZ(-80px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0);
            transform: translateZ(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;
}

.text-color{
  color:#DBDBDB;
}

.text-color:hover{
  color:#fefefe;
}

.text-color2{
  color:#858585;
}

.text-color3{
  color:#858585;
}
.hd-color{
  color:#fefefe;
}

button {
  transition: opacity 0.2s ease;
}

button:hover {
  opacity: 0.7;
}

.navbar{
  width:100%;
  display:grid;
  grid-template-columns:85% 15%;
}  

.navbar-logo{
  width:70%;
  display:grid;
  grid-template-columns:20% 75%;
}

.navbar ul{
  margin:auto 0;
}

.navbar ul li{
  float:left;
  margin:auto 20px;
}

.navbar ul li:hover{
  cursor:pointer;
}

.smenu{
  display:none;
}

.glass {
  background: rgba(0, 0, 0, 0.90);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}



.hero{
  height:auto;
}

#changing_text::after {
  content: "|";
  margin-left: 4px;
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0; }
}

.hero-pad{
  padding:35px 0;
}

.scroll-container {
  overflow: hidden;
  width: 100%;
}

.scroll-track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.scroll-track.paused {
  animation-play-state: paused;
}

.dark-shade-left {
  background: linear-gradient(
    to right,
    #000000 0%,
    rgba(0, 0, 0, 0) 100%
  );
  width:80px; 
}

.dark-shade-right {
  background: linear-gradient(
    to left,
    #000000 0%,
    rgba(0, 0, 0, 0) 100%
  );
  width:80px; 
}

.section-padding{
  padding:40px 0;
}

.layer2-padding{
  padding-top:0;
  padding-bottom:40px;
  padding-left:0;
  padding-right:0;
}

.section-padding2{
  padding:40px 0;
}

.mb-logo-column{
  display:grid;
  grid-template-columns:50% 50%;
}

.mb-logo-column>div{
  margin:15px 0;
}

.fill-rest {
  flex: 1;
}


.scroll-container2 {
  width: 100%;
  overflow: hidden;
  position: relative;
}


.scroll-container2 {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.scroll-track2 {
    display: flex;
    gap: 16px;
    transition: transform 0.6s ease;
}

/* Base scroll-item */
.scroll-item2 {
    flex: 0 0 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 20px;
    background: #eee;
}


/**
.scroll-container.animating {
  transition: transform 0.6s ease;
}
  **/

.scroll-pointers {
    display: flex;
    justify-content: center;
    align-items: center;   /* 🔥 prevents vertical stretching */
    gap: 6px;
    margin-top: 10px;
}

.scroll-pointer {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #ccc;
    transition: background-color 0.3s ease, transform 0.3s ease;
    flex-shrink: 0;        /* 🔥 prevents shrinking = no rectangle */
}

.scroll-pointer.active {
    background-color: #555;
    transform: scale(1.3);
}

.scroll-pointer::before,
.scroll-pointer::after {
    content: none !important;
    display: none !important;
}

.quote-icon {
  position: absolute;
  top: -20px;
  left: 20px;
  background: #007bff;
  color: #fff;
  padding: 12px 18px;
  border-radius: 50%;
}

.inner-btn {
    background-color:#fefefe;
    border:2px solid rgb(0,0,0);
    color:rgb(0,0,0);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.inner-btn:hover {
    background-color: rgb(0,0,0);
    color: #fefefe;
}

.image-group2 {
    display: flex;
    justify-content: center;   /* centers the whole group */
    align-items: center;
}

.image-group2 img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    margin-left: -16px;        /* overlap to the left */
}

/* prevent first image from shifting */
.image-group2 img:first-child {
    margin-left: 0;
}

.footer-padding{
  padding-top:40px;
}

.foot-logo{
  width:70%;
  display:grid;
  grid-template-columns:18% 82%;
  margin:0;
}

.faq-item {
  display: inline-block; /* make each item flow in columns */
  width: 100%;
  margin-bottom: 20px;
  break-inside: avoid;   /* prevent breaking items across columns */
}

.faq-item p {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background:none;
}
.faq-item p.active {
  max-height: 500px; /* or something large enough */
  padding-bottom:20px;
}

.faq-item p::before,
.faq-item p::after {
    content: none !important;
}











 /* For desktop: */
@media only screen and (min-width: 768px) {

.navbar{
  width:100%;
  display:grid;
  grid-template-columns:25% 50% 25%;
}  

.navbar-logo{
  width:70%;
  display:grid;
  grid-template-columns:25% 75%;
}

.navbar ul{
  margin:auto 0;
}

.navbar ul li{
  float:left;
  margin:auto 20px;
}

.navbar ul li:hover{
  cursor:pointer;
}

.hero{
  height:auto;
}

.hero-pad{
  padding:60px 0;
}


.dark-shade-left {
  background: linear-gradient(
    to right,
    #000000 0%,
    rgba(0, 0, 0, 0) 100%
  );
  width:190px; 
}

.dark-shade-right {
  background: linear-gradient(
    to left,
    #000000 0%,
    rgba(0, 0, 0, 0) 100%
  );
  width:190px; 
}

.section-padding{
  padding:80px 0;
}

.layer2-padding{
  padding-top:0;
  padding-bottom:80px;
  padding-left:0;
  padding-right:0;
}

.section-padding2{
  padding:60px 0;
}

.mb-logo-column{
  display:grid;
  grid-template-columns:25% 25% 25% 25%;
}

.mb-logo-column>div{
  margin:20px 0;
}

 .scroll-item2 {
        flex: 0 0 calc((100% - 32px) / 3);
        max-width: calc((100% - 32px) / 3);
  }


.image-group {
    display: flex;
    align-items: center;
}

.image-group img {
    width: 80px;
    height: 80px;
    border-radius: 50%;       /* fully rounded */
    object-fit: cover;
    border: 3px solid #fff;  /* optional: clean separation */
    margin-left: -20px;      /* overlap amount */
}

/* prevent first image from shifting */
.image-group img:first-child {
    margin-left: 0;
}

.footer-padding{
  padding-top:60px;
}

.footmenu{
 display:grid;
 grid-template-columns:30% 70%;
}

.foot-logo{
  width:70%;
  display:grid;
  grid-template-columns:22% 78%;
  margin:0;
}

.foot-columns{
 display:grid;
 grid-template-columns:25% 25% 25% 25%;
}

.faq-container {
  column-count: 2;       /* number of columns */
  column-gap: 30px;      /* space between columns */
}

.faq-item {
  display: inline-block; /* make each item flow in columns */
  width: 100%;
  margin-bottom: 20px;
  padding:15px 0;
  break-inside: avoid;   /* prevent breaking items across columns */
}




}