body{
    overflow-x:hidden;
}

.nav-link.fw-semibold.btn-buy-now {
	background: #ffd65c;
	color: #000;
	padding: 11px 22px !important;
	border-radius: 6px !important;
	line-height: normal;
}

.nav-link.fw-semibold.btn-buy-now:hover {
	background: #f4d67a;
}

.section-glint-hero{
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
  }
 .section-glint-hero h1{
   font-size: 6rem;
   font-weight: 900;
   line-height: 1;
 }

     /* smooth native scrolling */
     html {
      scroll-behavior: smooth;
    }
    /* navbar active tweak */
    /* scroll hint */
    .scroll-down {
      position: absolute;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
      cursor: pointer;
      z-index: 10;
    }
    .mouse {
      width: 34px;
      height: 54px;
      border: 2px solid #303030;
      border-radius: 20px;
      position: relative;
      margin: 0 auto;
    }
    .wheel {
      width: 4px;
      height: 8px;
      background: #303030;
      border-radius: 2px;
      position: absolute;
      top: 8px;
      left: 50%;
      transform: translateX(-50%);
      animation: wheelMove 1.2s infinite;
    }
    @keyframes wheelMove {
      0% {
        top: 8px;
        opacity: 1;
      }
      50% {
        top: 25px;
        opacity: 0;
      }
      100% {
        top: 8px;
        opacity: 1;
      }
    }
    .arrow {
      width: 10px;
      height: 10px;
      border-bottom: 2px solid #303030;
      border-right: 2px solid #303030;
      transform: rotate(45deg);
      margin: 10px auto 0;
      animation: arrowMove 1.2s infinite;
    }
    @keyframes arrowMove {
      0%,
      20% {
        transform: rotate(45deg) translateY(0);
        opacity: 0;
      }
      50% {
        transform: rotate(45deg) translateY(10px);
        opacity: 1;
      }
      100% {
        transform: rotate(45deg) translateY(0);
        opacity: 0;
      }
    }
    /* small performance hint for hero corner images */
    #hero .first-image,
    #hero .second-image,
    #hero .third-image,
    #hero .fourth-image {
      will-change: transform;
      transition: transform 0.25s linear;
    }

 .spin-image {
   animation: spin 5s linear infinite;
 }
 
 /* Define the spin animation */
 @keyframes spin {
   from {
     transform: rotate(0deg);
   }
   to {
     transform: rotate(360deg);
   }
 }

 /* floating animation */
.floating {
   animation: floatUpDown 3s ease-in-out infinite;
 }
 
 @keyframes floatUpDown {
   0% {
     transform: translateY(0px);
   }
   50% {
     transform: translateY(-10px); /* move up 20px */
   }
   100% {
     transform: translateY(0px); /* back to start */
   }
 }
 


.box-shadow-xxxl{
   box-shadow: rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px, rgba(17, 17, 26, 0.1) 0px 24px 80px;
}

.section-glint-hero {
   position: relative; /* make hero section positioning context */
 }
 .section-glint-hero {
   position: relative; /* positioning context */
 }
 
 /* Common style for all corner images */
 .first-image,
 .second-image,
 .third-image,
 .fourth-image {
   position: absolute;
   z-index: 1;
   
 }



 .first-image img,
 .second-image img,
 .third-image img,
 .fourth-image img {
   transition: transform 0.3s ease; /* smooth hover effect */
 }
 
 /* Top-left */
 .first-image {
   top: 20px;
   left: 20px;
 }
 .first-image img {
   transform: rotate(-10deg);
 }
 
 /* Top-right */
 .second-image {
   top: 20px;
   right: 20px;
 }
 .second-image img {
   transform: rotate(8deg);
 }
 
 /* Bottom-left */
 .third-image {
   bottom: 20px;
   left: 20px;
 }
 .third-image img {
   transform: rotate(12deg);
 }
 
 /* Bottom-right */
 .fourth-image {
   bottom: 20px;
   right: 20px;
 }
 .fourth-image img {
   transform: rotate(-7deg);
 }
 
 /* Optional: subtle hover bounce */
 .first-image img:hover,
 .second-image img:hover,
 .third-image img:hover,
 .fourth-image img:hover {
   transform: scale(1.05) rotate(0deg);
 }
 
 
 /* Optional: small arrow below */
 .arrow {
   width: 10px;
   height: 10px;
   border-bottom: 2px solid #303030;
   border-right: 2px solid #303030;
   transform: rotate(45deg);
   margin: 10px auto 0;
   animation: arrowMove 1.2s infinite;
 }
 
 @keyframes arrowMove {
   0%, 20% { transform: rotate(45deg) translateY(0); opacity: 0; }
   50% { transform: rotate(45deg) translateY(10px); opacity: 1; }
   100% { transform: rotate(45deg) translateY(0); opacity: 0; }
 }
 
 .demo-section-title{
   font-size: 4rem;
   font-weight: 900;
   line-height: 1;
   text-transform: uppercase;
 }

 .section-into-content h4{
   font-size: 1.25rem;
   line-height: 1.7;
 }

 .py-200{
   padding-top: 12.5rem;
   padding-bottom: 12.5rem;
 }
 .pt-200{
   padding-top: 12.5rem;
 }

 .pb-200{
   padding-bottom: 12.5rem;
 }

 .demo-title {
	font-weight: 900;
	font-size: 2.25rem;
	line-height: 1;
	margin-bottom: 1rem;
}

.demo-title-sm {
	font-weight: 900;
	font-size: 1.8rem;
	line-height: 1;
}

.demo-number {
	font-size: 7rem;
	font-weight: 900;
	opacity: 0.25;
}

.section-features h2{
   text-transform: uppercase;
}

.glint-demo-header .navbar{
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
}


@media(min-width:1300px){
  .glint-demo-header .navbar .nav-item .nav-link{
    margin-left: 10px;
  } 
}

.glint-demo-header .navbar .nav-item .nav-link{
   text-transform: uppercase;
   font-size: 14px;
   padding: 0.5rem 1rem;
   border-radius: 20px;
}
.glint-demo-header .navbar .nav-item .nav-link.active{
   background-color: #303030;
   color: #fff;
}

@media(max-width:1750px){
   html{
      font-size: 14px;
   }
}

@media(max-width:1500px){
   html{
      font-size: 12px;
   }
}


@media(max-width:992px){
    
    .glint-demo-header .navbar .nav-item .nav-link.active {
	background-color: transparent;

}
    
 .container-fluid {
	padding-left: 15px;
	padding-right: 15px;
}  

#navbarText{
    .navbar-nav {
	margin-top: 20px;
}

.glint-demo-header .navbar .nav-item .nav-link {
	font-size: 14px;
}

  .first-image,
   .second-image,
   .third-image,
   .fourth-image {
     width: 200px;   
   }
   .section-glint-hero h1{
      font-size: 4rem;
   }
   .section-glint-hero .spin-image{
      width: 90px;
   }
   .demo-section-title {
      font-size: 4rem;
   }
 }
.d-flex.d-xl-none.buy-btn {
	margin-left: auto;
	margin-right: 20px;
}
 @media(max-width:575px){
   .section-glint-hero h1 {
      font-size: 3.5rem;
   }
   .first-image,
   .second-image,
   .third-image,
   .fourth-image {
     width: 120px;   
   }
element {
	display: flex;
	justify-content: center;
	align-items: center;
}
 }