@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
       body {
            /* background: linear-gradient(to bottom, #000000, #330000); */
            background: #060606;
            color: white;
            font-family: "Inter", serif;
        }

        .container {
            /* margin-top: 5%; */
            text-align: center;
            border-radius: 15px;
        }

        .form-label {
            color: white;
        }
        .btnred {
            border-radius: 10px;
            background-color: #e6202d;
            color:white;font-size:14px;
            padding:0.5rem 1.5rem;
            box-shadow:
                0 0 8px rgba(255, 0, 0, 0.6),
                /* Light red shadow */
                0 0 3px rgba(255, 0, 0, 0.6);
            /* Smaller, lighter red shadow */
        }


        .btnotp {
            border-radius: 15px;
            background-color: #e6202d;
            color:white;font-size:14px;
            padding:0.5rem 1.5rem;
            box-shadow:
                0 0 8px rgba(255, 0, 0, 0.6),
                /* Light red shadow */
                0 0 3px rgba(255, 0, 0, 0.6);
            /* Smaller, lighter red shadow */
        }

        .btnotp:hover {
            background-color: #e6202d;
        }

        .input-group-text {
            border: 1px solid #555;
            border-radius: 10px;
            background: transparent;
            border: none;
            color: white;
            border-radius: 10px;
        }
        .heading{
            font-size: 2rem;
            font-weight: bold;
        }

        h1 {
            font-size: 2rem;
            font-weight: bold;
        }

        p {
            font-size: 1rem;
        }
        .form-control {
            padding: 10px 0px 10px 0px;
            border-top: 0;
            border-left: 0;
            outline: 0;
            border-right: 0;
            background-color: transparent;
            color: white !important;
            border-radius: 0px;
        }
        .form-control::placeholder {
            color: #c0bebe;
            padding-left: 0;
        }
        .form-control:focus {
            border-top: 0;
            border-left: 0;
            border-right: 0;
            box-shadow:none;
            background-color: transparent;
            color: white !important;
            border-radius: 0px;
        }
        .gz-logo-top {
            width: 131px;
            height: 25px;
            margin-top: 0px;
            padding-left: 10px;
        }
        .text-grey-color {
            color: #9c9797;
        }
        .input-group {
            border: 1px solid #555;
            border-radius: 10px;
            display: flex;
            align-items: center;
            border-radius: 10px;
        }
        .input-group .input-group-text {
            border: 1px solid #555;
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 10px;
        }
        .emailID-icon {
            float: right;
            cursor: pointer;
            margin-right: 10px;
            margin-top: -30px;
            color: #525252;
            font-size:22px;
        }
        .whatsapp-icon {
            float: right;
            cursor: pointer;
            margin-right: 10px;
            margin-top: -30px;
            color: #525252;
            font-size:20px;
        }
        .spacer {
            height: 1rem !important;
        }
        .shadow-text {
            font-family: "Inter", serif;
            font-size: 2rem;
            color: #e6202d;
            font-weight: bold;
            color: #e6202d;
            text-shadow:
                0 0 40px #e6202d,
                0 0 10px #e6202d;
        }
        /* #required-alert {
            height: 30px;
        } */

        /* verify otp start */

        .otp_submit_btn {
            border-radius: 10px;
            background-color: #e6202d;
            color:white;font-size:14px;
            padding:0.5rem 1.5rem;
            box-shadow:
                0 0 8px rgba(255, 0, 0, 0.6),
                /* Light red shadow */
                0 0 3px rgba(255, 0, 0, 0.6);
            /* Smaller, lighter red shadow */
        }

        .otp_submit_btn:hover {
            background-color: #e6202d;
        }
        .text-danger-sm {
         font-size:0.8rem;
            color: #e43949 !important;
        }
        .otp-input {
            width: 60px;
        height: 70px;
        margin: 4px;
        font-size: 20px;
        text-align: center;
        border: 1px solid #3b3a3a;
        border-radius: 12px;
        background-color: #111111;
        color: white;
        }
        .otp-input:focus {
          outline: none;
          border-color: #ff4a4a;
          box-shadow: 0 0 3px #ff4a4a;
        }
        .resend-link {
          color: #fff;
          text-decoration: none;
        }
        .resend-link:hover {
          text-decoration: underline;
        }
        .btn-submit {
          background-color: #ff4a4a;
          border: none;
          width: 100%;
          padding: 10px;
          color: white;
          font-size: 16px;
          border-radius: 4px;
          cursor: pointer;
        }
        .btn-submit:hover {
          background-color: #e04343;
        }
        @media only screen and (max-width: 768px) {
            .otp-input {
        width: 45px;
        height: 49px;
        margin: 3px;
        font-size: 20px;
        text-align: center;
        border: 1px solid #1e1e1e;
        border-radius: 10px;
        background-color: #111111;
        color: white;
    }
        }
        @media screen and (min-width: 769px) and (max-width: 992px) { 
    
            .otp-input {
        width: 55px;
        height: 60px;
        margin: 5px;
        font-size: 20px;
        text-align: center;
        border: 1px solid #1e1e1e;
        border-radius: 12px;
        background-color: #111111;
        color: white;
    }
        }
        .text-sm{
            font-size:0.8rem;
        }
        .white-shadow-text {
         
         
            color: #fff;
            font-weight: bold;
            text-shadow: 0 0 30px #d3cece, 0 0 1px #c9c3c3;
            z-index: 2; /* Make sure text is above the progress bar */
            position: relative; /* Ensure text stays on top */
        }
       .v-center{
        align-items: center;
       }
       .loader img {
        width: 30px;
      }

      .loader {
        text-align: center;
      }

      .loader-area {
        height: 10px;
      }
      @media only screen and (max-width: 768px) {
        .heading_phone{
          font-size:1.5rem;
        }
      }
      #otp_submit_btn {
        display: flex;
        justify-content: center;
        align-items: center;
     
    }
    #loader {
        display: none;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    .navbar {
        padding:15px 0px;
    }



    
    @media (max-width: 768px) {
        .radial-shadow {
            width: 100px;  /* Smaller width for smaller screens */
            height: 150px; /* Smaller height for smaller screens */
        }
    }
            .radial-shadow {
                position: absolute;
                top: -100px; /* Move it up so that the top touches the container */
                left: 50%;
                transform: translateX(-50%);
                width: 1200px; /* Increased size for much bigger shadow */
                height: 250px; /* Increased size for much bigger shadow */
                background: radial-gradient(circle, rgba(80, 2, 6, 0.5), transparent);
                filter: blur(40px); /* Increased blur for an even more diffused look */
                pointer-events: none;
                border-radius: 300px 300px 0 0; /* Half-circle border radius */
                animation: moveShadow 50s ease-in-out infinite; /* Continuous movement */
            }
    
            /* Animation for smooth movement */
            @keyframes moveShadow {
                0% {
                    transform: translateX(-50%) translateX(-50vw); /* Start position (left) */
                }
                50% {
                    transform: translateX(-50%) translateX(50vw); /* Move to the right */
                }
                100% {
                    transform: translateX(-50%) translateX(-50vw); /* Return to the left */
                }
            }
    
            .radial-shadow {
        position: absolute;
        top: -100px; /* Move it up so that the top touches the container */
        left: 50%;
        transform: translateX(-50%);
        width: 1200px; /* Default width for larger screens */
        height: 300px; /* Increased size for much bigger shadow */
        background: radial-gradient(circle, rgba(80, 2, 6, 0.5), transparent);
        filter: blur(40px); /* Increased blur for an even more diffused look */
        pointer-events: none;
        border-radius: 300px 300px 0 0; /* Half-circle border radius */
        animation: moveShadow 50s ease-in-out infinite; /* Continuous movement */
        max-width: 100%; /* Prevent shadow from overflowing horizontally */
    }
    
    @media (max-width: 768px) {
        .radial-shadow {
            width: 1000px;  /* Smaller width for smaller screens */
            height: 200px; /* Smaller height for smaller screens */
        }
    }
    
    @media (max-width: 480px) {
        .radial-shadow {
            width: 800px;  /* Even smaller width for mobile phones */
            height: 200px; /* Even smaller height for mobile phones */
        }
    }
    
    /* Animation for smooth movement */
    @keyframes moveShadow {
        0% {
            transform: translateX(-50%) translateX(-50vw); /* Start position (left) */
        }
        50% {
            transform: translateX(-50%) translateX(50vw); /* Move to the right */
        }
        100% {
            transform: translateX(-50%) translateX(-50vw); /* Return to the left */
        }
    }
    body, html {
        overflow-x: hidden; /* Prevent horizontal scrolling */
    }
    canvas {
        display: block;
    }
    /* Dark Gradient Overlay */
    .three-container {
        position: absolute;
        top: -250px;
        left: 0;
        width: 100%;
        height: 400px; /* Reduce the height */
        z-index: 1; /* Place behind the form */
        pointer-events: none;
        overflow: hidden; /* Hide any overflow */
        background:transparent;
    }
    /* Form container styling with higher z-index */
    .form-con {
            position: relative;
            z-index: 10; /* Bring the form in front */         
            background:transparent;
        }
    @media only screen and (max-width: 768px) {
        .heading_phone{
          font-size:1.5rem;
        }
        .shadow-text{
          font-size:1.5rem;
        }
      }


    /* Prevent horizontal overflow in mobile view */
    body, html {
        overflow-x: hidden; /* Prevent horizontal scrolling */
    }
    .set-bottom{
        position:absolute;
        bottom:0;
    }
    
    nav {
        flex-shrink: 0; /* Prevent navbar from shrinking */
    }


   /* width */
   ::-webkit-scrollbar {
    width: 10px;
    border-radius: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: transparent;
    border:1px solid #555;
    border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
    border:1px solid #555;
    border-radius: 10px;
}
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
       body {
            /* background: linear-gradient(to bottom, #000000, #330000); */
            background: #060606;
            color: white;
            font-family: "Inter", serif;
        }

        .container {
            /* margin-top: 5%; */
            text-align: center;
            border-radius: 15px;
        }

        .form-label {
            color: white;
        }
        .btnred {
            border-radius: 10px;
            background-color: #e6202d;
            color:white;font-size:14px;
            padding:0.5rem 1.5rem;
            box-shadow:
                0 0 8px rgba(255, 0, 0, 0.6),
                /* Light red shadow */
                0 0 3px rgba(255, 0, 0, 0.6);
            /* Smaller, lighter red shadow */
        }


        .btnotp {
            border-radius: 15px;
            background-color: #e6202d;
            color:white;font-size:14px;
            padding:0.5rem 1.5rem;
            box-shadow:
                0 0 8px rgba(255, 0, 0, 0.6),
                /* Light red shadow */
                0 0 3px rgba(255, 0, 0, 0.6);
            /* Smaller, lighter red shadow */
        }

        .btnotp:hover {
            background-color: #e6202d;
        }

        .input-group-text {            
            border: 1px solid #555;
            background: transparent;
            border: none;
            color: white;
            border-radius: 10px;
        }
        .heading{
            font-size: 2rem;
            font-weight: bold;
        }

        h1 {
            font-size: 2rem;
            font-weight: bold;
        }

        p {
            font-size: 1rem;
        }
        .gz-logo-top {
            width: 131px;
            height: 25px;
            margin-top: 0px;
            padding-left: 10px;
        }
        .text-grey-color {
            color: #9c9797;
        }
        .input-group {
            background: #0c0c0c;
            border: 1px solid #555;
            display: flex;
            align-items: center;
            border-radius: 10px;
        }

        .input-group .input-group-text {
            border: 1px solid #555;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 10px;
        }
        .emailID-icon {
            float: right;
            cursor: pointer;
            margin-right: 10px;
            margin-top: -30px;
            color: #525252;
            font-size:22px;
        }
        .whatsapp-icon {
            float: right;
            cursor: pointer;
            margin-right: 10px;
            margin-top: -30px;
            color: #525252;
            font-size:20px;
        }
        .spacer {
            height: 1rem !important;
        }
        .shadow-text {
            font-family: "Inter", serif;
            font-size: 2rem;
            color: #e6202d;
            font-weight: bold;
            color: #e6202d;
            text-shadow:
                0 0 40px #e6202d,
                0 0 10px #e6202d;
        }
        /* #required-alert {
            height: 30px;
        } */

        /* verify otp start */

        .otp_submit_btn {
            border-radius: 10px;
            background-color: #e6202d;
            color:white;font-size:14px;
            padding:0.5rem 1.5rem;
            box-shadow:
                0 0 8px rgba(255, 0, 0, 0.6),
                /* Light red shadow */
                0 0 3px rgba(255, 0, 0, 0.6);
            /* Smaller, lighter red shadow */
        }

        .otp_submit_btn:hover {
            background-color: #e6202d;
        }
        .text-danger-sm {
         font-size:0.8rem;
            color: #e43949 !important;
        }
        .otp-input {
            width: 60px;
        height: 70px;
        margin: 4px;
        font-size: 20px;
        text-align: center;
        border: 1px solid #3b3a3a;
        border-radius: 12px;
        background-color: #111111;
        color: white;
        }
        .otp-input:focus {
          outline: none;
          border-color: #ff4a4a;
          box-shadow: 0 0 3px #ff4a4a;
        }
        .resend-link {
          color: #fff;
          text-decoration: none;
        }
        .resend-link:hover {
          text-decoration: underline;
        }
        .btn-submit {
          background-color: #ff4a4a;
          border: none;
          width: 100%;
          padding: 10px;
          color: white;
          font-size: 16px;
          border-radius: 4px;
          cursor: pointer;
        }
        .btn-submit:hover {
          background-color: #e04343;
        }
        @media only screen and (max-width: 768px) {
            .otp-input {
        width: 45px;
        height: 49px;
        margin: 3px;
        font-size: 20px;
        text-align: center;
        border: 1px solid #1e1e1e;
        border-radius: 10px;
        background-color: #111111;
        color: white;
    }
        }
        @media screen and (min-width: 769px) and (max-width: 992px) { 
    
            .otp-input {
        width: 55px;
        height: 60px;
        margin: 5px;
        font-size: 20px;
        text-align: center;
        border: 1px solid #1e1e1e;
        border-radius: 12px;
        background-color: #111111;
        color: white;
    }
        }
        .text-sm{
            font-size:0.8rem;
        }
        .white-shadow-text {
         
         
            color: #fff;
            font-weight: bold;
            text-shadow: 0 0 30px #d3cece, 0 0 1px #c9c3c3;
            z-index: 2; /* Make sure text is above the progress bar */
            position: relative; /* Ensure text stays on top */
        }
       .v-center{
        align-items: center;
       }
       .loader img {
        width: 30px;
      }

      .loader {
        text-align: center;
      }

      .loader-area {
        height: 10px;
      }
      @media only screen and (max-width: 768px) {
        .heading_phone{
          font-size:1.5rem;
        }
      }
      #otp_submit_btn {
        display: flex;
        justify-content: center;
        align-items: center;
     
    }
    #loader {
        display: none;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    .navbar {
        padding:15px 0px;
    }



    
    @media (max-width: 768px) {
        .radial-shadow {
            width: 100px;  /* Smaller width for smaller screens */
            height: 150px; /* Smaller height for smaller screens */
        }
    }
            .radial-shadow {
                position: absolute;
                top: -100px; /* Move it up so that the top touches the container */
                left: 50%;
                transform: translateX(-50%);
                width: 1200px; /* Increased size for much bigger shadow */
                height: 250px; /* Increased size for much bigger shadow */
                background: radial-gradient(circle, rgba(80, 2, 6, 0.5), transparent);
                filter: blur(40px); /* Increased blur for an even more diffused look */
                pointer-events: none;
                border-radius: 300px 300px 0 0; /* Half-circle border radius */
                animation: moveShadow 50s ease-in-out infinite; /* Continuous movement */
            }
    
            /* Animation for smooth movement */
            @keyframes moveShadow {
                0% {
                    transform: translateX(-50%) translateX(-50vw); /* Start position (left) */
                }
                50% {
                    transform: translateX(-50%) translateX(50vw); /* Move to the right */
                }
                100% {
                    transform: translateX(-50%) translateX(-50vw); /* Return to the left */
                }
            }
    
            .radial-shadow {
        position: absolute;
        top: -100px; /* Move it up so that the top touches the container */
        left: 50%;
        transform: translateX(-50%);
        width: 1200px; /* Default width for larger screens */
        height: 300px; /* Increased size for much bigger shadow */
        background: radial-gradient(circle, rgba(80, 2, 6, 0.5), transparent);
        filter: blur(40px); /* Increased blur for an even more diffused look */
        pointer-events: none;
        border-radius: 300px 300px 0 0; /* Half-circle border radius */
        animation: moveShadow 50s ease-in-out infinite; /* Continuous movement */
        max-width: 100%; /* Prevent shadow from overflowing horizontally */
    }
    
    @media (max-width: 768px) {
        .radial-shadow {
            width: 1000px;  /* Smaller width for smaller screens */
            height: 200px; /* Smaller height for smaller screens */
        }
    }
    
    @media (max-width: 480px) {
        .radial-shadow {
            width: 800px;  /* Even smaller width for mobile phones */
            height: 200px; /* Even smaller height for mobile phones */
        }
    }
    
    /* Animation for smooth movement */
    @keyframes moveShadow {
        0% {
            transform: translateX(-50%) translateX(-50vw); /* Start position (left) */
        }
        50% {
            transform: translateX(-50%) translateX(50vw); /* Move to the right */
        }
        100% {
            transform: translateX(-50%) translateX(-50vw); /* Return to the left */
        }
    }
    body, html {
        overflow-x: hidden; /* Prevent horizontal scrolling */
    }
    canvas {
        display: block;
    }
    /* Dark Gradient Overlay */
    .three-container {
        position: absolute;
        top: -250px;
        left: 0;
        width: 100%;
        height: 400px; /* Reduce the height */
        z-index: 1; /* Place behind the form */
        pointer-events: none;
        overflow: hidden; /* Hide any overflow */
        background:transparent;
    }
    /* Form container styling with higher z-index */
    .form-con {
            position: relative;
            z-index: 10; /* Bring the form in front */         
            background:transparent;
        }
    @media only screen and (max-width: 768px) {
        .heading_phone{
          font-size:1.5rem;
        }
        .shadow-text{
          font-size:1.5rem;
        }
      }


    /* Prevent horizontal overflow in mobile view */
    body, html {
        overflow-x: hidden; /* Prevent horizontal scrolling */
    }
    .set-bottom{
        position:absolute;
        bottom:0;
    }
    


       

    nav {
        flex-shrink: 0; /* Prevent navbar from shrinking */
    }

   



    
   /* width */
   ::-webkit-scrollbar {
    width: 10px;
    border-radius: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: transparent;
    border:1px solid #555;
    border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
    border:1px solid #555;
    border-radius: 10px;
}
/* Prevent horizontal overflow in mobile view */
body,
html {
  overflow: hidden; /* Prevent horizontal scrolling */
  display: flex;
  flex-direction: column; /* Stack navbar and main content */
  margin: 0;
 
}

