/* ===========================
    Reset and Base Styles
    =========================== */
body {
     /* Set base font and background */
     font-family: "Outfit", sans-serif;
     font-weight: 400;
     font-style: normal;
     font-size: 16px;
     color: #ffffff;
     background-color: #09121C;
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     cursor: url('../images/link.png') 0 0, pointer;
}
html {
     /* Hide scrollbar and smooth scroll */
     overflow: scroll;
     scrollbar-width: none;
     -ms-overflow-style: none;
     scroll-behavior: smooth;
     overflow-x: hidden;
}
html::-webkit-scrollbar {
     display: none;
}

/* ===========================
    Font Face Declarations
    =========================== */
@font-face {
     font-family: "UnisonProBold";
     src: url('../webFonts/UnisonProBold/font.woff2') format('woff2'), url('../webFonts/UnisonProBold/font.woff') format('woff');
     font-display: swap;
     font-weight: 700;
     font-style: normal;
}

/* ===========================
    Header & Navigation Styles
    =========================== */
.autoshow {
     animation: header 1s both;
     -webkit-animation-delay: 1.0s;
     animation-delay: 1.0s;
}

@keyframes header {
     from {
          opacity: 0;
          transform: translateY(100px);
     }
     
     to {
          opacity: 1;
          transform: translateY(0px);
     }
}

header {
     /* Header layout */
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0 min(10em, 16%);
     margin-top: 50px;
     z-index: 1000000;
}

.logo {
     /* Logo container */
     width: 12%;
     background-blend-mode: screen;
}

.logo a img {
     /* Logo image sizing */
     width: 100%;
}

.navbar ul {
     /* Navigation bar styling */
     gap: 20px;
     padding: 4px 30px;
     background: #ffffff;
     border-radius: 47px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.23);
}

.navbar ul li a {
     /* Navbar link color */
     color: #000000;
}

.btn {
     /* Button styling */
     justify-content: center;
     align-items: center;
     background: #FFFFFF;
     text-decoration: none;
     border-radius: 43px;
     color: #000000;
     font-weight: 500;
     padding: 9px 30px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.23);
     border: none;
     cursor: url('../images/cursor.png') 16 16, auto;
     transition: all 0.3s ease;
}

.btn:hover {
     /* Button hover effect */
     background: #000000;
     color: #FFFFFF;
}

/* ===========================
    Header Menubar (Sidebar)
    =========================== */
.menu_icon {
     /* Hamburger menu icon */
     color: #fff;
     font-size: 2rem;
}

.sidebar-close {
     /* Sidebar close button */
     position: absolute;
     top: 18px;
     right: 18px;
     background: none;
     border: none;
     color: #fff;
     font-size: 2rem;
     cursor: url('../images/cursor.png') 16 16, auto;
     transition: color 0.3s ease;
     z-index: 1100;
}

.sidebar {
     /* Sidebar navigation */
     position: fixed;
     top: 0;
     right: 0;
     left: auto;
     width: 250px;
     height: 100%;
     background-color: #09121C;
     padding: 30px;
     z-index: 1000;
     transform: translateX(100%);
     transition: transform 0.3s ease-in-out;
}

.sidebar .navbar ul {
     /* Sidebar nav layout */
     display: flex;
     flex-direction: column;
     border-radius: 30px;
}

.sidebar ul li {
     /* Sidebar nav item */
     border-radius: 10px;
     margin-bottom: 15px;
}

.menu_icon,
.sidebar ul {
     /* Hide menu icon and sidebar nav by default */
     display: none;
}

/* ===========================
    Signup Popup Styles
    =========================== */
#signup-popup {
     /* Popup overlay */
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     background: rgba(9, 18, 28, 0.61);
     transition: 0.3s;
     align-items: center;
     justify-content: center;
     z-index: 2000;
}

#signup-popup .popup-content {
     /* Popup content box */
     background: #09121C80;
     backdrop-filter: blur(13.55px);
     color: #09121C;
     border-radius: 20px;
     padding: 50px 60px;
     min-width: 300px;
     position: relative;
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
     display: flex;
     flex-direction: column;
     gap: 1em;
}

#signup-popup h2 {
     /* Popup heading */
     display: flex;
     justify-content: center;
     align-items: center;
     margin-top: 0;
     font-family: "UnisonProBold";
     font-size: min(35px, 4vw);
     color: #ffffff;
}

