body {
  background-color: #FAFAFA;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.white_header_text{
  color:#F5EBFF;
}

.white_para_text{
  color:#BFC8C9;
}

.dark_header_text{
  color:#292929;
}

.dark_para_text{
  color:#5B5B5B;
}

.menu_btns{
  border:none;
  background:none;
  color:#BFC8C9;
  transition: color 0.3s ease;
}

.menu_btns:hover{
  cursor:pointer;
  color:#F5EBFF;
}

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

.navbar_style_1 img{
  height:32px;
}

.smenu{
  display:none;
  position:fixed;
  top:80px;
  z-index:2000;
}

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

.mb-grid-background-grid-smaller {
  position: relative; /* parent must be relative */
  overflow: hidden;   /* ensures gradient doesn't leak out */
}

.mb-grid-background-grid-smaller::before {
  content: "";
  position: absolute;
  top: 0;
  left: 40px;
  right: 40px;
  bottom: 0;
  z-index: 0;
  pointer-events: none;

  background: 
    linear-gradient(to right, var(--grid-line-color) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line-color) 1px, transparent 1px);
  background-size: 30px 30px;

  /* Fade out differently on each side */
  -webkit-mask-image: 
    linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,1) 30%, rgba(0,0,0,1) 70%, rgba(0,0,0,0.3) 100%),  /* vertical fade */
    linear-gradient(to right, rgba(0,0,0,0.4) 0%, rgba(0,0,0,1) 40%, rgba(0,0,0,1) 60%, rgba(0,0,0,0.4) 100%);  /* horizontal fade */
  -webkit-mask-composite: destination-in; /* ensures layers combine properly */
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: cover;

  mask-image: 
    linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,1) 30%, rgba(0,0,0,1) 70%, rgba(0,0,0,0.3) 100%),
    linear-gradient(to right, rgba(0,0,0,0.4) 0%, rgba(0,0,0,1) 40%, rgba(0,0,0,1) 60%, rgba(0,0,0,0.4) 100%);
  mask-composite: intersect;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: cover;
}

.layer_top{
  position: relative;
  z-index: 1;
}

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

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

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

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

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

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

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

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

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

.glass {
  background: rgba(255, 255, 255, 0.1);  /* semi-transparent background */
  backdrop-filter: blur(8px);            /* blur the content behind */
  -webkit-backdrop-filter: blur(8px);    /* Safari support */
}

.hero_text{
 width:100%;
 text-align:left;
}
.hero_text h1{
  width:100%;
 text-align:center;
}
.hero_text p{
  width:100%;
 text-align:center;
}

.hero-btns{
  text-align:center;
}

.hr-lg{
  width:100%;
}
.align_right_parent {
  display: block; 
}

.hero-img{
  width:95%;
  margin:0 auto;
}

.milestones{
  position:absolute;
  width:300px; 
  bottom:20px; 
  left:0;
  right:0;
  margin:0 auto;
}

.himg{
  height:450px; 
}

.section-padding{
  padding:30px 0;
}
.section-sec{
  padding:20px 0;
}

.about-caption{
  width:90%;
  margin:0 auto;
  font-size:1.7rem;
  font-weight:600;
}

.section-caption h2{
  width:90%;
  margin:0 auto;
  font-size:2rem;
  font-weight:600;
}

.section-caption p{
  width:90%;
  margin:0 auto;
  font-size:1rem;
}

.mrg{
  margin:25px auto;
}

.feature-padding{
  padding-top:20px;
}

.feature_img_wrapper{
  height:280px;
  width:100%;
}
.feature_img_btn{
  top:45%; 
  left:40%; 
  margin:0 auto; 
  padding:8px 15px; 
  border:none;
  font-size:1.1rem;
}

.glass-dark {
  background: rgba(138, 138, 138, 1); /* glass tint */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border: 1px solid rgba(250, 250, 250, 0.25); /* soft white border */
}

.faq-item {
  display: inline-block; /* make each item flow in columns */
  margin-bottom: 8px;
  break-inside: avoid;   /* prevent breaking items across columns */
  background-color:#EDEDED;
}

.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-control{
  background:none;
  color:#f0f0f0;
}

.no-pseudo::before,
.no-pseudo::after {
  content: none !important;
  display: none !important;
}

.footer{
  width:100%;
}
.foot img{
  height:35px;
}
.footer form{
  display:grid;
  grid-template-columns:70% 30%;
  margin:10px 0;
}
.footer form input{
  padding:12px 10px;
  border-radius:10px;
  font-size:0.95rem;
  border:none;
}
.footer form button{
  padding:12px 4px;
  border-radius:10px;
  font-size:0.95rem;
  border:none;
  margin-left:8px;
}