@media only screen and (max-width: 768px) {
  .heading_phone {
    font-size: 1.5rem;
  }
  .shadow-text {
    font-size: 1.5rem;
  }
}

.loader img {
  width: 25px;
}

.loader {
  text-align: center;
}
.loader-area {
  height: 10px;
}
/* Keep the button and loader aligned properly */
.btn-submit-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
#loader {
  display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}  /* shadow */
@media (max-width: 768px) {
  .radial-shadow {
      width: 100px;  /* Smaller width for smaller screens */
      height: 150px; /* Smaller height for smaller screens */
  }
}
      .radial-shadow {
          position: absolute;
          top: -100px; /* Move it up so that the top touches the container */
          left: 50%;
          transform: translateX(-50%);
          width: 1200px; /* Increased size for much bigger shadow */
          height: 250px; /* Increased size for much bigger shadow */
          background: radial-gradient(circle, rgba(80, 2, 6, 0.5), transparent);
          filter: blur(40px); /* Increased blur for an even more diffused look */
          pointer-events: none;
          border-radius: 300px 300px 0 0; /* Half-circle border radius */
          animation: moveShadow 50s ease-in-out infinite; /* Continuous movement */
      }

      /* Animation for smooth movement */
      @keyframes moveShadow {
          0% {
              transform: translateX(-50%) translateX(-50vw); /* Start position (left) */
          }
          50% {
              transform: translateX(-50%) translateX(50vw); /* Move to the right */
          }
          100% {
              transform: translateX(-50%) translateX(-50vw); /* Return to the left */
          }
      }

      .radial-shadow {
  position: absolute;
  top: -100px; /* Move it up so that the top touches the container */
  left: 50%;
  transform: translateX(-50%);
  width: 1200px; /* Default width for larger screens */
  height: 300px; /* Increased size for much bigger shadow */
  background: radial-gradient(circle, rgba(80, 2, 6, 0.5), transparent);
  filter: blur(40px); /* Increased blur for an even more diffused look */
  pointer-events: none;
  border-radius: 300px 300px 0 0; /* Half-circle border radius */
  animation: moveShadow 50s ease-in-out infinite; /* Continuous movement */
  max-width: 100%; /* Prevent shadow from overflowing horizontally */
}