#signup-popup .icon {
     /* Social icon row */
     margin-bottom: 0.5em;
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 1em;
}

#signup-popup .icon svg {
     /* Social icon style */
     border: #FFFFFF 2px solid;
     border-radius: 50%;
     padding: 0.5em;
     width: 40px;
     height: 40px;
     transition: background-color 0.3s ease;
     cursor: url('../images/cursor.png') 16 16, auto;
}

#signup-popup .icon svg:active {
     background-color: #fafafa75;
}

#signup-popup .icon svg:hover {
     background-color: #FFFFFF20;
}

#signup-popup .body {
     /* Popup body text */
     display: flex;
     justify-content: center;
     align-items: center;
     color: #FFF;
     text-align: center;
     font-size: 12px;
     cursor: pointer;
}

#signup-popup .body:hover {
     text-decoration: underline;
}

#signup-popup input[type="email"],
#signup-popup input[type="password"] {
     /* Input fields */
     background-color: #FFFFFF30;
     width: 100%;
     padding: 0.5em;
     border-radius: 12px;
     border: 1px solid #FFFFFF80;
     margin-bottom: 1em;
     font-size: 1em;
}

#signup-popup input[type="email"] {
     /* Email input icon */
     background-image: url('../images/🦆\ icon\ _send_.svg');
     background-repeat: no-repeat;
     background-size: 20px 20px;
     background-position: 10px center;
     padding-left: 38px;
}

#signup-popup input[type="password"] {
     /* Password input icon */
     background-image: url('../images/🦆\ icon\ _shield\ lock_.svg');
     background-repeat: no-repeat;
     background-size: 20px 20px;
     background-position: 10px center;
     padding-left: 38px;
}

#signup-popup form {
     /* Form layout */
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
}

#signup-popup .btn {
     /* Signup button */
     width: 50%;
     margin-top: 20px;
}

#signup-popup .close-popup {
     /* Close (X) button */
     position: absolute;
     top: 16px;
     right: 16px;
     background: none;
     border: none;
     font-size: 1.5em;
     color: #ffffff;
     cursor: url('../images/cursor.png') 16 16, auto;
     transition: color 0.2s;
}

#signup-popup .close-popup:hover {
     color: #3CDBFF;
}

/* ===========================
    Responsive Header & Nav
    =========================== */
@media (max-width: 1024.45px) {
     header {
          padding: 0 min(80px, 16%);
     }
     .navbar ul {
          gap: 5px;
          padding: 4px 15px;
          background: #ffffff;
          border-radius: 47px;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.23);
     }
     .navbar ul li a {
          font-size: 11px;
     }
     #hide {
          display: none;
     }
     .menu_icon,
     .sidebar ul {
          display: block;
          cursor: url('../images/cursor.png') 16 16, auto;
     }
}
@media (max-width: 768.45px) {
     .video-bg source {
          display: flex;
     }
     .menu_icon,
     .sidebar ul {
          display: block;
          cursor: url('../images/cursor.png') 16 16, auto;
     }
     .menu_icon i {
          font-size: 2rem;
     }
     #hide {
          display: none;
     }
     .logo {
          width: 30%;
     }
}
@media (max-width: 425.45px) {
     header {
          margin-top: 25px;
     }
     .logo {
          width: 30%;
     }
}

/* ===========================
    Video Background & Overlay
    =========================== */
.overlay {
     /* Gradient overlay for video background */
     position: absolute;
     top: 0;
     left: 0;
     display: flex;
     width: 100%;
     height: 100%;
     background: linear-gradient(180deg, rgba(9, 18, 28, 0) 0%, rgba(9, 18, 28, 1) 92%);
     z-index: -1;
}

.video-wrapper {
     /* Wrapper for video background */
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     padding: 30px;
     box-sizing: border-box;
     z-index: -2;
}

.video-bg {
     /* Video element styling */
     width: 100%;
     height: 100%;
     border-radius: 40px;
     object-fit: cover;
     pointer-events: none;
}

/* Responsive video adjustments */
@media (max-width: 1024.45px) {
     .overlay {
          height: 45%;
          display: none;
     }
     .video-wrapper {
          top: 85px;
          height: 50%;
     }
     .video-bg {
          border-radius: 20px;
     }
}
@media (max-width:425.45px) {
     .overlay {
          height: 45%;
          display: none;
     }
     .video-wrapper {
          top: 60px;
          height: 44%;
     }
     .video-bg {
          border-radius: 20px;
     }
}