.profile-view {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}

.profile-card:hover .profile-view {
  opacity: 1;
  visibility: visible;
}

.bg-scale {
  background-size: cover;           /* ensures full coverage */
  background-position: center;      /* centers the image */
  background-repeat: no-repeat;     /* prevents the grid pattern */
  transition: transform 0.5s ease;  /* smooth scaling */
  overflow: hidden;                 /* hides any overflow when scaling */
  display: block;
}

.bg-scale-inner {
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease;
}

.bg-scale:hover .bg-scale-inner {
  cursor:pointer;
  transform: scale(1.1);            /* smooth zoom */
}

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

@-webkit-keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(50px);
            transform: translateY(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(50px);
            transform: translateY(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}


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

@-webkit-keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
@keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}

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

















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

.navbar_style_1{
  width:100%;
  display:grid;
  grid-template-columns:20% 65% 15%;
}

.navbar_style_1 img{
  height:32px;
}

.menu_btn_size{
  font-size:0.98rem;
  margin:0 15px;
}

.smenu{
  display:none;
}

.hero-panel{
  padding:30px 0;
}

.mb-grid-background-grid-smaller::before {
  content: "";
  position: absolute;
  top: 0;
  left: 100px;
  right: 100px;
  bottom: 0;
  z-index: 0;
  pointer-events: none;

  background: 
    linear-gradient(to right, var(--grid-line-color) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line-color) 1px, transparent 1px);
  background-size: 30px 30px;

  /* Fade out differently on each side */
  -webkit-mask-image: 
    linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,1) 30%, rgba(0,0,0,1) 70%, rgba(0,0,0,0.3) 100%),  /* vertical fade */
    linear-gradient(to right, rgba(0,0,0,0.4) 0%, rgba(0,0,0,1) 40%, rgba(0,0,0,1) 60%, rgba(0,0,0,0.4) 100%);  /* horizontal fade */
  -webkit-mask-composite: destination-in; /* ensures layers combine properly */
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: cover;

  mask-image: 
    linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,1) 30%, rgba(0,0,0,1) 70%, rgba(0,0,0,0.3) 100%),
    linear-gradient(to right, rgba(0,0,0,0.4) 0%, rgba(0,0,0,1) 40%, rgba(0,0,0,1) 60%, rgba(0,0,0,0.4) 100%);
  mask-composite: intersect;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: cover;
}


.hero_col{
  display:grid;
  grid-template-columns:50% 50%;
}
.hero_text{
 width:95%;
 text-align:left;
}

.hero_text h1{
  width:100%;
 text-align:left;
}
.hero_text p{
  width:90%;
 text-align:left;
}
.hero_caption{
  font-size:3.5rem;
  font-weight:500;
  line-height:1.1;
}
.hero_para{
  font-size:1.05rem;
}
.align_right_parent {
  display: flex;          /* enables flex layout */
  justify-content: flex-end; /* push children to the right */
}
.hero-img{
  width:70%;
  margin:0;
}
.hero-btns{
  text-align:left;
}

.hr-lg{
  width:90%;
}

.milestones{
  position:absolute;
  width:300px; 
  bottom:40px; 
  left:-50px;
  margin:0;
}

.himg{
  height:520px; 
}

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

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

.about-caption{
  width:90%;
  margin:0 auto;
  font-size:2.4rem;
}

.section-caption h2{
  width:50%;
  margin:0 auto;
  font-size:2.4rem;
}
.section-caption p{
  width:60%;
  margin:0 auto;
  font-size:1rem;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px; /* equal spacing between columns */
}

.mrg{
  margin:0;
}

.feature-padding{
  padding-top:50px;
}

.feature_img_wrapper{
  height:450px;
  width:90%;
}
.feature_img_btn{
  top:48%; 
  left:45%; 
  margin:0 auto; 
  padding:8px 15px; 
  border:none;
  font-size:1.1rem;
}

.footer{
  width:100%;
  display:grid;
  grid-template-columns:60% 40%;
}
.foot img{
  height:35px;
}
.footer form{
  display:grid;
  grid-template-columns:70% 30%;
  margin:10px 0;
}
.footer form input{
  padding:12px 10px;
  border-radius:10px;
  font-size:0.95rem;
  border:none;
}
.footer form button{
  padding:12px 4px;
  border-radius:10px;
  font-size:0.95rem;
  border:none;
  margin-left:8px;
}

.foot-sections{
  width:100%;
  display:grid;
  grid-template-columns:auto auto auto;
}



}