@media (max-width: 768px) {
  .radial-shadow {
      width: 1000px;  /* Smaller width for smaller screens */
      height: 200px; /* Smaller height for smaller screens */
  }
}

@media (max-width: 480px) {
  .radial-shadow {
      width: 800px;  /* Even smaller width for mobile phones */
      height: 200px; /* Even smaller height for mobile phones */
  }
}

/* Animation for smooth movement */
@keyframes moveShadow {
  0% {
      transform: translateX(-50%) translateX(-50vw); /* Start position (left) */
  }
  50% {
      transform: translateX(-50%) translateX(50vw); /* Move to the right */
  }
  100% {
      transform: translateX(-50%) translateX(-50vw); /* Return to the left */
  }
}
     



nav {
  flex-shrink: 0; /* Prevent navbar from shrinking */
}

.make-it-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 80vh; /* Ensure it spans the full viewport height */
  position: relative;
  z-index: 10;
}


.floor_bg{
    background-image: url('../images/floor.png');
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    height: 238px;
    bottom: 0;
    position: absolute;
    z-index: -1;            /* <-- Puts floor behind everything */
    pointer-events: none;   

}

/* upload resume */
@media (max-width: 768px) {
    .drop-area{
        max-width:85%;
    }
}

/* Drop Area */
.drop-area {
    height: 150px; /* Set a fixed height */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    width:400px;
    border: 1px solid #5e5a5a;
    border-radius: 8px;
    padding: 60px;
  
  margin:auto;
    background: #121212;
    position: relative;
    transition: border-color 0.3s;
  }
  