/* ===========================
    Hero Section
    =========================== */
.box {
     /* Hero section height */
     height: clamp(200px, 86vh, 1044px);
}

.hero {
     /* Hero container */
     position: absolute;
     top: 0; left: 0;
     width: 100%; 
     display: flex;
     justify-content: center;
     align-items: center;
     color: white;
     padding: 0 2rem;
     text-align: center;
     z-index: 100;
}

.hero-inner {
     /* Hero content vertical position */
     transform: translateY(230%);
}

/* Responsive hero adjustments */
@media (max-width: 768px) {
     .hero-inner {
          transform: translateY(15%);
     }
}
@media (max-width: 425px) {
     .hero-inner {
          transform: translateY(10%);
     }
}

.heading_1 {
     /* Main heading style */
     font-size: clamp(1rem, 4vw, 2rem);
     text-align: center;
     font-family: 'UnisonProBold';
     font-weight: 700;
     line-height: 1.2;
     margin-bottom: 5px;
}

.body {
     /* Body text style */
     font-size: clamp(1rem, 2.5vw, 2rem);
     line-height: 1.5;
}

.title-overlay {
     /* Overlay for animated titles */
     position: absolute;
     top: 46%;
     left: 50%;
     transform: translate(-50%, -50%);
     opacity: 1;
     transition: opacity 0.5s ease;
     width: 100%;
     padding: 0 2rem;
}

.hidden {
     /* Hide element with fade */
     opacity: 0;
     pointer-events: none;
}

@media (max-width: 425.45px) {
     .body {
          font-size: 1rem;
     }
     .hero {
          padding-top: 60px;
     }
}

/* ===========================
    About Section
    =========================== */
.about {
     /* About section layout */
     margin-top: -150px;
     display: flex;
     flex-direction: row;
     justify-content: space-around;
     align-items: center;
     margin-top: 5rem;
     padding: 0 clamp(1em, 16%, 10em)
}

.about_img {
     /* About image container */
     position: relative;
     display: flex;
     align-self: center;
     margin-right: 30px;
}

.about .about_img_1+.about_img_2 {
     position: relative;
}

.about .about_img_1 .img_1 {
     /* Faded background image */
     position: absolute;
     top: 0;
     left: 0;
     width: 300px;
     height: 470px;
     opacity:  25%;
}

.about .about_img_1 .img_1 img {
     width: 100%;
     height: 100%;
     border-radius: 25px;
}

.about .about_img_2 .img_2 {
     /* Foreground image with blur and rotation */
     width: 300px;
     height: 470px;
     padding: 20px;
     border-radius: 25px;
     background: rgba(255, 255, 255, 0.10);
     backdrop-filter: blur(5px);
     transform: rotate(-8deg);
     transition: 0.3s;
}

.about .about_img_2 .img_2:hover {
     /* Hover effect for image */
     transform: rotate(8deg);
}

.about .about_img_2 .img_2 img {
     width: 100%;
     margin-top: 9px;
     border-radius: 18px;
}

.about .about_img_2 .img_2 p {
     /* Caption under image */
     margin-top: 13px;
     margin-left: 30px;
     font-size: 10px;
     position: relative;
}

.about .about_img_2 .img_2 p::before {
     /* Colored dot before caption */
     content: '';
     position: absolute;
     top: 5px;
     left: -20px;
     width: 8px;
     height: 8px;
     background-color: aqua;
     border-radius: 50%;
}

.about .about_text {
     /* About text container */
     max-width: 500px;
}

.heading_2 {
     /* About section heading */
     color: #FFF;
     font-family: "UnisonProBold";
     font-size: 23px;
     font-weight: 700;
     line-height: 25px;
}

.body {
     /* About section body text */
     color: #FFF;
     font-family: Outfit;
     font-size: 16px;
     font-weight: 300;
     line-height: normal;
}

/* ===========================
    Features Section
    =========================== */
.Features .col-md-6 {
     align-self: center;
}

.Features {
     /* Features section background */
     margin-top: 100px;
     padding: 60px 0;
     background-color: #f8f9fa;
}

.Features h2 {
     color: #09121C;
}

.Features .body {
     color: #09121C;
}

.Features .for_ml {
     margin-left: 200px;
}

