@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Inter:wght@300;400;500;600&display=swap");
 @import url(https://db.onlinewebfonts.com/c/3abd2fe795c6d15e5cd1ffce0afc50a8?family=Casey+Classic);

 @font-face {
   font-family: "Casey Classic";
   src: url("https://db.onlinewebfonts.com/t/3abd2fe795c6d15e5cd1ffce0afc50a8.eot");
   src: url("https://db.onlinewebfonts.com/t/3abd2fe795c6d15e5cd1ffce0afc50a8.eot?#iefix")format("embedded-opentype"),
     url("https://db.onlinewebfonts.com/t/3abd2fe795c6d15e5cd1ffce0afc50a8.woff2")format("woff2"),
     url("https://db.onlinewebfonts.com/t/3abd2fe795c6d15e5cd1ffce0afc50a8.woff")format("woff"),
     url("https://db.onlinewebfonts.com/t/3abd2fe795c6d15e5cd1ffce0afc50a8.ttf")format("truetype"),
     url("https://db.onlinewebfonts.com/t/3abd2fe795c6d15e5cd1ffce0afc50a8.svg#Casey Classic")format("svg");
 }


 :root {
   --primary-orange: #ed9320;
   --dark-orange: #d4811b;
   --light-orange: #f4a94d;
   --dark-bg: #1a1a1a;
   --gray-text: #6c757d;
 }


 @keyframes float {

   0%,
   100% {
     transform: translateY(0px) rotate(0deg);
   }

   50% {
     transform: translateY(-20px) rotate(180deg);
   }
 }


 @keyframes modalSlideIn {
   from {
     opacity: 0;
     transform: translateY(-50px) scale(0.9);
   }

   to {
     opacity: 1;
     transform: translateY(0) scale(1);
   }
 }

 @keyframes gradientShift {

   0%,
   100% {
     background-position: 0% 50%;
   }

   50% {
     background-position: 100% 50%;
   }
 }

 .modal-professional {
   max-width: 550px;
   margin: auto;
 }

 .banner {
   position: relative;
   border: 2px solid orange !important;
   background: url("../img/nerul-img (11).jpg") left center / cover no-repeat !important;
   border-radius: 15px;
   overflow: hidden;
 }

 .banner::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: inherit;
   filter: blur(0px) brightness(0.45);
   transform: scale(1.1);
   z-index: 1;
 }

 /* Keep content above */
 .modal-header,
 .modal-body {
   position: relative;
   z-index: 2;
   color: #fff;
 }



 .modal-header {
   background: transparent;
   padding: 1rem 2rem;
   text-align: center;
   color: #ffffff;
 }

 .modal-title {
   font-size: 2rem;
   font-weight: 800;
   letter-spacing: -0.5px;
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   margin-bottom: 0.5rem;
 }

 .subtitle {
   color: var(--gray-text);
   font-size: 1rem;
   font-weight: 500;
   margin-top: 0.5rem;
 }

 .close-btn {
   position: absolute;
   top: 1rem;
   right: 1rem;
   background: rgba(255, 255, 255, 0.9);
   border: none;
   border-radius: 50%;
   width: 40px;
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
   color: #6c757d;
 }

 .close-btn:hover {
   background: var(--primary-orange);
   color: white;
   transform: rotate(90deg) scale(1.1);
 }

 .modal-body {
   padding: 1rem 2rem 2rem;

 }

 .form-label {
   color: #ffffff;
   font-weight: 600;
   font-size: 0.95rem;
   margin-bottom: 0.5rem;
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }

 .form-label-1 {
   color: #000000;
   font-weight: 600;
   font-size: 0.95rem;
   margin-bottom: 0.5rem;
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }

 .form-control {
   border: 2px solid #e2e8f0;
   border-radius: 12px;
   padding: .7rem 1.25rem;
   font-size: 1rem;
   font-weight: 500;
   transition: all 0.3s ease;
   background: transparent;
   color: white !important;
 }

 /* .form-control-1 {
   border: 2px solid #e2e8f0;
   border-radius: 12px;
   padding: .7rem 1.25rem;
   font-size: 1rem;
   font-weight: 500;
   transition: all 0.3s ease;
   background: transparent;
   color: #212529 !important;
 } */

 .new-sty::placeholder {
   color: #212529 !important;
 }

 .new-sty {
   color: #212529 !important;
 }


 .form-control:focus {
   border-color: var(--primary-orange);
   box-shadow: 0 0 0 4px rgba(237, 147, 32, 0.1);
   background: transparent;
   transform: translateY(-2px);
 }

 .form-control::placeholder {
   color: #ffffff;
   font-weight: 400;
 }

 .input-group {
   position: relative;
   margin-bottom: 1.5rem;
 }

 .input-icon {
   position: absolute;
   left: 1rem;
   top: 50%;
   transform: translateY(-50%);
   color: var(--primary-orange);
   z-index: 10;
   font-size: 1.1rem;
 }

 .form-control.with-icon {
   padding-left: 3rem;
 }




 #modal_branch {
   background: transparent;
   color: white;
 }

 #modal_branch option {
   color: #000;
 }


 .submit-btn {
   background: linear-gradient(135deg, var(--primary-orange) 0%, var(--dark-orange) 100%);
   border: none;
   border-radius: 12px;
   padding: 1rem 2rem;
   font-size: 1.1rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 1px;
   color: white;
   position: relative;
   overflow: hidden;
   transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
 }

 .submit-btn::before {
   content: '';
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
   transition: left 0.6s;
 }

 .submit-btn:hover::before {
   left: 100%;
 }

 .submit-btn:hover {
   transform: translateY(-3px);
   box-shadow: 0 10px 25px rgba(237, 147, 32, 0.4);
 }

 .submit-btn:active {
   transform: translateY(-1px);
 }

 .spinner-border-sm {
   width: 1rem;
   height: 1rem;
 }

 .consent-check {
   background: #f7fafc;
   border: 1px solid #e2e8f0;
   margin-bottom: 1.5rem;
 }

 .form-check {
   padding: 0;
 }

 .form-check-input:checked {
   background-color: var(--primary-orange);
   border-color: var(--primary-orange);
 }

 .form-check-label {
   font-size: 0.9rem;
   color: #4a5568;
   line-height: 1.5;
 }

 .success-message {
   background: linear-gradient(135deg, #48bb78, #38a169);
   color: white;
   border: none;
   border-radius: 12px;
   padding: 1rem;
   text-align: center;
   font-weight: 600;
   animation: successPulse 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
 }

 .sup-text {
   font-size: 0.6em;
   /* smaller */
   vertical-align: super;
   /* move up */
 }

 .button-text {
   color: white !important;
 }

 @keyframes successPulse {
   0% {
     transform: scale(0.8);
     opacity: 0;
   }

   50% {
     transform: scale(1.05);
   }

   100% {
     transform: scale(1);
     opacity: 1;
   }
 }

 /* Loading state animations */
 .loading .button-text {
   opacity: 0;
 }

 .loading .spinner-border {
   display: inline-block !important;
 }

 .modal.show .modal-dialog {
   animation: modalBounceIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
 }

 @keyframes modalBounceIn {
   0% {
     transform: scale(0.3) translateY(-100px);
     opacity: 0;
   }

   50% {
     transform: scale(1.05) translateY(0);
   }

   70% {
     transform: scale(0.95);
   }

   100% {
     transform: scale(1);
     opacity: 1;
   }
 }

 @media (max-width: 480px) {
   .modal-header {
     padding: .7rem .3rem;
   }

   .modal-body {
     padding: 1rem 1rem 2rem;
   }
 }



 /* -- Ulwe Coming Soon Popup Style End --*/

 .name {
   font-family: "Casey Classic";
   font-family: 'Casey Classic', cursive;
   background: linear-gradient(45deg, #DA1884, #ff4081, #DA1884);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   font-size: clamp(3.5rem, 8vw, 6rem);
   font-weight: 900;
   margin-bottom: 0.5rem;
   text-shadow: 3px 3px 10px rgba(218, 24, 132, 0.5);
   letter-spacing: -2px;
   transform: perspective(500px) rotateX(15deg);
   animation: glow 3s ease-in-out infinite alternate;
 }

 .content>* {
   margin-bottom: 0;
 }

 .popup-container {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.8);
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 1000;
   padding: 15px;
 }

 .poster-container {
   width: 100%;
   max-width: 600px;
   padding: 1rem;
   background: transparent;
   overflow: hidden;
   position: relative;
 }

 .close-btn {
   position: absolute;
   top: 5px;
   right: 5px;
   width: 30px;
   height: 30px;
   background: #d6a759;
   color: #000;
   border: none;
   border-radius: 50%;
   font-weight: bold;
   font-size: 18px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 10;
   transition: all 0.3s ease;
 }

 .close-btn:hover {
   cursor: pointer;
   background: #ff9a0e;
   transform: scale(1.1);
 }

 .poster {
   position: relative;
   height: 100%;
   min-height: 600px;
   border-radius: 3px;
   border: 3px solid #ff9a0e;
   background: url("../img/IMG_3067.webp") center/cover no-repeat;
   overflow: hidden;
 }

 .poster::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: inherit;
   filter: blur(0px) brightness(0.18);
   transform: scale(1.1);
   z-index: 1;
 }

 .poster>* {
   position: relative;
   z-index: 2;
 }

 .celebrity-image {
   position: absolute;
   bottom: -20px;
   right: -70px;
   z-index: 1;
 }

 .celebrity-image img {
   width: 100%;
   height: auto;
   max-height: 550px;
   object-fit: contain;
 }

 .content {
   position: relative;
   padding: 1.5rem;
   height: 100%;
   display: flex;
   flex-direction: column;
   z-index: 2;
 }

 .content .heading {
   font-family: "Raleway", sans-serif;
   color: #ed9320;
   font-size: clamp(1.8rem, 5vw, 3rem);
   font-weight: 900;
   margin-bottom: 0.5rem;
 }

 .name {
   font-family: 'Casey Classic', sans-serif;
   color: #DA1884;
   font-size: 5rem;
   /* font-size: clamp(1.8rem, 5vw, 3rem); */
   font-weight: 900;
   margin-bottom: 0.5rem;
 }

 .content .text {
   color: white;
   font-size: clamp(0.9rem, 2.5vw, 1.1rem);
   font-weight: 700;
 }

 .content .text-1 {
   font-family: "Raleway", sans-serif;
   color: white;
   font-size: clamp(1rem, 2.5vw, 1.1rem);
   font-weight: 700;
   word-spacing: 4px;
   letter-spacing: 2px;
   margin-bottom: 0.5rem;
   text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.905);
   /* dark shadow for contrast */
 }

 .content .date {
   color: #ed9320;
   font-size: clamp(1.5rem, 3vw, 2rem);
   font-weight: 700;
   margin-bottom: 1rem;
   text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.905);
   /* dark shadow for contrast */
 }

 .content>* {
   margin: 0;
 }

 .form-container {
   width: 100%;
   max-width: 280px;
   margin-top: 0.5rem;
 }

 .ulwe-form {
   display: flex;
   flex-direction: column;
   gap: 10px;
 }

 .ulwe-form input {
   background: transparent;
   outline: none;
   border: 2px solid #ed9320;
   padding: 0.8rem;
   border-radius: 10px;
   color: white;
   font-family: "Inter", sans-serif;
   width: 100%;
 }

 .ulwe-form input::placeholder {
   color: rgba(255, 255, 255, 0.7);
 }

 .ulwe-form button {
   color: #000;
   font-size: 1rem;
   font-weight: 600;
   width: 100%;
   border-radius: 10px;
   padding: 0.8rem;
   border: none;
   background: #ed9320;
   cursor: pointer;
   margin-top: 0.5rem;
   font-family: "Inter", sans-serif;
   transition: all 0.3s ease;
 }

 .ulwe-form button:hover {
   background: #ff9a0e;
   transform: translateY(-2px);
 }

 /* Media Queries for Responsiveness */
 @media (max-width: 768px) {
   .poster {
     min-height: 500px;
   }

   /* .celebrity-image {
     right: -50px;
   } */

   /* .celebrity-image img {
     max-height: 450px;
   } */

   .content {
     padding: 1.2rem;
   }
 }

 @media (max-width: 480px) {
   .poster-container {
     padding: 0.5rem;
   }

   .poster {
     min-height: 450px;
   }

   .content {
     padding: 1rem;
   }

   .celebrity-image {
     bottom: 25px;
     right: -80px;
   }

   .celebrity-image img {
     max-height: 380px;
   }

   .form-container {
     max-width: 100%;
   }

   .close-btn {
     width: 25px;
     height: 25px;
     font-size: 16px;
   }

   .content .heading {
     font-size: 1.6rem;
   }

   .content .name {
     font-size: 3rem;
   }

   .content .date {
     font-size: 1.3rem;
   }
 }

 @media (max-width: 350px) {
   .celebrity-image {
     bottom: -10px;
     right: -30px;
   }

   .celebrity-image img {
     max-height: 300px;
   }

   .content .heading {
     font-size: 1.4rem;
   }

   .content .name {
     font-size: 1rem;
   }

   .close-btn {
     width: 22px;
     height: 22px;
     font-size: 14px;
   }

   .content {
     padding: 0.8rem;
   }

   .ulwe-form input,
   .ulwe-form button {
     padding: 0.6rem;
   }
 }

 /* -- Ulwe Coming Soon Popup Style End --*/