.drop-area.highlight {
  border-color: #e6202d;
}

.file-info p {
  margin: 10px 0;
}


/* Ensure elements inside drop-area are properly centered */
.file-info, #upload-progress, .complete-message {
  text-align: center;
}
#browse-button {
  color: #e6202d;
  cursor: pointer;
  text-decoration: underline;
}

/* Progress Bar */
.progress-bar-container {
  margin-top: 20px;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background: #444;
  border-radius: 4px;
  overflow: hidden;

}

.progress-fill {
  width: 0%;
  height: 100%;
  background: #e6202d;
  transition: width 0.5s ease;
}

/* Submit Button */
.submit-button {
  background-color: #e6202d;
  color: #fff;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 20px;
}

.hidden {
  display: none;
}
.btnsubmit {
  border-radius: 15px;
  background-color: #e6202d;
  color: white;
  font-size: 14px;
  padding: 0.5rem 1.5rem;
  box-shadow: 0 0 8px rgba(255, 0, 0, 0.6), 0 0 3px rgba(255, 0, 0, 0.6);
}


.drop-area{
  cursor: pointer;
}

        @media only screen and (max-width: 768px) {
        .heading_phone{
          font-size:1.5rem;
        }
      }
       /* Keep the button and loader aligned properly */
       .btn-submit-container {
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
      }

      .loader img {
          width: 25px;
      }

      .loader {
          text-align: center;
      }

      .loader-area {
          height: 10px;
      }

      #loader {
          display: none;
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
      }

      .instruction-card{
        background-color: #0d0d0d;}

.read-slider .owl-item img{
    margin:auto;
    width:unset !important;
}
.ftf_popup {
    background-image: url('../images/read_bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    backdrop-filter: blur(8px); /* Adds a blur effect */
    -webkit-backdrop-filter: blur(8px); /* For Safari support */
    color: white; /* Ensures readability over the background */
    height: 100vh; /* Ensures the background covers the full viewport */
    margin: 0;
}

    .item{
        padding: 20px 10px;
text-align: center;

color: white;
margin: 5px;
    }
    .white-shadow-text {
        font-size: 2rem;
        color: #fff;
        font-weight: bold;
        text-shadow: 0 0 30px #d3cece, 0 0 1px #c9c3c3;
        z-index: 2; /* Make sure text is above the progress bar */
        position: relative; /* Ensure text stays on top */
    }

    .btn-dark-grey {
        border-radius: 10px;
        background-color: #313131;
        color: white;
        font-size: 14px;
        padding: 0.5rem 3rem;
        box-shadow: 0 0 8px rgba(240, 236, 236, 0.6), 0 0 3px rgba(219, 216, 216, 0.6);
        position: relative;
        overflow: hidden;
        transition: background-color 1s ease; /* Smooth transition */
    }

    .btn-dark-grey span {
position: relative;
z-index: 3; /* Ensures text stays visible above the progress bar */
}
    /* Progress bar inside the button */ 


    /* .progress-bar {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        background-color: #e6202d;
        width: 0%;
        transition: width 1s ease;
        z-index: -1; 
    }
    */
    .btn-red{
        border-radius: 10px;
        background-color: #e6202d;
        color: white;
        font-size: 14px;
        padding: 0.5rem 5rem;
        box-shadow: 0 0 8px rgba(255, 0, 0, 0.6),
        /* Light red shadow */
        0 0 3px rgba(255, 0, 0, 0.6);

    }
    .content-frame{
        border: 1px solid #5e5a5a;
        border-radius: 15px;
        background-color: #0d0d0d;
        text-align: left;
    }
    .profile-image {
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }

    .btn-submit-container {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }

    #otp_submit_btn {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #loader {
        display: none;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    .loader img {
        width: 25px;
    }

    .loader {
        text-align: center;
    }

    .loader-area {
        height: 10px;
    }
    .text-light-color{
        color:rgb(189 192 195) !important;
    }
    .mt-100{
        margin-top:100px;
    }

    .content-frame {
      position: absolute; /* Allows manual positioning within the container */
      top: 50%; /* Pushes the top edge to 50% of the viewport */
      left: 50%; /* Pushes the left edge to 50% of the viewport */
      transform: translate(-50%, -50%); /* Centers the element by offsetting it back by half its size */
      width: 100%; /* Optional: Ensure content fits well across viewports */
      max-width: 900px; /* Optional: Control max size */
  }
  /* Optional: Additional rules for small screens */
  @media (max-width: 600px) {
      .ftf_popup {
          height: auto;
          padding-bottom: 20px;
          background-image: url('https://www.gozoop.com/gz-projects/darshana/Newbot/bg-phone.png') !important;
          background-size: cover;
          backdrop-filter: blur(8px); /* Adds a blur effect */
          -webkit-backdrop-filter: blur(8px); /* For Safari support */
          background-position: bottom;
          background-repeat: no-repeat;
      }
  }
  
      .ftf_popup {
      background-image: url('../images/read_bg.png');
      background-size: contain; /* Ensures the entire image is visible */
      background-position: center; /* Keeps the focus on the center of the image */
      background-repeat: no-repeat; /* Prevents tiling of the image */
      height: 100vh; /* Maintains full viewport height */
      backdrop-filter: blur(8px); /* Adds a blur effect */
      -webkit-backdrop-filter: blur(8px); /* For Safari support */
      margin: 0;
  }
  .instruction-card{
    background-color: #0d0d0d;}

.read-slider img{
    margin:auto;
    width:unset !important;
}


.read-slider .item{
    padding: 20px 10px;
    text-align: center;
    color: white;
    margin: 5px;
}

.btn-dark-grey {
    border-radius: 10px;
    background-color: #313131;
    color: white;
    font-size: 13px;
    padding: 0.5rem 3rem;
    box-shadow: 0 0 8px rgba(240, 236, 236, 0.6), 0 0 3px rgba(219, 216, 216, 0.6);
    position: relative;
    overflow: hidden;
    transition: background-color 1s ease; /* Smooth transition */
}

.btn-dark-grey span {
    position: relative;
    z-index: 3; /* Ensures text stays visible above the progress bar */
}
/* Progress bar inside the button */
.progress-bar-for-interview {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: #e6202d;
    width: 0%;
    transition: width 1s ease; /* Smooth transition */
    z-index: -1; /* Make sure the progress bar is behind the text */
}

.btn-submit-container-read {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.text-light-color{
    color:rgb(189 192 195) !important;
}

.content-frame-insrtuctions {
    border: 1px solid #5e5a5a;
    border-radius: 15px;
    background-color: #0d0d0d;
    position: absolute; /* Allows manual positioning within the container */
    top: 50%; /* Pushes the top edge to 50% of the viewport */
    left: 50%; /* Pushes the left edge to 50% of the viewport */
    transform: translate(-50%, -50%); /* Centers the element by offsetting it back by half its size */
    width: 90%; /* Optional: Ensure content fits well across viewports */
    
}
/* Optional: Additional rules for small screens */
@media (max-width: 600px) {
    .ftf_popup {
        height: auto;
        padding-bottom: 20px;
        background-image: url(bg-phone.png) !important;
        background-size: cover;
        backdrop-filter: blur(8px); /* Adds a blur effect */
        -webkit-backdrop-filter: blur(8px); /* For Safari support */
        background-position: bottom;
        background-repeat: no-repeat;
    }
}

    .ftf_popup {
    background-image: url('../images/read_bg.png');
    background-size: contain; /* Ensures the entire image is visible */
    background-position: center; /* Keeps the focus on the center of the image */
    background-repeat: no-repeat; /* Prevents tiling of the image */
    height: 100vh; /* Maintains full viewport height */
    backdrop-filter: blur(8px); /* Adds a blur effect */
    -webkit-backdrop-filter: blur(8px); /* For Safari support */
    margin: 0;
    }


    .set-bottom{
      position:absolute;
      bottom:0;
  }
  

  .gz-text-color {
      background-image: linear-gradient(to right,
              #e6202d,
              #801219 92%,
              #801219);
      color: transparent;
      -webkit-background-clip: text;
      background-clip: text;
      font-weight: bolder;
  }

  .bot-form h4 {
      font-weight: bolder;
      font-size: 30px;
      line-height: 45px;
  }

  .subtext {
      color: #fff;
      font-size: 14px;
      font-family: "Inter";
  }
/* Additional styles for the speaker button */
#speaker-button {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    position: absolute;
    left: 85%; /* Adjust the position as needed */
    top: 50%;
    transform: translateY(-50%);
    z-index: 11;
    padding: 0;
    font-size: 1.2rem;
  }

  #speaker-button.active {
    color: red; /* Change icon color to green when active */
  }

  /* Ensure the input-group has relative positioning for absolute children */
  .input-group {
    position: relative;
  }

  /* Optional: Adjust textarea padding to accommodate buttons */

  .formAreaBot .form-control {
      border-top: 0;
      border-left: 0;
      border-right: 0;
      background-color: #0c0c0c;
      color: white !important;
      border-radius: 0px;
      font-family: "Inter";
  }

  .formAreaBot .form-control:focus {
      border-top: 0;
      border-left: 0;
      border-right: 0;
      background-color: #0c0c0c !important;
      color: white !important;
  }
  .loader{
    display: none; 
    margin-left: 75px;
  }

  .formAreaBot .form-control::placeholder {
      color: grey;
      /* Example color (white) */
      opacity: 1;
      /* Make sure the color is visible */
  }

  .formAreaBot .form-control:focus {
      box-shadow: none;
  }

  .custom-rounded {
      border-radius: 15px;
  }
  .bot-form h4 {
      font-weight: bolder;
      font-size: 30px;
      line-height: 45px;
      color: #fff;
      text-align: right;
  }

  .endInterview {
      text-align: center;
      margin-bottom: 0rem !important;
      margin-top: 1.5rem !important;

  }

  .btn-endInterview {
      border-radius: 10px;
      background-color: #e6202d;
      color: white;
      font-size: 14px;
      padding: 0.5rem 2.5rem;
      box-shadow: 0 0 8px rgba(255, 0, 0, 0.6), 0 0 3px rgba(255, 0, 0, 0.6);
      /* border: 1px solid #eb2d39;
      color: #fff;
      background: #EB2D39;
      padding: 5px 15px 5px 15px; */
  }

  .login-right-div {
      /* background-color: #0c0c0c;
      box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; */
      position: relative;
      border-radius: 15px;
      padding: 10px 30px 0px 30px;
  }


  .BotformArea {
      padding-top: 45px;
  }

  .submit-btn-div {
      padding-top: 30px;
  }

  @media screen and (min-width: 320px) and (max-width: 480px) {
    

      .botform2 {
          width: 600px;
      }

      .m {
          display: none;
      }

      .login-right-div {
          margin-top: 50px;
      }

      .bot-form h4 {
          text-align: center;
      }

      .endInterview {
          text-align: center;
      }

      .login-left-div {
          margin-top: 25px;
      }

      .userChat {
          float: none !important;
          margin-right: 50px !important;
          text-align: left !important;
      }
      .userChat {
          float: left;
          margin-left: 20px;
          max-width: 86%;
      }
      @media screen and (min-width: 320px) and (max-width: 480px) {
          .userChat {
              float: none !important;
              margin-left: 50px !important;
          }
      }
      .botChat {
          float: none !important;
          margin-left: 25px !important;
      }

  }


  .bot-row {
      min-height: 80vh;
  }

  .loader img {
      width: 25px;
  }

  .loader {
      text-align: center;
  }

  .loader-area {
      height: 10px;
  }
/* Keep the button and loader aligned properly */
.btn-submit-container {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
  }

  #loader {
      display: none;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
  }
  #required-alert {
      height: 10px;
  }

  /* msg */


  .messages {
      width: 100%;
      float: left;
  }

  .messages .item {
      width: 100%;
      float: left;
      margin-bottom: 30px;
      opacity: 0;
      filter: alpha(opacity=0);
      -webkit-transition: all 200ms ease;
      -moz-transition: all 200ms ease;
      -ms-transition: all 200ms ease;
      -o-transition: all 200ms ease;
      transition: all 200ms ease;
  }

  .messages .item .text {
      /* background: #1F1F1F; */
      padding: 0px 15px;
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      /* border-radius: 3px; */
      /* border: 1px solid #1f1f1f; */
      color: #fff;
      font-size: 14px;
      letter-spacing: 0.3px;
  }
  @media (max-width: 768px) {
        .messages .item .text {
            padding: 0px 0px;
        }
  }

  .messages .item .text .heading {
      width: 100%;
      margin-bottom: 5px;
  }

  .messages .item .text .heading a {
      text-decoration: none;
      font-size: 12px;
      color: #33414E;
      font-weight: 600;
      line-height: 20px;
  }
  .btnred {
      border-radius: 10px;
      background-color: #e6202d;
      color:white;font-size:14px;
      padding:0.5rem 1.5rem;
      box-shadow:
          0 0 8px rgba(255, 0, 0, 0.6),
          /* Light red shadow */
          0 0 3px rgba(255, 0, 0, 0.6);
      /* Smaller, lighter red shadow */
  }
  .dropdown-menu{
      max-width:100px;
      background-color: black;
      border: 1px solid grey;
      color: white !important;
  }
  .dropdown-item{
  background-color: transparent !important;
      color: white !important;
  }
  .dropdown-item:active{ 
  color: white !important;
  }

  .dropdown-menu.show{
      max-width:100px;
      background-color: black;
      border: 1px solid grey;
      color: white !important;
  }
  .dropdown-item.active, .dropdown-item:active{
      background-color: transparent;
  }
  .messages .item .text .heading .date {
      float: right;
      line-height: 20px;
      font-size: 11px;
      color: #CCC;
      font-weight: 600;
  }
  .messages .item .text:hover {
      border-color: #1f1f1f;
  }

  .messages .item:nth-child(2n) .text {
      /* background: #1f1f1f; */
  }

  .messages .item.item-visible {
      opacity: 1;
      filter: alpha(opacity=100);
  }

  .messages.messages-img .item .image {
      float: left;
      width: 40px;
  }
  .user-image {
     /* margin-right:50px;
     text-align: right; */
       width: 40px; 
  }


  .messages.messages-img .item .image img {
      /* border: 2px solid #F5F5F5; */
      /* border-radius: 50%;
      width: 40px; */
  }
  .user-img{
      border-radius: 50%;
      width: 40px;
  }

  .messages.messages-img .item .text {
        margin-left: 34px; 
      position: relative;
  }

  .messages.messages-img .item .text:after,
  .messages.messages-img .item .text:before {
      right: 100%;
      top: 20px;
      border: solid transparent;
      /* content: " "; */
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
  }

  .messages.messages-img .item .text:after {
      border-color: rgba(255, 255, 255, 0);
      border-right-color: #1f1f1f;
      border-width: 5px;
      margin-top: -5px;
  }

  .messages.messages-img .item .text:before {
      border-color: rgba(213, 213, 213, 0);
      border-right-color: #1f1f1f;
      border-width: 6px;
      margin-top: -6px;
  }

  .messages.messages-img .item .text:hover:before {
      border-right-color: #1f1f1f;
  }

  .messages.messages-img .item.in .image {
      /* float: right; */
      /* margin-top: -20px; */
  }

  .user-image {
      float: right;
      /* margin-top: -20px; */
  }
  .white-shadow-text {
      font-family: "Inter", serif;
      font-size: 2rem;
      color: #fff;
      font-weight: bold;
      text-shadow: 0 0 30px #d3cece, 0 0 1px #c9c3c3;
      z-index: 2;
      position: relative;
  }
 

  .messages.messages-img .item.in .text:after,
  .messages.messages-img .item.in .text:before {
      right: auto;
      left: 100%;
  }

  .messages.messages-img .item.in .text:after {
      border-right-color: transparent;
      border-left-color: #1f1f1f;
  }

  .messages.messages-img .item.in .text:before {
      border-right-color: transparent;
      border-left-color: #1f1f1f;
  }

  .messages.messages-img .item.in .text:hover:before {
      border-left-color: #1f1f1f;

  }

  #user_input {
        height:6.75vh;
        overflow-y: auto;
        padding-right: 15px;
        resize: none;
        background: #0c0c0c;
        /* border: 1px solid #151515; */
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        /* border: 1px solid #555; */
        font-family: "Inter", serif;
        font-optical-sizing: auto;
        font-style: normal;
        direction: ltr;
        margin-right: 100px;
        border-bottom: 1px solid #555;
  }
  /* For screens roughly between 1024px and 1440px (covering many 13" & 14" laptops) */
  @media (min-width: 1024px) and (max-width: 1440px) {
    .text-grey-color{
        color: #9c9797;
        font-family: "Inter", serif;
        font-size: 0.75rem;
    }
  }