.for_ns button {
     /* Play button style */
     position: relative;
     background-color: #09121C;
     width: 160px;
     box-shadow: none;
     padding: 11px 18px;
     border-radius: 50px;
     border: none;
     cursor: url('../images/cursor.png') 22 22, auto;
}

.for_ns .body {
     color: #FFF;
     font-size: 14px;
     font-weight: 500;
     margin-left: 15px;
}

.btn .play_icon {
     /* Play icon animation */
     transform: translateX(40px);
     transition: transform 0.3s ease-in, margin-left 0.3s ease-in, opacity 0.3s ease-in, visibility 0.3s;
}

.btn:hover .play_icon {
     transform: translateX(0);
     margin-left: 10px;
}

.grid {
     /* Features grid layout */
     display: flex;
     justify-content: center;
     gap: 20px;
     flex-wrap: wrap;
     align-items: center;
     margin-top: 50px;
}

.f_grid {
     /* Feature card style */
     background-color: #09121C;
     border-radius: 20px;
     width: 100%;
     max-width: 256px;
     height: 270px;
     padding: 20px;
     -webkit-transition: transform 0.3s ease-in-out;
     -moz-transition: transform 0.3s ease-in-out;
     -o-transition: transform 0.3s ease-in-out;
     transition: transform 0.3s ease-in-out;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     box-sizing: border-box;
}

.grid:hover .f_grid {
     /* Shrink all cards on grid hover */
     transform: scale(0.9);
     transition: transform 0.3s ease-in-out;
}

.grid:hover .f_grid:hover {
     /* Enlarge hovered card */
     transform: scale(1.2);
     z-index: 2;
}

.f_grid img {
     width: 66px;
     margin: 18px 0;
}

.f_grid .info {
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
}

.f_grid .heading_3 {
     font-size: 23px;
     font-weight: 700;
     line-height: 25px;
     margin-bottom: 8px;
     color: #fff;
}

.f_grid .body_2 {
     font-size: 12px;
     font-weight: 300;
     line-height: 14px;
     color: #ccc;
}

.modal-content {
     border-radius: 20px;
}

/* Responsive features adjustments */
@media (max-width: 992.45px) {
     .Features {
          margin-top: 46px;
     }
     .Features h2 {
          font-size: 24px;
          text-align: center;
     }
     .f_grid {
          padding: 40px;
          height: 230px;
     }
     .f_grid {
          min-width: 100%;
          max-width: 300px;
          flex: 0 0 auto;
     }
     .Features .for_ml {
          margin-left: 0;
     }
}
@media (max-width: 576.45px) {
     .Features {
          margin-top: 46px;
     }
}

/* ===========================
    Advantage Section
    =========================== */
.Advantage {
     /* Section with background image and overlay */
     background-image: url('../images/bg.png');
     background-size: cover;
     height: 100vh;
     padding: 0px 20px;
     background-position: center;
     background-repeat: no-repeat;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     position: relative;
}

.Advantage .Advantage_bg_overlay {
     /* Gradient overlay */
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(180deg, rgba(9, 18, 28, 1) 0%, rgba(9, 18, 28, 0.74) 53%, rgba(9, 18, 28, 1) 100%);
     z-index: 1;
}

.Advantage .info {
     /* Info card */
     display: flex;
     justify-content: center;
     text-align: center;
     padding: 100px 0px;
     max-width: 1180px;
     min-width: 20px;
     background: #D9D9D903;
     border-radius: 38px;
     border: 1px solid #FFF;
     backdrop-filter: blur(10px);
     box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
     z-index: 2;
}

.Advantage .text {
     width: clamp(350px, 90vw, 657px);
     flex-direction: column;
     padding: 20;
}

.Advantage .text .heading_1 {
     font-size: clamp(30px, 3.5vw, 48px)
}

.Advantage .text .body {
     margin-top: 30px;
}

@media (max-width: 467.45px) {
     .Advantage {
          height: 76vh;
          margin-top: -8px;
     }
}

/* ===========================
    Features_2 Section
    =========================== */
.Features_2 .f_grid {
     background-color: #fff;
     border-radius: 25px;
     text-align: center;
}

.Features_2 .grid,
.text_2 {
     padding: 20px;
}

.Features_2 .grid_number {
     color: #000000;
     font-size: 60px;
     font-family: "outfit", sans-serif;
     font-weight: 700;
}

.Features_2 .body_2 {
     color: #000000;
}

.Features_2 .heading_3 {
     color: #000000;
}

