﻿/* Move down content because we have a fixed navbar that is 50px tall */
body {
  margin:0; 
    padding:0; 
    width:100%;
    height:100%;
    margin-top:10px;
         background-image: url('../images/alankit-jurid-bg1.png'); /* Replace with your image path */
      background-size: cover;      /* Scale the image to cover the entire background */
      background-position: center center; /* Center the image */
      background-repeat: no-repeat; /* Prevent repeating */ }
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.form-container {
  opacity: 0;
  transform: translateY(20px); /* initial position: slightly lower */
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
 
}

 hr {
    display: none; /* completely hides the line */
}

.form-row {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.form-row label {
  width: 143px;
  font-weight: bold;
  margin-right: 15px;
}

.form-row input,
.form-row select,
.form-row textarea {
  flex: 1;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.form-row .small-hint {
  font-size: 12px;
  color: #777;

}
@media (max-width: 768px) {
  .form-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .form-row label {
    width: 100%;
    margin-right: 0;
    margin-bottom: 5px;
  }

  .form-row select,
  .form-row input,
  .form-row textarea {
    width: 100%;
  }
}
/* When the page loads, this class is added */
.form-container.animate-in {
  opacity: 1;
  transform: translateY(0);
    padding-top: 1px;
}
/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}
h2{
    font-weight: 700 !important;
}

.dvInfo
{
    margin-top:20px;
     background-color: #e2ebed;
    padding:10px;
    font-size: 13px;
}
.form-container {
      max-width: 700px;
      margin: auto;
      background: #fff;
      padding: 30px;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    h2 {
      text-align: center;
      color: #1976d2;
    }
    label {
      display: block;
      margin-top: 15px;
      font-weight: bold;
    }
    label span {
      color: red;
    }
    input[type="submit"] {
    background-color: #00c0e7;
    color: #fff;
     }
    input, select, textarea {
      width: 100%;
      padding: 8px;
      margin-top: 5px;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
    }
    .small-hint {
      font-weight: normal;
      font-size: 12px;
      color: #666;
    }
    button {
      margin-top: 20px;
      padding: 10px 20px;
      background-color: #1976d2;
      color: #fff;
      border: none;
      border-radius: 4px;
      font-size: 16px;
      cursor: pointer;
    }
     .captcha-box {
      border: 1px solid #ccc;
      padding: 10px;
      width: 300px;
      display: flex;
      align-items: center;
      gap: 10px;
      font-family: Arial, sans-serif;
    }
    .captcha-box input {
      width: 20px;
      height: 20px;
      margin-top:10px;
    }
    .submit-btn {
      margin-top: 10px;
    }
    button:hover {
      background-color: #125bb5;
    }
.IndiaLogo {
    width: 105px;
    height: 62px;
}
.inner {
    width: 1030px;
    margin: 0 auto;
    text-align: left;
    /* border: 1px solid red; */
}
.text {
    float: left;
    color: #666;
    font: 16px Georgia, "Times New Roman", Times, serif;
    font-weight: bold;
    width: 100%;
}
.DivMenu {
    background: url(../images/right.png) repeat right 0;
    _background: url(../images/right.gif) repeat right 0;
    height: 55px;
    width: 100%;
    margin-top: -4px;
    /* position: fixed; */
}
.FooterImage {
    height: 18px;
    text-align: center;
}
.footer {
    /* width: 100%; */
    line-height: 14px;
    background-image: url(../images/FooterImage.png);
    background-repeat: repeat;
    /* background-color: #007296; */
    height: 130px;
    /* opacity: 50; */
    margin-top: -10px;
}
.DivFooter {
    width: 510px;
    margin: 0 auto;
    text-align: left;
    /* border: 1px solid yellow; */
}
/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
    .jumbotron {
        margin-top: 20px;
    }
    .body-content {
        padding: 0;
    }
}
button,
input[type="submit"],
input[type="button"] {
  background-color: #007bff;
  color: white;
  padding: 10px 16px;
  border: none;
  border-radius: 4px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease; /* enables animation */
  cursor: pointer;
  transform: scale(1);
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  background-color: #0056b3; /* darker on hover */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  transform: scale(1.05); /* slightly enlarge */
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
select,
textarea {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 8px;
  width: 100%;
  transition: box-shadow 0.3s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus {
  box-shadow: 0 0 6px rgba(0, 123, 255, 0.6);
  outline: none;
  border-color: #80bdff;
}
 select {
  padding: 10px;
  font-size: 14px;
  border-radius: 6px;
  border: 1px solid #ccc;
  background-color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  appearance: none;           /* Hide OS styling */
  -webkit-appearance: none;   /* Safari/Chrome */
  -moz-appearance: none;      /* Firefox */
  background-image: url('data:image/svg+xml;utf8,<svg fill="%23333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
}
 
  .select2-container .select2-selection--single
        {
            height: 38px;
            padding-top : 5px
        }
        .select2-container--default .select2-selection--single .select2-selection__arrow {
            margin-top: 5px;
        }
        @media (max-width: 768px) {
            .select2-container {
                width: 100%;
            }
        }
        .wrapper {
          display: flex;
          flex-direction: column;
          min-height: 100vh;
        }
        .footerfixed11 {
       
          padding: 10px 0;
          text-align: center;
        }
        
       #menu {
      /*width: 750px !important;*/ /* Set your desired width */
          width: 609px !important;
      margin: 0 auto;
      list-style: none;
      padding: 0;
    }
    /* Toggle button for mobile */
    .navbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #333;
      padding: 0.5rem 1rem;
    }

    .logo {
      color: #fff;
      font-size: 1.5rem;
    }

    .menu-toggle {
      font-size: 1.5rem;
      color: #fff;
      background: none;
      border: none;
      cursor: pointer;
      display: none; /* Hidden by default, shown on small screens */
    }

    .nav-links ul {
      list-style: none;
      display: flex;
      gap: 1rem;
      margin: 0;
      padding: 0;
    }

    .nav-links a {
      color: #fff;
      text-decoration: none;
      padding: 0.5rem;
    }

    .nav-links a:hover {
      background-color: #575757;
      border-radius: 4px;
    }
 
    /* Responsive Styles */
    @media (max-width: 768px) {
      #menu {
          margin: 0 !important;
            }
      .menu-toggle {
        display: block;
      }
      .select2-container {
            width: 100% !important;
        }
        .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
      }

      .nav-links.active {
        display: flex;
      }
      .nav-links ul {
        flex-direction: column;
        gap: 0;
        background: #004457;
        z-index: 99999;
        position: absolute;
      }

      .nav-links li {
        border-top: 1px solid #444;
      }

      .nav-links a {
        padding: 1rem;
      }
    }
      body {
      margin: 0;
      font-family: Arial, sans-serif;
    }

    .containermst {
      display: flex;
      flex-wrap: nowrap !important;
      align-items: center;
      justify-content: space-between;
     padding-top:5px;
     margin:10px !important;
    }

    .logo,
    .info,
    .location,
    .side-logo {
      flex: 1 1 100%;
      text-align: center;
      margin-bottom: 10px;
    }

    .logo img,
    .side-logo img {
      max-width: 100%;
      height: auto;
    }

    .info,
    .location {
      font-size: 1.2em;
      font-weight: bold;
    }

    .info hr,
    .location hr {
      margin-top: 5px;
      width: 50%;
      border: none;
      border-top: 1px solid #ccc;
    }

    @media (min-width: 768px) {
      .container {
        flex-wrap: nowrap;
        text-align: left;
      }

      .logo {
        flex: 0 1 30%;
        text-align: right;
      }

      .info {
        flex: 1 1 15%;
        /*text-align: right;*/
        /*border-right: 2px dotted gray;*/
        padding-right: 10px;
        color:#006187;
        font-size:23px;
      }

      .location {
            flex: 1 1 0%;
            text-align: left;
            padding-left: 10px;
        }
      .side-logo {
        flex: 1 1 10%;
        text-align: left;
      }
        .containermst {
     
      flex-wrap: nowrap;
      margin:10px;
    }

    }