@media (min-width: 1024px) and (max-width: 1440px) {
    #user_input {
      font-size: 0.9rem;     /* Slightly smaller font size */
      padding: 8px 75px 8px 5px;     /* Example: reduce padding */
      line-height: 1.5;  
      font-size: 0.9rem;
      padding: 8px 10px 8px 5px;
      direction: ltr;
      margin-right: 75px;
      border-radius: 5px;   /* Adjust if needed */
      /* You can also adjust height or other properties if desired, e.g.:
         height: 80px;
         width: 100%;
      */
    }
    #conversation-history{
        overflow-y: scroll;
        overflow-x: hidden;
        max-height: 20vh;
        scroll-behavior: smooth;
    }
  }
  
  #submit-btn {
      background: #3F3F3F;
  }
  .formAreaBot.form-control:focus {
      background: transparent !important;
  }

  #submit-btn .far {
      color: #fff;
  }

  .login-left-div h4 {
      color: #ffff;
      padding-bottom: 35px;
  }

  .login-left-div p {
      color: #DCDCDC;
  }

  ::marker {
      color: #fff;
  }

  .interviewtitle-btn {
      /* padding-bottom: 30px; */
      margin-bottom: -10px;
  }

  .content-frame-body {
      height: 55vh;
      white-space: normal;
      position: relative;
      -webkit-overflow-scrolling: touch;
  }
  #conversation-history{
    overflow-y: scroll;
    overflow-x: hidden;
    max-height: 50vh;
    scroll-behavior: smooth;
  }

  /* For 13-inch laptops */