@media (max-width: 425.45px) {
     .heading_1 {
          margin-top: 0px;
     }
}

@media (max-width: 375.45px) {
     .Advantage .info {
          padding: 50px 20px;
     }
}

/* ===========================
    Call To Action (CTA) Section
    =========================== */
.CTA_section {
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 150px 20px;
     text-align: center;
     margin-top: min(137px, 20vw);
     color: #fff;
     border-top: #FFFFFF 1px solid;
     position: relative;
}

.CTA_section .CTA_bg_overlay_1 {
     /* Pink blurred circle */
     position: absolute;
     top: 70%;
     left: 34%;
     width: 65px;
     height: 65px;
     background-color: #FF3CE5;
     filter: blur(58px);
     z-index: -1;
}

.CTA_section .CTA_bg_overlay_2 {
     /* Blue blurred circle */
     position: absolute;
     top: 20%;
     left: 62%;
     width: 65px;
     height: 65px;
     background-color: #3CDBFF;
     filter: blur(58px);
     z-index: -1;
}

.CTA_section .CTA {
     /* CTA card */
     border: #fff 1px solid;
     padding: min(88px, 10vw) min(49px, 5vw);
     border-radius: 53px;
}

.CTA_section .CTA_content {
     width: clamp(200px, 50vw, 325px);
}

.CTA_section .btn {
     background-color: #fff;
}

.CTA_section .btn .body {
     margin-top: 24px;
     color: #000000;
}

.CTA_section .btn .play_icon {
     color: #09121C;
}

@media (max-width: 425.45px) {
     .CTA_section {
          padding: 77px 20px;
          margin-top: min(137px, 12vw);
     }

     .CTA_bg_overlay_1,
     .CTA_bg_overlay_2 {
          display: none;
     }
}

@media (max-width: 768.45px) {
     .CTA_section .CTA_bg_overlay_1 {
          top: 65%;
          left: 23%;
     }
     .CTA_section .CTA_bg_overlay_2 {
          top: 18%;
          left: 71%;
     }
}

/* ===========================
    Contact Form Section
    =========================== */
.get_in_touch {
     /* Contact section background */
     background-image: url('../images/2dcffb5dc77c41c0718a8193613f00fba214a7db.png');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     position: relative;
     padding: 0 20px;
     z-index: 1;
}

.get_in_touch .get_in_touch_text svg {
     /* Decorative SVG */
     position: absolute;
     top: 93px;
     left: 0;
     width: 100%;
     height: 100%;
     fill: none;
     z-index: 1;
}

._bg_overlay {
     /* Gradient overlay */
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(180deg, rgba(9, 18, 28, 1) 0%, rgba(9, 18, 28, 0.74) 53%, rgba(9, 18, 28, 1) 100%);
     z-index: -1;
}

.get_in_touch form .flex {
     /* Form row layout */
     display: flex;
     justify-content: center;
     align-items: center;
     width: 100%;
     gap: 6px;
     margin-bottom: 6px;
     margin: 20px;
}

.get_in_touch form .n_style {
     flex-direction: column;
}

.get_in_touch form label {
     position: relative;
}

.get_in_touch form label .input {
     /* Input field style */
     width: 100%;
     padding: 10px 10px 20px 10px;
     outline: 0;
     border: 1px solid rgba(206, 206, 206, 0.397);
     border-radius: 20px;
     position: relative;
}

.get_in_touch form label .input+span {
     /* Floating label */
     position: absolute;
     left: 10px;
     top: 15px;
     color: grey;
     font-size: 0.9em;
     cursor: text;
     transition: 0.3s ease;
}

.get_in_touch form label .input:placeholder-shown+span {
     top: 15px;
     font-size: 0.9em;
}

.get_in_touch form label .input:focus+span,
.get_in_touch form label .input:valid+span {
     top: 30px;
     font-size: 0.7em;
     font-weight: 600;
}

.get_in_touch form label .input:valid+span {
     color: green;
}

.submit {
     /* Submit button style */
     border: none;
     outline: none;
     background-color: royalblue;
     padding: 10px;
     border-radius: 10px;
     color: #fff;
     font-size: 16px;
     transform: .3s ease;
}

.submit:hover {
     background-color: rgb(56, 90, 194);
}

.contact-form {
     /* Contact form layout */
     display: flex;
     flex-direction: column;
     gap: 1rem;
     max-width: 500px;
     margin: 0 auto;
}

