@font-face {
        font-family: "Bebas Neue";
        src: url("assets/font/BebasNeue-Regular.ttf") format("truetype");
        font-weight: normal;
        font-style: normal;
        }

        /* Font 2: Rajdhani */
        @font-face {
        font-family: "Rajdhani";
        src: url("assets/font/Rajdhani-Regular.ttf") format("truetype");
        font-weight: normal;
        font-style: normal;
        }

        /* For WebKit browsers (Chrome, Edge, Safari) */
        ::-webkit-scrollbar {
        width: 18px; /* Width of scrollbar */
        }

        ::-webkit-scrollbar-track {
        background: #000000; /* Track (background) color */
        border-radius: 10px;
        }

        ::-webkit-scrollbar-thumb {
        background: #ffffff; /* Scrollbar handle color */
        border-radius: 10px;
        }

        ::-webkit-scrollbar-thumb:hover {
        background: #b3b3b3; /* Handle color on hover */
        }

        /* For Firefox */
        * {
        scrollbar-width: thin; /* auto | thin | none */
        scrollbar-color: #94272a #111111; /* thumb color | track color */
        }

        :root {
        --bg-start: #2c003e;
        --bg-end: #000010;
        --card-bg: rgba(255,255,255,0.06);
        --card-bd: rgba(255,255,255,0.10);
        --radius: 16px;
        --gap: 18px;
        --speed-row1: 28s;
        --speed-row2: 32s;
        }
        *{
        margin: 0;
        padding: 0;
        }

            body {
                margin: 0;
                padding: 0;
                background-color: #222222ff;
            /* display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column; */
            

            }
            .background-text {
            font-size: 4rem;
            position: absolute;
            font-weight: 500;
            text-transform: uppercase;
            z-index: 0;
            top: 12px;
            background: linear-gradient(to right, #000000b5 0%, #892c2f 100%);
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-emphasis-color: transparent;
            font-family: "Bebas Neue", sans-serif;
            pointer-events: none;
        }
            @media (max-width: 480px) {
            .background-text{
                font-size: 35px;
            }
            }
        .foreground-text {
            font-size: 3rem;
            font-family: "Rajdhani";
            font-weight: 700;
            color:#a7a7a7;
            z-index: 1;
        }
        .splash{
            position:fixed;
            inset:0;
            z-index:9999;
            background:white;
            display:flex;
            justify-content:center;
            align-items:center;
            flex-direction:column;
            overflow:hidden;
        }

        /* Logo */
        .logo{
            z-index:3;
            opacity:0;
            transform:scale(.8);
            animation:logoIn 1s ease forwards;
        }
        .logo img{width:150px}

        /* Pages */
        .red-page,.black-page{
            position:absolute;
            width:100%;
            height:100%;
        }
        .red-page{
            background:#c52f33;
            top:-100%;
            left:0;
            z-index:2;
        }
        .black-page{
            background:black;
            top:0;
            left:-100%; /* start left side */
            z-index:3;
        }

        /* Keyframes */
        @keyframes logoIn{to{opacity:1;transform:scale(1)}}
        @keyframes logoOut{to{opacity:0;transform:scale(0.8)}}
        @keyframes redDown{to{top:0}}
        @keyframes blackRight{to{left:0}}


            .video-container {
            position: relative;
            width: 98%;
            height: 94vh;
            overflow: hidden;
            border-radius: 20px;
            margin: 20px auto;    
            box-shadow: -21px -21px 41px #0e0e0e, 21px 21px 41px #0000007a;
            display: flex;
            align-items: center;
            flex-direction: column;
            z-index: 1; 
            }
            .container-fluid{
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
            }

            .main_image {
            position: absolute;
            top: 50%;
            left: 50%;
            min-width: 100%;
            min-height: 100%;
            width: auto;
            height: auto;
            transform: translate(-50%, -50%);
            object-fit:cover;
            z-index: 0;
            }


        .black_div{
          width: 100%;
          height: 100vh;
          position: absolute;
          z-index: 1;
          background-color: #00000057;
        }
        .navbar {
          position: absolute;
          z-index: 3;
          width: 100%;
        }

        .nav {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;
        }
        .nav h1{
          align-self: flex-start;
        }
        .nav ul{
          margin-top: -5px;
          margin: auto;
          background: rgba(182, 182, 182, 0.2);
          border-radius: 16px;
          box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
          backdrop-filter: blur(5px);
          -webkit-backdrop-filter: blur(5px);
          border: 1px solid rgba(182, 182, 182, 0.3);
        }
        .nav a{
          color: white;
          transition: color 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
          font-family: "Bebas Neue", sans-serif;
          font-weight: 400;
          letter-spacing: 2px;
        }
        .nav a:hover{
          color: #c52f33;
          transform: scale(1.05);
          text-decoration: underline; 
          text-underline-offset: 4px;
        }
        .but{
          color: white;
          transition: color 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
          background: rgba(182, 182, 182, 0.2);
          border-radius: 16px;
          box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
          backdrop-filter: blur(5px);
          -webkit-backdrop-filter: blur(5px);
          border: 1px solid rgba(182, 182, 182, 0.3);

        }
        .content{
          z-index: 2;
          text-align: center;
          margin-top: 40px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
        .content span{
          font-family: "Bebas Neue", sans-serif;
          font-weight: 400;
          letter-spacing: 0px;
          font-size: 3.5rem;
          color: white;
          line-height: 50px;
          z-index: 1;
          text-align: center;

        }
        .content b{
          color: #94272a;
        }
        .content p{
          color:rgb(255 255 255 / 52%);
          margin-top: 20px;
          margin-bottom: 20px;
          width: 470px;
        }

        @media (max-width: 768px) {
          .responsive-text {
            font-size: 20px;
          }
        }

        @media (max-width: 480px) {
          .content span{
            font-size: 35px;
            line-height: 35px;
          }
          .content p{
          color:rgb(255 255 255 / 52%);
          font-size: 15px;
          width: 90%;
        }
        }

        .butn{
          width: 160px;
          padding: 10px;
          color: white;
          transition: color 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
          background: rgba(182, 182, 182, 0.2);
          border-radius: 20px;
          box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
          backdrop-filter: blur(5px);
          -webkit-backdrop-filter: blur(5px);
          font-family: "Bebas Neue", sans-serif;
          letter-spacing: 1px;
          border: 1px solid rgba(182, 182, 182, 0.3);

        }
        .butn:hover{
          background: #c52f3431;
          border-radius: 20px;
          box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
          backdrop-filter: blur(5px);
          -webkit-backdrop-filter: blur(5px);
        }
        .hover:hover{
          color: #c52f33;
          transform: scale(1.05);
        }
        #mobileMenu{
          background: rgba(182, 182, 182, 0.2);
          border-radius: 16px;
          box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
          backdrop-filter: blur(5px);
          -webkit-backdrop-filter: blur(5px);
          border: 1px solid rgba(182, 182, 182, 0.3);
        }
      

        .highlight-text {
          color: #c52f33;
        }

        .main-heading {
          font-family: "Bebas Neue", sans-serif;
          font-weight: 500;
          letter-spacing: 0px;
          font-size: 3.5rem;
          color: rgb(24, 24, 24);
          line-height: 50px;
          text-align: left;
        }
        .main-heading b{
          color: #94272a;
        }

        .subtext {
          text-align: left;
          color:rgba(0, 0, 0, 0.52);
          margin-top: 15px;
          margin-bottom: 25px;
          font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .btn-orange {
          background-color: #c52f33;
          color: #fff;
          border: none;
          padding: 10px 20px;
          border-radius: 8px;
        }

        .btn-dark-outline {
          background-color: transparent;
          border: 1px solid #666;
          color: #fff;
          padding: 10px 20px;
          border-radius: 8px;
          margin-left: 10px;
        }

        .image_box {
          border-radius: 20px;
          overflow: hidden;

        }

        .extra-icons {
          margin-top: 20px;
        }

        .extra-icons img {
          border-radius: 10px;
          width: 80px;
          height: auto;
          margin-right: 10px;
        }

        @media (max-width: 768px) {
          .btn-dark-outline {
            margin-left: 0;
            margin-top: 10px;
          }
        }
        .grainy-bg {
        position: relative;
        background: linear-gradient(120deg, #000000ef, #000000e5, #3d0e10);
        overflow:hidden;
          }

          /* First grain layer */
          .grainy-bg::before {
              content: "";
              position: absolute;
              inset: 0;
              background-image:
                  radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px),
                  radial-gradient(circle, rgba(255, 255, 255, 0.041) 1px, transparent 1px);
              background-size: 3px 3px, 4px 4px; /* slightly different sizes */
              pointer-events: none;
              z-index: 1;
          }
          
          
    .chat-form {
      width: 340px;
      padding: 22px;
      border-radius: 22px;
      background: radial-gradient(circle at top, #1f1f1f, #000 65%);
      box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    }

    .chat-form h2 {
      text-align: center;
      font-size: 18px;
      letter-spacing: 1px;
      color: #fff;
      margin-bottom: 10px;
    }

    .chat-form h2 span {
      color: #e53935;
      font-weight: bold;
      font-size: 18px;
    }

    .chat-form input {
      width: 100%;
      padding: 5px 14px;
      border-radius: 12px;
      border: none;
      outline: none;
      margin-bottom: 12px;
      font-size: 14px;
    }

    .chat-form input::placeholder {
      color: #8b8b8b;
    }

    .chat-form button {
      width: 100%;
      padding: 12px;
      border: none;
      border-radius: 999px;
      font-size: 15px;
      font-weight: bold;
      cursor: pointer;
      color: #fff;
      background: linear-gradient(90deg, #b71c1c, #e53935);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .chat-form button:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 18px rgba(229,57,53,0.5);
    }

    .form-status {
      margin-top: 10px;
      font-size: 13px;
      text-align: center;
      color: #fff;
      display: none;
    }