@media (max-width: 1366px) and (min-width: 1024px) {
    .content-frame-body {
        height: 52vh; /* Adjust height for 13-inch laptops */
    }
    .send-btn{
        width:99px;
        height:6vh; 
        border-radius: 10px;
}
}

/* For tablets and smaller laptops */
@media (max-width: 1024px) {
    .content-frame-body {
        height: 55vh; /* Adjust height for tablets and small laptops */
    }
}

.send-btn{
    width:99px;
    height:12vh; 
    border-radius: 10px;
}

.micro-icon{
   right: 90px; 
   top: 50%; 
   transform: translateY(-50%);
    z-index: 10;
}
@media (max-width: 768px) {
    #user_input{
        padding-right: 0px;
        margin-right: 75px;
    }
    #speaker-button{
        left: 50%;
    }
}
@media (min-width: 768px) and (max-width: 1240px){
    #speaker-button{
        left: 75%;
    }
}
/* For mobile devices */
@media (max-width: 768px) {
    .content-frame-body {
        height: 50vh; /* Default height */
        transition: height 0.3s ease; /* Smooth transition */
    }
    .content-frame-body.keyboard-open {
        height: 45vh; /* Height when keyboard is open */
    }
}

  #mic-icon {
      width: 43px;
      height: 25px;
  }

  .btn-endInterview:hover {
      background: #eb2d39;
      color: #fff;
  }

  .btn:focus-visible,
  .btn:first-child:active:focus-visible {
      border: 1px solid #eb2d39;
      color: #fff;
      background: #EB2D39;
      outline: 0;
      box-shadow: none;
  }

  .btn:first-child:active {
      color: #fff;
      background-color: #EB2D39;
      border-color: #EB2D39;
  }
  .userChat p{
      text-align:right;
  }
  .userChat {
      text-align:right;
      float: right;
      margin-right: 20px;
      max-width: 85%;
  }

  .botChat {
      float: left;
      margin-left: 20px;
      max-width: 86%;
  }
 

  #user_input_form {
      padding-top: 10px;
  }

  /* width */
  ::-webkit-scrollbar {
      width: 10px;
      border-radius: 10px;
  }

  /* Track */
  ::-webkit-scrollbar-track {
      background: transparent;
      border-radius: 10px;
  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
      background: transparent;
      border:1px solid #555;
      border-radius: 10px;
  }

  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
      background: #555;
      border:1px solid #555;
      border-radius: 10px;
  }.messages.messages-img .item.in .image{
      float:right;
  }
  .messages .item{
      width: 100%;
      float: left;
      margin-bottom: 30px;
      opacity: 0;
      filter: alpha(opacity = 0);
      -webkit-transition: all 200ms ease;
      -moz-transition: all 200ms ease;
      -ms-transition: all 200ms ease;
      -o-transition: all 200ms ease;
      transition: all 200ms ease;
  }
  .messages .item.item-visible {
      opacity: 1;
      filter: alpha(opacity = 100);
  }
  .messages.messages-img .item.in .text {
      margin-left: 0px;
      /* margin-right: 50px; */
      text-align: right;
      word-wrap: break-word;
  }
  .username-user{
     margin-right: 20px !important; /* Optional: Adjust spacing to the container edge */
  }
  .username{
      margin-left: 10px !important;
    
  }
  .line-container {
    width: 100%;
    background: linear-gradient(0.25turn, #525252, #555555, #000000);
    padding: 1px;
  }
  .user-line-container{
    width: 100%;
    background: linear-gradient(0.25turn, #000000, #555555, #525252);
    padding: 1px;
  }

/* .messages .item.in .user-message {
justify-content: flex-end; 
display: flex;
} */

.messages .item.in .text {
text-align: right; /* Align the message text to the right */
margin-right: 0px; /* Space between text and image */
}
.row.user-message {
display: flex;
align-items: center; /* Aligns items vertically centered */
}
.col-auto.username-user {
margin-right: 10px; /* Adjust spacing between username and image */
}
.user-image img {
width:40px;
height: auto;
border-radius: 50%; /* Optional, for a round image */
}

/* Input field with padding */
.custom-file-input {
padding-right: 50px; /* Make space for the mic icon */
}

/* Microphone Icon Styling */
.mic-icon {
font-size: 18px; /* Adjust the size of the icon */
color: #aaa; /* Light grey color for the icon */
transition: color 0.3s ease-in-out;
}

.mic-icon:hover {
color: #ff2e2e; /* Change color on hover */
}
.gz-logo-top {
width: 131px;
height: 25px;
margin-top: 0px;
padding-left: 10px;
}
@media only screen and (max-width: 768px) {

}
@media only screen and (max-width: 768px) {
    .heading_phone{
      font-size:1.5rem;
    }
  
  }
  @media only screen and (max-width: 768px) {
    .white-shadow-text{
      font-size:1.5rem;
    }
    #user_input::placeholder {  
      font-size:10px;
    }
  }
  #user_input::placeholder {  /* For modern browsers */
    
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

#user_input::-webkit-input-placeholder {  /* For WebKit browsers (Chrome, Safari) */

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

#user_input::-moz-placeholder {  /* For Firefox (older versions) */
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}
#user_input:-ms-input-placeholder {  /* For Internet Explorer */
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}
  .profile-image {
      width: 40px;
      height: 40px;
      border-radius: 50%;
  }
  .text-light-color{
      color:rgb(189 192 195) !important;
  }
  @media screen and (min-width: 320px) and (max-width: 480px) {
  .boChat {
      float: none !important;
      margin-left: 50px !important;
  }
  .user-Chat{

      float: none !important;
      margin-right: 0px !important;
      padding:0 !important;
  }
  }
  .user-Chat{
  float: none !important;
  margin-right: 0px !important;
  padding:0 !important;
  }
   
  body {
      display: flex;
      flex-direction: column; /* Stack navbar and main content */
      margin: 0;
      min-height: 75vh;
  }


  nav {
      flex-shrink: 0; /* Prevent navbar from shrinking */
  }


      /* shadow */