.form-group {
     position: relative;
}

.contact-form input,
.contact-form textarea {
     /* Input and textarea style */
     width: 100%;
     padding: 12px;
     border: 1px solid rgba(255, 255, 255, 0.1);
     background: rgb(255, 255, 255);
     border-radius: 8px;
     color: #000000;
     font-size: 16px;
}

.get_in_touch .heading_1 {
     margin-bottom: 60px;
}

.contact-form textarea {
     min-height: 120px;
     resize: vertical;
}

.contact-form button {
     margin-top: 1rem;
     z-index: 500;
}

@media (max-width: 768.45px) {
     .get_in_touch .get_in_touch_text svg {
          display: none;
     }
}

/* ===========================
    Footer Section
    =========================== */
.Footer {
     /* Footer layout */
     display: flex;
     justify-content: center;
     flex-direction: column;
     align-items: center;
     margin-top: 100px;
     padding: 0 20px;
}

.Footer .logo {
     margin-bottom: 20px;
}

.Footer .icon {
     /* Social icons row */
     display: flex;
     margin-top: 30px;
     gap: 12px;
}

.Footer .icon svg {
     /* Social icon style */
     border: #FFFFFF 2px solid;
     border-radius: 50%;
     padding: 0.5em;
     width: 40px;
     height: 40px;
     margin: 0;
     transition: background-color 0.3s ease;
     cursor: url('../images/cursor.png') 16 16, auto;
}

.Footer .icon svg:hover {
     background-color: #FFFFFF20;
}

.Footer .Footer_text {
     /* Footer text row */
     display: flex;
     justify-content: space-around;
     align-items: center;
     width: 100%;
     margin-top: 40px;
}

.Footer .Footer_text .body {
     font-size: 12px;
}

.Footer .Footer_text .body:last-child {
     text-align: right;
}

@media (max-width: 425.45px) {
     .Footer {
          margin-top: 69px;
     }

     .Footer .navbar ul li a {
          font-size: 10px;
          gap: 5px;
          padding: 4px 5px;
     }
}

@media (max-width: 320.45px) {
     .Footer .Footer_text .body {
          font-size: 10px;
     }
}

/* ===========================
    loader animation
    =========================== */
/* Component by Z4drus from uiverse.io
   Licensed under the MIT License
   https://uiverse.io/Z4drus
*/
.loader_div {
     width: 100%;
     height: 100%;
     position: fixed;
     left: 0;
     top: 0;
     display: flex;
     justify-content: center;
     align-items: center;
     background-color: #09121C;
     z-index: 1000000;
     pointer-events: none;
}

.loader {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  /* smooth background */
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.05) 30%,
    transparent 70%
  );
  overflow: hidden;
}

/* outside circle */
.loader::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 4px solid transparent;
  border-top-color: rgba(255, 255, 255, 0.6);
  animation: loader-spin 2s linear infinite;
}

/* rotating circle */
.loader::after {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: conic-gradient(from 90deg, rgba(255, 255, 255, 0.2), transparent);
  filter: blur(2px);
  animation: loader-spin-reverse 1.5s linear infinite;
}

/* center circle */
.loader__inner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
  animation: loader-pulse 1s ease-in-out infinite;
}

/* Container */
.loader__orbit {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: orbit-rotate 3s linear infinite;
}

/* dots */
.loader__dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
}

/* 4 dots */
.loader__dot:nth-child(1) {
  transform: rotate(0deg) translate(60px);
}
.loader__dot:nth-child(2) {
  transform: rotate(90deg) translate(60px);
}
.loader__dot:nth-child(3) {
  transform: rotate(180deg) translate(60px);
}
.loader__dot:nth-child(4) {
  transform: rotate(270deg) translate(60px);
}

/* Animations */

@keyframes loader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes loader-spin-reverse {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}

@keyframes loader-pulse {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
  }
}

@keyframes orbit-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/*======================
     scroll animetion
========================*/
.hidden_2 {
  opacity: 0;
  filter: blur(5px);
  transform: translateY(100px);
  transition: all 1s ease;
}

.show {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

.f_grid:nth-child(2) {
     transition-delay: 200ms;
}

.f_grid:nth-child(3) {
     transition-delay: 400ms;
}

.f_grid:nth-child(4) {
     transition-delay: 600ms;
}

.f_grid:nth-child(5) {
     transition-delay: 800ms;
}