@media (max-width: 768px) {
  .radial-shadow {
      width: 100px;  /* Smaller width for smaller screens */
      height: 150px; /* Smaller height for smaller screens */
  }
}
      .radial-shadow {
          position: absolute;
          top: -100px; /* Move it up so that the top touches the container */
          left: 50%;
          transform: translateX(-50%);
          width: 1200px; /* Increased size for much bigger shadow */
          height: 250px; /* Increased size for much bigger shadow */
          background: radial-gradient(circle, rgba(80, 2, 6, 0.5), transparent);
          filter: blur(40px); /* Increased blur for an even more diffused look */
          pointer-events: none;
          border-radius: 300px 300px 0 0; /* Half-circle border radius */
          animation: moveShadow 50s ease-in-out infinite; /* Continuous movement */
      }

      /* Animation for smooth movement */
      @keyframes moveShadow {
          0% {
              transform: translateX(-50%) translateX(-50vw); /* Start position (left) */
          }
          50% {
              transform: translateX(-50%) translateX(50vw); /* Move to the right */
          }
          100% {
              transform: translateX(-50%) translateX(-50vw); /* Return to the left */
          }
      }

      .radial-shadow {
  position: absolute;
  top: -100px; /* Move it up so that the top touches the container */
  left: 50%;
  transform: translateX(-50%);
  width: 1200px; /* Default width for larger screens */
  height: 300px; /* Increased size for much bigger shadow */
  background: radial-gradient(circle, rgba(80, 2, 6, 0.5), transparent);
  filter: blur(40px); /* Increased blur for an even more diffused look */
  pointer-events: none;
  border-radius: 300px 300px 0 0; /* Half-circle border radius */
  animation: moveShadow 50s ease-in-out infinite; /* Continuous movement */
  max-width: 100%; /* Prevent shadow from overflowing horizontally */
}

@media (max-width: 768px) {
  .radial-shadow {
      width: 1000px;  /* Smaller width for smaller screens */
      height: 200px; /* Smaller height for smaller screens */
  }
}

@media (max-width: 480px) {
  .radial-shadow {
      width: 800px;  /* Even smaller width for mobile phones */
      height: 200px; /* Even smaller height for mobile phones */
  }
}

/* Animation for smooth movement */
@keyframes moveShadow {
  0% {
      transform: translateX(-50%) translateX(-50vw); /* Start position (left) */
  }
  50% {
      transform: translateX(-50%) translateX(50vw); /* Move to the right */
  }
  100% {
      transform: translateX(-50%) translateX(-50vw); /* Return to the left */
  }
}
     

/* end button loader */
.custom-loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Dark overlay */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    backdrop-filter: blur(5px); /* Blurs the background */
}

.custom-loader {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    aspect-ratio: 1;
    animation: custom-loader-animation 1s infinite linear alternate;
    background-color: red;
}

@keyframes custom-loader-animation {
    0%  {box-shadow: 20px 0 red, -20px 0 rgba(255,0,0,0.2); background: red;}
    33% {box-shadow: 20px 0 red, -20px 0 rgba(255,0,0,0.2); background: rgba(255,0,0,0.2);}
    66% {box-shadow: 20px 0 rgba(255,0,0,0.2), -20px 0 red; background: rgba(255,0,0,0.2);}
    100%{box-shadow: 20px 0 rgba(255,0,0,0.2), -20px 0 red; background: red;}
}

/* Ensure the dots container appears below the GoBot's response */
/* Ensure the loader container uses Flexbox with horizontal alignment */
.three-dot-loader {
    display: flex;
    flex-direction: row; /* Explicitly set to row */
    justify-content: center;
    align-items: center;
    gap: 4px; /* Optional: Adds space between dots */
  }
  
  /* Style each dot */
  .three-dot-loader .dot {
    width: 8px;
    height: 8px;
    background-color: #fff;
    border-radius: 50%;
    animation: blink 1.4s infinite both;
  }
  
  /* Animation delays for sequential blinking */
  .three-dot-loader .dot:nth-child(1) {
    animation-delay: -0.32s;
  }
  
  .three-dot-loader .dot:nth-child(2) {
    animation-delay: -0.16s;
  }
  
  /* Blink animation */
  @keyframes blink {
    0%, 80%, 100% {
      opacity: 0;
    }
    40% {
      opacity: 1;
    }
  }
  
  
.upload-loader{
    display: none;                
    position: absolute;
    top: 50%;
    left: 100%;                   
    transform: translateY(-50%);
    margin-left: 10px;   
}  
.upload-loader img {
    width: 30px;
  }